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

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.

Core Web Vitals: The Metrics That Matter

Google's Core Web Vitals measure real user experience through three critical metrics that directly impact both user satisfaction and search rankings:

The Three Core Metrics

Largest Contentful Paint (LCP): Measures loading performance—how quickly the main content appears. Target: < 2.5 seconds
First Input Delay (FID): Measures interactivity—how responsive the page feels to user input. Target: < 100 milliseconds
Cumulative Layout Shift (CLS): Measures visual stability—how much content shifts during loading. Target: < 0.1

Why These Metrics Matter

These aren't arbitrary numbers—they directly correlate with user behavior and business outcomes:

Performance = Retention: Pages loading 1 second faster see 27% higher conversion rates
Interactivity = Engagement: Responsive interfaces keep users engaged longer
Stability = Trust: Layout shifts create jarring experiences that drive users away

How This Portfolio Achieves Perfect Scores

LCP Optimization: Static generation eliminates server response time, while Next.js image optimization and font loading strategies ensure content appears instantly
FID Excellence: Minimal JavaScript bundles and strategic code splitting keep the main thread free for user interactions
CLS Perfection: Proper image dimensions, font loading strategies, and avoiding dynamic content injection prevent layout shifts

Perfect Core Web Vitals aren't vanity metrics—they're proof that technical excellence directly translates to better user experiences and business results.

Accessibility: Building for Everyone

Achieving a 100/100 accessibility score isn't just about compliance—it's about ensuring the web works for everyone, regardless of ability or assistive technology.

The Foundation of Inclusive Design

Semantic HTML: Proper heading hierarchy, landmark elements, and meaningful structure provide clear navigation for screen readers
Keyboard Navigation: Full site functionality without a mouse—essential for users with motor disabilities
Color Contrast: WCAG AA compliance ensures text is readable for users with visual impairments
Alt Text Excellence: Descriptive, contextual image descriptions that convey meaning, not just appearance

// Example: Proper heading structure and ARIA labels
<h1>Building My Portfolio: A Deep Dive Into Modern Web Development</h1>
<h2>My Core Values in Web Development</h2>
<h3>The Competition's Shortcomings</h3>

// Screen reader friendly navigation
<nav aria-label="Main navigation">
  <ul role="list">
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Why Accessibility Matters

Universal Access: The web should be accessible to everyone regardless of ability, ideology, or background—it's a fundamental principle of the open web
Legal Compliance: WCAG guidelines aren't suggestions—they're requirements in many jurisdictions
SEO Benefits: Search engines favor accessible sites because they provide better user experiences
Future-Proofing: Accessible code is more maintainable and works better across devices

Perfect accessibility scores prove that technical excellence and inclusive design aren't mutually exclusive—they're complementary forces that create better experiences for everyone.

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, its API lacks robust handling of assets and inline MDX content within JSON/YAML files, making mixed content workflows cumbersome.

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

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.

Blogs tagged "portfolio"

Building My Portfolio: A Deep Dive Into Modern Web Development

Command Palette