Project Overview
This project is a fully custom portfolio website built for a graphic designer — a digital space designed to showcase creative work and serve as a living, interactive CV. The client arrived with a clear vision: a site that would put her graphic design front and center, feel unmistakably personal, and leave a lasting impression on every visitor.
The design was led by the client herself, with close technical consultation from the developer throughout the process. This collaboration shaped a product that is both visually distinctive and technically ambitious — a graphic designer portfolio that goes far beyond a simple image gallery.
Built on Next.js and powered by Sanity CMS, the site is fast, scalable, and fully editable — giving the client complete independence over her content without ever needing to touch a line of code.
Design Philosophy
The design language is clean and modern, built around the principle that the work itself should always be the hero. Every layout decision, every typographic choice, every spacing rule exists to serve the imagery — not to compete with it.
Typography and Visual Identity
The typeface of choice is Host Grotesk — a contemporary grotesque with just enough personality to feel distinctive without overpowering the visual content. It carries the site's voice: confident, refined, and modern.
Woven throughout the interface are custom SVG shapes — abstract, expressive forms that echo the client's graphic design sensibility. These shapes appear as decorative accents and structural elements alike, giving the site a cohesive visual identity that feels handcrafted rather than templated.
Interactive Layer & Custom Animations
From the very beginning, the developer's philosophy was simple: don't hold back — everything can be coded. This mindset opened the door to an interactive web design layer that transforms the site from a static portfolio into a living, breathing experience.
The Hero Section: Floating Faces
The centerpiece of the hero section is one of the most memorable interactions on the site. The client's artistic signature — a series of illustrated floating faces — levitates gently across the screen. When the user moves their cursor near them, the faces flee, drifting away with an uncanny, almost nervous energy. The moment the cursor retreats, they drift back.
This interaction was proposed by me as a way to bring the client's illustration style directly into the UI. The result is something that feels genuinely expressive — not a gimmick, but a natural extension of the designer's personality. It's the kind of detail that visitors remember long after they've left the page.
Project Folder Thumbnails
On the projects listing page, each project is represented as a folder. On hover, a project thumbnail image pops out from the folder — a small but delightful interaction that rewards curiosity and makes browsing feel playful and intuitive. These custom animations were built entirely in code, without relying on any animation libraries.
Image Presentation System
Image presentation is the most important — and the most technically challenging — part of this project. For a graphic designer portfolio, how images are displayed is not a secondary concern. It is the product.
Custom Aspect Ratios and Fully Flexible Sizing
In most web projects, images are displayed at predefined sizes — a fixed aspect ratio applied uniformly across a gallery. This project breaks that convention entirely. Each image in the gallery can have its own custom aspect ratio, or even a fully custom width and height defined independently.
This is an unprecedented implementation, built exclusively for this client. It means that a tall portrait photograph, a wide panoramic print, and a square logo mockup can all coexist in the same gallery — each displayed at the proportions that best serve the work itself. Every image tells its own story, on its own terms.
Each project page combines a short written description with this flexible image gallery system, creating a presentation format that is both informative and visually compelling.
CMS Integration with Sanity
The entire site is powered by Sanity CMS, and the integration goes far deeper than a typical headless CMS setup. Every section of the site — every heading, every paragraph, every photograph — is editable through Sanity's live editing interface.
Empowering a Non-Technical Client
The goal was to give the client full control and independence over her own website — without requiring any developer involvement for day-to-day updates. She can click on any element in the Sanity Studio, change it, and see the result live. Adding a new project, swapping a photo, updating a description — all of it is a few clicks away.
This level of CMS integration is where the project's true technical depth lies. What appears simple and elegant on the surface is underpinned by a carefully architected content model that makes complex image configurations — including those custom aspect ratios — manageable through a clean, intuitive editing interface.
Additional Features
Google Translate API Integration
The site integrates the Google Translate API to serve international visitors. Graphic design is a global language, and the client's work speaks to audiences beyond a single country. The translation layer ensures that the portfolio is accessible and readable regardless of the visitor's native language.
Password Protection
The portfolio is password-protected, granting access only to invited visitors. This is a deliberate curatorial choice — the site is not meant to be indexed and consumed by the general public, but shared selectively with potential clients, collaborators, and creative partners. It adds an air of exclusivity that aligns perfectly with the client's positioning.
A Portfolio That Earns Its Complexity
On the surface, this is a clean, minimal portfolio website. Scroll through it and it feels effortless — elegant typography, beautiful imagery, smooth interactions. But beneath that surface lies a level of technical sophistication that is rarely found in portfolio projects of this scale.
The custom image sizing system, the cursor-reactive animations, the deeply integrated Sanity CMS — each of these represents a genuine engineering challenge, solved in service of a single goal: giving a talented graphic designer a digital home that is as thoughtful and expressive as her work. This is what interactive web design looks like when it's done right.