This portfolio is a working system, not just a gallery. It’s where I build and document UI foundations, including components, patterns, and workflows that keep interfaces consistent and maintainable.
Overview
This project is designed to:
- Share what I’m building and how I approach UI systems work
- Keep the UI foundations documented and easy to extend
- Capture decisions in docs and lightweight engineering notes
- Create a foundation I can iterate on without accumulating UI debt
Tech Stack
- Astro 5: Fast content-first sites with server-side rendering
- Svelte 5: Simple reactive components with runes
- TypeScript 5: Type-safe development
- Tailwind 4: Utility-first CSS framework
- shadcn-svelte: Accessible UI primitives
- Storybook 10: Component development in isolation
- Chromatic: Visual regression testing
- Starlight: Documentation integration
- D2: Diagrams as code
- Supabase: Backend as a service, database, and auth
- Vercel: Hosting and deployment
- Figma: Design and prototyping
Architecture
The UI is organized using atomic design principles, moving from small building blocks to page-level patterns. Components are developed and reviewed in isolation using Storybook, with visual regression checks in Chromatic.
Private project routes use server-side authentication with session-based cookies, middleware validation, and Vercel KV for session storage. This keeps access control out of client-trusted state.
Development approach
- Component-driven UI work in Storybook
- Type-safe patterns with TypeScript
- Visual regression checks with Chromatic
- Continuous deployment with Vercel
- Documentation in system docs and engineering notes
Diagrams
How the portfolio, docs, and component library connect to analytics and visual testing.