Design System

Documentation complète du design system du thème Jekyll Maxime. Cette page présente tous les composants disponibles avec leurs options de personnalisation.

Table des matières

Composants de base
Composants d’image
Composants de liste
Composants de carte
Composants de section
Sections complètes
- Section CTA
- Section CTA Finale
Composants spéciaux
- Terminal Animé

Composants de base

Badge

Badges utilisés pour les labels et tags dans les sections.

Fichiers: _includes/components/badge.html _sass/components/_badge.scss

Badge Hero par défaut

✨ Freelance

Badge Hero personnalisé

🚀 Disponible

Badge Tag avec icône

👋 À propos de moi

Badge Tag personnalisé

💼 Mes services

Badge Services avec icône

🚀 Mes services

Badge Services personnalisé

⚡ Accélération tech

Badge Tag sans icône

Contact

Badge Services sans icône

Formation

Usage Liquid:

{% include components/badge.html
  type="hero"
  icon="rocket"
  text="Disponible pour de nouveaux projets"
%}

Paramètres:

type: Style du badge (hero, about, services)
icon: Icône à afficher (emoji ou nom)
text: Texte du badge

Title Hero

Titres principaux avec effet de gradient.

Fichiers: _includes/components/title-hero.html _sass/components/_title-hero.scss

TITLE HERO

Titre Hero Standard

Salut, moi c'est Maxime 👋 CTO, Tech advisor, sparing partner

Titre Hero Personnalisé

Bienvenue sur mon site Développeur Full Stack

Titre Hero avec Emoji

Hello World! 🌍 Passionné de technologie

Titre Hero Minimal

Mon Portfolio Créateur digital

Usage Liquid:

{% include components/title-hero.html
  title="CTO & Leader"
  highlight="Produit Tech"
%}

Paramètres:

title: Texte principal du titre
highlight: Texte avec effet gradient

Bouton CTA

Boutons d’appel à l’action avec styles primary et secondary.

Fichiers: _includes/components/cta-button.html _sass/components/_cta-button.scss

Bouton par défaut (primary)

Faisons connaissance

Bouton primary explicite

Bouton primary

Bouton secondary

Bouton large

Bouton secondaire externe

Usage Liquid:

{% include components/cta-button.html
  url="https://example.com"
  text="Contactez-moi"
  style="primary"
  icon="arrow"
  extern=true
%}

Paramètres:

url: Lien du bouton (défaut: site.data.theme.site.cta_url)
text: Texte du bouton
style: primary (gradient) ou secondary (outline)
size: large pour un bouton plus grand
icon: arrow ou download
extern: true pour ouvrir dans un nouvel onglet
class: Classes CSS additionnelles

Composants d’image

Image

Composant d’image standard avec lazy loading.

Fichiers: _includes/components/image.html _sass/components/_image.scss

Image par défaut

Disponible pour de nouveaux projets

Avec image personnalisée

Disponible pour de nouveaux projets

Sans status

Avec status personnalisé

En mission actuellement

Image et status personnalisés

Disponible pour consultation

Usage Liquid:

{% include components/image.html
  src="/assets/images/photo.jpg"
  alt="Description de l'image"
  class="custom-class"
%}

Image Circle

Images circulaires pour les avatars et photos de profil.

Fichiers: _includes/components/image-circle.html _sass/components/_image-circle.scss

Image circle par défaut

Disponible pour de nouveaux projets

Avec image personnalisée

Disponible pour de nouveaux projets

Sans status

Avec status personnalisé

En mission actuellement

Image et status personnalisés

Disponible pour consultation

Usage Liquid:

{% include components/image-circle.html
  src="/assets/images/avatar.jpg"
  alt="Photo de profil"
  size="large"
%}

Image Secondary

Images avec style secondaire et effets.

Fichiers: _includes/components/image-secondary.html _sass/components/_image-secondary.scss

Image Secondary par défaut

20+

ans
d'expérience

Avec image personnalisée

20+

ans
d'expérience

Avec badge personnalisé

années
d'expérience

Sans badge

Complètement personnalisée

10+

projets
réalisés

Avec badge différent

100%

satisfaction
client

Composants de liste

List Checked

Liste avec icônes de validation.

Fichiers: _includes/components/list-checked.html _sass/components/_list-checked.scss

List Checked par défaut

Mes compétences principales

Management

Conception produit & Agilité

Fullstack web et mobile

Cloud & devops

