Skip to content
Back to work

Websites · Other / Custom

Creative Portfolio Website

For a creative studio, an image-led portfolio website where the work is the interface, with the complete experience preserved for visitors who prefer reduced motion.

Role
Product Owner, Art Direction & Frontend Architect
Built on
React, Vite, Framer Motion, headless content
Industry
Other / Custom
Project type
Websites
Scope
Art direction, UX/UI design, frontend engineering, performance optimization.

Repository not shown as per company policy

  • 0

    content model: publishing new work needs no deployment

  • 0

    full experiences, with and without motion

  • 0

    responsive image derivatives generated per asset

  • AA

    WCAG 2.1 conformance target, verified before launch

01Challenge

Showing work well is harder than it looks.

  • Templates flatten strong work

    One fixed layout applied to every project serves the weakest piece and undersells the best one.

  • Motion competes with the work

    Animation that exists to be noticed takes attention away from the thing it is supposed to present.

  • Image weight kills the experience

    Large-format visuals are the point of the site and the fastest way to make it unusable on a normal connection.

  • Publishing became a project

    When adding a piece of work requires a developer, the portfolio goes stale between redesigns.

02Approach

Let the work set the palette. Keep the chrome quiet.

  • Design the index and detail together

    They are two states of one system, not two pages, which is what makes the transition between them meaningful.

  • Structure the content first

    A defined content model means publishing new work is a content change, and the site cannot drift into inconsistency.

  • Build the no-motion path properly

    Reduced motion is a full, designed experience rather than the same page with the animation switched off and the hierarchy lost.

03Outcome

The work is the interface. Everything else gets out of the way.

Portfolio sites tend to fail in one of two directions: so plain the work looks unconsidered, or so animated the work cannot be seen at all. The whole design problem is staying between those.

  • Art direction per project

    Each project defines its own crops and sequence rather than being forced through one fixed template, so strong work is not flattened by the grid.

  • Motion with a job

    Transitions establish the relationship between index and detail. Anything that does not clarify a state change was cut.

  • Fast is part of the design

    An image-led site that loads slowly is a slow site, whatever the design says. The asset pipeline is a design decision, not an afterthought.

What changed

  • Project imagery leads every page, with the interface kept deliberately quiet around it.
  • The complete experience works with animation switched off.
  • New work is published by adding content, without a code change or a deployment.

How it works

Content in, art-directed experience out.

new work is a content change, and the site rebuildsStructured project modelFields, not free-form pagesAsset pipelineResponsive derivatives,modern formats, on uploadArt direction rulesPer-project crops and orderStatic renderingRebuilt on publishLazy loadingBelow-fold assets deferredEdge cachingConsistent worldwideExperienceIndex and detail as one systemIndex viewLarge-format, curated sequenceDetail viewFull case presentationShared transitionOne system, not two pagesReduced-motion pathA designed alternative, not a degraded one

One run, step by step.

01 / 05

Inside the system

What it is made of, and what keeps it safe.

What it does.

  • Large-format project visuals with responsive art direction
  • Animated transitions between index and detail views
  • Full experience preserved under prefers-reduced-motion
  • Image optimization and lazy loading throughout
  • Structured project data so new work is a content change

Built with

What it runs on.

Frontend
ReactViteFramer MotionTailwind CSS
Content
Structured project modelHeadless contentArt direction rules
Assets
Responsive derivativesModern image formatsLazy loading
Delivery
Static renderingEdge cachingCI/CD
Services appliedWebsites & Web ExperiencesDigital Marketing & SEO

Attention on the work, not on the interface around it.

More work

Related projects.

View all work
WebsitesProfessional Services

Corporate Website Redesign

For an established professional services firm, a rebuilt corporate website organized around the questions clients arrive with, and editable by the firm without a developer.

AI & AutomationHealthcare

Autonomous AI Log Monitoring & Observability Platform

For a healthcare media and clinician engagement platform, a five-agent system that reads a production error, writes the fix and opens a reviewed pull request, with an engineer still deciding what ships.

Data & AnalyticsMedia & Publishing

Data & BI Modernization

For an established independent book publisher, a decade of accumulated ETL, warehouse and dashboard tools replaced with one governed cloud platform, without breaking a single number the business depended on.

Discuss a similar project.

If something here is close to what you need, tell us about your situation and we will walk you through how we would approach it.

Discuss a Similar Projectcontact@genclover.com

Intelligence → Innovation → Automation → Growth