This portfolio
The site you are reading. It is server-rendered with Next.js, so every page arrives as finished HTML for readers and search engines.
Portfolio screenshot, 1600 x 1200
Scope
- A home page with About, Experience, Work, Skills and Contact
- A case-study page for each project, built ahead of time
- Layouts for desktop and mobile
Decisions
- Server Components by default. Only the mobile menu and the experience dialog ship client-side JavaScript.
- Scroll motion runs on CSS scroll-driven animations, with no animation library.
- Page changes use React's ViewTransition to carry a project's screenshot and title into its case study.
- Every animation turns off when the system's reduced-motion setting is on.
- Each page has its own title, description and social preview image, plus a sitemap and structured data.
Stack
- Next.js
- React
- TypeScript
- CSS Modules
- View Transitions