infrapuzzle/projects/moritzgrafde/AGENTS.md

AGENTS.md — Moritz Graf Personal Website (moritzgrafde)

Note

Domain: Personal executive portfolio and capabilities showcase for Moritz Graf.
Live Production URL: https://moritzgraf.de
Kubernetes Manifest: k8s/web/moritzgrafde.yaml (Namespace: web)
Container Image: registry.haumdaucher.de/moritzgrafde:latest
Source Location: projects/moritzgrafde/

---

🏛️ Architecture & Tech Stack

1. Stack:

   • Frontend Framework: Vue 3 (Composition API, <script setup lang="ts">).
   • Build Tooling: Vite 6 + TypeScript (vue-tsc).
   • Styling: Tailwind CSS v4 with Clean Enterprise / Executive design system (light/dark dual mode).
   • Icons: Lucide Vue Next.
   • Serving Runtime: Nginx (nginx:alpine) configured with gzip compression, SPA history routing fallback, security headers, and asset caching.

2. Container Build & Architecture:

   • Multi-stage Dockerfile (node:22-alpine builder → nginx:alpine runtime).
   • Target architecture: linux/amd64.
   • Build commands:

     cd projects/moritzgrafde
     make compile          # Local static bundle build to dist/
     make build            # Docker multi-stage build (linux/amd64)
     make push             # Push to registry.haumdaucher.de
     make deploy           # Rollout restart on Kubernetes
     

3. Kubernetes Deployment:

   • Deployed to the Kubernetes cluster in namespace web (k8s/web/moritzgrafde.yaml).
   • Ingress controller: Traefik, Let's Encrypt SSL via cert-manager.
   • Rollout restart:

     kubectl rollout restart deployment/moritzgrafde -n web
     kubectl rollout status deployment/moritzgrafde -n web
     

---

📁 Repository Structure

projects/moritzgrafde/
├── Dockerfile                  # Multi-stage container build (Node builder -> Nginx runtime)
├── Makefile                    # Standard make targets (compile, dev, build, push, deploy)
├── build.sh                    # Automated build, push, and Kubernetes redeploy script
├── nginx.conf                  # Nginx configuration (gzip, caching, security headers)
├── package.json                # Dependencies and build scripts
├── vite.config.ts              # Vite configuration with Vue and Tailwind v4 plugins
├── tsconfig.json               # TypeScript configuration with @/* path aliases
├── index.html                  # HTML entrypoint with metadata and Google Fonts
├── public/
│   └── headshot.jpg            # Portrait image (drop-in replaceable)
└── src/
    ├── main.ts                 # Vue app initialization
    ├── App.vue                 # Top-level application layout
    ├── style.css               # Tailwind CSS v4 entrypoint & base styles
    ├── types.ts                # TypeScript interfaces for portfolio data models
    ├── data/
    │   └── portfolioData.ts    # Single source of truth for capabilities, skills, and links
    └── components/
        ├── Navbar.vue          # Sticky header with navigation & dark mode switcher
        ├── Hero.vue            # Executive hero with portrait, credentials & CTAs
        ├── ImpactStats.vue     # Scale & impact metrics (Multi-Cloud, Spin-Off, K8s, 12+ Years)
        ├── CapabilityDossiers.vue # 6 deep capability pillars
        ├── SkillMatrix.vue     # Interactive skill search & category filter
        ├── EngineeringPhilosophy.vue # Declarative Everything, Self-Service, Systems Thinking
        ├── ContactSection.vue  # Direct email copy button & verified professional links
        └── ImpressumModal.vue  # Legal notice & privacy modal

---

🖼️ Updating the Portrait Image

To update the portrait image, simply replace projects/moritzgrafde/public/headshot.jpg with the new photo (JPEG/PNG) and run make compile && make build && make push && make deploy.