☁️ Angular Core SPA — Cloud Engineer Portfolio

A production portfolio site built with Angular 19, SSR, and build-time prerendering.

---

🎯 Executive Summary

A real-world demonstration of modern Angular engineering pushed to its practical limits. The goal: ship a crawlable, fast, statically-hosted Angular app that behaves like a server-rendered site — without paying for a server.

Key Achievements:

• 🏗 Angular 19 standalone components + route-level lazy loading.
• ⚡ SSR + build-time prerendering for full-content HTML.
• 🎨 Tailwind CSS v4 with custom dark theme (@theme).
• 🚀 Zero-cost CI/CD — GitHub Actions → GitHub Pages.
• 🔍 Structured SEO — JSON-LD, sitemap, per-route metadata.

---

🏗 Architecture

┌────────────────────────────────────────────────────────┐
│                     Angular 19 App                     │
│              (standalone + lazy routes)                │
└──────────────────────────┬─────────────────────────────┘
                           │
            ┌──────────────┴──────────────┐
            │                             │
     ┌──────▼──────┐               ┌──────▼──────┐
     │   Browser   │               │  Server     │
     │   bundle    │               │  (SSR)      │
     └──────┬──────┘               └──────┬──────┘
            │                             │
            └──────────────┬──────────────┘
                           │
                ┌──────────▼──────────┐
                │   prerender routes  │
                │ / /about /cv /ai-llm│
                └──────────┬──────────┘
                           │
                ┌──────────▼──────────┐
                │  dist/*/browser/    │
                │  static HTML + JS   │
                └──────────┬──────────┘
                           │
                ┌──────────▼──────────┐
                │    GitHub Pages     │
                │    (static host)    │
                └─────────────────────┘

Engineering Decision: GitHub Pages cannot run a Node server. Runtime SSR is replaced with build-time prerendering. Every route renders to static HTML at build time — identical SEO outcome, zero runtime cost, zero infra.

---

⚙️ Tech Stack

Layer	Technology	Rationale
Framework	Angular 19	Modern, scalable, standalone components.
Rendering	SSR + Prerender	SEO benefits without server costs.
Styling	Tailwind CSS v4	Utility-first, fast UI development.
Routing	Angular Router	Route-level metadata and lazy loading.
SEO	JSON-LD, sitemap.xml	Maximized crawlability.
Deployment	GitHub Pages	Zero-cost, globally distributed static hosting.

---

🧠 Engineering Highlights

1. Prerender instead of Runtime SSR

GitHub Pages is static. We use RenderMode.Prerender so every route ships as real HTML. Google sees full content without executing JS.

2. Route-Level Metadata

Each route carries its own title and data.description. Canonical, OG, and JSON-LD are declared once in index.html.

3. Lazy Loading Per Page

Each page is loaded via loadComponent. Build output shows one chunk per route (home-component, about-component, etc.) — initial bundle stays small.

4. Stable Base URL

Served from /Angular-Core-SPA/. Setting baseHref plus a hash-URL shim keeps deep links resolving correctly.

5. Verified Deploys

GitHub Actions uses official Pages actions with a Verify prerendered output step that fails the build if any route is missing.

---

🚀 Local Development

npm install
npm start          # ng serve → http://localhost:4200

📦 Build & Deploy

npm run build      # produces dist/angular-core-spa/browser/ with prerendered routes

Deployment is automatic: push to main triggers the GitHub Actions workflow.

---

👤 Author

Ongun Akay — Cloud Engineer Google Cloud · AI/LLM · GKE & Cloud Run

---

📄 License

MIT — see LICENSE.