Background

Upon graduating from high school, I leveraged my knowledge of HTML and CSS while teaching myself JavaScript to craft the first edition of my personal website. I utilized PHP to implement a hybrid SPA + SSR architecture: content was injected into PHP templates, switching articles based on URL query parameters.

However, maintaining and scaling content throughout college revealed critical bottlenecks:

Adding new projects or articles required copy-pasting entire markup structures repeatedly, making maintenance cumbersome.

Furthermore, search engine crawlers struggled to index pages effectively (hampering SEO performance), prompting a complete overhaul.

The New Website

To overcome maintainability issues while consolidating what I learned from Vue.js and academic usage of Markdown, the direction was clear from the start: Nuxt Content.

With Nuxt Content, articles are authored entirely in Markdown while offering flat-file database query capabilities, enabling straightforward content indexing via JSON and .md files.

Moreover, anticipating that visitors want immediate access to my flagship and award-winning projects, the landing page is designed to feature selected works directly, removing the need to navigate through nested yearly archives.

Reflecting my shift into software engineering, tech projects are prioritized prominently. Utilizing Nuxt Content tag collections, traditional "progress bar" skill gauges were replaced with a project-driven metric: "How many actual projects have used this technology?".

Legacy Tech Skills Layout

Project-Driven Tech Stack Tags

Credit

Malayan Night Heron animation by Xun⚘