Portfolio Site / Photo + CS

A personal website that serves dual purposes: showcasing photography work and presenting technical projects. Built to be fast, accessible, and maintainable.

What I Built

The site features two distinct sections unified under a single design system:

Photography Section: A masonry gallery with light/dark theme support, individual series pages, and a client work portfolio. Images are optimized at build time with Next.js Image component for responsive loading.

CS Section: A clean project showcase with full MDX support for rich content, plus an interactive terminal experience for the curious. The terminal simulates a filesystem with resume data, course information, and project details.

Technical Details

Content Pipeline

All content is authored in MDX files, which are processed at build time using next-mdx-remote. This provides:

• Type-safe frontmatter extraction
• React component embedding in markdown
• Static generation for optimal performance

Image Optimization

The photography section required careful attention to image handling:

• Automatic format conversion (WebP/AVIF where supported)
• Responsive srcset generation for different viewports
• Lazy loading for improved performance

Terminal Implementation

The terminal component is a client-side React component that simulates a Unix-like environment:

• Virtual filesystem built from resume data
• Basic commands: ls, cd, cat, less, pwd, help
• Command history with arrow key navigation
• Pager implementation for long files

Deployment

The site runs on Vercel with:

• Static generation for optimal performance
• Edge caching for global delivery
• Automatic preview deployments for branches

Results / Learnings

Building this site reinforced several practices:

• The value of static generation—pages load instantly worldwide
• MDX is powerful but requires careful TypeScript integration
• Accessibility matters—the terminal needed keyboard navigation, proper ARIA labels
• Performance budgets keep feature creep in check