Personal Website

My personal website has undergone numerous transformations, reflecting my journey through various technologies and design philosophies. From humble beginnings with plain HTML, CSS, and JS, to embracing the complexity of modern web frameworks, each iteration has brought new challenges and learning opportunities. I’ve never thought that just building my own website and keep reiterating them would give me much knowledge and at the same time much more learning gaps to be filled in

Here’s the timeline of my evolving webpage.

Plain HTML + CSS + JS

My journey began with crafting a simple yet functional website using basic web technologies. This approach allowed me to understand the fundamentals of web development and create a platform to showcase my work and at the time I didn’t have the creativity for animations / interactivity or any ideas on how can you create an engaging webpage.

Jekyll

I have used multiple templates but I couldn’t really comprehend the logic behind templating and thus the website was dropped after 3-4 iterations of failure.

Docusaurus

I stumbled upon docusaurus for its mascott, the version 2 was in alpha back there and I quickly realised that I don’t need all the functionality. Docusaurus gave me a good learning on React framework.

Gatsby

Convinently, Gatsby at the time has gained tactions for being good static site generator (SSR), it has so many plugins and very friendly community. I’ve learned the CMS + its headless concept there by just trying to get my markdown rendered into a page.

Astro [v1]

I tried Astro V1 at the time because I was fatigue with editing my webpage on Gatsby. You need to keep everything delcarative and things can go wrong when you have to do the manual work of mapping the GraphQL to the markdown frontmatter by yourself. Development became slow and hard to the point that I search for a better alternative that I can use while maintaining the same style / feel. I checked out Astro and it ticks all the boxes. However, this new Island Architecture breaks a lot of my component interactivity and I need to pickup the animation skill with react-spring to get it working.

[v2] (*) where we are now

[placeholder]

The Product

We’ve come around the table where I’ve removed most of my React components and solely rely on plain Javascript to render the page. I’m happy with my lighthouse score… Sitting at about 80-90 performance score.

The Journey

Throughout the journey there’re so many technologies that I’ve learn, many techniques I’ve aqquired, many conversation I’ve had, many videos I’ve watch for inspiration.