Vue 3 / TypeScript rebuild of pattern158.solutions — the professional portfolio site for Dan Novak, a senior software engineer who builds forensic tooling that makes operational friction disappear.
Migrating from a static HTML site to a component-driven architecture with Storybook documentation, accessibility testing, and Vitest unit coverage.
- Vue 3 with Composition API and
<script setup> - TypeScript throughout
- Vite for build and dev server
- Vue Router 4 for client-side routing
- Storybook 10 with
@storybook/addon-a11yfor component documentation and accessibility validation - Vitest + Playwright for unit and browser-based testing with coverage
Storybook a11y addon — every component is validated against WCAG 2.1 AA in isolation before integration. This matters for a site whose author built enterprise accessibility methodology for Fortune 500 banks.
Data-driven content — portfolio exhibits, testimonials, and project data live in src/data/ as typed TypeScript structures rather than hardcoded markup, making the content model explicit and testable.
Composables over mixins — shared logic (theming, navigation state, SEO metadata via @unhead/vue) extracted into composables in src/composables/.
src/
components/ # Reusable UI components, each with Storybook stories
composables/ # Shared logic (theme, SEO, etc.)
data/ # Typed content: exhibits, testimonials, projects
pages/ # Route-level components
stories/ # Additional Storybook stories
router.ts # Vue Router configuration
npm install
npm run dev # Dev server at localhost:5173
npm run storybook # Storybook at localhost:6006
npm run test # Vitest unit tests
npm run build # Production build