Astro 7 & Tailwind v4 Cloud Architecture

As a Cloud Architect, your digital presence should reflect the exact architectural principles you champion in enterprise environments: performance, security, simplicity, automation, and maintainability. Too many engineering portfolios suffer from framework bloat—shipping multi-megabyte client-side JavaScript bundles for what is fundamentally structured text, technical writing, and verified credentials.

When architecting this platform, my objective was clear: engineer a blazingly fast, zero-FOUC (Flash of Unstyled Content) static platform with automated multi-cloud credential synchronisation, modern CSS-first styling, instant client-side search, and resilient CI/CD pipelines, accelerated by Google DeepMind’s Gemini and Antigravity agentic pair programming.

Here is an architectural breakdown of how this platform was designed, engineered, and continuously evolved.

1. Why Astro 7 & Tailwind CSS v4 for Enterprise Portfolio Architecture

Modern client-side single-page applications (SPAs) often introduce needless complexity for content-driven systems. By adopting Astro 7 in static mode (output: 'static'), the platform achieves pure compile-time static generation:

Zero Client-Side JavaScript by Default: Core content, CV timelines, and layout grids compile to lightweight semantic HTML and native CSS.
Island Architecture: Interactive components—such as the matrix-inspired LetterGlitch canvas and responsive SkillsList capabilities grid—are isolated into lightweight React islands hydrated only where necessary (client:visible / client:load), imposing zero runtime penalty on the document body.
Tailwind CSS v4 Migration via @tailwindcss/vite: Migrated from legacy Tailwind v3 and @astrojs/tailwind to native @tailwindcss/vite. This replaces complex JS config files with a CSS-first @theme block in src/styles/global.css, reducing static entrypoint build times by 50% (from ~660ms down to ~340ms).
Inline Stylesheet Strategy: By setting build: { inlineStylesheets: 'always' } in astro.config.mjs, render-blocking stylesheet network roundtrips are eliminated, driving First Contentful Paint (FCP) down to 0.4s and Largest Contentful Paint (LCP) down to 0.5s.

flowchart TD
    subgraph BuildEngine["Astro 7 Build Pipeline"]
        Data["Content Data (Markdown / JSON)"]
        Islands["React Islands (Hydrated)"]
        Data & Islands --> Vite["Vite + Tailwind CSS v4 Engine"]
        Vite --> HTML["Static HTML & Inlined CSS"]
    end

    BuildEngine --> CDN["GitHub Pages Global CDN"]

Vite & Tailwind CSS v4 Configuration

Integrating @tailwindcss/vite directly inside astro.config.mjs simplifies build pipelines:

// astro.config.mjs
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import react from "@astrojs/react";

export default defineConfig({
  output: "static",
  site: "https://www.oliver-slater.co.uk",
  build: {
    inlineStylesheets: "always",
  },
  prefetch: {
    defaultStrategy: "hover",
  },
  vite: {
    plugins: [tailwindcss()],
  },
  integrations: [react()],
});

And in src/styles/global.css, design tokens are declared using native CSS syntax:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-sec: #7938ec;
  --font-sans: "Montserrat Variable", sans-serif;
  --font-mono: monospace;
}

2. Nested Chronological Indexing, Instant Search & URL State Sync

As engineering writing grows, flat article listings become difficult to navigate. The blog engine was upgraded to provide a structured, accessible taxonomy:

Sequential WCAG Heading Hierarchy

Articles are grouped dynamically by Year (<h2>) and Month (<h3>), featuring timeline accent dots and live article counter badges:

<h1>Engineering Notes</h1>
<h2>2026</h2>
<h3>September</h3>
<h4><a href="#">Article Title</a></h4>

Progressive Enhancement & Instant Search

Using vanilla JavaScript progressive enhancement, the blog page provides real-time search across titles, descriptions, tags, years, and month names without external heavy client-side libraries.

Declarative Accessible UI States

Rather than imperatively mutating long class strings in JavaScript, filter buttons utilise Tailwind v4’s native aria-pressed: modifiers (aria-pressed:bg-[var(--sec)] aria-pressed:text-white dark:aria-pressed:text-black...). The client script simply updates the aria-pressed attribute, keeping CSS and JS perfectly in sync:

