Personal Portfolio Website
Designed and built this personal portfolio site from scratch with Next.js 16, React 19, TypeScript, and Tailwind CSS v4. Features bilingual (EN/ZH) content, dark mode, framer-motion animations, and project detail pages with image galleries and video embeds.
Background
I wanted a single place to showcase my projects, hobbies, and background — something cleaner and more flexible than a static resume. Building it myself also gave me a chance to get hands-on with the modern React/Next.js stack outside of my usual embedded and robotics work.
What I Did
Built the site on Next.js 16 (App Router) with React 19 and TypeScript. Styled with Tailwind CSS v4 and added page transitions with framer-motion. Implemented a language context for full EN/ZH bilingual support — every section (projects, life, about, contact) renders from typed data sources in both languages. Added a dynamic project detail route with image galleries and video playback, a category filter on the projects page, and a responsive dark-mode-aware layout.
Challenges
Keeping the EN and ZH data structures in sync without duplicating type definitions — solved by sharing the Project type across both files. Handling URL-encoded asset paths for Chinese folder names in /public required some care to keep next/image happy.
Takeaways
Shipping a small but real Next.js project end-to-end was a useful counterbalance to my usual firmware work. The site is easy to extend — adding a new project is just one entry in two data files.
Gallery
