Building My Portfolio: A Deep Dive Into Modern Web Development

Note: This article was copy-edited using Large Language Models (LLMs) to improve clarity and readability while preserving the original technical content and insights.

Creating a personal site that loads in milliseconds, respects user privacy, and remains maintainable is challenging in 2025. This post walks through every architectural choice behind this portfolio, so you can replicate—ahem—over-engineer it yourself.

My Core Values in Web Development

Before diving into the technical stack, let me be clear about what drives every decision:

Performance Obsession: Every millisecond matters. If it doesn’t make the site faster, it doesn’t belong.
Clean UX: Users shouldn’t think about how to use your site—they should just use it.
Privacy First: Zero tracking without explicit consent. User data is sacred.
Accessibility Always: The web should work for everyone, regardless of ability or assistive technology.
The Right Way: Standards-compliant, maintainable code that respects both users and developers.

These aren’t just nice-to-haves—they’re non-negotiables that shaped every architectural choice.

Why Next.js 15 for Static Site Generation

While Astro, Hugo, and Gatsby offer compelling alternatives, I chose Next.js 15 for its unmatched developer experience within the React ecosystem and future-proof architecture.

Performance by Design: Next.js optimizations (automatic code splitting, image optimization, prefetching) are performance wins I don’t have to implement myself
Future-Proofing with RSC: React Server Components are the future. By choosing Next.js now, I can gradually adopt RSC patterns when I need dynamic features without a complete rewrite
Clean DX = Clean UX: Superior developer experience directly translates to better user experience through faster iteration and fewer bugs
Static Export Flexibility: Full static export capability while maintaining the option to add dynamic routes later—the right foundation for scalable growth
Built-in Best Practices: Image optimization, font loading, and bundle splitting work perfectly out of the box

The key insight: Next.js isn’t just for dynamic apps. Its static export mode generates pure HTML/CSS/JS that can be deployed anywhere, while keeping the door open for future enhancements—exactly the right balance of simplicity and flexibility.

Content Management: Why Velite Over Everything Else

For content management, I evaluated Contentlayer, Content Collections, and others before settling on Velite. Here’s why Velite won:

The Competition’s Shortcomings

Contentlayer: No longer actively maintained, which raises long-term viability concerns despite its excellent TypeScript integration
Content Collections: A solid, actively maintained option with first-class Next.js support and better community adoption. However, it currently lacks support for JSON/YAML content and doesn’t have incremental watch mode yet

Why Velite is the Right Choice

const blogs = defineCollection({
  name: 'Blog',
  pattern: 'blogs/**/*.mdx',
  schema: s.object({
    title: s.string().max(99),
    description: s.string().max(160),
    tags: s.array(s.string()),
    published: s.boolean().default(true),
    slug: s.path(),
    date: s.isodate(),
    lastModified: timestamp(),
    image: s.image().optional(),
    excerpt: s.excerpt(),
    body: s.mdx(),
  }),
});

Comprehensive Format Support: Built-in processing for Markdown, MDX, YAML, and JSON with automatic relative file and image optimization, plus robust schema validation—everything you need in one cohesive system
Zod-Powered Validation: Content schema validation powered by Zod with automatic TypeScript definition generation—catch content errors at build time, not runtime
Infinitely Extensible: Custom loaders for any file type, flexible schema transformations, and configurable output formats through hooks—adapt to any workflow without constraints
Modern MDX Pipeline: Integrates remarkMath, rehypeSlug, rehypeAutolinkHeadings, rehypeKatex, and Shiki syntax highlighting without configuration hell

Instant, Private Search with Pagefind

Search is a UX necessity, but most solutions compromise privacy or performance. Pagefind, built in Rust for maximum performance, solves both:

useEffect(() => {
  async function loadPagefind() {
    if (!window.pagefind) {
      const path =
        process.env.NODE_ENV === 'production'
          ? './app/pagefind/pagefind.js'
          : '/app/pagefind/pagefind.js';
      window.pagefind = await import(/* webpackIgnore: true */ path);
    }
  }
  loadPagefind();
}, []);

Zero Server Cost: Fully client-side indexing and search—scales to millions of pages at no extra cost
Privacy Perfection: No requests to external servers, no user tracking, no data collection
Performance First: Lazy loading keeps initial bundle tiny, search loads only when needed (⌘+K)
Clean UX: Instant results with fuzzy matching that feels magical to users

This is search done the right way: fast, private, and progressively enhanced.

Hosting on Cloudflare Workers via OpenNext

Deploying a static portfolio on Cloudflare Workers using OpenNext is admittedly over-engineered—but aligns with my performance obsession:

Global Performance: 250+ PoPs mean every user gets millisecond response times
Platform Recommendation: Cloudflare now advocates Workers over Pages for advanced feature integration
Vendor Independence: OpenNext preserves deployment flexibility—switch between Vercel and Cloudflare in minutes
Future-Proof Architecture: Edge-native design patterns that scale from personal sites to global applications

Honest confession: I’ll never hit Vercel’s free-tier limits for a simple portfolio, and the few-millisecond edge benefit is negligible for most users. But my obsession with performance and learning edge runtimes justified this choice—sometimes over-engineering teaches you exactly what you need for the next project.

Perfect Lighthouse Scores

Achieving 100/100 across all Lighthouse categories—Performance, SEO, Accessibility, and Best Practices—isn’t about gaming metrics. It’s about respecting users:

Performance: Static generation eliminates server response time, while Next.js automatically optimizes images, fonts, and JavaScript bundles for minimal render blocking
Accessibility: Semantic HTML, proper heading hierarchy, comprehensive alt text, and keyboard navigation ensure the site works for everyone
SEO: Structured data, optimized meta tags, clean URLs, and fast Core Web Vitals scores signal quality to search engines
Best Practices: HTTPS everywhere, secure headers, modern image formats, and no deprecated APIs create a trustworthy experience

Perfect scores aren’t vanity metrics—they’re proof that you can have both excellent UX and ethical practices.

Google Analytics: Privacy-Conscious Power

Despite privacy-conscious alternatives—Plausible, Fathom, Umami, Cloudflare Analytics—Google Analytics remains unmatched for actionable insights:

Real-Time Understanding: Immediate insights into user behavior and content performance
Deep Segmentation: Understand not just what users do, but why
Zero-Cost Enterprise Features: Advanced dashboards and integrations that competitors charge hundreds for

The key is implementing it the right way: strict privacy defaults, IP anonymization, and transparent consent mechanisms that actually increase opt-in rates by building trust.

Key Lessons: Performance, Privacy, and Principles

Performance is UX: Every optimization directly improves user experience—there’s no separation
Privacy Builds Trust: Transparent, user-first data practices increase engagement and conversions
Standards Aren’t Optional: Accessible, semantic code benefits everyone and costs nothing extra
Over-Engineering Has Purpose: Sometimes the “excessive” choice teaches you exactly what you need for production systems

The pursuit of perfect performance, clean UX, and ethical privacy practices never ends—it just gets more refined.