← All work

Case 03 of 04 · Self-initiated showcase · Interactive Portfolio Website with an Animated Mascot

Meet A

This portfolio, hosted by the A from his logo, drawn and animated in code.

Meet A is Yassine Amraoui's own portfolio site: the yellow A of his YA monogram walks out of the logo, guides visitors through the work in costume, answers questions and drags a cloth across the screen between pages. Designed and built in Next.js, with the character drawn and animated in hand-written SVG and TypeScript.

Year
2026
Type
Self-initiated showcase
Role
Concept, design, character animation, development
Built with
Next.js, TypeScript, SVG animation, SEO and GEO
The portfolio's home page: the yellow A has stepped out of the YA logo, leaving a dashed outline, and stands waving beside the name Yassine Amraoui.

Act 1 · Before

A portfolio nobody could mistake for someone else's

Most portfolios look interchangeable: a grid, a big name, some motion that could come from anywhere. The brief: make the site itself the strongest case study, with an idea that could only belong to him.

  • The idea had to come from his own identity, not from a trend.

Act 2 · The work

How he built it

Structure

The logo already had a character in it

The YA monogram ends in a single yellow stroke. Give it eyes and legs and it becomes a guide: it introduces him, walks the visitor through each project in costume, and answers questions. Every section of the site became a scene for A to stand in.

  • Each section declares in its own markup where A stands, what it wears and what it says.
System

One rule: yellow belongs to A

Paper, ink and one yellow. Because nothing else on the site is yellow, the eye always finds the character. Type does the rest: Anybody at full width for headlines, Schibsted Grotesk for reading.

  • A palette with a single accent, and the accent walks around.
A case study page with A wearing a hard hat, standing on the meta row.
A in costume: a hard hat for the warehouse case.
Craft

Animation principles, applied to a letter

A is a parallelogram with rounded corners, drawn in SVG and animated frame by frame in TypeScript: anticipation before every jump, squash and stretch on landing, blinking, following the cursor, dozing off when ignored. Between pages it drags a dark cloth across the screen with the destination printed on it.

  • No video and no animation library: the motion is hand-written code.
The page transition: a dark cloth sweeping across the screen with the next case's title printed on it.
The page transition: A drags the cloth, the page changes behind it.
Build

A character that never gets in the way of search

Built in Next.js with every page rendered on the server: the content is complete without JavaScript, and A arrives on top of it. Structured data, an image sitemap and llms.txt files make the work readable for search engines and AI answer engines alike.

  • With JavaScript off, the logo keeps its painted A and every word is still there.
The playground stage: code typing on a dark stage while A stands on it.
The playground: the code on screen changes A as it types.

Act 3 · After

Live, and you're standing in it

A portfolio that demonstrates the work instead of describing it: every interaction on the site is the skill on offer, and every page is server-rendered, structured for search and readable by AI answer engines.

The site is the case study. Everything described here is running on this page right now.

Start a project like this
Next case · 04 of 04Auto CheckA concept site for a car repair shop, built to turn visits into bookings.