Problem
Most personal websites are static resumes. I wanted something that demonstrates frontend craft directly: fast, accessible, responsive, and easy to keep up to date without touching layout code.
Solo build · 2024 - present
Portfolio Website
This site. A Next.js app with typed content data, a flash-free dark/light theme, and attention to performance and accessibility.
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
- Framer Motion
- Git
- Next.js 16
- Framework
- Tailwind v4
- Styling
- Static + ISR
- Rendering
Built as both a personal site and a small engineering exercise. All content lives in typed TypeScript data files, fully decoupled from the rendering layer, so adding a project is a data change rather than a layout change.
Approach
A data-driven Next.js App Router structure keeps content schemas separate from rendering. The dark/light theme is applied by a blocking inline script before first paint, so there is no flash of the wrong theme, and all animations respect the system's reduced-motion preference.
Outcome
A fast, accessible site that is cheap to extend: new projects, jobs, and skills are added in data files. Case study pages are statically generated, and performance scores stay high.
Architecture
Next.js 16 with the App Router. Project pages are statically generated from the data files, while GitHub activity on the homepage revalidates on a timer (ISR). A small inline script sets the theme class before paint, with all colors flowing from a single set of CSS variables. Framer Motion handles entrance animations with reduced-motion support.
Highlights
Typed Content Layer
Projects, skills, and experience live in typed TypeScript files, decoupled from the components that render them.
Flash-Free Theming
A blocking inline script applies the saved or system theme before first paint; one set of CSS variables drives both modes.
Accessible by Default
Semantic HTML, keyboard navigation, visible focus states, and reduced-motion support throughout.
Static Generation
Every case study page is pre-rendered at build time; GitHub activity revalidates on a timer.
Timeline
Design
Established styling guides, visual components, and content models.
Architecture
Implemented the modular Next.js architecture, base themes, and data-driven rendering.
Polish
Performance tuning, responsive styling audits, and accessibility validation.
Iteration
Continued refinement: theme switching, content updates, and performance passes.