Go to main page

Design

Visual language and design foundations used in this portfolio. For technical component documentation, see the Storybook.

Colors

Typography

Hero Name

Font weight animation for the main name. Font family: Satoshi.

MarcLlobet

Title

Section title with highlighted letter in accent color. Font family: Stardom.

fluency report

wordle app

semantic git

Body Text

Paragraph text. Font family: Satoshi.

Done mainly with TypeScript along with React, Styled Components and Vitest.

Demo Code

Shapes

Infinite animation

MorphShape with continuous animation between circle and triangle.

Morphing shape

Triggered animation

MorphShape that animates when the button is pressed.

Morphing shape

Spacing Scale

Golden Ratio

Spacing scale based on the golden ratio (1.618).

×1
×2
×3
×4
×5

Layout Features

Desktop

20px base
MarcLlobet

flex-direction: row. Lateral aside.

Mobile

16px base
MarcLlobet

Smaller title (4.05rem ≈ 65px).

Landscape

14px base
MarcLlobet

flex-direction: column. Aside on top.

Reduced Motion

prefers-reduced-motion
MarcLlobet

No animations. Static shape.

Section Layout

Desktop

>900px · text 30ch
fluency-report

Layout flex row. Text on the left (30ch), image on the right (order: 1). Element gap: 2rem.

Mobile

≤900px · text 100%
fluency-report

Image first (order: 0), text below. Text takes 100% width (max 32ch). Reduced gap to 1rem.

Landscape

max-height: 400px
fluency-report

Smaller image (max 250px), order: 1. padding-block-start: 4dvw to compensate for aside.

Tablet

600-900px
fluency-report

Breakpoint ≤900px active: image first, text 100%. Image limited to max 450px.