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:

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:

#!/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

• 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