Welcome
Hi, I’m Steph. I’m a UX engineer focused on building scalable UI foundations, including design systems, component libraries, and front-end patterns that hold up over time. My work sits at the intersection of design and engineering, so I’m usually thinking about both the user experience and the implementation at the same time.
This docs site captures the decisions, patterns, and workflows behind my portfolio. If you want a more chronological look at how things were built, you can browse my engineering notes.
Portfolio Site
Section titled “Portfolio Site”This site is both a portfolio and a working system. It is built with modern web tooling and organized using atomic design principles. I document progress and decisions along the way so the UI stays consistent as the project grows.
Design System
Section titled “Design System”I’m using atomic design methodology to break down the interface into reusable building blocks: atoms, molecules, organisms, templates, and pages. This keeps everything consistent and scalable as the site grows.
Components are developed in isolation using Storybook and tested with Chromatic for visual regression testing.
Design work is done in Figma using the shadcn-svelte + Figma UI Kit as a starting point.
Documentation
Section titled “Documentation”This documentation site is built with Starlight and covers:
- Component library and patterns
- Global styling and design tokens
- Development workflows
- Guides and best practices
This is where I document decisions, explain patterns, and keep track of how everything fits together.
Tech Stack
Section titled “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
Open Source
Section titled “Open Source”Where possible, I’m using open source tools. The core stack is already open source, including Astro, Svelte, Tailwind, and Storybook.
Eventually I’d like to replace some proprietary tools with open source alternatives:
It will give me more control, avoids vendor lock-in, and lets me support the communities building these tools.