---
title: "Sites case study: hannahvarnell.com (launching)"
description: "Client case study: a full Sites build for creative director and director Hannah Varnell at hannahvarnell.com, her director portfolio. A film-first single-page site in her own art direction, with H-E-B, Procter & Gamble, and Square in the work grid. Built 2026; in final launch prep on her domain."
source: https://sukisong.com/work/director-portfolio-website/
updated: 2026-08-28
---
# Sites case study: hannahvarnell.com (launching)

A director with national brands in her reel. A portfolio that finally moves like her films.

Hannah Varnell is a creative director and director in Austin, Texas. H-E-B, Procter & Gamble, and Square are in her commercial grid, alongside her own documentary and founder-portrait work. The Sites engagement built hannahvarnell.com end to end: a film-first director portfolio in her own art direction, designed around her footage instead of on top of it. The site is built and in final launch prep on her domain.

## At a glance

- Client: Hannah Varnell, creative director and director (hannahvarnell.com)
- Engagement: Sites, a full design and build of her director portfolio
- Status: built 2026, in final launch prep, launching on her domain
- What I built: a single-page director portfolio that runs as one continuous scroll through eight numbered sections (work, photo, studio, about, press, contact); an editorial serif identity over full-bleed film stills and reels; a commercial work grid that puts her brand spots first; and her press placements presented alongside the work.

**08**: Numbered sections in one continuous scroll, so the site reads like a reel, not a menu

**3**: National brands in her commercial grid: H-E-B, Procter & Gamble, Square

## The starting line

A director’s portfolio has one job: get out of the footage’s way while still carrying a point of view. Template portfolio platforms do the first half and flatten the second, so every director ends up with the same grid. Hannah’s work has a distinct visual language, and the site had to hold it: her typography, her pacing, her color, with the films doing the talking.

## What the build does

- A film-first single page: full-bleed stills and reels, with the interface receding to captions and section numbers.
- Her own art direction carried through: editorial serif wordmark, lowercase system type, a dark room for the footage to glow in.
- A commercial grid that leads with the brand work: H-E-B, Procter & Gamble, Square, and her documentary and founder-portrait pieces.
- Press placements presented with the work, not buried on a separate page.
- A contact surface that states it plainly: available worldwide, based in Austin, Texas.

## The build, screen by screen

The case page shows the build itself: a browsable gallery of full-viewport screens captured from the production preview. The capture date is printed on the page and re-verified on every build. When the site goes live on her domain, this case piece links out to it.