Overview
The site you're on right now. Built with vanilla HTML, CSS, and JavaScript. No React, no Tailwind, no starter template. Every layout decision, animation, and color in the design system is original, written from a blank stylesheet.
Tech stack
Key features
- Token-based design system driven entirely by CSS custom properties
- Dark/light theme with system-preference detection and localStorage persistence
- Scroll-triggered reveal animations via the Intersection Observer API
- Client-side form validation with inline error states
- Mobile-first responsive layout, no CSS framework
Problem & approach
Problem: most student portfolios look identical because they come from the same three or four templates. I wanted something that reads as intentional: a real design system, not a Bootstrap default with a new photo dropped in.
Approach: the CSS is split by responsibility (tokens, typography, layout, components, pages) so the design system stays easy to reason about as the site grows, instead of one long stylesheet with overrides on overrides.
What I'd change next
- Move project content into JSON so new case studies don't require hand-writing HTML
- Add automated Lighthouse and accessibility checks to CI
- Write a short design-system README for anyone forking this as a template