How I built this website - my process, technologies, and much more!

Sometime in January last year along with all the new year fever, I thought it’d be cool to have a website of my own. TL: DR I completed and took it live in September.

Have you tried toggling the dark/light mode? Depending on what time of the year you read this, have you clicked on the tiny snow (❄️) icon on the navigation? These are great, no doubt, but this blog post is majorly about ‘how’ I built the website.

Why did it take 9 long months?

First, I had big aspirations. I wanted my website to be sick! Yeah! Like all those fancy websites on awwwards.com. Most of all, I wanted it to be unique. It’s my space on Sir Tim Berners-Lee's World Wide Web after all!

Second, I paid someone to design a logo and brand identity. I still don’t have any.

By February, I started designing the website myself. Yup, I have a background in product design.

After designing and prototyping on Figma for a couple of weeks, I was proud of what I had done and I asked some of my friends for feedback. Boy, my “tech” friends loved it! My “non-tech” friends on the other hand didn't really think it was that great.

That was more than enough feedback for me. One of my primary goals for the website was to provide recruiters with a means to find and reach out to me. And since a large percentage of recruiters are non-technical, they'd probably find the website a little bit not too friendly.

So, I went back to the drawing board and started designing the website from scratch. Did I mention that I already started to build (code) the previous design? Yep. Had to throw all that away too.

The redesign

I started the redesign in the middle of April. I spent the first week looking at other websites and trying to figure out what I liked and what I didn’t. I also spent a lot of time on Dribbble. I was looking for a design that was simple, clean, and easy to navigate. I also wanted it to be unique. I wanted it to be me.

I stumbled upon this GitHub repository that is a curation of really nice portfolio websites. I screenshotted a few and started to play around with them. By the end of April, I had a direction and I was happy with it. I created some mockups and wireframes and started hacking away.

Choosing a color palette was easy. Monochrome 💀. 100% white and black with the lightness value(from HSL) tweaked a little.

For the choice of font, my priority was easy to read. And cute. I ended up choosing Satoshi. Matter is a great alternative too if you’re looking for something similar.

I completed the redesign 2 months later in July. Here's the final result.

The development

I used Nextjs + Typescript, and Tailwindcss for the styling.

I think the most difficult part was building the blog. I was caught between using an external CMS like Sanity or MDX. MDX is a Markdown extension that allows you to add/use JSX inside markdown. Sleek, huh?

After consulting some of the best devs I know and asking on the Nextjs discord channel, I went with the latter. It was a pretty simple decision because I wanted my blog to have custom designs, components, demos, etc. An example is the simple to-do/post app in my article on managing server state or this cool tic-tac-toe game below.

I started by googling. I found a YouTube video that put me out of my misery in under a couple of hours. But for some reason, loading the blog posts on my local server was slow and I couldn't figure out why. I looked at the comments under the video and found that I wasn't alone.

I spent the next couple of days trying to figure out what was going on. Oh, did I mention that I found a link to Nextjs docs on MDX from the beginning? But like many other developers, we'd rather snack on strawberries than read documentation.

Long story short, I went back to the docs. And it was goooood. The Nextjs docs and the new React beta docs are some of the best I've come across!

I simply created a blog folder under my pages directory and added all the blog posts one after the other with `.mdx` extension at the end. And then at the top of each article, I exported this `meta` object with the post title, date, and a few other properties. I had a dedicated folder for all the blog components too and all I needed to do was import them in the `_app.tsx` file.

For example, this line is simply `<Text>...</Text>`

Feel free to take a look at the repository on GitHub.

For the code snippets, I used Codemirror. Their API is pretty simple to set up. For instance, this is all that’s inside the component:

tsx

I may switch to something else in the future but this works.

The rest of the website

I love how simple the contact form is. Sometimes I send myself emails just 'cause I love the interface. You should try it 😉. I used Nodemailer to handle sending the email. This is the exact code in my `contact.ts` file within the `api` folder.

ts

What I love the most about the about page is the section where I add my top Spotify tracks updated weekly.

Also, at the bottom of the website, you can see what I'm currently jamming to on Spotify. If you're looking to implement something similar, check the snippets section on Lee Rob's website.

I have a form just before the footer where people can subscribe to my newsletter. Thanks to Mailchimp. Here's the code if you're interested.

ts

What next?

Now and then this voice in my head keeps telling me there's so much more that I can do to improve it. It's my imposter syndrome and it may be right. I'm thinking of adding a gallery instead of a single photo to my about page. I may also add a page that links to each project that I've worked on so that people can read and get an insight into my creative process and how I get stuff done.

Conclusion

This website is a big deal for me. Please subscribe to my newsletter below so you can get the latest updates. Thank you for reading. Live long and prosper!