0 → 1
OWNERSHIP
SOLO, START TO FINISH
Design, code, photography, video. One person. One year. No agency. No team.
Case study — Brand · Web · Photography
Abode
Interior Design
Live site0→1. One designer. One developer. One photographer. One year. A full brand system, CMS-driven website, photography, and video for an art-forward interior design studio.
01
The brief
A self-sustaining brand platform — designed, built, photographed, and launched by one person. The client runs it independently. The press noticed on its own.
- BRAND DESIGN
- FRONTEND DEV
- CMS ARCHITECTURE
- PHOTOGRAPHY
- VIDEOGRAPHY
- NEXT.JS
- TAILWIND CSS
- CONTENTFUL
- VERCEL
∞
ARCHITECTURE
CLIENT-MANAGED FOREVER
Full Contentful content model designed from scratch. New projects auto-populate by category. No developer needed - ever.
20x
IMPACT
ORGANIC TRAFFIC GROWTH
7 → 200+ daily users at soft launch. Zero paid acquisition. The design drove the growth.
3+
RECOGNITION
PRESS FEATURES
Richmond Magazine, Virginia Living, Designer House 2026. Architectural Digest submission in consideration.
02
The Pages
No templates from a library. Every view was designed end-to-end — interaction patterns, component variants, responsive behavior. The portfolio grid auto-populates from Contentful as new projects are added.
03
DESIGNED THE MODEL, NOT JUST USED THE TOOL.
Anyone can connect Contentful to a Next.js app. The harder work is designing the content model itself — deciding what's a content type, what's a field, what's a relationship, and how it maps to the UI the client will actually use. Every content type on this site was architected to give the client full editorial control without touching code. New portfolio projects auto-populate their category pages. Press items appear on the About page automatically. The news panel updates from a single Contentful entry.
Contentful content model - 5 types designed from scratch
Project
PORTFOLIO ENTRY
titleslugcategory -> refcoverImagegallery[] -> refdescription (rich text)links (array of links)locationfeatured
Team Member
ABOUT PAGE
nameroleportraitbio (rich text)order
Press Item
ABOUT PAGE · AUTO-LIST
publicationtitleurldatecoverImagedescription (rich text)
News Post
SLIDE PANEL · OVERLAY
headlinedatebody (rich text)linkdescription (rich text)previewImage
Site Config
GLOBAL SETTINGS
heroVideofeaturedProjects[] -> reffooterGraphic -> refcontactEmail -> linkfaviconsiteNamesiteDescriptionsiteKeywordssiteAuthorsiteUrlsiteInstagramsiteLinkedin
04
VISUAL LANGUAGE
The brief from the client was simple: look nice. No trend-chasing, no gimmicks — just timeless.
The color palette came from the studio space itself. I photographed it, color-picked directly from the shots in Photoshop, and built the entire system from there. Typography and spacing exist to serve those colors — to frame them, not compete with them.
Every component — the cards, the filters, the overlays — takes its cues from the studio's physical language: Clean lines. Deliberate negative space. Details that lead your eye to the work, not away from it. Designed to still feel right in ten years. Anyone can connect Contentful to a Next.js app. The harder work is
05
Photography & Videography
~70% of the photography on the live site was shot by me — project documentation, team portraits, and studio work. The homepage hero video was directed and shot solo.
06
UNDER THE HOOD
Why ISR (Incremental Static Regen)
Abode isn't static and isn't fully dynamic — it's in between. The client adds a project in Contentful and the page needs to reflect it, but rebuilding the entire site every time is wasteful. ISR revalidates only what changed. The pages stay fast, the content stays current, and the client never has to wait for a deploy.
The video problem
The hero video was shot on a Nikon Z6III in 6K. Getting it to load fast took several rounds of compression in Premiere, conversion to webM, then hosting on Contentful with size and quality tuning until it loaded fast enough that you didn't notice the wait.
The image pipeline
Every photo went through Lightroom and Photoshop — exported at web-optimized size, 90% quality, sharpened for screen. Then run through a local webP converter I built to squeeze them down further.
Lighthouse — production
88
Performance
6K video hero + full-bleed photography. 88 is strong for this media load.
98
Accessibility
WCAG 2.1 AA. Semantic HTML, alt text, keyboard navigation.
100
Best Practices
HTTPS, no console errors, modern APIs throughout.
100
SEO
Meta, OG tags, sitemap, structured data.
Tech stack
Next.js
Framework · App Router
JavaScript
Language
Tailwind CSS
Styling
Contentful
CMS · ISR revalidation
Vercel
Deploy · Edge CDN
next/image
Image optimization
webP converter
Local build tool · Custom