WeDigCode Portfolio

This portfolio is built with Next.js App Router, TypeScript, and deployed on Cloudflare Pages for optimal performance.


## Project Overview

The WeDigCode portfolio represents a modern approach to showcasing digital projects and experiments. Built with performance and accessibility in mind, it demonstrates how static generation can create lightning-fast user experiences while maintaining developer productivity.

### Key Features

- **Content-First Architecture**: Projects are authored in MDX with structured frontmatter
- **Static Generation**: All pages are pre-rendered at build time for optimal performance
- **System-Aware Theming**: Respects user's dark/light mode preference with manual override
- **Responsive Design**: Works seamlessly across desktop, tablet, and mobile devices
- **Accessibility-First**: WCAG compliant with proper focus management and semantic markup

## Technical Implementation

The site leverages Next.js 15's App Router for file-based routing and React Server Components for optimal performance. Content is managed through MDX files with Zod schema validation ensuring data consistency.



### Content Management

Projects are stored as MDX files in `/content/projects/[slug]/index.mdx` with co-located assets. This approach provides:

- Version control for all content
- Type-safe frontmatter validation
- Flexible content authoring with React components
- Automatic image optimization and processing

### Performance Optimizations

- Static generation with ISR for dynamic updates
- Image optimization with Next.js Image component
- CSS-in-JS eliminated in favor of Tailwind utilities
- Minimal JavaScript bundle with selective hydration

## Design Philosophy

The design emphasizes content over decoration, using generous whitespace and a limited color palette to focus attention on project work. Typography is handled by Inter for UI elements and IBM Plex Mono for code, both loaded via next/font for optimal performance.



## Development Experience

The developer experience prioritizes:

- **Fast Feedback Loops**: Hot module replacement for instant content updates
- **Type Safety**: End-to-end TypeScript with strict configuration
- **Content Validation**: Zod schemas catch errors before deployment
- **Consistent Formatting**: Prettier and ESLint ensure code quality

The build process generates a fully static site that can be deployed to any static hosting provider, with special optimizations for Cloudflare Pages.

src="./architecture-diagram.png"
alt="Architecture diagram showing the flow from MDX content to static pages"
caption="High-level architecture showing content processing and page generation"
/>

## Lessons Learned

Building this portfolio provided insights into modern web development practices and the evolution of the Next.js ecosystem. The App Router's file-based routing combined with Server Components creates a powerful foundation for content-heavy sites.

The decision to use MDX for content proved valuable, providing the flexibility of React components while maintaining the simplicity of Markdown authoring. Zod validation catches content errors early in the development process, preventing runtime issues.

Static generation remains an excellent choice for portfolio sites, providing optimal performance while maintaining the ability to update content through the development workflow.

## Future Enhancements

Planned improvements include:

- RSS feed generation for project updates
- Advanced image gallery with lightbox functionality
- Integration with analytics for usage insights
- Automated social media image generation
- Search functionality across project content