Nocode

Avec 3 éléments

Technologies

React

Node.js

Python

Avec icônes personnalisées

Services

Développement

Conseil

Formation

Sans titre

Frontend

Backend

DevOps

Mobile

Avec un seul élément

Spécialité

Architecture logicielle

Usage Liquid:

{% include components/list-checked.html items="Item 1, Item 2, Item 3" %}

List Horizontal Icon

Liste horizontale avec icônes.

Fichiers: _includes/components/list-horizontal-icon.html _sass/components/_list-horizontal-icon.scss

List Horizontal Icon par défaut

Code de qualité

Je privilégie la maintenabilité et les bonnes pratiques dans chaque ligne de code.

Design thinking

Une approche centrée utilisateur pour créer des expériences intuitives.

Performance

Des applications rapides et optimisées pour tous les appareils.

Avec 2 éléments

Innovation

Toujours à la pointe des dernières technologies et tendances.

Collaboration

Travail en équipe efficace avec une communication claire.

Avec icônes personnalisées

Sécurité

Protection des données et respect de la vie privée.

Accessibilité

Applications inclusives pour tous les utilisateurs.

Évolutivité

Architectures robustes qui grandissent avec votre entreprise.

Avec un seul élément

Excellence technique

Maîtrise approfondie des technologies modernes et des meilleures pratiques de développement.

Avec emojis

🚀 Innovation

Développement de solutions créatives et innovantes.

💡 Créativité

Approche créative pour résoudre les défis complexes.

🎯 Précision

Attention aux détails et livraison de qualité.

List Footer Link

Liens de navigation pour le footer.

Fichiers: _includes/components/list-footer-link.html _sass/components/_list-footer-link.scss

List Footer Link par défaut

Navigation

Avec liens externes

Sans liens (texte simple)

Technologies

Typescript / NodeJS / NestJS
Python / Flask / FastAPI
Ruby / Ruby on Rails
VueJS / NuxtJS
Docker / Kubernetes / Terraform

Sans titre

Avec un seul élément

Support

Centre d'aide

Composants de carte

Card Quote

Cartes de témoignages et citations.

Fichiers: _includes/components/card-quote.html _sass/components/_card-quote.scss

Card Quote par défaut

⭐⭐⭐⭐⭐

"Citation par défaut"

Nom de l\

Rôle de l\

Card Quote personnalisée

⭐⭐⭐⭐⭐

"Un développeur exceptionnel qui a su transformer notre vision en réalité technique."

Marie Dubois

CEO, TechStart

Avec 4 étoiles

⭐⭐⭐⭐

"Collaboration fluide et résultats dépassant nos attentes."

Pierre Martin

CTO, InnovCorp

Sans étoiles

⭐⭐⭐⭐⭐

"Une expertise technique remarquable et une approche très professionnelle."

Sarah Chen

Product Manager, DigitalFlow

Avec avatar personnalisé

⭐⭐⭐⭐⭐

"Le projet a été livré en avance avec une qualité exceptionnelle."

Thomas Laurent

Directeur Technique, WebAgency

Card Quote courte

⭐⭐⭐⭐⭐

"Excellent travail !"

Julie Moreau

Chef de projet

Usage Liquid:

{% include components/card-quote.html
  quote="Citation du témoignage"
  author="Nom de l'auteur"
  role="Poste"
  company="Entreprise"
%}

Card Highlight

Cartes de mise en avant avec icônes.

Fichiers: _includes/components/card-highlight.html _sass/components/_card-highlight.scss

Card Highlight par défaut

Titre de la carte

Avec badges

🚀

Développement Web

Création d'applications web modernes et performantes avec les dernières technologies.

Frontend, Backend, API, Base de données

Avec liste

📱

Applications Mobiles

Développement d'applications mobiles cross-platform et natives.

Interface utilisateur, Performance, Tests, Déploiement

Sans icône

Consulting Tech

Accompagnement dans vos choix technologiques et l'optimisation de vos processus.

Audit, Formation, Migration, Optimisation

Card Highlight simple

🎨

Design UI/UX

Conception d'interfaces utilisateur intuitives et esthétiques.

Wireframes, Prototypes, Tests utilisateurs

Avec mots-clés longs

☁️

Cloud & DevOps

Mise en place d'infrastructures cloud scalables et automatisées.

Infrastructure as Code, Monitoring, Backup, Sécurité

Card Experience

