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

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

1. Performance is UX: Every optimization directly improves user experience—there’s no separation
2. Privacy Builds Trust: Transparent, user-first data practices increase engagement and conversions
3. Standards Aren’t Optional: Accessible, semantic code benefits everyone and costs nothing extra
4. 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.