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 readMoreLabel = t('projects', 'readMore', lang);
const primaryTechs = technologies?.slice(0, 3) ?? [];
const secondaryTechs = technologies?.slice(3) ?? [];
---
<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
? "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]",
? "bg-white/[0.10] border-purple-300/20"
: "bg-white/[0.05] border-white/[0.08]",
]}>
<div class="mb-2">
<h3 class="text-lg font-bold text-white">
<div class="mb-3">
<h3 class="text-xl font-bold text-white">
{title}
</h3>
</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}
</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]">
{(primaryTechs.length > 0 || secondaryTechs.length > 0) && (
<div class="flex flex-wrap gap-1.5 mb-5">
{primaryTechs.map((tech) => (
<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}
</span>
))}
@ -50,3 +57,11 @@ const readMoreLabel = t('projects', 'readMore', lang);
)}
</span>
</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>