Lewis Saunders
← Back to projects

Portfolio Case Study

Maren

Maren is a premium coffee brand concept translated into a deployable, editorial website with clear UX structure and production-ready frontend execution.

Live productSource code
Maren
Maren secondary view

Product focus

Brand-led small-business website for discovery, trust, and enquiry conversion.

Architecture

Next.js App Router with typed content modules, reusable UI components, and static route generation.

Build priority

Editorial look and feel without sacrificing usability, accessibility, and performance.

Next.jsReactTypeScriptTailwind CSSFramer MotionResponsive build

Full Project Overview

Maren was built as a flagship freelance portfolio piece to simulate a premium client delivery from strategy through launch.

The site is structured around real user goals: understand the brand, browse coffees, learn brew methods, plan a visit, read journal content, and send an enquiry.

Every route and component was designed to feel cohesive while still supporting different content types, from story-led sections to practical information cards and forms.

  • brand-forward storytelling across all pages
  • typed content model for coffees, brews, visit details, and journal posts
  • clear navigation and conversion path to contact
  • responsive behavior tuned for mobile and desktop
  • production-style metadata, sitemap, and robots handling

Problem It Solves

Many portfolio projects look good in a single hero screenshot but break down when evaluated as complete products.

Maren solves that by demonstrating a full, coherent website system: brand voice, information architecture, design consistency, frontend quality, and deployable engineering choices.

  • proves end-to-end capability rather than isolated UI shots
  • shows consistent UX across multiple route types
  • demonstrates reusable components instead of one-off sections
  • balances visual craft with practical content readability
  • presents a realistic client-facing deliverable

Core Features

Brand-Led Home Experience

  • Editorial hero with atmospheric visual direction
  • Structured section flow for narrative pacing
  • Motion accents designed to support hierarchy, not distract

Coffee Catalogue And Detail Journey

  • Index view with scannable cards and quick comparisons
  • Detailed coffee pages with tasting notes and structured facts
  • Clear enquiry-oriented call to action for conversion

Brew Guide System

  • Multiple brew methods with consistent data presentation
  • Step-by-step instructional content layout
  • Alternating section styling tuned for contrast and readability

Visit And Contact Flows

  • Practical visit information with opening hours and directions
  • Contact form designed for clarity and low friction
  • Trust-oriented copy and straightforward intent capture

Journal Content Layer

  • Index and detail pages for long-form brand content
  • Layout rhythm optimized for reading comfort
  • Consistent visual system across editorial and utility pages

Product Philosophy

Maren was built around a small set of explicit principles.

  • Brand should guide UX, not overpower it.
  • Every visual choice must preserve readability and task clarity.
  • Motion should communicate structure and state, not novelty.
  • Reusable systems beat one-off page art direction.
  • A portfolio piece should be deployable, not just presentational.

Technical Overview

Maren is a Next.js 16 App Router project with React 19 and TypeScript, structured around route-level server rendering and targeted client islands for motion and interactivity.

Content is modeled in typed TypeScript modules and consumed by route components, allowing predictable data flow and low-friction updates without a CMS.

Styling is handled with Tailwind v4 and tokenized design values, enabling a coherent visual language across all page types.

Architecture Summary

Frontend

  • Next.js 16 App Router
  • React 19 + TypeScript 5
  • Tailwind CSS v4 token-driven styling
  • Framer Motion for selective animated surfaces
  • Component groups split by domain: brand, layout, motion, media, content

Content And Configuration

  • Typed content modules for coffees, brews, journal, and visit data
  • Centralized site identity and navigation config
  • Metadata, sitemap, and robots routes for SEO basics
  • Route-level data composition with static-first outputs

Quality And Delivery

  • Linted TypeScript codebase with explicit conventions
  • Static page generation for predictable performance
  • Responsive behavior validated across key breakpoints
  • Accessibility-aware interaction and reduced-motion handling

Tech Stack

Core

  • Next.js 16.2
  • React 19.2
  • TypeScript 5
  • Node.js runtime

UI And Motion

  • Tailwind CSS v4
  • Framer Motion
  • Lucide React
  • next/font with Fraunces, Geist Sans, and Geist Mono

Tooling

  • ESLint
  • Static build and prerender pipeline via Next.js
  • GitHub-based repository workflow

Notable Engineering Decisions

Typed Content Over CMS

The project uses typed local content modules to keep iteration speed high and reduce integration overhead while still modeling real-world data relationships.

Server-First With Targeted Client Islands

Most pages are server-rendered by default, with client-side code introduced only where interaction or animation requires it.

Reusable Layout And Media Primitives

Shared containers, sections, media wrappers, and utility components reduce duplication and enforce consistency across routes.

Accessibility-Conscious Motion

Motion patterns are centralized and designed to honor reduced-motion preferences, preserving structure without forcing animation.

What I Built

I delivered Maren end-to-end: concept, brand direction, IA, UX patterns, visual system, component architecture, typed content modeling, implementation, and deployment-ready setup.

The project demonstrates ownership across strategic framing, design execution, and frontend engineering quality.

Key Challenges Solved

Keeping Visual Personality While Maintaining Usability

The interface needed to feel distinctive and premium without reducing scanability, contrast, or conversion clarity.

Creating Cohesion Across Different Page Archetypes

Home storytelling, catalogue browsing, long-form journal reading, and utility pages required different layouts while still feeling like one system.

Balancing Motion With Performance

Animation was scoped to high-value interactions and section reveals so the site retained atmosphere without becoming heavy.

Quality And Reliability

Quality effort focused on maintainability, predictable rendering, and interaction clarity.

  • typed route and content contracts
  • componentized layout and media primitives
  • responsive testing across major page templates
  • reduced-motion aware behavior in animated components
  • metadata, sitemap, and robots support for production realism

Deployment And Operations

Maren is structured for straightforward deployment as a static-first Next.js site with modern frontend tooling and repository-based workflows.

  • single Next.js app deployment path
  • production build via standard npm scripts
  • remote repository configured for main-branch delivery
  • portable structure suitable for future CMS or API integration

What I Would Build Next

  • replace static content modules with a lightweight CMS while preserving type safety
  • add image optimization workflow tailored to portfolio publishing
  • introduce analytics events for key conversion surfaces
  • add richer case-study overlays for process visibility
  • ship expanded social asset automation for launch campaigns