# 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 &rarr; `nginx:alpine` runtime).
   - Target architecture: **`linux/amd64`**.
   - Build commands:
     ```bash
     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:
     ```bash
     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`.