CASE STUDY / PORTFOLIO 2026
From detail
to experience.
Digital Web Designer is my portfolio. I used it as a test bench: every decision I put to a client, I had to make here for myself, from identity to code.
The question.
A portfolio usually lists skills. I wanted this one to show them: anyone opening it should understand how I work by using the website, before reading a word.
I started from two things I already had: the logo and my own face. In the hero, an illustrated portrait sits inside a vector composition, and a Bézier path connects it to a fragment of interface.
An identity that shapes the website.
I left the logo untouched. Its slant, rounded strokes and blue dot gave me the alignments and proportions. Montserrat and the identity’s blues carry the whole website; the pixel returns in a few places as a unit of composition, with no retro nostalgia.
The experience logic.
Explore, then go deeper.
The homepage presents the role and project, then invites readers into the profile. Skills, experience and education have room on their dedicated page. Separate contact paths remain available for teams and clients.
An interaction that explains.
The hero control reveals the four Bézier nodes and handles, keeping the portrait still and the face free of overlays. The project preview lets people change width: text and image respond to the available space. Interactions remain voluntary, with no forced scrolling.
Navigation as part of the design.
The blue canvas continues the identity, while a graphite study echoes the hero. Each link has a clear destination; pointer or focus displays the corresponding diagram. The line marks exploration, while a highlighted number identifies the current page or section.
The native dialog contains focus. Escape and Close return control to the opening button; internal links move focus to their destination. Reduced motion makes opening and closing immediate.
The frontend.
No framework and no libraries: PHP for the templates, SCSS, and dependency-free JavaScript. The portrait is served as AVIF with a WebP fallback, in three widths; shapes and paths are SVG. The website loads no third-party resources and sets no cookies. The project preview responds to the width of its container, not the screen.
Text and links are available in the HTML. Interactive controls are enabled by JavaScript; the path control communicates its state to keyboard users too. Reduced motion preferences disable entrance animations and transitions.
Try the responsive layoutTools and limits.
On this project AI helped me compare concept alternatives, supported the frontend development and generated the illustrated portrait from my own photographs. The choices, the corrections and the finishing are mine.
What you will not find here: numbers. The website is new and I have no usage data to show yet. When I do, I will add it.