Jalil Arfaoui
a3732887f5
Remplacement de la page unique /code par un hub avec 4 sous-pages : parcours, projets, compétences, recommandations (FR/EN/AR). Les données statiques (experiences.json, projects.json) sont remplacées par des collections Astro (experiences, projects, recommendations) avec support trilingue. Les recommandations sont les vrais textes LinkedIn. Le design utilise du glassmorphism sur fond violet avec des composants dédiés (NavigationCard, ProjectCard, RecommendationCard, SkillBadge...). Le CSS facet est scopé proprement pour ne plus casser les composants.
57 lines
1.7 KiB
Text
57 lines
1.7 KiB
Text
---
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
technologies?: string[];
|
|
url?: string;
|
|
github?: string;
|
|
featured?: boolean;
|
|
}
|
|
|
|
const { title, description, technologies, url, github, featured = false } = Astro.props;
|
|
---
|
|
|
|
<div class:list={[
|
|
"facet-card rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02]",
|
|
featured
|
|
? "bg-white/[0.12] border-purple-300/20 hover:bg-white/[0.18] hover:border-purple-300/30"
|
|
: "bg-white/[0.06] border-white/[0.1] hover:bg-white/[0.12] hover:border-white/[0.2]",
|
|
]}>
|
|
<div class="flex items-start justify-between mb-2">
|
|
<h3 class="text-lg font-bold text-white">
|
|
{title}
|
|
</h3>
|
|
{featured && (
|
|
<span class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-purple-400/20 text-purple-200 border border-purple-300/20">
|
|
Featured
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<p class="text-sm text-white/60 leading-relaxed flex-1 mb-4">
|
|
{description}
|
|
</p>
|
|
|
|
{technologies && technologies.length > 0 && (
|
|
<div class="flex flex-wrap gap-1.5 mb-4">
|
|
{technologies.map((tech) => (
|
|
<span class="inline-block px-2 py-0.5 text-xs rounded-full bg-white/[0.08] text-white/60 border border-white/[0.08]">
|
|
{tech}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div class="flex gap-4">
|
|
{url && (
|
|
<a href={url} target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-purple-200 hover:text-white transition-colors">
|
|
Voir le site →
|
|
</a>
|
|
)}
|
|
{github && (
|
|
<a href={github} target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-white/50 hover:text-white transition-colors">
|
|
GitHub →
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|