Couleurs
Palette principale via CSS custom properties.
Tokens globaux
Background
var(--background)
Foreground
var(--foreground)
Accent
var(--accent)
Accent Dim
var(--accent-dim)
Muted
var(--muted)
Card
var(--card)
Border
var(--border)
Fonds de section (scroll-driven)
Le background du body change dynamiquement au scroll via interpolation linéaire.
Dégradé animé
Utilisé sur le titre hero "expériences qui vendent" — animation de 12s.
Cyan
#22d3ee
Violet
#a78bfa
Pink
#f472b6
Typographie
4 polices, chacune avec un rôle précis.
--font-bebas · Display
Hero titlesBebas Neue
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
--font-outfit · Headings
Section titles & cardsOutfit
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
--font-poppins · Logo
Navbar brandMarc Ponroy
Semi-bold · Uppercase · Letter-spacing 0.2em · 12px
--font-geist-sans · Body
Paragraphes & UIGeist Sans
Développeur expert UX/UI. Design systems, interfaces haute performance et parcours utilisateur pensés pour convertir — sans sacrifier l'émotion.
--font-geist-mono · Mono
Labels & tagsGeist Mono
UX/UI · Product · Code
Échelle typographique
Composants
Tous les composants réutilisables avec leurs props.
<Button />
Bouton multi-variantes. Rend un <a> si href est fourni, sinon un <button>.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| children | ReactNode | — | Contenu du bouton |
| variant | "primary" | "solid" | "outline" | "link" | "primary" | Style visuel du bouton |
| size | "sm" | "md" | "lg" | "md" | Taille du bouton |
| href | string | — | URL — transforme en <a> |
| dark | boolean | true | Adapte les couleurs pour fond sombre ou clair |
| className | string | "" | Classes CSS additionnelles |
Variants
Sizes
Dark mode
<Card />
Carte service avec icône, titre et description.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| icon | string | — | Icône affichée en haut (caractère ou emoji) |
| title | string | — | Titre de la carte (Outfit font) |
| description | string | — | Texte descriptif |
| className | string | "" | Classes CSS additionnelles |
UX & parcours
Recherche utilisateur, wireframes, parcours et tests pour des produits qui convertissent.
UI & design systems
Interfaces cohérentes, accessibles et évolutives. Figma, tokens, composants réutilisables.
Front & performance
React, Next.js, Tailwind. Code propre, rapide et maintenable.
<SectionTitle />
Bloc titre de section avec tag mono, heading Outfit et description optionnelle.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| tag | string | — | Label mono uppercase au-dessus du titre (ex: 'Expertise') |
| title | string | — | Titre principal (Outfit font) |
| description | ReactNode | — | Paragraphe sous le titre |
| dark | boolean | false | Mode sombre (texte blanc) |
| className | string | "" | Classes CSS additionnelles |
Expertise
De l'intention au pixel.
Design d'interface, systèmes de design, prototypage et implémentation front.
Contact
Prêt à collaborer ?
Un produit à lancer, une refonte UX/UI ou une équipe à renforcer.
<GradientText />
Texte avec dégradé animé cyan → violet → pink.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| children | ReactNode | — | Contenu texte |
| as | "span" | "p" | "h1" | "h2" | "span" | Élément HTML rendu |
| className | string | "" | Classes CSS additionnelles |
expériences qui vendent.
<GridPattern />
Grille de carreaux en fond. Se positionne en absolute dans son parent.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| size | number | 32 | Taille des carreaux en px |
| opacity | number | 0.4 | Opacité de la grille (0–1) |
| color | string | "var(--border)" | Couleur des lignes |
| className | string | "" | Classes CSS additionnelles |
<NoiseOverlay />
Texture bruit SVG en overlay. Fixed par défaut pour couvrir toute la page.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| opacity | number | 0.03 | Opacité du bruit (0–1) |
| fixed | boolean | true | Position fixed (true) ou absolute (false) |
| className | string | "" | Classes CSS additionnelles |
<NavBrand />
Logo texte du header. Disparaît en slide-left au scroll.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| name | string | "Marc Ponroy" | Texte affiché |
| visible | boolean | true | Contrôle la visibilité (slide + opacity) |
| dark | boolean | true | Texte blanc (true) ou noir (false) |
| className | string | "" | Classes CSS additionnelles |
<CTACard />
Carte d'appel à l'action pour fond sombre. Accepte des enfants pour les boutons.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| title | string | — | Titre principal (Outfit font) |
| description | string | — | Sous-titre |
| children | ReactNode | — | Contenu additionnel (boutons, etc.) |
| className | string | "" | Classes CSS additionnelles |
Prêt à passer au niveau supérieur ?
Un produit à lancer, une refonte UX/UI ou une équipe à renforcer.
hello@example.com<CodeBlock />
Bloc de code avec bouton copier. Client component.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| code | string | — | Code source à afficher |
| label | string | — | Label affiché dans le header (ex: 'JSX', 'CSS') |
| collapsible | boolean | false | Masque le code par défaut avec un bouton pour l'afficher |
<Input />
Champ texte avec label, bordure arrondie, icônes, états erreur/hint.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| label | string | — | Texte du label (obligatoire) |
| error | string | — | Message d'erreur (active le style rouge) |
| hint | string | — | Texte d'aide sous le champ |
| leadingIcon | ReactNode | — | Icône à gauche du champ |
| trailingIcon | ReactNode | — | Icône à droite du champ |
| disabled | boolean | false | Désactive le champ |
| ...rest | InputHTMLAttributes | — | Toutes les props HTML standard (type, name, value, onChange, etc.) |
Basique
Avec icônes
États
Ton adresse pro de préférence.
Adresse email invalide.
<Textarea />
Zone de texte avec label, bordure arrondie, compteur de caractères et états erreur/hint.
| Prop | Type | Défaut | Description |
|---|---|---|---|
| label | string | — | Texte du label flottant (obligatoire) |
| error | string | — | Message d'erreur (active le style rouge) |
| hint | string | — | Texte d'aide sous le champ |
| maxLength | number | — | Nombre max de caractères |
| showCount | boolean | false | Affiche le compteur de caractères |
| disabled | boolean | false | Désactive le champ |
| ...rest | TextareaHTMLAttributes | — | Toutes les props HTML standard (name, value, onChange, rows, etc.) |
Variantes
Projet, budget, délais, stack…
Le message doit contenir au moins 20 caractères.
Animations
Gradient shift
background-position 0%→100%→0% · 12s · ease-in-out · infinite
expériences qui vendent.
Background scroll interpolation
lerp() via requestAnimationFrame — mise à jour directe du DOM.