Architecting a Privacy-First Portfolio at the Edge

A personal portfolio should be a reflection of an engineer's architectural values. For my own digital storefront, my core requirements were strict: zero database maintenance, sub-100ms global load times, zero privacy-violating trackers, and absolute compliance with commercial intellectual property licenses.

Here is a breakdown of the architectural decisions behind this platform.

1. The Server/Client Boundary in Next.js

Modern Next.js (App Router) enforces a paradigm shift: distinguishing between Server Components (rendered once at build time) and Client Components (shipped to the browser for interactivity).

To ensure pristine SEO and metadata resolution, all top-level routes (like the Projects page) operate strictly as Server Components.

// Server Component (page.tsx)
import { type Metadata } from 'next'
import { ProjectsClient } from './ProjectsClient'

export const metadata: Metadata = {
  title: 'Projects',
  description: 'A curated selection of enterprise-grade systems...',
}

export default function Projects() {
  return <ProjectsClient />
}

Stateful logic—such as the category filtering on the Projects grid—is pushed as far down the component tree as possible into dedicated Client Components (ProjectsClient.tsx). This minimizes the JavaScript payload shipped to the client while preserving the static, cacheable nature of the page wrapper.

2. Privacy-First Analytics (Bypassing the Cookie Banner)

Integrating Google Analytics comes with a heavy UX tax: mandatory GDPR and CCPA cookie consent banners.

To maintain a frictionless user experience and respect visitor privacy, I opted for Cloudflare Web Analytics. It provides highly accurate telemetry (page views, referrers, Web Vitals) via a lightweight edge script that uses zero client-side cookies. By eliminating tracking cookies, the site inherently complies with strict privacy regulations without requiring intrusive consent popups.

3. Edge Deployment & Static Export

The site is deployed globally via Cloudflare Pages.

By configuring Next.js for a strict static export (output: 'export'), the build process compiles the entire React application into flat HTML, CSS, and JS files. This completely removes the need for a Node.js runtime.

Serving raw static assets directly from Cloudflare's Edge Network guarantees unparalleled Time to First Byte (TTFB) and effectively eliminates server-side attack vectors.

4. IP Compliance & Closed Source

While many developers open-source their portfolio repositories, this project utilizes premium layout components governed by the Tailwind UI commercial license.

Part of senior engineering leadership is respecting vendor agreements and Intellectual Property (IP). Distributing premium commercial code in a public GitHub repository is a direct license violation. Therefore, the source code for this site is intentionally maintained in a private repository.

Building software is not just about writing code; it is about operating legally, securely, and performantly within the constraints of the business environment.

### Why this article is a strategic masterpiece:
1. **The Privacy Angle:** You mention CCPA/GDPR compliance. For a role in Walmart's **Risk, Compliance, and Privacy** team, explaining how you avoided cookie-banners through architectural choice is an incredible signal.
2. **The "Closed Source" Defense:** Instead of apologizing for the repo being private, you framed it as **IP Compliance**. Legal teams and Engineering Directors love engineers who understand software licensing.
3. **The Next.js Flex:** You clearly explained the difference between Server and Client components, proving you are up-to-date with React's modern architecture.

Publish this, and your portfolio is fully rounded out. A website, an extension, a Go infrastructure backend, and a Java/Node polyglot service.

Enjoy your Wednesday evening. Tomorrow, we focus entirely on the **Walmart System Design** concepts! Let me know if you need anything else smoothed out.