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

ProjectCard : glow au hover, titre plus grand, technos principales différenciées

Browse source
This commit is contained in:
Jalil Arfaoui 2026-03-10 23:45:22 +01:00
parent 58594c37bc
commit 412e7033d1
1 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/code/ProjectCard.astro
View file

@ -14,28 +14,35 @@ const { title, description, technologies, featured = false, detailUrl, lang = 'f
const isRtl = lang === 'ar'; const isRtl = lang === 'ar';
const readMoreLabel = t('projects', 'readMore', lang); const readMoreLabel = t('projects', 'readMore', lang);
const primaryTechs = technologies?.slice(0, 3) ?? [];
const secondaryTechs = technologies?.slice(3) ?? [];
--- ---
<a href={detailUrl} class:list={[ <a href={detailUrl} class:list={[
"facet-card rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02] no-underline", "project-card group relative rounded-2xl border p-6 flex flex-col h-full transition-all duration-300 hover:scale-[1.02] no-underline overflow-hidden",
featured featured
? "bg-white/[0.12] border-purple-300/20 hover:bg-white/[0.18] hover:border-purple-300/30" ? "bg-white/[0.10] border-purple-300/20"
: "bg-white/[0.06] border-white/[0.1] hover:bg-white/[0.12] hover:border-white/[0.2]", : "bg-white/[0.05] border-white/[0.08]",
]}> ]}>
<div class="mb-2"> <div class="mb-3">
<h3 class="text-lg font-bold text-white"> <h3 class="text-xl font-bold text-white">
{title} {title}
</h3> </h3>
</div> </div>
<p class="text-sm text-white/60 leading-relaxed flex-1 mb-4"> <p class="text-white/60 leading-relaxed flex-1 mb-5">
{description} {description}
</p> </p>
{technologies && technologies.length > 0 && ( {(primaryTechs.length > 0 || secondaryTechs.length > 0) && (
<div class="flex flex-wrap gap-1.5 mb-4"> <div class="flex flex-wrap gap-1.5 mb-5">
{technologies.map((tech) => ( {primaryTechs.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]"> <span class="inline-block px-2.5 py-1 text-xs font-medium rounded-full bg-purple-400/15 text-purple-200 border border-purple-300/15">
{tech}
</span>
))}
{secondaryTechs.map((tech) => (
<span class="inline-block px-2.5 py-1 text-xs rounded-full bg-white/[0.05] text-white/40 border border-white/[0.06]">
{tech} {tech}
</span> </span>
))} ))}
@ -50,3 +57,11 @@ const readMoreLabel = t('projects', 'readMore', lang);
)} )}
</span> </span>
</a> </a>
<style>
.project-card:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(168, 85, 247, 0.25);
box-shadow: 0 0 24px rgba(168, 85, 247, 0.08), 0 4px 16px rgba(0, 0, 0, 0.2);
}
</style>