Welcome
Hi, I’m Steph, a UX Engineer. I design and build user interfaces. This is documentation for my portfolio site, covering the design system, component architecture, and technical decisions I’m making along the way.
Portfolio Site
Section titled “Portfolio Site”The portfolio showcases my work and serves as a living example of how I build user interfaces. It’s built with modern web technologies and follows atomic design principles for component organization. Think of it as both a portfolio and a case study in one.
I’m currently in the process of building this site, documenting my progress through blog posts as I go.
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 will document decisions, explain patterns, and keep track of how everything fits together.
Tech Stack
Section titled “Tech Stack”- Astro 5: fast content-first sites
- Svelte 5: simple reactive components
- TypeScript 5: safer refactors
- Tailwind 4: quick consistent styling
- shadcn-svelte: accessible UI primitives
- Storybook 10: build components in isolation
- Chromatic: visual review + regression
- Starlight: Astro’s docs integration (Markdown/MDX + nav/search)
- D2: diagrams as code
- Figma: design + prototyping
Open Source
Section titled “Open Source”Where possible, I’m using open source tools. The core stack—Astro, Svelte, Tailwind, Storybook—is already open source.
Eventually I’d like to replace some proprietary tools with open source alternatives:
It gives me more control, avoids vendor lock-in, and lets me support the communities building these tools.