I use my personal website as a means of learning new tech and tools. I’ve rebuilt it plenty of times now.
Apple I
In 2019, I decided to reverse-engineer Apple’s website.
In my opinion, apple.com represents the gold-standard for front-end from a technical point of view.
The main impetus for this whole design was an idea I had; what if a jobseeker (me) was sold like an Apple product. Hence, I went with the way over-the-top headline “Incredible engineering”.
The EmojiRain section was animated:
Apple II
In the wake of the revelation that Apple was going to sell a (pretty crappy) monitor stand for $999+tax, I couldn’t resist the opportunity to take a dig.
I also took the opportunity to use some server-side logic alongside some cosmetic changes.
Headless CMS + Next.js
After the release of Next.js 9.3, I felt it was once again a chance to rebuild my site. The Apple websites were also built with React, but used create-react-app as their base.
I paired up Next with DatoCMS as a headless CMS and this scratched the itch of a fast JAMstack website with an admin panel.
The front-end was hosted on Vercel.
This page would be generated from a page specified within the DatoCMS admin panel:
While adding support for a CMS was important; it was far from the only thing I added. For one, I improved the blog substantially from an SEO and readability standpoint.
I also added an area on my site for “experiments”, which is an area of my site where I can embed interactive content. Examples of this include infographics from my research and interactive demos of my open-source projects.
Astro: Black and Gold
To be honest - while the tech that powered this Next.js site was cool - the look wasn’t really one I was happy with. So once again, I rebuilt it - this time using an early version of Astro, with a black and gold look that I’ve always been quite fond of.
I took the time to integrate a WYSIWYG editor into the site, to allow for quick edits from my phone while out and about. Though - in hindsight - I seem to prefer to write in Markdown at my laptop anyway - so was perhaps overengineered.
Astro 2: Electric Boogaloo
The current version of my website is built on a newer version of Astro.