riotpiao.com/PLAN.md

# Portfolio Site Deployment (ArgoCD)

## Context

Deploy personal portfolio site to Kubernetes via ArgoCD. Universal JWT OAuth already live at api.riotpiao.com for cluster.

---

## Portfolio Site Deployment

Portfolio source repo: `~/workplace/riotpiao` (Next.js, standalone output).

**Portfolio Helm chart structure** (local, in homelab repo):

```
k8s/portfolio/
├── Chart.yaml
├── values.yaml
├── templates/
│   ├── deployment.yaml
│   ├── service.yaml
│   ├── ingress.yaml
│   └── _helpers.tpl
└── README.md
```

**ArgoCD Application** (in homelab repo, synced by ArgoCD):

`argocd/applications/portfolio.yaml`:
```yaml
apiVersion: argoproj.io/v1alpha1
kind: Application
metadata:
  name: portfolio
  namespace: argocd
spec:
  project: default
  source:
    repoURL: https://forgejo.riotpiao.com/rock/homelab
    targetRevision: HEAD
    path: k8s/portfolio
  destination:
    server: https://kubernetes.default.svc
    namespace: portfolio
  syncPolicy:
    automated:
      prune: true
      selfHeal: true
    syncOptions:
      - CreateNamespace=true
```

**Build + push script** (portfolio repo):

`~/workplace/riotpiao/build.sh`:
```bash
#!/bin/bash
set -euo pipefail

REGISTRY="forgejo.riotpiao.com"
IMAGE="${REGISTRY}/rock/portfolio:latest"

docker buildx build --platform linux/amd64 -t "${IMAGE}" .
docker push "${IMAGE}"

echo "✓ Pushed ${IMAGE}"
```

---

## Repository Structure

**In homelab repo:**

```
~/workplace/homelab/
├── argocd/
│   └── applications/
│       └── portfolio.yaml         # ArgoCD Application manifest
└── k8s/
    └── portfolio/
        ├── Chart.yaml
        ├── values.yaml
        └── templates/
            ├── deployment.yaml
            ├── service.yaml
            ├── ingress.yaml
            └── _helpers.tpl
```

---

## Implementation Sequencing

1. **Portfolio build + push:**
   - `cd ~/workplace/riotpiao && ./build.sh`
   - Verify image in Forgejo registry

2. **Create ArgoCD Application:**
   - Add `argocd/applications/portfolio.yaml` to homelab repo
   - Push to Forgejo
   - ArgoCD auto-syncs

3. **Verification:**
   - `curl -I https://portfolio.riotpiao.com` → 200

---

## Portfolio Page Features

### Hero Section
- Animated avatar with flowing blob (HeroBlobFlow component)
- Title: "Full-Stack Systems Engineer"
- Subtitle: "Infrastructure × Backend × LLM Systems"
- Description: Observable, fault-tolerant systems from bare metal to cloud
- CTAs: "Explore Systems", GitHub link
- Terminal hint: "Press Cmd+K to explore via terminal"

### Experience Timeline
- Chronological work history visualization (ExperienceTimeline component)
- Job titles, companies, dates, achievements

### Feature Cards Grid (6 cards)
Each card has icon, title, description, stat, status badge, link to detail page:

1. **Infrastructure Platform** (GitBranch icon)
   - Multi-region Terraform + ArgoCD GitOps on Kubernetes
   - Stat: 40% CPU reduction
   - Status: Live

2. **Distributed Systems** (Cpu icon)
   - gRPC, Kafka, AWS Step Functions across 57+ regions
   - Stat: Mission-critical
   - Status: Live

3. **LLM Systems** (MessageSquare icon)
   - CPU-bound inference optimization, INT4/INT8 quantization
   - Stat: 60% latency cut
   - Status: Live

4. **Kafka Cluster** (Database icon)
   - Strimzi KRaft cluster with auto-scaling brokers
   - Stat: 3 brokers
   - Status: Live

5. **Open Source** (Layers icon)
   - go-flink: distributed DataLakeHouse in Go
   - Stat: Public repo
   - Status: Live

6. **Observability** (BarChart3 icon)
   - Prometheus, Grafana, Dynatrace — live metrics
   - Stat: 99.2% uptime
   - Status: Live

### Interactive Terminal
- Accessible via Cmd+K shortcut
- Browse systems/projects via command-line interface
- InteractiveTerminal component

### Dark Mode
- Full light/dark theme support via Tailwind

### Footer
- Copyright, GitHub, email links
- Homelab deployment note (3-node Talos cluster)

### Planned Detail Pages
- `/infrastructure` — K8s + Terraform setup details
- `/systems` — Distributed systems deep-dive
- `/llm` — Inference optimization techniques
- `/kafka` — Kafka cluster architecture
- `/opensource` — go-flink project showcase

---

## Files to Create

**In homelab repo:**
- `argocd/applications/portfolio.yaml` (ArgoCD Application)
- `k8s/portfolio/Chart.yaml`, `values.yaml`
- `k8s/portfolio/templates/{deployment,service,ingress}.yaml`

**In portfolio repo (`~/workplace/riotpiao`):**
- App pages: `app/layout.tsx`, `app/page.tsx`, `app/about/page.tsx`
- Detail pages: `app/infrastructure/page.tsx`, `app/systems/page.tsx`, etc.
- Components: Header, Footer, FeatureCard, HeroBlobFlow, ExperienceTimeline, InteractiveTerminal, AnimatedRoles, AvatarWithBlob, TypewriterText, ProgressiveText, LiveIndicator
- Content: `content/{projects,experience,metadata}.ts`
- Styles: `styles/globals.css`
- Docker: `Dockerfile`, `build.sh`, `next.config.js`
- Config: `package.json` (Next.js 15 + Tailwind + Framer Motion + Lucide)

---

## Success Criteria

- [x] Repository ready for ArgoCD sync
  - Dockerfile + multi-stage build
  - .dockerignore + build.sh
  - K8s manifests (Kustomize) in infra/portfolio/base/
  - ArgoCD Application defined in infra/argocd-apps.yaml
  - Forgejo Actions CI pipeline (.forgejo/workflows/build-push.yml)
- [ ] Portfolio site accessible at portfolio.riotpiao.com
- [ ] Project grid + about page render
- [ ] Image served from Forgejo registry
- [ ] Deployed via ArgoCD (no manual kubectl)
- [ ] ArgoCD Application syncs automatically