A developer portfolio engineered as a production application. All content — project data, theme definitions, and site configuration — flows through typed, validated data models. The multi-theme design system persists user preferences to cookies via Server Actions, preventing flash of unstyled content on page load. Accessibility is validated by automated testing across the component library and every theme combination.
[key features]
Visitors explore project exhibits with category filtering, customize their experience through switchable themes and wallpapers, and navigate responsive layouts that adapt across devices — with preferences persisting seamlessly between sessions.
- Type-safe content architecture with validated data models for project data, theme definitions, and site configuration
- Theme system built on semantic design tokens for color and layout, with WCAG AA contrast validation across all combinations
- Automated accessibility auditing with vitest-axe integrated across component test suites
- Responsive layouts with distinct compositions across viewports — CSS-only breakpoints for hydration safety
- Orchestrated animation system with centralized timing driving intro sequences, page transitions, and shared element morphing
- Built with ARC Framework — a spec-driven development methodology emphasizing focused human-agent collaboration
[implementation details]
Design System
- Semantic tokens implemented as CSS custom properties — themes swap value definitions at runtime without triggering component re-renders, covering color, layout, and typographic scales across all theme variants
- Reducer-based animation state with phase-driven intro orchestration and mode-based timing lookups from a centralized single source of truth, with full reduced-motion support bypassing all animation at the dispatch level
- Per-theme wallpaper system with user preference persistence, integrated into the Server Actions cookie synchronization layer
Server Rendering
- Server Actions resolve user preferences from cookies during the server render pass and inject them into the initial HTML response, establishing theme and layout state before the browser paints — zero layout shift on initial load
- Hydration-safe responsive rendering through CSS-only breakpoints — server and client produce identical initial markup regardless of viewport, avoiding the layout flash common with client-side detection approaches
Quality Engineering
- Pragmatic test-first development for component behavior and data validation, test-after for presentational layout
- Accessibility auditing integrated at the component level within test suites, catching regressions alongside functional tests