Cartes d’expérience professionnelle pour le CV.

Fichiers: _includes/components/card-experience.html _sass/components/_card-experience.scss

Card Experience par défaut

Direction d'une équipe de 5 développeurs sur des projets innovants utilisant React, Node.js et AWS.

Augmentation de 40% de la productivité de l'équipe,Implémentation d'une architecture microservices,Réduction des bugs de 60% grâce aux tests automatisés

React,Node.js,AWS,Team Leadership,Agile

Lead Developer

TechCorp

2020 - 2023

Direction d'une équipe de 5 développeurs sur des projets innovants utilisant React, Node.js et AWS.

Augmentation de 40% de la productivité de l'équipe,Implémentation d'une architecture microservices,Réduction des bugs de 60% grâce aux tests automatisés

React,Node.js,AWS,Team Leadership,Agile

Poste actuel

Cofondation et direction technique d'une startup spécialisée dans l'IA générative.

Levée de fonds de 2M€,Recrutement d'une équipe de 8 personnes,Lancement du MVP en 6 mois

AI,Python,Strategic Planning,Fundraising,Product Management

CTO & Co-founder

StartupInnovante

2024 - 2024 Présent

Cofondation et direction technique d'une startup spécialisée dans l'IA générative.

Levée de fonds de 2M€,Recrutement d'une équipe de 8 personnes,Lancement du MVP en 6 mois

AI,Python,Strategic Planning,Fundraising,Product Management

Avec expansion (plus de 3 achievements)

Développement d'applications web complexes pour des clients internationaux.

Migration réussie de 50+ applications legacy,Formation de 15 développeurs juniors,Optimisation des performances de 70%,Mise en place de la CI/CD,Création d'une librairie de composants réutilisables,Amélioration de l'accessibilité web

Vue.js,Laravel,PostgreSQL,Docker,Kubernetes

Senior Full-Stack Developer

DigitalAgency

2018 - 2019

Développement d'applications web complexes pour des clients internationaux.

Vue.js,Laravel,PostgreSQL,Docker,Kubernetes

Sans logo (placeholder)

Développement d'interfaces utilisateur modernes et responsives.

Création de 20+ sites web,Amélioration de l'UX de 50%,Optimisation SEO

HTML5,CSS3,JavaScript,jQuery,Bootstrap

Frontend Developer

WebStudio

2017 - 2018

Développement d'interfaces utilisateur modernes et responsives.

Création de 20+ sites web,Amélioration de l'UX de 50%,Optimisation SEO

HTML5,CSS3,JavaScript,jQuery,Bootstrap

Avec détails supplémentaires

Développement de solutions web sur mesure pour des PME.

Livraison de 15 projets,100% de satisfaction client,Création d'un système de gestion de contenu

PHP,MySQL,WordPress,JavaScript

Freelance Developer

Indépendant

2016 - 2016

Développement de solutions web sur mesure pour des PME.

Livraison de 15 projets,100% de satisfaction client,Création d'un système de gestion de contenu

PHP,MySQL,WordPress,JavaScript

Card Experience courte

Première expérience professionnelle dans le développement web.

HTML,CSS,JavaScript,PHP

Junior Developer

TechStart

2015 - 2015

Première expérience professionnelle dans le développement web.

HTML,CSS,JavaScript,PHP

Composants de section

Section Header

En-têtes de section avec badge et titre.

Fichiers: _includes/components/section-header.html _sass/components/_section-header.scss

Section Header par défaut

À propos de moi

Titre de section

Section Header complète

🚀 Mes services

Comment puis-je vous aider ?

Je propose une gamme complète de services pour transformer vos idées en solutions digitales performantes et évolutives.

Avec highlight

💬 Mes recommendations

Ils me font confiance

Grâce à mon engagement et ma culture de l'impact, je suis un partenaire de confiance pour vos projets.

Sans badge

À propos de moi développeur passionné

Découvrez mon parcours et mes compétences dans le développement web et mobile.

Section Header simple

📝 Blog

Mes derniers articles

Retrouvez mes réflexions sur le développement, l'entrepreneuriat et les nouvelles technologies.

Avec titre long

🎯 Portfolio

Découvrez mes réalisations et projets

Une sélection de mes projets les plus marquants, allant du développement web aux applications mobiles.

Usage Liquid:

{% include components/section-header.html
  badge_icon="star"
  badge_text="Mes Services"
  title="Ce que je peux faire pour vous"
  highlight="pour vous"
  description="Description de la section"
%}

