Building a Modern Portfolio Site

The Brief

Every digital studio needs a strong web presence. We wanted a site that showcased our work, communicated our services clearly, and made it easy for potential clients to get in touch — all while being fast, accessible, and easy to maintain.

The Approach

We chose Next.js 16 with the App Router for its static generation capabilities, giving us blazing-fast page loads without a traditional backend. Tailwind CSS 4 handled styling with a utility-first approach, and TypeScript ensured type safety throughout.

Key Technical Decisions

• Static generation for all content pages — no server required for page loads
• Markdown-based legal pages — privacy policies and terms of service can be added by dropping in a .md file
• Resend for the contact form — reliable email delivery without managing SMTP servers
• Dark mode with system preference detection and smooth transitions

Features Delivered

• Filterable portfolio grid with project type categories
• Contact form with email delivery and spam prevention
• Dynamic privacy policy and terms pages for app store compliance
• Blog section with markdown-based posts
• Full dark/light mode support
• Scroll animations and interactive hover effects
• SEO optimisation with sitemap, structured data, and Open Graph tags

The Result

The site was designed, built, and deployed to Vercel in under two weeks. It scores 95+ on Lighthouse for performance and SEO, loads in under a second on mobile, and the markdown-based content system means adding new blog posts, privacy policies, or terms pages requires zero code changes.

Tech Stack

• Next.js 16 (App Router)
• TypeScript 5
• Tailwind CSS 4
• Resend (email)
• Vercel (hosting)