I am a developer without website. As surprising as it sounds, its true! and I wanted to change that. So I started on building one and this is the complete start to finish story of that. I started writing this when I set sail on my journey and will edit this periodically to reflect on my journey.
What do I even need
I want my website to do one job: Reflect me. It will also be my personal project and a playground for some experimentation i have in mind.
Here is a list of things I decided i wanted to have early on:
- Text First — I wanted to avoid images and stick to text (& SVG glyphs) for most part.
- Mobile Friendly — There’s a 9 in 10 chance you’re reading this on a mobile device.
- Link out to other platforms as much as possible — I’m lazy!
- Promote both my development and design skills
- NO TRACKING — This is a big one for me, I don’t want to add any tracking on my site.
- Start to finish all work done on HP Stream 14 — one thing that people aspiring to be a software developer or designer get stuck on is that they think they NEED a powerful desktop setup to do anything. This won’t allow me to record & stream (oh the irony HP!) myself building the website but that’s something for next time I guess. Even this was written on that laptop.
- Open Source & Accessible — All Assets from this project will be available to view, modify and use. Except for projects I showcase, because Duh! (Slowly, not at once!)
DESIGN ALL THE THINGS!!
First up, lets design the website. Usually I am partial to Adobe XD ever since I started using it but since my Stream 14 runs Manjaro and not Microsoft Windows 10, that was not an option.
In comes Figma
In case you’ve been living under a rock (like i was for quite a long time), Figma is the new popular kid on the block. It has a webapp that I can use on linux. I have used Figma previously, mostly for editing vector files and to build quick wireframes and this will be a first for me.
One thing I love about it being web based is that I can access it from anywhere. You’d say Adobe has Creative Cloud but to work on say a .xd file you need something running windows or macOS and then you need to install and login to your CC Account, not something you’d do anywhere. With Figma you need just a *modern* web browser.
Lets start, Now UI wise, I still find XD UI much better but this is not bad. I find that top bar repulsive for one but it gets the work done.
My website uses Comic Sans. What are you gonna do?
No No No please don’t leave, I was just kidding!
So What font did I settle on? Manjari for text and Yeseva One for display. Yeseva is quite similar to Playfair but has subtle differences with I liked on my website.
Colors are Important.