function updateTagButtonsUI() {
  tagButtons.forEach((btn) => {
    const isSelected =
      (btn.dataset.tag || "all").toLowerCase() === activeTag.toLowerCase();
    btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
  });
}

Bidirectional URL Query Synchronization

Filter states and search queries sync seamlessly with browser history search parameters (?tag=aws&q=serverless) via window.history.replaceState, enabling shareable deep links without page reloads.

3. Zero-FOUC Theming & Executive Print Engineering

Synchronous Theme Resolution

To guarantee zero visual flicker regardless of device settings or network latency, a synchronous, blocking script executes inside <head> prior to any body paint:

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme");
    }
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };
  const isDark = getThemePreference() === "dark";
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");
</script>

This ensures Tailwind’s @custom-variant dark and custom CSS properties (--background, --sec, --white) resolve before the first paint cycle.

Document-Grade Print & PDF Stylesheet

For executive CV views (/cv), a native print stylesheet ensures seamless physical and PDF exports:

Ink-Friendly High Contrast: Forces pure white background (#ffffff) and charcoal text (#111827) when printing, regardless of whether dark mode was active in the UI.
Orphan Prevention & Smart Pagination: Employs CSS Paged Media standards (break-after: avoid on headings, break-inside: avoid on role cards) to prevent split sections or orphaned titles.

4. Autonomous AI-Augmented Engineering with Gemini

This platform serves as a production testbed for state-of-the-art AI pair programming using Google DeepMind’s Gemini models within the Antigravity agentic environment:

System Refactoring & DRY Audits: Rapidly extracted shared utilities (such as getBlogUrl in src/utils/blog.ts and date formatters in src/utils/date.ts) to maintain a clean codebase.
Automated Verification Loops: Every architectural iteration is validated against strict automated checks (npm run validate, astro check, npx tsc --noEmit), ensuring zero TypeScript errors and maintaining perfect 100/100 Lighthouse scores across Performance, Accessibility, Best Practices, and SEO.

5. Decoupled Multi-Cloud Credential Synchronization Engine

As an AWS Golden Jacket holder with 11x AWS certifications and Azure credentials, maintaining verified resume details manually is prone to drift. A custom TypeScript engine syncs credentials directly from public APIs during static build:

flowchart TD
    subgraph Sources["Public API Sources"]
        Credly["Credly API"]
        MSLearn["MS Learn API"]
    end

    subgraph Adapters["TypeScript Adapters"]
        Credly --> CredlyMod["credly.ts"]
        MSLearn --> MSLearnMod["mslearn.ts"]
    end

    subgraph Pipeline["certifications.ts Processing Pipeline"]
        CredlyMod & MSLearnMod --> Merge["Merge Multi-Cloud Data"]
        Merge --> Filter["Auto-Filter Expired"]
        Filter --> Override["Apply Priority Overrides"]
    end

    Pipeline --> Grid["Verified Credential Grid"]

Automatic Expiration Pruning: Filters retired or expired credentials dynamically based on build timestamps.
Priority Overrides: Local JSON schema (certification-settings.json) allows pinning marquee credentials (such as AWS Solutions Architect – Professional or Azure Solutions Architect Expert) to top priority.
Offline Fallback: Cached snapshots prevent build failures during upstream API downtime.

6. Continuous Delivery & GitOps Pipeline

The entire lifecycle is managed via GitHub Actions:

Secret Hygiene: Environment keys are injected safely at build time without leaking secrets into Git history.
Scheduled Sync Cron: A weekly GitHub Actions cron (0 6 * * 1) re-fetches external credential APIs and re-deploys updated certification badges automatically.
Edge Deployment: Deployed automatically to GitHub Pages with apex domain routing (oliver-slater.co.uk) and HTTPS enforcement.

Conclusion

A personal engineering platform should be a direct demonstration of technical capability. By combining static compilation via Astro 7, CSS-first styling with Tailwind CSS v4, automated GitOps with GitHub Actions, and agentic AI pair programming via Google DeepMind Gemini & Antigravity, this site delivers executive-ready reliability, 100/100 performance, and continuous architectural evolution.

Architecting a High-Performance Personal Platform with Astro 7, Tailwind v4, and Gemini