Background Colors

Text Colors

Accent Colors

Section Theme Colors

Each section uses a themed color palette. These override --accent-color and --secondary-accent-color at the section level.

Green (Realisations)

Pink (Experiences)

Purple (Formations)

Card Colors

Border Colors

Usage

Import variables from @/styles/variables.css or use CSS custom properties directly in your styles.

Headings

Size Variables

Font Family

The website uses Outfit as the primary font family with weights from 100 to 800.

Scale

Section Margin

Default

With Icon

Highlighted

Props

Default

Props

Primary

Secondary

CSS Classes

Interactions

Both variants have hover states that lift by 4px. Secondary also changes background and border color on hover.

Default Color

Primary Color

As Link

When href is provided, renders as <a> instead of <button>.

With Open State

Add .open class to trigger BurgerIcon animation.

Props

Variants

Colors

States

Usage

Designed to be used inside an IconButton. The animation triggers when the parent element has the .open class.

Props

Animation

The three lines transform using CSS transitions (0.3s ease):

• Top line rotates 45deg and moves down
• Middle line fades out
• Bottom line rotates -45deg and moves up

Default

Props

Usage

Typically used within CardTitle to display job titles or project names with their category/type.

Basic Card

Card with Content

Card Family Overview

Animation Attributes

Add data-animate-elem to elements for reveal animations. Used with revealCards utility for staggered fade-in effects.

Slots

Usage

Props

Usage

Layout Preview

Props

Slots

Demo

Usage

Wrap content with the Spotlight component. Add data-spotlight attribute to the parent container and initialize with spotlight() function.

Props

Implementation

The parent container needs data-spotlight attribute and must be initialized with spotlight(container) from @/lib/dom/spotlight. The function tracks mouse movement and updates --mouse-x and --mouse-y CSS properties.

Pattern Overview

Section Header

All sections use <span class="subtitle"> + <h2> pattern with section-specific accent colors.

Structure

Section Theming

Each section overrides CSS custom properties for its color theme:

#experiences {
  --accent-color: #f68dab;
  --secondary-accent-color: #f8c8d9;
  --card-title-font-size: 16px;
}

Data Attributes

Grid Layouts

Spotlight Integration

Each section initializes the spotlight effect via script:

import { spotlight } from "@/lib/dom/spotlight";

const container = document.getElementById("experiences-grid");
if (container) spotlight(container);

Demo

Example Card

Demo

Company Location 2024

This demonstrates the card pattern used in section grids.

Tag 1

Tag 2

Preview

Props

Animation

Each character is wrapped in a <span class="letter"> element. The heroAnime.ts animation applies a staggered translateY effect to reveal letters sequentially.

Usage

Styling

Preview

Structure

Frosted Glass

Responsive

Usage

Included in Layout.astro. No props required.

Preview

The menu appears with opacity animation on page load.

Contents

Structure

Responsive

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

Icon Variant

Badge Variant

External Links

The external prop adds target="_blank" and rel="noreferrer nofollow noopener".

Props

Tooltip

Icon variant displays a tooltip above on hover. Badge variant has no tooltip since it already shows text.

Hover States

Both variants transition to accent color on hover. Icon SVG paths and badge border/text all use the same accent color for consistency.

Interactive Demo

Click or hover on links to see the indicator animation.

Link Colors

Features

• Animated indicator follows active/hovered link
• Indicator color matches section theme via data-color
• Scroll-based detection updates active state
• Smooth 300ms transitions
• Hidden on mobile (<980px)

HTML Structure

Data Attributes

CSS Classes

JavaScript Integration

Uses viewDetection for scroll tracking. Waits for onHeroAnimationComplete before enabling interactions on pages with hero.

Structure

ContactForm (SolidJS)

Uses client:load directive for immediate hydration. Form validation handled by Modular Forms.

Layout

Form Fields

Usage

No props required. Form uses environment variable VITE_WEB3FORMS_ACCESS_KEY for API authentication.

Integration

The #contact section is detected by FloatingContact and viewDetection utilities for scroll-based navigation highlighting.

Preview

Behavior

Positioning

View Detection Integration

Uses viewDetection utility from @/lib/dom/viewDetection to detect when #contact section enters the viewport. The .current class is toggled to fade out the button.

Usage

No props required. Component is self-contained with its own scroll detection logic.

Preview

With Active State

Props

SidebarItem Type

Features

• Sticky positioning at top: 126px
• Active state highlighting with accent color
• Hover effects with subtle background
• Responsive: horizontal layout on mobile (<900px)

Usage with View Detection

Use viewDetection utility for automatic scroll-based highlighting. The utility adds/removes .active class based on which section is in view.

Experience Card

The primary card pattern used in the Experiences section. Combines Spotlight, Card, CardContent, and CardTitle.

<Spotlight color="var(--pink)">
  <Card>
    <CardContent>
      <CardTitle slot="title" ... />
      <p slot="description">...</p>
      <ul>...</ul>
      <img slot="marge" ... />
    </CardContent>
  </Card>
</Spotlight>

Hero Title Block

The hero section title pattern combining HeroSubtitle (animated) with the main h1.

<div class="title">
  <HeroSubtitle subtitle="Développeur Frontend Freelance" />
  <h1><span>Martin</span> <span>Kinoo</span></h1>
</div>

Tech Stack Tags

A collection of Tag components displaying technology stack. Used in Hero section.

<ul>
  {techs.map(tech => (
    <li>
      <Tag
        title={tech.title}
        hero={true}
        icon={tech.icon}
        highlight={tech.highlight}
      />
    </li>
  ))}
</ul>

Section Header

Standard section header pattern with subtitle and main heading. Used across all main sections.

<section id="experiences">
  <span class="subtitle">Mes</span>
  <h2>Expériences</h2>
  ...
</section>

Component Hierarchy

Example

Props

Usage

<DSBlock title="Section Title">
  <DSPreview>
    <!-- Component preview -->
  </DSPreview>
  <DSCode>code example</DSCode>
</DSBlock>

DSBlock provides consistent 32px margin-top spacing between sections. Use it to wrap each documentation section.

Example

Props

Usage

<DSPreview>
  <Button>Click me</Button>
</DSPreview>

<DSPreview class="custom-class">
  <!-- Custom styling via class -->
</DSPreview>

DSPreview uses 32px padding and 16px gap. Pass custom classes to override flex direction or alignment.

Inline Example

Block Example

const greeting = "Hello";
console.log(greeting);

Props

Usage

<!-- Inline code -->
<DSCode inline>&lt;Button /&gt;</DSCode>

<!-- Block code -->
<DSCode>
const foo = "bar";
console.log(foo);
</DSCode>

Example

With Code Cells

Props

Cell can be a string or { code: string } for code formatting.

Usage

<DSPropsTable
  headers={["Prop", "Type", "Default", "Description"]}
  rows={[
    [{ code: "title" }, "string", "required", "The title text"],
    [{ code: "disabled" }, "boolean", "false", "Disables the component"],
  ]}
/>

Example

Props

StructureRow: { code: string, description: string, indent?: number }

Usage

<DSStructure
  rows={[
    { code: "<section>", description: "Container" },
    { code: "<header>", description: "Header area", indent: 1 },
    { code: "<main>", description: "Main content", indent: 1 },
  ]}
/>

Example

This is a note with inline code support. Use it for tips and additional context.

Props

Usage

DSNote has 12px margin-top and 70% opacity. Supports inline <code> tags.