Design System
Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.
Card
Cards, content layouts, and the spotlight effect. Structural containers that hold chromatic content.
Spotlight
Molecule
Interactive spotlight effect that follows mouse movement on desktop. Creates a glowing halo that tracks the cursor.
Demo
Card 1
Hover over the container to see the spotlight effect
Card 2
Each card tracks the cursor independently
Card 3
Color is customizable via the color prop
Usage
<Spotlight color="var(--accent-bright)">...</Spotlight>Wrap content with the Spotlight component. Add data-spotlight attribute to the parent container and initialize with spotlight() function.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | required | CSS color for the spotlight glow effect |
class | string | - | Additional CSS class for the wrapper |
LogoBox
Atom
Default (centered)
<LogoBox><img src="..." /></LogoBox>Fullsize
<LogoBox fullsize><img src="..." /></LogoBox>Props
| Prop | Type | Default | Description |
|---|---|---|---|
fullsize | boolean | false | No padding, image covers the box |
class | string | - | Additional CSS classes |
H3Tagged
Molecule
Heading with an inline Tag badge. Used for card titles with categorization.
Preview
Project Title
title="Project Title" tag="React"Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | The heading text |
tag | string | required | Passed as Tag badge |
Usage
Used within CardTitle to display job titles or project names. Internally uses <Tag badge size="small" />.
Card
Molecule
Base container with gradient border.
Basic Card
Card content goes here. Cards use slots for flexible content.
<Card>...content...</Card>Card with Content
Project Title
Description du projet avec des tags et un titre.
Card Family Overview
| Component | Purpose | Usage |
|---|---|---|
Card | Base container | Wrapper with gradient border |
CardContent | Layout helper | Title + logo + body (experiences, formations) |
CardTitle | Title block | Job/project title with metadata |
CardSplit | Grid layout | Title + description + aside (realisations) |
CardDescription | Text wrapper | Paragraph gap, hides <br>, flex:1 |
CardContent
Molecule
Layout with named slots, used inside Card.
Preview
Developer
CompanyParis2024
Description of the role and responsibilities.
Slots
slot="title"Header/title area (CardTitle)slot="marge"Right-aligned content next to title (LogoBox)default slotBody: CardDescription + TagRowFluid spacing
| Element | Value | Min | Max |
|---|---|---|---|
| Card padding | clamp(24px, 0.79rem + 2.53vw, 48px) | 24px | 48px |
| Title → body gap | clamp(14px, 0.58rem + 1.05vw, 24px) | 14px | 24px |
| Title wrapper gap | clamp(14px, 0.76rem + 0.42vw, 18px) | 14px | 18px |
CardTitle
Molecule
Title block for cards with company/project metadata. Uses H3Tagged internally.
Preview
Lead Developer
CompanyParis2023 – 2024
Props
| Prop | Type | Description |
|---|---|---|
title | string | Main title (uses H3Tagged) |
tag | string | Category badge |
href | string | Company/project URL |
label | string | Link text |
location | string | Location (with dot separators) |
date | string | Date range |
CardDescription
Molecule
Text wrapper for card content. Handles paragraph gap and hides <br>.
Preview
First paragraph of the description. Handles multiple paragraphs with consistent spacing.
Second paragraph — the gap replaces manual line breaks.
Features
gap: clamp(10px, ..., 12px)Paragraph spacing (fluid)flex: 1Fills remaining card heightbr { display: none }Gap replaces line breaksCardSplit
Molecule
Two-column grid layout for cards with title, description, and aside areas.
Layout Preview
<CardSplit reverse> to flip layoutProps
| Prop | Type | Default | Description |
|---|---|---|---|
reverse | boolean | false | Flips the layout (aside on left) |
vertical | boolean | false | Single-column: title → aside → description |
Fluid spacing
| Element | Value | Min | Max |
|---|---|---|---|
| Row gap | clamp(14px, 0.58rem + 1.05vw, 24px) | 14px | 24px |
| Column gap | clamp(32px, 1.05rem + 3.37vw, 64px) | 32px | 64px |
Slots
| Slot | Grid Area | Description |
|---|---|---|
title | Top-left | Card header with H3Tagged |
description | Bottom-left | Main content area |
aside | Right column (spans 2 rows) | Image, slider, etc. |
Experience Card
Template
Composed card pattern used in the Experiences section: Spotlight + Card + CardContent + CardTitle.
Preview
Lead Developer
CompanyLille2024
- Feature or responsibility one
- Feature or responsibility two