PERSONAL PORTFOLIO SITE

// ROLE: Developer & Designer // YEAR: 2026 // TECH: ASTRO, TYPESCRIPT, TAILWINDCSS, MDX, CLOUDFLARE PAGES
PERSONAL PORTFOLIO SITE

The Motivation

After years of focusing solely on work projects, I realized I had nothing to show potential employers beyond my resume. No personal projects. No visible work. Just a LinkedIn profile and years of experience.

In the age of AI-assisted development, I decided it was time to change that. This portfolio site is the first step—a platform to document my work, share what I learn, and build in public.

The Design Philosophy

I wanted something that stood out from the sea of corporate Memphis art and gradient-heavy designs. Something raw, honest, and unapologetically direct.

Around 2021-2022, I first saw brutalist web design trending. Sites like Gumroad and Zapier were using it. I really liked the aesthetic.

My site doesn’t entirely follow strict brutalist principles, but it’s heavily inspired by that philosophy:

Brutalist Design Principles:

  • Heavy borders and sharp edges
  • Monospace typography throughout
  • High contrast black and white
  • No unnecessary decoration
  • Content over chrome

The Tech Stack

  • Astro - Content-first framework with zero-JS by default
  • TypeScript - Type safety across content and components
  • TailwindCSS - Utility-first styling for brutalist aesthetic
  • MDX - Markdown with React components for rich content
  • Cloudflare Pages - Edge deployment with automatic CI/CD

Each technology was chosen to prioritize performance, developer experience, and content management. Content collections provide type-safe content handling, while Astro’s static generation ensures excellent performance.

Key Architectural Decisions

Content-First Architecture: Built around Astro’s content collections with Zod schemas for type-safe content management. All content lives in MDX files—projects, blog posts, about page—with build-time validation.

Zero-JavaScript by Default: Astro generates static HTML with no client-side JavaScript unless explicitly needed. This results in instant page loads and a Lighthouse score of 100/100.

Type Safety Everywhere: TypeScript with strict mode across all code. Content schemas generate types automatically, ensuring compile-time safety from frontmatter to components.

Draft Management: Built-in draft system shows all content in development but filters drafts in production, enabling work-in-progress content without publishing.

Key Features

  • Dynamic Navigation - Adapts based on available content
  • Responsive Design - Mobile-first with brutalist aesthetic at all sizes
  • Content Collections - Type-safe MDX content with Zod validation
  • Syntax Highlighting - Shiki-powered code blocks matching site aesthetic
  • SEO Optimized - Semantic HTML, meta tags, sitemap generation

Deployment

Deployed on Cloudflare Pages with automatic deployments on push and preview deployments for every branch. I can also deploy directly using Wrangler (Cloudflare’s CLI) for more control over the deployment process.

Currently, the site is purely static with no Workers or edge functions. In the future, I plan to add dynamic features using Cloudflare’s platform—currently playing Spotify music, page view analytics, and other real-time data that will leverage Workers, KV, and D1.

What I Learned

AI-assisted development accelerates learning - Building with AI assistance helped me learn Astro-specific concepts like content collections, the Image component, client directives, and framework conventions more quickly than traditional documentation-first approaches.

AI-generated imagery - Most images on the site are generated using Gemini AI, allowing me to create custom visuals that match the brutalist aesthetic without needing design skills or stock photos.

Personal projects are important - This site exists to showcase my work, but building it reminded me why personal projects matter—they’re opportunities to experiment, learn, and build exactly what you want without compromise.

Future Plans

  • More Blog Posts - Document work projects, share learnings, write about technical challenges
  • Personal Projects - Build things I’ve always wanted to build, document the process
  • Open Source Contributions - Showcase contributions and learnings
  • Case Studies - Deep dives into specific technical decisions

Technical Implementation

For a comprehensive technical deep-dive covering framework choices, code examples, configuration details, and step-by-step implementation guidance, read How This Site Is Built.