jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style épuré pour /code : Raleway, espacements, cards simplifiées

Browse source 
Ajoute la police Raleway (charte Tiqa) pour le h1. Supprime la
section compétences, simplifie les cards d'expérience en séparateurs,
retire les encadrés glassmorphism des sections Valeurs et Communauté,
allège les liens en ligne. Plus d'espacement vertical entre sections.
This commit is contained in:
Jalil Arfaoui 2026-02-23 01:15:59 +01:00
parent a7362730ba
commit 0ac8a33c4c
6 changed files with 83 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/assets/css/main.css
View file

@ -2,7 +2,29 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* Add Your Custom CSS Here */ @font-face {
font-family: 'Raleway';
src: url('../fonts/Raleway-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url('../fonts/Raleway-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Raleway';
src: url('../fonts/Raleway-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
.prose img { .prose img {
border-radius: 30px; border-radius: 30px;

BIN
src/assets/fonts/Raleway-Light.ttf Executable file
View file

Binary file not shown.

BIN
src/assets/fonts/Raleway-Regular.ttf Executable file
View file

Binary file not shown.

BIN
src/assets/fonts/Raleway-SemiBold.ttf Executable file
View file

Binary file not shown.

96
src/pages/code/index.astro
View file

@ -5,9 +5,7 @@ import Layout from "../../layouts/main.astro";
import Link from "../../components/Link.astro"; import Link from "../../components/Link.astro";
import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.astro"; import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.astro";
import ProjectCard from "../../components/code/ProjectCard.astro"; import ProjectCard from "../../components/code/ProjectCard.astro";
import SkillBadge from "../../components/code/SkillBadge.astro";
import logoTiqa from "../../assets/images/logo-tiqa-blanc.png"; import logoTiqa from "../../assets/images/logo-tiqa-blanc.png";
import skillsData from "../../data/skills.json";
const locale = "fr"; const locale = "fr";
@ -30,8 +28,6 @@ const recommendationTexts = recommendations.map((rec) => ({
text: rec.body || '', text: rec.body || '',
})); }));
const topSkills = skillsData.categories.slice(0, 3);
function formatMonth(dateStr: string) { function formatMonth(dateStr: string) {
const [year, month] = dateStr.split('-'); const [year, month] = dateStr.split('-');
return new Date(parseInt(year), parseInt(month) - 1) return new Date(parseInt(year), parseInt(month) - 1)
@ -44,37 +40,37 @@ function formatMonth(dateStr: string) {
facet="code" facet="code"
description="Parcours professionnel de Jalil Arfaoui : développeur freelance spécialisé en Software Craftsmanship, TDD, DDD. TypeScript, PHP, Elixir." description="Parcours professionnel de Jalil Arfaoui : développeur freelance spécialisé en Software Craftsmanship, TDD, DDD. TypeScript, PHP, Elixir."
> >
<section class="relative z-20 max-w-3xl mx-auto my-12 px-7 lg:px-0"> <section class="relative z-20 max-w-3xl mx-auto my-16 px-7 lg:px-0">
<div class="mb-10"> <div class="mb-16">
<h1 class="text-4xl sm:text-5xl font-bold text-white">Artisan du logiciel</h1> <h1 class="text-4xl sm:text-5xl font-semibold text-white font-display tracking-wide">Artisan du logiciel</h1>
<p class="mt-4 text-lg text-white/65 leading-relaxed max-w-2xl"> <p class="mt-6 text-lg text-white/60 leading-relaxed max-w-2xl">
Développeur freelance basé à <strong class="text-white">Albi</strong>. Plus de 20 ans à construire du logiciel — Craftsmanship, TDD, DDD. J'accompagne les équipes comme développeur senior, tech lead ou coach technique. Développeur freelance basé à <strong class="text-white">Albi</strong>. Plus de 20 ans à construire du logiciel — Craftsmanship, TDD, DDD. J'accompagne les équipes comme développeur senior, tech lead ou coach technique.
</p> </p>
</div> </div>
<div class="mb-12"> <div class="mb-16">
<div class="flex items-center justify-between mb-5"> <div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-white ">Parcours</h2> <h2 class="text-2xl font-bold text-white ">Parcours</h2>
<a href="/code/parcours" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tout &rarr;</a> <a href="/code/parcours" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tout &rarr;</a>
</div> </div>
<div class="space-y-3"> <div class="divide-y divide-white/[0.08]">
{recentExperiences.map((exp) => { {recentExperiences.map((exp) => {
const isOngoing = !exp.data.endDate; const isOngoing = !exp.data.endDate;
const start = formatMonth(exp.data.startDate); const start = formatMonth(exp.data.startDate);
const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent'; const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent';
return ( return (
<div class="facet-card rounded-xl bg-white/[0.06] border border-white/[0.1] p-4 hover:bg-white/[0.1] transition-colors"> <div class="py-4 first:pt-0 last:pb-0">
<div class="flex items-start justify-between gap-4"> <div class="flex items-start justify-between gap-4">
<div class="min-w-0"> <div class="min-w-0">
<p class="font-semibold text-white text-sm truncate">{exp.data.role}</p> <p class="font-semibold text-white text-sm">{exp.data.role}</p>
<p class="text-xs text-white/50 mt-0.5"> <p class="text-sm text-white/45 mt-0.5">
{exp.data.companyUrl ? ( {exp.data.companyUrl ? (
<a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a> <a href={exp.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{exp.data.company}</a>
) : exp.data.company} ) : exp.data.company}
{exp.data.location && ` · ${exp.data.location}`} {exp.data.location && ` · ${exp.data.location}`}
</p> </p>
</div> </div>
<span class:list={["text-xs whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200 font-semibold" : "text-white/40"]}> <span class:list={["text-sm whitespace-nowrap flex-shrink-0", isOngoing ? "text-purple-200" : "text-white/35"]}>
{start} — {end} {start} — {end}
</span> </span>
</div> </div>
@ -84,12 +80,12 @@ function formatMonth(dateStr: string) {
</div> </div>
</div> </div>
<div class="mb-12"> <div class="mb-16">
<div class="flex items-center justify-between mb-5"> <div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-white ">Projets</h2> <h2 class="text-2xl font-bold text-white ">Projets</h2>
<a href="/code/projets" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tous &rarr;</a> <a href="/code/projets" class="text-sm text-purple-200 hover:text-white transition-colors">Voir tous &rarr;</a>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
{projects.map((project) => ( {projects.map((project) => (
<ProjectCard <ProjectCard
title={project.data.title} title={project.data.title}
@ -104,12 +100,12 @@ function formatMonth(dateStr: string) {
</div> </div>
{recommendationTexts.length > 0 && ( {recommendationTexts.length > 0 && (
<div class="mb-12"> <div class="mb-16">
<div class="flex items-center justify-between mb-5"> <div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-white ">Recommandations</h2> <h2 class="text-2xl font-bold text-white ">Recommandations</h2>
<a href="/code/recommandations" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes &rarr;</a> <a href="/code/recommandations" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes &rarr;</a>
</div> </div>
<div class="space-y-4"> <div class="space-y-5">
{recommendationTexts.map((rec) => ( {recommendationTexts.map((rec) => (
<FeaturedRecommendation <FeaturedRecommendation
author={rec.data.author} author={rec.data.author}
@ -124,60 +120,42 @@ function formatMonth(dateStr: string) {
</div> </div>
)} )}
<div class="mb-12"> <div class="mb-16">
<div class="flex items-center justify-between mb-5"> <h2 class="text-2xl font-bold text-white mb-6">Valeurs & Approche</h2>
<h2 class="text-2xl font-bold text-white">Compétences</h2> <ul class="space-y-3 text-white/60">
<a href="/code/competences" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes &rarr;</a>
</div>
<div class="space-y-4">
{topSkills.map((category) => (
<div>
<p class="text-xs font-semibold text-white/40 uppercase tracking-wider mb-2">{category.name[locale as keyof typeof category.name]}</p>
<div class="flex flex-wrap gap-1.5">
{category.skills.map((skill) => (
<SkillBadge name={skill} />
))}
</div>
</div>
))}
</div>
</div>
<h2 class="text-2xl font-bold text-white mb-5">Valeurs & Approche</h2>
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
<ul class="space-y-3 text-white/70">
<li class="flex items-start gap-3"> <li class="flex items-start gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span> <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
<span>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span> <span>Le mouvement <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span>
</li> </li>
<li class="flex items-start gap-3"> <li class="flex items-start gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span> <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
<span>L'utilité sociale du développeur</span> <span>L'utilité sociale du développeur</span>
</li> </li>
<li class="flex items-start gap-3"> <li class="flex items-start gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span> <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
<span>Être fier de son travail, mais sans égo</span> <span>Être fier de son travail, mais sans égo</span>
</li> </li>
<li class="flex items-start gap-3"> <li class="flex items-start gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span> <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
<span>Approche <strong class="text-white">Domain Driven Design</strong></span> <span>Approche <strong class="text-white">Domain Driven Design</strong></span>
</li> </li>
<li class="flex items-start gap-3"> <li class="flex items-start gap-3">
<span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span> <span class="w-1 h-1 rounded-full bg-purple-300/60 mt-2.5 flex-shrink-0"></span>
<span>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</span> <span>Organisation <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>agile</Link> : itération et amélioration continue</span>
</li> </li>
</ul> </ul>
</div> </div>
<h2 class="text-2xl font-bold text-white mb-5">Communauté & Enseignement</h2> <div class="mb-16">
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10"> <h2 class="text-2xl font-bold text-white mb-6">Communauté & Enseignement</h2>
<p class="text-white/70 leading-relaxed"> <p class="text-white/60 leading-relaxed">
J'anime les <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters d'Albi</Link> depuis 2018. Enseignant en génie logiciel à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> d'Albi depuis 2019. J'anime les <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters d'Albi</Link> depuis 2018. Enseignant en génie logiciel à <Link href="https://www.univ-jfc.fr/" external>l'université Champollion</Link> d'Albi depuis 2019.
</p> </p>
</div> </div>
<h2 class="text-2xl font-bold text-white mb-5">En ligne</h2> <div class="mb-16">
<div class="facet-card flex flex-wrap gap-3 mb-12"> <h2 class="text-2xl font-bold text-white mb-6">En ligne</h2>
<div class="flex flex-wrap gap-x-6 gap-y-2">
{[ {[
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' }, { label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' },
{ label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' }, { label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
@ -190,20 +168,18 @@ function formatMonth(dateStr: string) {
href={link.href} href={link.href}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/[0.06] border border-white/[0.1] text-sm text-white/70 hover:bg-white/[0.12] hover:text-white transition-all duration-200" class="text-sm text-white/50 hover:text-white transition-colors py-1"
> >
{link.label} {link.label}
<svg class="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a> </a>
))} ))}
</div> </div>
</div>
<div class="text-center pt-8 border-t border-white/[0.08]"> <div class="text-center pt-10 border-t border-white/[0.06]">
<Image src={logoTiqa} alt="Logo Tiqa" class="mx-auto mb-4" width={160} /> <Image src={logoTiqa} alt="Logo Tiqa" class="mx-auto mb-4" width={160} />
<p class="text-sm text-white/40"> <p class="text-sm text-white/30">
<strong class="text-white/60">SAS Tiqa</strong><br /> <strong class="text-white/45">SAS Tiqa</strong><br />
12, rue Fabre d'Églantine — 81 000 Albi<br /> 12, rue Fabre d'Églantine — 81 000 Albi<br />
811 917 871 RCS Albi 811 917 871 RCS Albi
</p> </p>

6
tailwind.config.mjs
View file

@ -3,7 +3,11 @@ export default {
darkMode: "class", darkMode: "class",
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: { theme: {
extend: {}, extend: {
fontFamily: {
display: ['Raleway', 'sans-serif'],
},
},
}, },
plugins: [require("@tailwindcss/typography")], plugins: [require("@tailwindcss/typography")],
}; };