Personal Site V1
How & why I built this site
This is a post that I've actually wanted to write out for quite some time now — the tech and considerations that went into building this site. This site has played a key role in my growth as a software engineer, and directly lead to many of the opportunities that I've managed to land. So I'm a strong believer in the benefits of having a personal website as a developer - a place where one can write, showcase their projects and their personality.
The first line of code for this site was written on May 9th, 2022. This site was done very iteratively with small changes and features that pop up whenever an idea strikes me — and while I still update it with content, the design of this site has stayed the same for over a year now. And so I think it's safe to call it V1 :D
Why did I build this site?
I really enjoy looking through other people's sites. When I come across a well-designed, carefully crafted site with valuable content on the internet, it just makes me happy. My favourite one would be Paul Stamatious' site, which I've taken a bunch of inspiration from (my initial design copied his sidebar - this is how my site looked like in June 2022)
This started off as a portfolio website to showcase projects. Slowly, it evolved into something more, a place where I (sporadically) post some thoughts, experiment with new technologies, and share little tidbits of my life.
Some things I'd like my site to be
Fast: Simple enough using a static site generator, but I'm mindful of animations and image loading times as I want things to always feel responsive and fluid.
Showcase my personality: I don't want a completely tech-focused site that only showcases projects and talks about technical problems. I love software and am always curious about learning new things and chasing shiny new technologies. I want my site to reflect that.
Grow with me: There's a fairly high chance that in 5 years, I'll look back on stuff I've written and cringe at myself. omg, I can't believe I wrote that. But embarrassing as it may be, it'll have meant that I've grown as a person and developer. I want something to look back on, to evolve, and to showcase my growth with time.
Tech stack
The tools that I used to build this. I love having a blog where I have full autonomy over and I use it as a personal playground to learn and integrate the shiny new tools that pop up so amazingly often.
Next.js
React is my library of choice and Next.js was the clear framework to go for. This was the first time I used Next.js and I really enjoyed it. Routing was so much simpler, and slug-based routing made setting up the blog very hassle-free.
Deployment via Vercel was amazingly easy. I was stunned at how simple and straightforward it was, and I've used Vercel for all my projects since.
Tailwind CSS
I had heard all the hype behind Tailwind, and I was quite familiar with utility-based styling from prior experience using Bootstrap. I had read extensively about Tailwind, and I knew it was extremely polarising, with people either loving or hating it. I love it. It's just so intuitive and being able to style while coding makes it quite seamless.
I use the classnames package to create reusable components with adaptive styling, and it works well enough for me. I recently found out about clsx which is supposed to more efficient and claims to have better performance, so I'll probably use that instead for future projects.
MDX
I use MDX for content. Markdown + support for custom React components makes for a very flexible and portable system that integrates really well in my workflow.
Josh W Comeau's blog has a much more detailed and convincing section on MDX
ContentLayer
MDX is just a way to add custom components to markdown, we still need a way to actually process this data. That's where ContentLayer comes in.
I found out about ContentLayer via Delba Oliveira's blog and it just integrates seamlessly with Next.js and MDX.
Most current MDX solutions require a lot of boilerplate code and third-party packages to format and process your content. It's powerful and customizable, but also leads to a lot of headaches in trying to set up. ContentLayer aims to "make working with content easy for developers", and provides a lot of validation and an easy setup, providing type-safe JSON data that can be easily imported into your app. It worked really well for me. I'm a fan.
Image Hosting
Some images are hosted in the repo itself, using next/image to optimise and
serve the images. But for more photo-intensive posts such as my New Zealand blog
post, the images themselves were over 500 megabytes and I found the loading
times to be unacceptable. Using AWS S3 storage bucket and Cloudinary's image
optimisation service, the load times are significantly reduced, and as this site
doesn't get a lot of traffic, I'm currently still able to get away with the free
tier for both.
Libraries
I've tried to keep things minimal, but here are the libraries I use.
- Plaiceholder - I bundle it with my NextJS config and ContentLayer to generate placeholder images
- React Image Gallery - Utilised it in my New Zealand blog
- Next themes - handle dark/light mode
- Theme toggles - I love the lil animations
- Radix UI - Modal in the Shelf page
Why isn't this site open source?
I'm a big supporter of open source projects. I enjoy looking through code bases to figure out how things are done and the transparency that comes along with it. But at the same time, I feel that a personal website is personal for a reason, and I'd hate to potentially see someone cloning my website and changing the content to suit theirs. In this post, I've detailed the tech that goes into the site, and I believe that reverse-engineering any feature shouldn't require too much effort.
Forgive me for being a little bit gatekeep-y, but cloning someone else's personal site and changing content to call your own just doesn't sit right with me, especially for someone marketing themselves for a web developer. In all my time stalking LinkedIn profiles, I swear I've seen at least 5 variations of Brittany Chiang's personal site
Like I feel if you just want a place to blog or show off your projects, then sure, clone a template but at least credit it and don't try to pass it off as your own.
Thoughts on blogging
Why would anyone read my blog?
What do I have to say that someone hasn't said before?
I'm not an expert in any subject matter, what's there for me to talk about?
What if something I say is wrong?
What should I even write about?
What if I'm just plain wrong and look stupid?
These thoughts surfaced in my head when I first thought about writing publicly. It was certainly scary. But then I realised that at the end of the day, no one really cares.
I became much less self-conscious about my target audience when I realised it was just myself. Writing became a way for me to crystallise my thoughts and examine what I really knew. If someone reads my writing and enjoys it, of course I'm happy. If something I write helps anyone out there, that's just a bonus.
Writing for me now is a way to remember the things I've done. Sometimes I feel that I've wasted too much time and haven't done enough. On those days, it's nice to be able to quickly look back and read through my past work or refer to past projects and know that hey, I've done this before, and this is how I did it, and what I thought about as I was doing it.
Writing is nature's way of letting you know how sloppy your thinking is.
— Dick Guindon
Writing helps me cement what I've really learnt. Oftentimes I think I know how something works or how something should be done, but once I start writing, holes in my understanding start popping up, and I know I haven't fully grasped a particular concept and need to read up more.
If anyone's out there reading this and on the fence about starting their own blog, I really recommend taking a look at this post on HackerNews: Ask HN: What has your personal website/blog done for you?