nachtigall.dev

A Vue 3 + Vuetify playground for prototyping component ideas and documenting reusable UI patterns.

Getting Started

• Install dependencies with yarn install.
• Start the development server with yarn dev (Vite).
• Run the Vitest-powered unit suite with yarn test:unit.
• Trigger the placeholder end-to-end command with yarn test:e2e until a real harness lands.
• Lint the codebase with yarn lint.
• Type-check and build the production bundle with yarn build.

Project Layout

• src/main.ts bootstraps the Vue application and registers plugins.
• src/layouts/ contains layout shells that wrap routed pages.
• src/pages/ defines the routed views, including the new projects, experience, and contact flows generated automatically by unplugin-vue-router.
• src/components/ holds global UI components as well as the portfolio building blocks in portfolio/.
• src/composables/ exposes Composition API helpers, such as the portfolio data accessors.
• src/services/ centralises domain logic and data sets, including portfolio.ts.
• src/stores/ defines Pinia stores.
• src/types/ contains ambient TypeScript declarations.

Portfolio Content

The home, projects, experience, and contact screens are populated from src/services/portfolio.ts via the usePortfolio composable. Update those data sets to surface new case studies, achievements, or contact options.

Styling Guidelines

• Prefer Vuetify utility classes for spacing, colour, and typography.
• Where custom rules are required, add them in the scoped <style> blocks of the relevant components.
• Inline styles are intentionally avoided.

Tooling

• ESLint + Prettier enforce code style via npm run lint.
• TypeScript runs in strict mode. Fix type errors surfaced by npm run build before committing.