Style épuré pour /code : Raleway, espacements, cards simplifiées
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:
parent
a7362730ba
commit
0ac8a33c4c
6 changed files with 83 additions and 81 deletions
|
|
@ -2,7 +2,29 @@
|
|||
@tailwind components;
|
||||
@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 {
|
||||
border-radius: 30px;
|
||||
|
|
|
|||
BIN
src/assets/fonts/Raleway-Light.ttf
Executable file
BIN
src/assets/fonts/Raleway-Light.ttf
Executable file
Binary file not shown.
BIN
src/assets/fonts/Raleway-Regular.ttf
Executable file
BIN
src/assets/fonts/Raleway-Regular.ttf
Executable file
Binary file not shown.
BIN
src/assets/fonts/Raleway-SemiBold.ttf
Executable file
BIN
src/assets/fonts/Raleway-SemiBold.ttf
Executable file
Binary file not shown.
|
|
@ -5,9 +5,7 @@ import Layout from "../../layouts/main.astro";
|
|||
import Link from "../../components/Link.astro";
|
||||
import FeaturedRecommendation from "../../components/code/FeaturedRecommendation.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 skillsData from "../../data/skills.json";
|
||||
|
||||
const locale = "fr";
|
||||
|
||||
|
|
@ -30,8 +28,6 @@ const recommendationTexts = recommendations.map((rec) => ({
|
|||
text: rec.body || '',
|
||||
}));
|
||||
|
||||
const topSkills = skillsData.categories.slice(0, 3);
|
||||
|
||||
function formatMonth(dateStr: string) {
|
||||
const [year, month] = dateStr.split('-');
|
||||
return new Date(parseInt(year), parseInt(month) - 1)
|
||||
|
|
@ -44,37 +40,37 @@ function formatMonth(dateStr: string) {
|
|||
facet="code"
|
||||
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">
|
||||
<div class="mb-10">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold text-white">Artisan du logiciel</h1>
|
||||
<p class="mt-4 text-lg text-white/65 leading-relaxed max-w-2xl">
|
||||
<section class="relative z-20 max-w-3xl mx-auto my-16 px-7 lg:px-0">
|
||||
<div class="mb-16">
|
||||
<h1 class="text-4xl sm:text-5xl font-semibold text-white font-display tracking-wide">Artisan du logiciel</h1>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-2xl font-bold text-white">Parcours</h2>
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<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 →</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="divide-y divide-white/[0.08]">
|
||||
{recentExperiences.map((exp) => {
|
||||
const isOngoing = !exp.data.endDate;
|
||||
const start = formatMonth(exp.data.startDate);
|
||||
const end = exp.data.endDate ? formatMonth(exp.data.endDate) : 'Présent';
|
||||
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="min-w-0">
|
||||
<p class="font-semibold text-white text-sm truncate">{exp.data.role}</p>
|
||||
<p class="text-xs text-white/50 mt-0.5">
|
||||
<p class="font-semibold text-white text-sm">{exp.data.role}</p>
|
||||
<p class="text-sm text-white/45 mt-0.5">
|
||||
{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>
|
||||
) : exp.data.company}
|
||||
{exp.data.location && ` · ${exp.data.location}`}
|
||||
</p>
|
||||
</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}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -84,12 +80,12 @@ function formatMonth(dateStr: string) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-2xl font-bold text-white">Projets</h2>
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<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 →</a>
|
||||
</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) => (
|
||||
<ProjectCard
|
||||
title={project.data.title}
|
||||
|
|
@ -104,12 +100,12 @@ function formatMonth(dateStr: string) {
|
|||
</div>
|
||||
|
||||
{recommendationTexts.length > 0 && (
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-2xl font-bold text-white">Recommandations</h2>
|
||||
<div class="mb-16">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<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 →</a>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-5">
|
||||
{recommendationTexts.map((rec) => (
|
||||
<FeaturedRecommendation
|
||||
author={rec.data.author}
|
||||
|
|
@ -124,86 +120,66 @@ function formatMonth(dateStr: string) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center justify-between mb-5">
|
||||
<h2 class="text-2xl font-bold text-white">Compétences</h2>
|
||||
<a href="/code/competences" class="text-sm text-purple-200 hover:text-white transition-colors">Voir toutes →</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">
|
||||
<div class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-white mb-6">Valeurs & Approche</h2>
|
||||
<ul class="space-y-3 text-white/60">
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-bold text-white mb-5">Communauté & Enseignement</h2>
|
||||
<div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
|
||||
<p class="text-white/70 leading-relaxed">
|
||||
<div class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-white mb-6">Communauté & Enseignement</h2>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 class="text-2xl font-bold text-white mb-5">En ligne</h2>
|
||||
<div class="facet-card flex flex-wrap gap-3 mb-12">
|
||||
{[
|
||||
{ label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' },
|
||||
{ label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
|
||||
{ label: 'Stack Overflow', href: 'https://stackexchange.com/users/54164/jalil' },
|
||||
{ label: 'GitHub', href: 'https://github.com/JalilArfaoui' },
|
||||
{ label: 'Framagit', href: 'https://framagit.org/jalil' },
|
||||
{ label: 'Forge personnelle', href: 'https://forge.tiqa.fr' },
|
||||
].map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
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"
|
||||
>
|
||||
{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>
|
||||
))}
|
||||
<div class="mb-16">
|
||||
<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: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
|
||||
{ label: 'Stack Overflow', href: 'https://stackexchange.com/users/54164/jalil' },
|
||||
{ label: 'GitHub', href: 'https://github.com/JalilArfaoui' },
|
||||
{ label: 'Framagit', href: 'https://framagit.org/jalil' },
|
||||
{ label: 'Forge personnelle', href: 'https://forge.tiqa.fr' },
|
||||
].map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-sm text-white/50 hover:text-white transition-colors py-1"
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</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} />
|
||||
<p class="text-sm text-white/40">
|
||||
<strong class="text-white/60">SAS Tiqa</strong><br />
|
||||
<p class="text-sm text-white/30">
|
||||
<strong class="text-white/45">SAS Tiqa</strong><br />
|
||||
12, rue Fabre d'Églantine — 81 000 Albi<br />
|
||||
811 917 871 RCS Albi
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@ export default {
|
|||
darkMode: "class",
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
display: ['Raleway', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue