Welcome to the New mitchole.com

It's finally here. After weeks of designing, coding, scrapping, and rebuilding, the new mitchole.com is live. This post is a quick tour of what's changed, the tech behind it, and what's coming next.

Why Rebuild from Scratch?

The old site served its purpose, but it didn't reflect where I am today. I've been diving deeper into modern frontend development and AI, and I wanted a portfolio that showed that -- not just in the projects it lists, but in the way it's built.

I wanted something that felt polished and interactive without being bloated. Something that loads fast, looks sharp on every device, and gives visitors a reason to stick around.

The Tech Stack

Every decision in this build was deliberate. Here's what's under the bonnet:

• Next.js 16 with the App Router and Server Components for fast, SEO-friendly rendering
• TypeScript throughout -- no more guessing what a function expects at 2am
• Tailwind CSS v4 with custom CSS variables for a consistent dark purple theme
• Framer Motion (via the Motion library) for scroll-triggered animations and micro-interactions
• Cloudflare R2 for content storage -- blog posts and gallery images are served from the edge
• MDX for blog content, giving me the flexibility of Markdown with the power of React components

The site is deployed on Vercel, which pairs brilliantly with Next.js for automatic builds and edge caching.

What's New

Interactive Particle Network

The hero section features a custom canvas animation that responds to your cursor. Hover to attract particles into orbit, move quickly to scatter them, and click for a burst effect with shockwaves. It's built entirely with the HTML Canvas API -- no libraries.

Smooth Scroll and Animations

Every section uses scroll-triggered animations with staggered reveals. The navigation is fixed with a blur backdrop that appears as you scroll. There's a scroll progress indicator at the top of the page, and Lenis handles the smooth scrolling behaviour.

Blog and Gallery Systems

Both the blog and gallery now pull content from Cloudflare R2 rather than the local filesystem. This means I can publish new posts and add gallery images without redeploying the site. Blog posts are written in MDX with syntax highlighting, and the gallery supports both AI art and photography with a lightbox viewer.

Project Showcase

The projects section features a responsive grid with hover effects. Each project tile includes live links, tech tags, and descriptions. Current projects range from a DrayTek router comparison tool for work to FaceRoll -- a game where you literally roll your face on the keyboard for a score.

Contact Form

The contact form uses React Hook Form with Zod validation for a smooth, accessible experience. Error messages appear inline, and submissions trigger a toast notification.

Design Decisions

The visual identity centres on a deep purple palette against a near-black background. The colour scheme uses three key values:

• Primary: #4A1A6B (deep purple) for interactive elements and accents
• Accent: #B8A9C9 (soft lavender) for text highlights and connections
• Background: #0D0D0D (near black) for depth and contrast

Typography pairs Manrope for body text with Space Grotesk for headings, giving the site a clean, modern feel that's easy to read.

A subtle noise overlay and gradient section dividers tie everything together without being distracting.

Lessons Learnt

Building this site taught me a few things worth sharing:

1. Server Components are worth the learning curve. Fetching data on the server and only shipping the interactive bits to the client makes a real difference to performance.
2. Tailwind v4's CSS variable approach is excellent. Defining a theme with custom properties and mapping them through Tailwind keeps the styling consistent and easy to maintain.
3. Canvas animations need careful optimisation. The particle network uses intersection observers to pause when off-screen, device pixel ratio scaling for sharp rendering, and frame-based lifecycle management for burst particles.
4. Edge storage simplifies content management. Storing blog posts and images in R2 means content updates don't require a code change or redeploy.

What's Next

This is version one. There's plenty more to come:

• More blog content covering my journey into AI, Python, and software development
• Project deep dives breaking down the architecture and lessons from individual builds
• Gallery expansion with more AI-generated art and photography
• Performance tuning as I learn more about Core Web Vitals and lighthouse optimisation

If you've made it this far, thanks for reading. Feel free to get in touch if you want to chat about anything you've seen here, or if you've got a project in mind.