How I Built My Website (v2)

This note tracks the second iteration of walterteng.com, a ground-up rewrite of the original Gatsby site on a modern Next.js stack.

The changelog for version 1 can be found here: How I Built My Website (v1) and the old v1 website is still accessible here.

Roadmap#copied

• Retrieval-Augmented Generation (RAG) based AI chatbot for the entire website

Why a Rebuild#copied

v1 served me well since 2021. It was originally built on Gatsby v2 and incrementally upgraded to v4 over the years. The project started as a way to experiment with React more, outside of work.

As life priorities shifted, many upgrades and maintenance tasks were delayed. v1 heavily relied on Gatsby's community plugins that were no longer maintained over time. This made upgrading Gatsby a time-consuming tasks. Secondly, the v1 design also began to feel dated over the years.

v2 is a complete revamp built on trusty Next.js and co-developed with Claude, directed by my vision for the site. Since the base structure was established, the rebuild was fast as expected. Frontier models had also gotten really good over the years, which made it possible to explore shelved ideas from v1 roadmap.

Version Changes#copied

V2: Rebuilt on Next.js 🚀#copied

Released: 29 May 2026

Framework and tooling#copied

• Rebuilt the site from scratch on Next.js 16 (App Router) and React 19, retiring the Gatsby 4 stack
• Swapped Emotion, Material UI, and Sass for Tailwind CSS v4
• Replaced gatsby-plugin-mdx with react-markdown
• Frontmatter validated at build time with Zod
• Animations with Motion
• Hosted on Netlify

Design system#copied

• Singapore-themed Theme switcher (ported from v1)

• Refreshed typography, spacing scale, and card components across all collections

• Consistent use of concentric circles and ripple motifs throughout the interface with subtle animations to create a more cohesive and calming visual identity inspired by water ripples

Content collections#copied

Existing

• Garden — the digital garden of notes
• Projects — housed my projects
• Library — books and resources

New

• About — standalone about page (previously part of the v1 roadmap)
• Arsenal — the tools and software I use daily

Site-wide#copied

Existing

• PWA-compatible
• Opengraph-compatible
• RSS feed
• Reading time estimation

New

• Added engagement features:
  • view count
  • anonymous emoji reactions
  • webmentions displays
  • comments via giscus
• Added filter function for content listing
• Added infinite scroll for content listing
• Added toggle between card view and list view for content listing
• Added contact form with Supabase and Altcha anti-spam, delivering messages to my Telegram

Reactions