CTA Info

Bloc d’information avec appel à l’action.

Fichiers: _includes/components/cta-info.html _sass/components/_cta-info.scss

CTA Info par défaut

⏱️ 30 minutes • 💬 Personnalisé • 🎯 Impactant

Avec 2 éléments

🚀 Rapide • 💡 Innovant

Avec 4 éléments

⚡ Express • 🎨 Créatif • 🔧 Technique • 📈 Résultats

Avec icônes personnalisées

🔥 Hot • ⭐ Premium • 💎 Exclusif

Avec un seul élément

✨ Unique

Stat Number

Statistiques avec nombres animés.

Fichiers: _includes/components/stat-number.html _sass/components/_stat-number.scss

Stat Number par défaut

98%

Satisfaction client

Différents formats

50+

Projets réalisés

5.0

Note moyenne

48h

Temps de réponse

100%

Taux de réussite

Grands nombres

1M+

Utilisateurs

99.9%

Uptime

Nombres décimaux

4.8

Note moyenne

2.5x

Amélioration

Avec durée

24h

Support

7j/7

Disponibilité

Usage Liquid:

{% include components/stat-number.html
  number="15+"
  label="Années d'expérience"
%}

Sections complètes

Section CTA

Section d’appel à l’action avec fond gradient.

Section CTA d'exemple

Description personnalisée pour la démonstration

Faisons connaissance

Usage Liquid:

{% include sections/cta-section.html
  title="Titre de la section"
  description="Description de la section"
%}

Section CTA Finale

Section CTA finale avec design premium.

Prêt à découvrir votre projet ?

Transformons ensemble votre vision en réalité digitale. Planifiez dès aujourd'hui un rendez-vous.

Faisons connaissance Voir mes réalisations

Composants spéciaux

Terminal Animé

Terminal avec animation de frappe pour la section hero.

Fichiers: _includes/components/animated-terminal.html _sass/components/_animated-terminal.scss

$ whoami

maxime.lenne@tech-leader:~$

$ cat skills.txt

CTO | Product Leader | Tech Innovation

$ ls achievements/

10+ years experience | 50+ projects | 100% satisfaction

Configuration du thème

Les couleurs et paramètres du thème sont configurables via _data/theme.yml:

# Couleurs personnalisées
colors:
  primary: "#2563eb"
  secondary: "#10b981"

# Configuration layout
layout:
  header_height: 80
  container_max_width: 1440

Voir la documentation complète des composants pour plus de détails.

Design System

Table des matières

Composants de base

Badge

Badge Hero par défaut

Badge Hero personnalisé

Badge Tag avec icône

Badge Tag personnalisé

Badge Services avec icône

Badge Services personnalisé

Badge Tag sans icône

Badge Services sans icône

Title Hero

TITLE HERO

Titre Hero Standard

Salut, moi c'est Maxime 👋 CTO, Tech advisor, sparing partner

Titre Hero Personnalisé

Bienvenue sur mon site Développeur Full Stack

Titre Hero avec Emoji

Hello World! 🌍 Passionné de technologie

Titre Hero Minimal

Mon Portfolio Créateur digital

Bouton CTA

Bouton par défaut (primary)

Bouton primary explicite

Bouton secondary

Bouton large

Bouton avec URL personnalisée

Bouton secondaire

Bouton avec classe personnalisée

Bouton par défaut

Bouton avec lien externe

Bouton secondaire externe

Composants d’image

Image

Image par défaut

Avec image personnalisée

Sans status

Avec status personnalisé

Image et status personnalisés

Image Circle

Image circle par défaut

Avec image personnalisée

Sans status

Avec status personnalisé

Image et status personnalisés

Image Secondary

Image Secondary par défaut

Avec image personnalisée

Avec badge personnalisé

Sans badge

Complètement personnalisée

Avec badge différent

Composants de liste

List Checked

List Checked par défaut

Mes compétences principales

Avec 3 éléments

Technologies

Avec icônes personnalisées

Services

Sans titre

Avec un seul élément

Spécialité

List Horizontal Icon

List Horizontal Icon par défaut

Code de qualité

Design thinking

Performance

Avec 2 éléments

Innovation

Collaboration

Avec icônes personnalisées

Sécurité

Accessibilité

Évolutivité

Avec un seul élément

Excellence technique

Avec emojis

🚀 Innovation