Moritz Graf
d2dac3470f
- Replace legacy Hugo static site generator and hugo-goa theme with a modern Vue 3 + Vite + TypeScript application - Implement Clean Enterprise design system using Tailwind CSS with light/dark mode support - Position website around Cloud Platform & Infrastructure Leadership (GCP & AWS central platforms, Kubernetes at scale, enterprise spin-off governance, and systems depth) without chronological resumes - Add 6 comprehensive capability dossiers and verified credential badges (CKA, PSM II, M.Sc.) - Implement interactive skill matrix with real-time text search and category filtering - Add engineering philosophy section, contact channels with one-click email copying, and Impressum modal - Configure multi-stage Dockerfile (Node builder to Nginx runtime) with custom gzip, caching, and security headers - Update build scripts (Makefile, build.sh), .gitignore, and AGENTS.md documentation across the monorepo
81 lines
3.9 KiB
Markdown
81 lines
3.9 KiB
Markdown
# 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:
|
|
```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`.
|