first commit
This commit is contained in:
parent
b216a187bd
commit
f73c77f548
119 changed files with 4504 additions and 4829 deletions
576
frontend/app/css/components.css
Normal file
576
frontend/app/css/components.css
Normal file
|
|
@ -0,0 +1,576 @@
|
|||
/* Composants réutilisables — minimal & pro */
|
||||
|
||||
/* Titres de section avec liseré orange */
|
||||
.section-title {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-bottom: 0.4rem;
|
||||
margin-bottom: var(--space-6, 1.5rem);
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 56px;
|
||||
height: 3px;
|
||||
background: var(--color-accent, #ff6b35);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Grille responsive */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
||||
}
|
||||
|
||||
/* Carte */
|
||||
.card {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
padding: var(--space-6, 1.5rem);
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
/* Blocs génériques (layout de sections) */
|
||||
.block {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.block--split {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.block__media {
|
||||
flex: 0 0 96px;
|
||||
height: 96px;
|
||||
border-radius: var(--radius-md, 10px);
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
}
|
||||
|
||||
.block__content {
|
||||
flex: 1 1 360px;
|
||||
}
|
||||
|
||||
/* Feature (icône + texte) */
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4, 1rem);
|
||||
}
|
||||
|
||||
.feature__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Barre d'appel à action */
|
||||
.cta-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4, 1rem);
|
||||
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
}
|
||||
|
||||
/* Blocs génériques (layout de sections) */
|
||||
.block {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.block--split {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.block__media {
|
||||
flex: 0 0 96px;
|
||||
height: 96px;
|
||||
border-radius: var(--radius-md, 10px);
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
}
|
||||
|
||||
.block__content {
|
||||
flex: 1 1 360px;
|
||||
}
|
||||
|
||||
/* Feature (icône + texte) */
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4, 1rem);
|
||||
}
|
||||
|
||||
.feature__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: inset 0 0 0 2px rgba(255, 107, 53, 0.08);
|
||||
}
|
||||
|
||||
.feature__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Barre d'appel à action */
|
||||
.cta-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4, 1rem);
|
||||
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
DEV HERO + badges techno
|
||||
========================= */
|
||||
.dev-hero {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, var(--color-surface), var(--color-accent-50, #fff4ec));
|
||||
border-bottom: 1px solid var(--color-border, #efefef);
|
||||
padding-block: var(--space-16, 4rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dev-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -10% -20% auto -20%;
|
||||
height: 220px;
|
||||
background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%);
|
||||
opacity: .35;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
.dev-hero .headline {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.dev-hero .subheadline {
|
||||
color: var(--color-muted, #6b7280);
|
||||
max-width: 70ch;
|
||||
}
|
||||
|
||||
.tech-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: var(--space-4, 1rem);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
color: var(--color-accent-700, #c74d25);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.badge--mono {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Projets — liste en cartes
|
||||
========================= */
|
||||
.projects-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
}
|
||||
|
||||
.projects-list > li {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.projects-list > li:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
.projects-list h3 {
|
||||
margin: 0 0 var(--space-2, 0.5rem);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.projects-list p {
|
||||
margin: 0;
|
||||
color: var(--color-muted, #6b7280);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Services — cartes (features)
|
||||
========================= */
|
||||
#services ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
||||
}
|
||||
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
/* =====================================
|
||||
Compétences — skill cards & meters
|
||||
===================================== */
|
||||
.skill-grid {
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
}
|
||||
|
||||
/* Carte de compétence — plus expressive et accessible */
|
||||
.skill-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4, 1rem);
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition:
|
||||
transform 0.15s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Accent latéral qui apparaît au survol (met en valeur la carte) */
|
||||
.skill-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
background: transparent;
|
||||
border-top-left-radius: var(--radius-md, 10px);
|
||||
border-bottom-left-radius: var(--radius-md, 10px);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
.skill-card:hover::after {
|
||||
background: var(--color-accent, #ff6b35);
|
||||
}
|
||||
|
||||
/* Focus clavier visible (accessibilité) */
|
||||
.skill-card:focus-within {
|
||||
border-color: var(--color-accent, #ff6b35);
|
||||
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent, #ff6b35) 22%, transparent);
|
||||
}
|
||||
|
||||
/* Sous-blocs optionnels */
|
||||
.skill-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
.skill-card__icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.skill-card__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
.skill-card__footer {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3, 0.75rem);
|
||||
padding-top: var(--space-4, 1rem);
|
||||
border-top: 1px solid var(--color-border, #efefef);
|
||||
}
|
||||
|
||||
.skill-card__title {
|
||||
margin: 0 0 var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
.skill-card__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-meter {
|
||||
height: 8px;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-meter__bar {
|
||||
height: 100%;
|
||||
width: var(--level, 70%);
|
||||
background: linear-gradient(90deg, var(--color-accent, #ff6b35), var(--color-accent-700, #c74d25));
|
||||
}
|
||||
|
||||
/* =====================================
|
||||
Code block et stats
|
||||
===================================== */
|
||||
.code-block {
|
||||
background: #0b0f14;
|
||||
color: #e5e7eb;
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
border: 1px solid #1f2937;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.code-block .code-accent {
|
||||
color: #ffb38f;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
margin-top: var(--space-6, 1.5rem);
|
||||
}
|
||||
|
||||
.stat {
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-5, 1.25rem);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
}
|
||||
|
||||
.stat .stat__value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-accent-700, #c74d25);
|
||||
}
|
||||
|
||||
.stat .stat__label {
|
||||
color: var(--color-muted, #6b7280);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* =====================================
|
||||
Catégories + puces (chips)
|
||||
===================================== */
|
||||
section > ul > li {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
||||
}
|
||||
|
||||
section > ul > li + li {
|
||||
margin-top: var(--space-4, 1rem);
|
||||
}
|
||||
|
||||
section > ul > li > h3 {
|
||||
margin: 0 0 var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
section > ul > li > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
section > ul > li > ul > li {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
color: var(--color-accent-700, #c74d25);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Projets — liste en cartes
|
||||
========================= */
|
||||
.projects-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
}
|
||||
|
||||
.projects-list > li {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.projects-list > li:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
.projects-list h3 {
|
||||
margin: 0 0 var(--space-2, 0.5rem);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.projects-list p {
|
||||
margin: 0;
|
||||
color: var(--color-muted, #6b7280);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Services — cartes simples
|
||||
========================= */
|
||||
#services ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: var(--space-6, 1.5rem);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
|
||||
}
|
||||
|
||||
#services li {
|
||||
position: relative;
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
||||
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
|
||||
transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#services li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
width: 4px;
|
||||
background: var(--color-accent, #ff6b35);
|
||||
border-top-left-radius: var(--radius-md, 10px);
|
||||
border-bottom-left-radius: var(--radius-md, 10px);
|
||||
}
|
||||
|
||||
#services li:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--color-accent-100, #ffe4d6);
|
||||
box-shadow: var(--shadow-md, 0 2px 10px rgba(0,0,0,0.08));
|
||||
}
|
||||
|
||||
/* =====================================
|
||||
Compétences — catégories + puces (chips)
|
||||
===================================== */
|
||||
section > ul > li {
|
||||
background: var(--color-surface, #ffffff);
|
||||
border: 1px solid var(--color-border, #efefef);
|
||||
border-radius: var(--radius-md, 10px);
|
||||
padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
|
||||
}
|
||||
|
||||
section > ul > li + li {
|
||||
margin-top: var(--space-4, 1rem);
|
||||
}
|
||||
|
||||
section > ul > li > h3 {
|
||||
margin: 0 0 var(--space-3, 0.75rem);
|
||||
}
|
||||
|
||||
section > ul > li > ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
section > ul > li > ul > li {
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-accent-50, #fff4ec);
|
||||
color: var(--color-accent-700, #c74d25);
|
||||
border: 1px solid var(--color-accent-100, #ffe4d6);
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue