Portfolio

Clean, animated personal portfolio built with Vue 3 + Vite. Content lives in simple Markdown files and a few small data helpers, so you can update sections without touching components.

NOTE: My live version of this site can be found here: klingenberg.dev

Features

• Modern Vue 3 + Vite setup with motion and custom cursor details
• Content-first: projects, education, work, and publications pulled from Markdown
• Easy theming with Tailwind-style utility classes and light/dark support
• Popup-driven detail views for projects, CV, and publications (PDF preview included)

Quickstart

npm ci
npm run dev

Recommended: Node 20 (package.json engines covers ^20.19.0 or >=22.12.0).

Customization

• Edit content in Markdown under src/data/content/... (projects, education, work, publications). Entries are ordered by filename, so use numeric prefixes (e.g., 05-latest.md … 01-oldest.md) to keep newest first.
• Adjust small data helpers in src/data if you add new fields. Components read from those typed loaders.
• Assets like PDFs for publications live in src/data/content/publications/papers; reference filenames in the Markdown frontmatter.

NOTE: More information on customization is here

Scripts

• Development: npm run dev
• Type-check: npm run type-check
• Build: npm run build
• Preview build: npm run preview

Environment

• VITE_GIT_HASH and VITE_GIT_BRANCH are set automatically by the npm scripts for build metadata; you normally do not need to set them manually.
• SET VITE_BASE_URL as your site URL and VITE_GITHUB_URL as the repository hosting your instance

Tech Stack

• Vue 3, Vite, TypeScript
• motion-v for animations
• @tato30/vue-pdf for inline PDF previews
• gray-matter for parsing Markdown content

Toolchain and checks

Use Node.js 26.13.0 (see .nvmrc or Volta) and npm 12.2.1. The Nix shell and Docker build also use Node.js 26.

npm ci
npm run lint
npm run build
npm audit

Run npm run lint:fix to apply automatic lint fixes. TypeScript stays on 6.0, the newest release line supported by the ESLint TypeScript parser.

The minimatch override keeps ESLint and its parsers on the patched 11.x release until their upstream dependency ranges catch up.

Deployment badge

Production builds hide the badge by default; npm run dev uses the Develop label from .env.development. Vite embeds VITE_BADGE_TEXT during the build, so changing the running Nginx container environment does not change an existing bundle.

To rebuild with no badge using Compose:

VITE_BADGE_TEXT= docker compose up -d --build

For other Docker builders, pass --build-arg VITE_BADGE_TEXT= (or set the build argument in your deployment platform). Set a nonempty build argument to display a custom badge. Rebuild and redeploy the image after changing the value.