refonte UI: navbar épurée, projets en liste unique, logo Gitea
All checks were successful
Deploy production / build-deploy (push) Successful in 25s

- header: retrait du bouton GitHub (desktop + mobile), reste dans Hero/Contact
- hero: bouton « Télécharger mon CV » désactivé, « Voir mes projets » promu en CTA principal
- projets: fusion phares/autres en une seule grille (ordre récent → ancien)
- contact: retrait du lien « site » (pointait vers le site courant)
- icônes: vrai logo Gitea (tasse) à la place du git-branch générique
- nettoyage du CSS/code mort (.is-other, .m-github, icône site)
This commit is contained in:
Johan LEROY
2026-06-23 11:49:23 +02:00
parent c80783dfc4
commit bd569658d1
7 changed files with 13 additions and 40 deletions

View File

@@ -20,7 +20,6 @@ import { social, coffeeUrl } from "../data/content";
<a class="social-link" href={social.github} target="_blank" rel="noopener" aria-label="GitHub"><Icon name="github" /></a> <a class="social-link" href={social.github} target="_blank" rel="noopener" aria-label="GitHub"><Icon name="github" /></a>
<a class="social-link" href={social.gitea} target="_blank" rel="noopener" aria-label="Gitea"><Icon name="gitea" /></a> <a class="social-link" href={social.gitea} target="_blank" rel="noopener" aria-label="Gitea"><Icon name="gitea" /></a>
<a class="social-link" href={social.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn"><Icon name="linkedin" /></a> <a class="social-link" href={social.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn"><Icon name="linkedin" /></a>
<a class="social-link" href={social.site} target="_blank" rel="noopener" aria-label="Site"><Icon name="site" /></a>
</div> </div>
<div class="echo"><b>$</b> echo "écris-moi"</div> <div class="echo"><b>$</b> echo "écris-moi"</div>

View File

@@ -1,6 +1,6 @@
--- ---
import Icon from "./Icon.astro"; import Icon from "./Icon.astro";
import { social, coffeeUrl } from "../data/content"; import { coffeeUrl } from "../data/content";
const nav = [ const nav = [
{ label: "À propos", href: "#about", id: "about" }, { label: "À propos", href: "#about", id: "about" },
@@ -36,16 +36,6 @@ const nav = [
<Icon name="moon" class="icon-moon" /> <Icon name="moon" class="icon-moon" />
</button> </button>
<a
class="btn-icon btn-github--header"
href={social.github}
target="_blank"
rel="noopener"
aria-label="GitHub (ouvre un nouvel onglet)"
>
<Icon name="github" />
</a>
<button <button
id="burger" id="burger"
type="button" type="button"
@@ -62,7 +52,6 @@ const nav = [
<div id="mobile-menu" class="mobile-menu"> <div id="mobile-menu" class="mobile-menu">
{nav.map((i) => <a class="mobile-link" href={i.href}>{i.label}</a>)} {nav.map((i) => <a class="mobile-link" href={i.href}>{i.label}</a>)}
<div class="mobile-cta"> <div class="mobile-cta">
<a class="m-github" href={social.github} target="_blank" rel="noopener">GitHub</a>
<a <a
class="m-coffee" class="m-coffee"
href={coffeeUrl} href={coffeeUrl}

View File

@@ -11,10 +11,12 @@ import { profile, social, terminalText } from "../data/content";
<p class="hero-lede">{profile.lede}</p> <p class="hero-lede">{profile.lede}</p>
<div class="cta-row"> <div class="cta-row">
{/* Bouton CV désactivé temporairement — réactiver en décommentant :
<a class="btn btn-primary" href="/cv.pdf" download> <a class="btn btn-primary" href="/cv.pdf" download>
<Icon name="download" size={16} /> Télécharger mon CV <Icon name="download" size={16} /> Télécharger mon CV
</a> </a>
<a class="btn btn-secondary" href="#projets"> */}
<a class="btn btn-primary" href="#projets">
Voir mes projets <Icon name="arrow" size={16} /> Voir mes projets <Icon name="arrow" size={16} />
</a> </a>
</div> </div>

View File

@@ -3,7 +3,7 @@
pleins (github/linkedin), stroke pour le reste (style lucide). */ pleins (github/linkedin), stroke pour le reste (style lucide). */
interface Props { interface Props {
name: name:
| "github" | "gitea" | "linkedin" | "mail" | "site" | "github" | "gitea" | "linkedin" | "mail"
| "arrow" | "download" | "external" | "coffee" | "arrow" | "download" | "external" | "coffee"
| "sun" | "moon" | "burger" | "sun" | "moon" | "burger"
| "gamepad" | "film" | "music" | "code"; | "gamepad" | "film" | "music" | "code";
@@ -12,17 +12,16 @@ interface Props {
} }
const { name, size = 18, class: className } = Astro.props; const { name, size = 18, class: className } = Astro.props;
const FILL = new Set(["github", "linkedin"]); const FILL = new Set(["github", "linkedin", "gitea"]);
const STROKE_WIDTH: Record<string, number> = { const STROKE_WIDTH: Record<string, number> = {
arrow: 2, external: 2, burger: 2, globe: 1.7, download: 1.9, site: 1.7, arrow: 2, external: 2, burger: 2, globe: 1.7, download: 1.9,
}; };
const PATHS: Record<string, string> = { const PATHS: Record<string, string> = {
github: `<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23a11.5 11.5 0 0 1 3.003-.404c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>`, github: `<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23a11.5 11.5 0 0 1 3.003-.404c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .322.216.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>`,
linkedin: `<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>`, linkedin: `<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>`,
gitea: `<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>`, gitea: `<path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/>`,
mail: `<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m3 6 9 7 9-7"/>`, mail: `<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m3 6 9 7 9-7"/>`,
site: `<circle cx="12" cy="12" r="9"/><path d="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z"/>`,
arrow: `<path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>`, arrow: `<path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>`,
download: `<path d="M12 3v12"/><path d="m7 11 5 5 5-5"/><path d="M5 21h14"/>`, download: `<path d="M12 3v12"/><path d="m7 11 5 5 5-5"/><path d="M5 21h14"/>`,
external: `<path d="M7 17 17 7"/><path d="M8 7h9v9"/>`, external: `<path d="M7 17 17 7"/><path d="M8 7h9v9"/>`,

View File

@@ -1,6 +1,6 @@
--- ---
import ProjectCard from "./ProjectCard.astro"; import ProjectCard from "./ProjectCard.astro";
import { projectsFeatured, projectsOther } from "../data/content"; import { projects } from "../data/content";
--- ---
<section class="section container" id="projets"> <section class="section container" id="projets">
<div class="reveal" style="margin-bottom:36px;"> <div class="reveal" style="margin-bottom:36px;">
@@ -8,13 +8,7 @@ import { projectsFeatured, projectsOther } from "../data/content";
<h2 class="h2">Réalisations</h2> <h2 class="h2">Réalisations</h2>
</div> </div>
<div class="reveal label-mono" style="margin-bottom:16px;">// projets phares</div>
<div class="reveal grid-projects"> <div class="reveal grid-projects">
{projectsFeatured.map((p) => <ProjectCard project={p} />)} {projects.map((p) => <ProjectCard project={p} />)}
</div>
<div class="reveal label-mono" style="margin:38px 0 16px;">// autres projets</div>
<div class="reveal grid-projects is-other">
{projectsOther.map((p) => <ProjectCard project={p} />)}
</div> </div>
</section> </section>

View File

@@ -63,7 +63,6 @@ export const social = {
github: "https://github.com/JohanLeroy", github: "https://github.com/JohanLeroy",
gitea: "https://git.lidge.fr/johanleroy", gitea: "https://git.lidge.fr/johanleroy",
linkedin: "https://www.linkedin.com/in/johan-leroy-472409180/", linkedin: "https://www.linkedin.com/in/johan-leroy-472409180/",
site: "https://johanleroy.fr",
}; };
/* URL du bouton « café » — à remplacer par le service retenu /* URL du bouton « café » — à remplacer par le service retenu
@@ -77,7 +76,8 @@ export const stats = [
{ n: "OSS", l: "contributeur open-source" }, { n: "OSS", l: "contributeur open-source" },
]; ];
export const projectsFeatured: Project[] = [ /* Liste unique, dans l'ordre de développement (du plus récent au plus ancien). */
export const projects: Project[] = [
{ {
id: "techos", id: "techos",
title: "Techos", title: "Techos",
@@ -112,9 +112,6 @@ export const projectsFeatured: Project[] = [
link: "https://lidge.fr", link: "https://lidge.fr",
img: "/images/projets/lidge.png", img: "/images/projets/lidge.png",
}, },
];
export const projectsOther: Project[] = [
{ {
id: "arboretum", id: "arboretum",
title: "Arboretum", title: "Arboretum",

View File

@@ -102,7 +102,6 @@ html[data-theme="light"] .icon-moon{display:block;}
.mobile-link{font-family:var(--font-mono);font-size:15px;color:var(--text);padding:11px 4px;border-bottom:1px solid var(--border-soft);} .mobile-link{font-family:var(--font-mono);font-size:15px;color:var(--text);padding:11px 4px;border-bottom:1px solid var(--border-soft);}
.mobile-cta{display:flex;gap:10px;margin-top:14px;} .mobile-cta{display:flex;gap:10px;margin-top:14px;}
.mobile-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:9px;font-size:14px;font-weight:600;} .mobile-cta a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:9px;font-size:14px;font-weight:600;}
.mobile-cta .m-github{border:1px solid var(--border);color:var(--text);}
.mobile-cta .m-coffee{border:1px solid var(--coffee);color:var(--coffee);} .mobile-cta .m-coffee{border:1px solid var(--coffee);color:var(--coffee);}
/* ---------- Hero ---------- */ /* ---------- Hero ---------- */
@@ -147,13 +146,11 @@ html[data-theme="light"] .icon-moon{display:block;}
/* ---------- Projets ---------- */ /* ---------- Projets ---------- */
.grid-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;} .grid-projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.grid-projects.is-other{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;} .card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow);} .card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow);}
.card--link{cursor:pointer;text-decoration:none;color:inherit;} .card--link{cursor:pointer;text-decoration:none;color:inherit;}
.card--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;} .card--link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.card-media{position:relative;height:168px;overflow:hidden;background:var(--surface);padding:16px 20px;} .card-media{position:relative;height:168px;overflow:hidden;background:var(--surface);padding:16px 20px;}
.is-other .card-media{height:140px;}
.card-media img{width:100%;height:100%;object-fit:contain;display:block;} .card-media img{width:100%;height:100%;object-fit:contain;display:block;}
/* Swap du logo selon le thème (:root = sombre → on montre la variante claire/blanche). */ /* Swap du logo selon le thème (:root = sombre → on montre la variante claire/blanche). */
.card-media--themed .logo-light{display:none;} .card-media--themed .logo-light{display:none;}
@@ -161,19 +158,15 @@ html[data-theme="light"] .icon-moon{display:block;}
[data-theme="light"] .card-media--themed .logo-dark{display:none;} [data-theme="light"] .card-media--themed .logo-dark{display:none;}
.card-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 130% at 0% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 58%),var(--surface);} .card-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 130% at 0% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 58%),var(--surface);}
.card-mono span{font-family:var(--font-mono);font-size:44px;font-weight:700;color:var(--accent);opacity:.92;} .card-mono span{font-family:var(--font-mono);font-size:44px;font-weight:700;color:var(--accent);opacity:.92;}
.is-other .card-mono span{font-size:38px;}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;flex:1;} .card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:11px;flex:1;}
.is-other .card-body{padding:16px 16px 18px;gap:10px;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;} .status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.status-dot{width:7px;height:7px;border-radius:50%;} .status-dot{width:7px;height:7px;border-radius:50%;}
.ext-link{color:var(--text-muted);display:inline-flex;transition:color .25s ease;} .ext-link{color:var(--text-muted);display:inline-flex;transition:color .25s ease;}
.card--link:hover .ext-link{color:var(--accent);} .card--link:hover .ext-link{color:var(--accent);}
.card-title{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--text);} .card-title{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--text);}
.is-other .card-title{font-size:17px;}
.card-sub{font-family:var(--font-mono);font-size:12px;color:var(--accent);} .card-sub{font-family:var(--font-mono);font-size:12px;color:var(--accent);}
.card-desc{font-size:14px;color:var(--text-muted);line-height:1.55;} .card-desc{font-size:14px;color:var(--text-muted);line-height:1.55;}
.is-other .card-desc{font-size:13.5px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;} .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;}
.chip{font-family:var(--font-mono);font-size:11px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:var(--bg);} .chip{font-family:var(--font-mono);font-size:11px;padding:4px 9px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:var(--bg);}
@@ -256,7 +249,7 @@ html[data-theme="light"] .icon-moon{display:block;}
/* ---------- Responsive : repli nav < 820px ---------- */ /* ---------- Responsive : repli nav < 820px ---------- */
@media (max-width:819px){ @media (max-width:819px){
.nav-links,.btn-coffee--header,.btn-github--header{display:none;} .nav-links,.btn-coffee--header{display:none;}
.burger{display:inline-flex;} .burger{display:inline-flex;}
} }
@media (max-width:560px){ @media (max-width:560px){