Martin Kinoo
CV CV GitHub GitHub LinkedIn LinkedIn
Discutons ensemble

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.

Header

Structural layer. Sticky header, nav links, frosted glass. No accent theming here.

HeaderMenu

Molecule

Preview

CV CV GitHub GitHub LinkedIn LinkedIn
Discutons ensemble

The menu appears with opacity animation on page load.

Contents

LinkComponentDestination
Design System Button tertiary small Internal - Design System
CV Button tertiary small External - PDF download
GitHub Icon link External - GitHub profile
LinkedIn Icon link External - LinkedIn profile
Discutons ensemble Button primary Internal - Contact section

Structure

.header-menu Flex container with gap
Button tertiary small DS badge link
Button tertiary small CV badge link
a.header-icon GitHub icon link
a.header-icon LinkedIn icon link
Button primary Contact CTA

Responsive

On mobile (<600px), the "Me contacter" button is hidden and gap is reduced to 20px.

kinoo.dev · Design System

Foundations
Atoms
Card
Diagram
Slider
Form
Header
Navigation
Hero
Section
Articles
Contact
Footer
Animations
Templates
DS Components