From cc52ccab0a1684fe362061e1e4d2d6d5576393f4 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:23:18 +0200
Subject: [PATCH 01/42] refactor: cards horizontales pleine largeur en mode
 client

---
 components/portfolio-content.tsx |   4 +-
 components/project-card.tsx      | 374 +++++++++++++++----------------
 2 files changed, 188 insertions(+), 190 deletions(-)

diff --git a/components/portfolio-content.tsx b/components/portfolio-content.tsx
index 5ee9cda..3891ec4 100644
--- a/components/portfolio-content.tsx
+++ b/components/portfolio-content.tsx
@@ -10,12 +10,12 @@ interface PortfolioContentProps {
 export function PortfolioContent({ projects }: PortfolioContentProps) {
   return (
     <div className="space-y-16">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      <div className="flex flex-col gap-6">
         {projects.map((project, index) => (
           <div
             key={project.id}
             style={{ animationDelay: `${index * 50}ms` }}
-            className="h-full animate-fade-in-up"
+            className="w-full animate-fade-in-up"
           >
             <ProjectCard project={project} />
           </div>
diff --git a/components/project-card.tsx b/components/project-card.tsx
index 19daa8c..7239233 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -16,235 +16,233 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isPaused = project.development_status === 'paused';
 
   return (
-    <div className={`group relative rounded-3xl overflow-hidden glass h-full flex flex-col perspective-card reveal-up transition-all duration-500 
+    <div className={`group relative rounded-3xl overflow-hidden glass w-full flex flex-col md:flex-row perspective-card reveal-up transition-all duration-500
       ${isInDev ? "border-dashed border-white/20" : "border-white/5"}
       ${isFinished ? "border-emerald-500/30 shadow-[0_0_20px_rgba(16,185,129,0.1)]" : ""}
       ${isArchived ? "border-indigo-500/30 shadow-[0_0_20px_rgba(99,102,241,0.05)]" : ""}
     `}>
-      <div className="relative z-10 h-full">
-        <div>
-          {/* Glow Effect Overlay */}
-          <div className={`absolute inset-0 transition-colors duration-500 
+      <div className="relative z-10 flex flex-col md:flex-row w-full">
+        {/* Glow Effect Overlay */}
+        <div className={`absolute inset-0 transition-colors duration-500
           ${isFinished ? "group-hover:bg-emerald-500/5" : isArchived ? "group-hover:bg-indigo-500/5" : "group-hover:bg-primary/5"}
         `} />
 
-          {project.image_url ? (
-            <div className="relative w-full aspect-video bg-muted overflow-hidden">
-              <Image
-                src={project.image_url || "/placeholder.svg"}
-                alt={`${project.title} - Project screenshot`}
-                fill
-                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-                loading="lazy"
-                decoding="async"
-                className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out 
+        {/* Image Section */}
+        {project.image_url ? (
+          <div className="relative w-full md:w-[35%] lg:w-[30%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted overflow-hidden">
+            <Image
+              src={project.image_url || "/placeholder.svg"}
+              alt={`${project.title} - Project screenshot`}
+              fill
+              sizes="(max-width: 768px) 100vw, 35vw"
+              loading="lazy"
+              decoding="async"
+              className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out
                 ${isInDev ? "grayscale brightness-50" : ""}
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-60" />
+            />
+            <div className="absolute inset-0 bg-gradient-to-r from-background via-background/60 to-transparent opacity-80" />
 
-              {isInDev && (
-                <>
-                  <div
-                    className={`absolute inset-x-0 top-0 h-[18%] construction-pattern ${isPaused ? 'paused' : ''}`}
-                    style={{
-                      maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
-                      WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
-                    }}
-                  />
-                  <div className="absolute top-3 inset-x-0 flex items-center justify-center">
-                    <div className={`px-4 py-1.5 rounded-full font-black text-[10px] uppercase tracking-widest shadow-2xl border-2 rotate-[-1deg] flex items-center gap-1.5 ${isPaused
-                        ? 'bg-orange-400 text-black border-black'
-                        : 'bg-yellow-400 text-black border-black animate-pulse'
-                        }`}>
-                        {isPaused ? (
-                          <>
-                            <Pause className="h-3 w-3" />
-                            Development paused
-                          </>
-                        ) : (
-                          <>
-                            <Play className="h-3 w-3" />
-                            Development in progress
-                          </>
-                        )}
-                      </div>
-                  </div>
-                </>
-              )}
-
-              {isFinished && (
-                <div className="absolute top-3 right-3">
-                  <div className="bg-emerald-500 text-white p-1.5 rounded-lg shadow-lg border border-emerald-400/50 animate-bounce">
-                      <Trophy className="h-4 w-4" />
+            {isInDev && (
+              <>
+                <div
+                  className={`absolute inset-x-0 top-0 h-[18%] construction-pattern ${isPaused ? 'paused' : ''}`}
+                  style={{
+                    maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
+                    WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
+                  }}
+                />
+                <div className="absolute top-3 inset-x-0 flex items-center justify-center">
+                  <div className={`px-4 py-1.5 rounded-full font-black text-[10px] uppercase tracking-widest shadow-2xl border-2 rotate-[-1deg] flex items-center gap-1.5 ${isPaused
+                      ? 'bg-orange-400 text-black border-black'
+                      : 'bg-yellow-400 text-black border-black animate-pulse'
+                    }`}>
+                      {isPaused ? (
+                        <>
+                          <Pause className="h-3 w-3" />
+                          Development paused
+                        </>
+                      ) : (
+                        <>
+                          <Play className="h-3 w-3" />
+                          Development in progress
+                        </>
+                      )}
                     </div>
                 </div>
-              )}
+              </>
+            )}
 
-              {isArchived && !isFinished && (
-                <div className="absolute top-3 right-3">
-                  <div className="bg-indigo-500/20 text-indigo-300 p-1.5 rounded-lg shadow-lg border border-indigo-400/30 backdrop-blur-md">
-                      <Archive className="h-4 w-4" />
-                    </div>
-                </div>
-              )}
-            </div>
-          ) : (
-            <div className="relative w-full aspect-video bg-muted/20 overflow-hidden border-b border-white/5">
-              <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
-                <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500 
+            {isFinished && (
+              <div className="absolute top-3 right-3">
+                <div className="bg-emerald-500 text-white p-1.5 rounded-lg shadow-lg border border-emerald-400/50 animate-bounce">
+                    <Trophy className="h-4 w-4" />
+                  </div>
+              </div>
+            )}
+
+            {isArchived && !isFinished && (
+              <div className="absolute top-3 right-3">
+                <div className="bg-indigo-500/20 text-indigo-300 p-1.5 rounded-lg shadow-lg border border-indigo-400/30 backdrop-blur-md">
+                    <Archive className="h-4 w-4" />
+                  </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="relative w-full md:w-[35%] lg:w-[30%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
+            <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
+              <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
                 ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}
               `}>
-                  <ImageOff className={`h-8 w-8 transition-transform duration-500 group-hover:scale-110 
+                <ImageOff className={`h-8 w-8 transition-transform duration-500 group-hover:scale-110
                   ${isFinished ? "text-emerald-500/40" : isArchived ? "text-indigo-500/40" : "text-muted-foreground/40 group-hover:text-primary/40"}
                 `} />
-                </div>
-                <span className={`text-[10px] font-black uppercase tracking-[0.2em] transition-colors duration-500
-                  ${isFinished ? "text-emerald-500/30" : isArchived ? "text-indigo-500/30" : "text-muted-foreground/30 group-hover:text-primary/40"}
-                `}>
-                  No preview available
-                </span>
               </div>
+              <span className={`text-[10px] font-black uppercase tracking-[0.2em] transition-colors duration-500
+                ${isFinished ? "text-emerald-500/30" : isArchived ? "text-indigo-500/30" : "text-muted-foreground/30 group-hover:text-primary/40"}
+              `}>
+                No preview available
+              </span>
             </div>
-          )}
+          </div>
+        )}
 
-          <div className="p-8 flex-1 flex flex-col space-y-6 relative z-10">
-            <div className="space-y-3">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-3">
-                  <h4 className={`text-2xl font-bold tracking-tight transition-all duration-500
+        {/* Content Section */}
+        <div className="p-6 lg:p-8 flex-1 flex flex-col justify-center space-y-4 relative z-10 min-w-0">
+          <div className="space-y-2">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex items-center gap-3 min-w-0">
+                <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
                   ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-gradient group-hover:text-primary"}
                 `}>
-                    {project.title}
-                  </h4>
-                  {isInDev && (
-                    <div className={`p-1.5 rounded-lg border ${isPaused
-                        ? 'bg-orange-400/10 border-orange-400/20'
-                        : 'bg-yellow-400/10 border-yellow-400/20'
-                        }`}>
-                        {isPaused ? (
-                          <Pause className="h-3.5 w-3.5 text-orange-400" />
-                        ) : (
-                          <Wrench className="h-3.5 w-3.5 text-yellow-400 animate-spin-slow" />
-                        )}
-                      </div>
-                  )}
-                  {isFinished && (
-                    <div className="p-1 rounded-full bg-emerald-500/20 text-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.2)]">
-                        <CheckCircle2 className="h-4 w-4" />
-                      </div>
-                  )}
-                  {isArchived && (
-                    <div className="p-1 rounded-full bg-indigo-500/20 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)]">
-                        <PackageCheck className="h-4 w-4" />
-                      </div>
-                  )}
-                </div>
-                <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow
-                ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
-              `}>
-                  <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
-                </div>
-              </div>
-              <p className={`text-muted-foreground leading-relaxed font-medium line-clamp-3 transition-colors 
-              ${isInDev ? "italic opacity-70" : ""}
-              ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
-            `}>
-                {project.description}
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              <div className="flex flex-wrap gap-2 pt-2">
-                {project.tags.map((tag) => (
-                  <Badge
-                    key={tag}
-                    variant="outline"
-                    className={`rounded-full px-4 py-1 border-white/10 transition-all font-semibold text-[10px] uppercase tracking-wider
-                    ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "bg-white/5 group-hover:border-primary/50"}
-                  `}
-                  >
-                    {tag}
-                  </Badge>
-                ))}
+                  {project.title}
+                </h4>
                 {isInDev && (
-                  <Badge variant="secondary" className={`rounded-full px-4 py-1 font-bold text-[10px] uppercase tracking-widest flex items-center gap-1 ${isPaused
-                      ? 'bg-orange-500/20 border-orange-500/30 text-orange-400'
-                      : 'bg-primary/20 border-primary/30 text-primary animate-pulse'
-                      }`}>
+                  <div className={`p-1.5 rounded-lg border shrink-0 ${isPaused
+                      ? 'bg-orange-400/10 border-orange-400/20'
+                      : 'bg-yellow-400/10 border-yellow-400/20'
+                    }`}>
                       {isPaused ? (
-                        <>
-                          <Pause className="h-3 w-3" />
-                          On pause
-                        </>
+                        <Pause className="h-3.5 w-3.5 text-orange-400" />
                       ) : (
-                        <>
-                          WIP
-                        </>
+                        <Wrench className="h-3.5 w-3.5 text-yellow-400 animate-spin-slow" />
                       )}
-                    </Badge>
+                    </div>
                 )}
                 {isFinished && (
-                  <Badge variant="secondary" className="rounded-full px-4 py-1 bg-emerald-500/20 border-emerald-500/30 text-emerald-400 font-bold text-[10px] uppercase tracking-widest shadow-[0_0_10px_rgba(16,185,129,0.2)]">
-                      Finished
-                    </Badge>
+                  <div className="p-1 rounded-full bg-emerald-500/20 text-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.2)] shrink-0">
+                      <CheckCircle2 className="h-4 w-4" />
+                    </div>
                 )}
                 {isArchived && (
-                  <Badge variant="secondary" className="rounded-full px-4 py-1 bg-indigo-500/20 border-indigo-500/30 text-indigo-400 font-bold text-[10px] uppercase tracking-widest">
-                      Archived
-                    </Badge>
+                  <div className="p-1 rounded-full bg-indigo-500/20 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)] shrink-0">
+                      <PackageCheck className="h-4 w-4" />
+                    </div>
                 )}
               </div>
+              <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
+                ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
+              `}>
+                <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
+              </div>
+            </div>
+            <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors
+              ${isInDev ? "italic opacity-70" : ""}
+              ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
+            `}>
+              {project.description}
+            </p>
+          </div>
 
+          <div className="flex flex-wrap items-center gap-3">
+            <div className="flex flex-wrap gap-2">
+              {project.tags.map((tag) => (
+                <Badge
+                  key={tag}
+                  variant="outline"
+                  className={`rounded-full px-3 py-0.5 border-white/10 transition-all font-semibold text-[10px] uppercase tracking-wider
+                    ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "bg-white/5 group-hover:border-primary/50"}
+                  `}
+                >
+                  {tag}
+                </Badge>
+              ))}
               {isInDev && (
-                <div className="w-full h-1 bg-white/5 rounded-full overflow-hidden">
-                  <div
-                    className={`h-full transition-all duration-1000 ${isPaused
-                      ? 'bg-orange-400/40'
-                      : 'bg-yellow-400/40 animate-shimmer bg-[length:200%_100%] bg-gradient-to-r from-transparent via-yellow-400/50 to-transparent'
-                      }`}
-                    style={{ width: `${project.development_progress || 0}%` }}
-                  />
-                </div>
+                <Badge variant="secondary" className={`rounded-full px-3 py-0.5 font-bold text-[10px] uppercase tracking-widest flex items-center gap-1 ${isPaused
+                    ? 'bg-orange-500/20 border-orange-500/30 text-orange-400'
+                    : 'bg-primary/20 border-primary/30 text-primary animate-pulse'
+                  }`}>
+                    {isPaused ? (
+                      <>
+                        <Pause className="h-3 w-3" />
+                        On pause
+                      </>
+                    ) : (
+                      <>
+                        WIP
+                      </>
+                    )}
+                  </Badge>
+              )}
+              {isFinished && (
+                <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-emerald-500/20 border-emerald-500/30 text-emerald-400 font-bold text-[10px] uppercase tracking-widest shadow-[0_0_10px_rgba(16,185,129,0.2)]">
+                    Finished
+                  </Badge>
+              )}
+              {isArchived && (
+                <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-indigo-500/20 border-indigo-500/30 text-indigo-400 font-bold text-[10px] uppercase tracking-widest">
+                    Archived
+                  </Badge>
               )}
             </div>
 
-            <div className="flex flex-col gap-4 pt-6 mt-auto">
-              <div className="flex gap-4">
-                {isInDev ? (
-                  <Button disabled className="flex-1 rounded-full bg-white/5 text-muted-foreground border border-white/10 cursor-not-allowed" aria-label="Coming soon">
-                    <Construction className="mr-2 h-4 w-4" aria-hidden="true" />
-                    Coming Soon
-                  </Button>
-                ) : (
-                  project.project_url && (
-                    <Button asChild size="sm" className={`flex-1 rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg
-                    ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
-                  `}>
-                      <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
-                        <ExternalLink className="mr-2 h-4 w-4" aria-hidden="true" />
-                        Live Demo
-                      </Link>
-                    </Button>
-                  )
-                )}
+            {isInDev && (
+              <div className="w-full max-w-[200px] h-1 bg-white/5 rounded-full overflow-hidden">
+                <div
+                  className={`h-full transition-all duration-1000 ${isPaused
+                    ? 'bg-orange-400/40'
+                    : 'bg-yellow-400/40 animate-shimmer bg-[length:200%_100%] bg-gradient-to-r from-transparent via-yellow-400/50 to-transparent'
+                    }`}
+                  style={{ width: `${project.development_progress || 0}%` }}
+                />
+              </div>
+            )}
+          </div>
 
-                {project.github_url && (
-                  <Button
-                    asChild
-                    variant="ghost"
-                    size="sm"
-                    className={`flex-1 rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95`}
-                  >
-                    <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
-                      <Github className="mr-2 h-4 w-4" aria-hidden="true" />
-                      Code
+          <div className="flex gap-3 pt-2">
+            {isInDev ? (
+              <Button disabled className="rounded-full bg-white/5 text-muted-foreground border border-white/10 cursor-not-allowed text-xs h-8 px-4" aria-label="Coming soon">
+                <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+                Coming Soon
+              </Button>
+            ) : (
+              project.project_url && (
+                <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
+                  ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
+                `}>
+                    <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
+                      <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+                      Live Demo
                     </Link>
                   </Button>
-                )}
-              </div>
-            </div>
+              )
+            )}
+
+            {project.github_url && (
+              <Button
+                asChild
+                variant="ghost"
+                size="sm"
+                className={`rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4`}
+              >
+                <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
+                  <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+                  Code
+                </Link>
+              </Button>
+            )}
           </div>
         </div>
       </div>

From 9b14932a52241d7e32530f7b40f8288944d20fbf Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:28:24 +0200
Subject: [PATCH 02/42] =?UTF-8?q?fix:=20ajout=20du=20d=C3=A9grad=C3=A9=20s?=
 =?UTF-8?q?mooth=20entre=20l'image=20et=20le=20texte=20sur=20les=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 7239233..71690c7 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -29,12 +29,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         {/* Image Section */}
         {project.image_url ? (
-          <div className="relative w-full md:w-[35%] lg:w-[30%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted overflow-hidden">
+          <div className="relative w-full md:w-[42%] lg:w-[38%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted overflow-hidden">
             <Image
               src={project.image_url || "/placeholder.svg"}
               alt={`${project.title} - Project screenshot`}
               fill
-              sizes="(max-width: 768px) 100vw, 35vw"
+              sizes="(max-width: 768px) 100vw, 42vw"
               loading="lazy"
               decoding="async"
               className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out
@@ -42,7 +42,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
             />
-            <div className="absolute inset-0 bg-gradient-to-r from-background via-background/60 to-transparent opacity-80" />
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-background/40 to-background" />
 
             {isInDev && (
               <>
@@ -91,7 +91,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
             )}
           </div>
         ) : (
-          <div className="relative w-full md:w-[35%] lg:w-[30%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
+          <div className="relative w-full md:w-[42%] lg:w-[38%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
             <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
               <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
                 ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}

From 5ba40642191f31a28d54ac04ce86a9df685e1b46 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:30:20 +0200
Subject: [PATCH 03/42] =?UTF-8?q?fix:=20remplace=20le=20d=C3=A9grad=C3=A9?=
 =?UTF-8?q?=20couleur=20par=20un=20blur=20d=C3=A9grad=C3=A9=20sur=20l'imag?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 71690c7..834f8f9 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -42,7 +42,13 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
             />
-            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-background/40 to-background" />
+            <div
+              className="absolute inset-0 backdrop-blur-2xl"
+              style={{
+                maskImage: 'linear-gradient(to right, transparent 20%, black 60%)',
+                WebkitMaskImage: 'linear-gradient(to right, transparent 20%, black 60%)'
+              }}
+            />
 
             {isInDev && (
               <>

From 42cea0dfee7b597ae5741a7b7241a13f9fce5ad8 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:33:10 +0200
Subject: [PATCH 04/42] =?UTF-8?q?fix:=20image=20en=20fond=20=C3=A9tendu=20?=
 =?UTF-8?q?avec=20blur=20d=C3=A9grad=C3=A9=20pour=20transition=20smooth=20?=
 =?UTF-8?q?vers=20le=20texte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 143 ++++++++++++++++++++++--------------
 1 file changed, 86 insertions(+), 57 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 834f8f9..b13f634 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -15,29 +15,79 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
 
+  const statusBadges = (
+    <>
+      {isInDev && (
+        <>
+          <div
+            className={`absolute inset-x-0 top-0 h-[18%] construction-pattern ${isPaused ? 'paused' : ''}`}
+            style={{
+              maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
+              WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
+            }}
+          />
+          <div className="absolute top-3 inset-x-0 flex items-center justify-center">
+            <div className={`px-4 py-1.5 rounded-full font-black text-[10px] uppercase tracking-widest shadow-2xl border-2 rotate-[-1deg] flex items-center gap-1.5 ${isPaused
+                ? 'bg-orange-400 text-black border-black'
+                : 'bg-yellow-400 text-black border-black animate-pulse'
+              }`}>
+                {isPaused ? (
+                  <>
+                    <Pause className="h-3 w-3" />
+                    Development paused
+                  </>
+                ) : (
+                  <>
+                    <Play className="h-3 w-3" />
+                    Development in progress
+                  </>
+                )}
+              </div>
+          </div>
+        </>
+      )}
+
+      {isFinished && (
+        <div className="absolute top-3 right-3">
+          <div className="bg-emerald-500 text-white p-1.5 rounded-lg shadow-lg border border-emerald-400/50 animate-bounce">
+              <Trophy className="h-4 w-4" />
+            </div>
+        </div>
+      )}
+
+      {isArchived && !isFinished && (
+        <div className="absolute top-3 right-3">
+          <div className="bg-indigo-500/20 text-indigo-300 p-1.5 rounded-lg shadow-lg border border-indigo-400/30 backdrop-blur-md">
+              <Archive className="h-4 w-4" />
+            </div>
+        </div>
+      )}
+    </>
+  );
+
   return (
     <div className={`group relative rounded-3xl overflow-hidden glass w-full flex flex-col md:flex-row perspective-card reveal-up transition-all duration-500
       ${isInDev ? "border-dashed border-white/20" : "border-white/5"}
       ${isFinished ? "border-emerald-500/30 shadow-[0_0_20px_rgba(16,185,129,0.1)]" : ""}
       ${isArchived ? "border-indigo-500/30 shadow-[0_0_20px_rgba(99,102,241,0.05)]" : ""}
     `}>
-      <div className="relative z-10 flex flex-col md:flex-row w-full">
+      <div className="relative z-10 w-full min-h-[300px]">
         {/* Glow Effect Overlay */}
         <div className={`absolute inset-0 transition-colors duration-500
           ${isFinished ? "group-hover:bg-emerald-500/5" : isArchived ? "group-hover:bg-indigo-500/5" : "group-hover:bg-primary/5"}
         `} />
 
-        {/* Image Section */}
-        {project.image_url ? (
-          <div className="relative w-full md:w-[42%] lg:w-[38%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted overflow-hidden">
+        {/* Desktop: Image as extended background behind content */}
+        {project.image_url && (
+          <div className="hidden md:block absolute inset-y-0 left-0 w-[65%] overflow-hidden rounded-l-3xl">
             <Image
-              src={project.image_url || "/placeholder.svg"}
+              src={project.image_url}
               alt={`${project.title} - Project screenshot`}
               fill
-              sizes="(max-width: 768px) 100vw, 42vw"
+              sizes="65vw"
               loading="lazy"
               decoding="async"
-              className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out
+              className={`object-cover object-left group-hover:scale-110 transition-transform duration-1000 ease-out
                 ${isInDev ? "grayscale brightness-50" : ""}
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
@@ -45,59 +95,38 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div
               className="absolute inset-0 backdrop-blur-2xl"
               style={{
-                maskImage: 'linear-gradient(to right, transparent 20%, black 60%)',
-                WebkitMaskImage: 'linear-gradient(to right, transparent 20%, black 60%)'
+                maskImage: 'linear-gradient(to right, transparent 0%, transparent 30%, black 60%)',
+                WebkitMaskImage: 'linear-gradient(to right, transparent 0%, transparent 30%, black 60%)'
               }}
             />
+            {statusBadges}
+          </div>
+        )}
 
-            {isInDev && (
-              <>
-                <div
-                  className={`absolute inset-x-0 top-0 h-[18%] construction-pattern ${isPaused ? 'paused' : ''}`}
-                  style={{
-                    maskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)',
-                    WebkitMaskImage: 'linear-gradient(to bottom, black 30%, transparent 100%)'
-                  }}
-                />
-                <div className="absolute top-3 inset-x-0 flex items-center justify-center">
-                  <div className={`px-4 py-1.5 rounded-full font-black text-[10px] uppercase tracking-widest shadow-2xl border-2 rotate-[-1deg] flex items-center gap-1.5 ${isPaused
-                      ? 'bg-orange-400 text-black border-black'
-                      : 'bg-yellow-400 text-black border-black animate-pulse'
-                    }`}>
-                      {isPaused ? (
-                        <>
-                          <Pause className="h-3 w-3" />
-                          Development paused
-                        </>
-                      ) : (
-                        <>
-                          <Play className="h-3 w-3" />
-                          Development in progress
-                        </>
-                      )}
-                    </div>
-                </div>
-              </>
-            )}
-
-            {isFinished && (
-              <div className="absolute top-3 right-3">
-                <div className="bg-emerald-500 text-white p-1.5 rounded-lg shadow-lg border border-emerald-400/50 animate-bounce">
-                    <Trophy className="h-4 w-4" />
-                  </div>
-              </div>
-            )}
-
-            {isArchived && !isFinished && (
-              <div className="absolute top-3 right-3">
-                <div className="bg-indigo-500/20 text-indigo-300 p-1.5 rounded-lg shadow-lg border border-indigo-400/30 backdrop-blur-md">
-                    <Archive className="h-4 w-4" />
-                  </div>
-              </div>
-            )}
+        {/* Mobile: Image in normal flow */}
+        {project.image_url && (
+          <div className="md:hidden relative w-full aspect-video bg-muted overflow-hidden">
+            <Image
+              src={project.image_url}
+              alt={`${project.title} - Project screenshot`}
+              fill
+              sizes="100vw"
+              loading="lazy"
+              decoding="async"
+              className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out
+                ${isInDev ? "grayscale brightness-50" : ""}
+                ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
+              `}
+            />
+            <div className="absolute inset-0 backdrop-blur-sm" />
+            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
+            {statusBadges}
           </div>
-        ) : (
-          <div className="relative w-full md:w-[42%] lg:w-[38%] shrink-0 aspect-video md:aspect-auto md:min-h-[300px] bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
+        )}
+
+        {/* No image placeholder */}
+        {!project.image_url && (
+          <div className="relative w-full aspect-video md:absolute md:inset-y-0 md:left-0 md:w-[42%] md:aspect-auto bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
             <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
               <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
                 ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}
@@ -116,7 +145,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         )}
 
         {/* Content Section */}
-        <div className="p-6 lg:p-8 flex-1 flex flex-col justify-center space-y-4 relative z-10 min-w-0">
+        <div className="relative z-10 p-6 lg:p-8 flex flex-col justify-center space-y-4 min-h-[300px] md:ml-[45%]">
           <div className="space-y-2">
             <div className="flex items-start justify-between gap-4">
               <div className="flex items-center gap-3 min-w-0">

From 03183f6214cbeecf9406c81e654c999813935aa3 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:36:13 +0200
Subject: [PATCH 05/42] =?UTF-8?q?fix:=20image=20s'=C3=A9tend=20sur=20toute?=
 =?UTF-8?q?=20la=20card=20avec=20blur=20gradient=20de=2038%=20=C3=A0=2055%?=
 =?UTF-8?q?,=20contenu=20=C3=A0=2042%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 324 +++++++++++++++++-------------------
 1 file changed, 153 insertions(+), 171 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index b13f634..9ef069d 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -48,7 +48,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {isFinished && (
-        <div className="absolute top-3 right-3">
+        <div className="absolute top-3 right-3 z-20">
           <div className="bg-emerald-500 text-white p-1.5 rounded-lg shadow-lg border border-emerald-400/50 animate-bounce">
               <Trophy className="h-4 w-4" />
             </div>
@@ -56,7 +56,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {isArchived && !isFinished && (
-        <div className="absolute top-3 right-3">
+        <div className="absolute top-3 right-3 z-20">
           <div className="bg-indigo-500/20 text-indigo-300 p-1.5 rounded-lg shadow-lg border border-indigo-400/30 backdrop-blur-md">
               <Archive className="h-4 w-4" />
             </div>
@@ -66,25 +66,25 @@ export function ProjectCard({ project }: ProjectCardProps) {
   );
 
   return (
-    <div className={`group relative rounded-3xl overflow-hidden glass w-full flex flex-col md:flex-row perspective-card reveal-up transition-all duration-500
+    <div className={`group relative rounded-3xl overflow-hidden glass perspective-card reveal-up transition-all duration-500
       ${isInDev ? "border-dashed border-white/20" : "border-white/5"}
       ${isFinished ? "border-emerald-500/30 shadow-[0_0_20px_rgba(16,185,129,0.1)]" : ""}
       ${isArchived ? "border-indigo-500/30 shadow-[0_0_20px_rgba(99,102,241,0.05)]" : ""}
     `}>
-      <div className="relative z-10 w-full min-h-[300px]">
-        {/* Glow Effect Overlay */}
-        <div className={`absolute inset-0 transition-colors duration-500
-          ${isFinished ? "group-hover:bg-emerald-500/5" : isArchived ? "group-hover:bg-indigo-500/5" : "group-hover:bg-primary/5"}
-        `} />
+      {/* Glow Effect Overlay */}
+      <div className={`absolute inset-0 transition-colors duration-500 pointer-events-none
+        ${isFinished ? "group-hover:bg-emerald-500/5" : isArchived ? "group-hover:bg-indigo-500/5" : "group-hover:bg-primary/5"}
+      `} />
 
-        {/* Desktop: Image as extended background behind content */}
-        {project.image_url && (
-          <div className="hidden md:block absolute inset-y-0 left-0 w-[65%] overflow-hidden rounded-l-3xl">
+      {project.image_url ? (
+        <>
+          {/* Image - fills full card on desktop, stacked on mobile */}
+          <div className="relative w-full aspect-video md:absolute md:inset-0 md:aspect-auto overflow-hidden">
             <Image
               src={project.image_url}
               alt={`${project.title} - Project screenshot`}
               fill
-              sizes="65vw"
+              sizes="(max-width: 768px) 100vw, 100vw"
               loading="lazy"
               decoding="async"
               className={`object-cover object-left group-hover:scale-110 transition-transform duration-1000 ease-out
@@ -92,193 +92,175 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
             />
+
+            {/* Desktop blur gradient - starts at 35%, fully blurred by 55%, covers the rest of the card */}
             <div
-              className="absolute inset-0 backdrop-blur-2xl"
+              className="hidden md:block absolute inset-0 backdrop-blur-2xl"
               style={{
-                maskImage: 'linear-gradient(to right, transparent 0%, transparent 30%, black 60%)',
-                WebkitMaskImage: 'linear-gradient(to right, transparent 0%, transparent 30%, black 60%)'
+                maskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)',
+                WebkitMaskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)'
               }}
             />
-            {statusBadges}
-          </div>
-        )}
 
-        {/* Mobile: Image in normal flow */}
-        {project.image_url && (
-          <div className="md:hidden relative w-full aspect-video bg-muted overflow-hidden">
-            <Image
-              src={project.image_url}
-              alt={`${project.title} - Project screenshot`}
-              fill
-              sizes="100vw"
-              loading="lazy"
-              decoding="async"
-              className={`object-cover group-hover:scale-110 transition-transform duration-1000 ease-out
-                ${isInDev ? "grayscale brightness-50" : ""}
-                ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
-              `}
-            />
-            <div className="absolute inset-0 backdrop-blur-sm" />
-            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
-            {statusBadges}
-          </div>
-        )}
+            {/* Mobile gradient */}
+            <div className="md:hidden absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
 
-        {/* No image placeholder */}
-        {!project.image_url && (
-          <div className="relative w-full aspect-video md:absolute md:inset-y-0 md:left-0 md:w-[42%] md:aspect-auto bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
-            <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
-              <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
-                ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}
-              `}>
-                <ImageOff className={`h-8 w-8 transition-transform duration-500 group-hover:scale-110
-                  ${isFinished ? "text-emerald-500/40" : isArchived ? "text-indigo-500/40" : "text-muted-foreground/40 group-hover:text-primary/40"}
-                `} />
-              </div>
-              <span className={`text-[10px] font-black uppercase tracking-[0.2em] transition-colors duration-500
-                ${isFinished ? "text-emerald-500/30" : isArchived ? "text-indigo-500/30" : "text-muted-foreground/30 group-hover:text-primary/40"}
-              `}>
-                No preview available
-              </span>
-            </div>
+            {statusBadges}
           </div>
-        )}
-
-        {/* Content Section */}
-        <div className="relative z-10 p-6 lg:p-8 flex flex-col justify-center space-y-4 min-h-[300px] md:ml-[45%]">
-          <div className="space-y-2">
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex items-center gap-3 min-w-0">
-                <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                  ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-gradient group-hover:text-primary"}
-                `}>
-                  {project.title}
-                </h4>
-                {isInDev && (
-                  <div className={`p-1.5 rounded-lg border shrink-0 ${isPaused
-                      ? 'bg-orange-400/10 border-orange-400/20'
-                      : 'bg-yellow-400/10 border-yellow-400/20'
-                    }`}>
-                      {isPaused ? (
-                        <Pause className="h-3.5 w-3.5 text-orange-400" />
-                      ) : (
-                        <Wrench className="h-3.5 w-3.5 text-yellow-400 animate-spin-slow" />
-                      )}
-                    </div>
-                )}
-                {isFinished && (
-                  <div className="p-1 rounded-full bg-emerald-500/20 text-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.2)] shrink-0">
-                      <CheckCircle2 className="h-4 w-4" />
-                    </div>
-                )}
-                {isArchived && (
-                  <div className="p-1 rounded-full bg-indigo-500/20 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)] shrink-0">
-                      <PackageCheck className="h-4 w-4" />
-                    </div>
-                )}
-              </div>
-              <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
-                ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
-              `}>
-                <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
-              </div>
+        </>
+      ) : (
+        <div className="relative w-full aspect-video md:absolute md:inset-y-0 md:left-0 md:w-[42%] md:aspect-auto bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
+          <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
+            <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
+              ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}
+            `}>
+              <ImageOff className={`h-8 w-8 transition-transform duration-500 group-hover:scale-110
+                ${isFinished ? "text-emerald-500/40" : isArchived ? "text-indigo-500/40" : "text-muted-foreground/40 group-hover:text-primary/40"}
+              `} />
             </div>
-            <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors
-              ${isInDev ? "italic opacity-70" : ""}
-              ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
+            <span className={`text-[10px] font-black uppercase tracking-[0.2em] transition-colors duration-500
+              ${isFinished ? "text-emerald-500/30" : isArchived ? "text-indigo-500/30" : "text-muted-foreground/30 group-hover:text-primary/40"}
             `}>
-              {project.description}
-            </p>
+              No preview available
+            </span>
           </div>
+        </div>
+      )}
 
-          <div className="flex flex-wrap items-center gap-3">
-            <div className="flex flex-wrap gap-2">
-              {project.tags.map((tag) => (
-                <Badge
-                  key={tag}
-                  variant="outline"
-                  className={`rounded-full px-3 py-0.5 border-white/10 transition-all font-semibold text-[10px] uppercase tracking-wider
-                    ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "bg-white/5 group-hover:border-primary/50"}
-                  `}
-                >
-                  {tag}
-                </Badge>
-              ))}
+      {/* Content Section */}
+      <div className="relative z-10 p-6 lg:p-8 md:ml-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
+        <div className="space-y-2">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex items-center gap-3 min-w-0">
+              <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-gradient group-hover:text-primary"}
+              `}>
+                {project.title}
+              </h4>
               {isInDev && (
-                <Badge variant="secondary" className={`rounded-full px-3 py-0.5 font-bold text-[10px] uppercase tracking-widest flex items-center gap-1 ${isPaused
-                    ? 'bg-orange-500/20 border-orange-500/30 text-orange-400'
-                    : 'bg-primary/20 border-primary/30 text-primary animate-pulse'
+                <div className={`p-1.5 rounded-lg border shrink-0 ${isPaused
+                    ? 'bg-orange-400/10 border-orange-400/20'
+                    : 'bg-yellow-400/10 border-yellow-400/20'
                   }`}>
                     {isPaused ? (
-                      <>
-                        <Pause className="h-3 w-3" />
-                        On pause
-                      </>
+                      <Pause className="h-3.5 w-3.5 text-orange-400" />
                     ) : (
-                      <>
-                        WIP
-                      </>
+                      <Wrench className="h-3.5 w-3.5 text-yellow-400 animate-spin-slow" />
                     )}
-                  </Badge>
+                  </div>
               )}
               {isFinished && (
-                <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-emerald-500/20 border-emerald-500/30 text-emerald-400 font-bold text-[10px] uppercase tracking-widest shadow-[0_0_10px_rgba(16,185,129,0.2)]">
-                    Finished
-                  </Badge>
+                <div className="p-1 rounded-full bg-emerald-500/20 text-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.2)] shrink-0">
+                    <CheckCircle2 className="h-4 w-4" />
+                  </div>
               )}
               {isArchived && (
-                <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-indigo-500/20 border-indigo-500/30 text-indigo-400 font-bold text-[10px] uppercase tracking-widest">
-                    Archived
-                  </Badge>
+                <div className="p-1 rounded-full bg-indigo-500/20 text-indigo-400 shadow-[0_0_10px_rgba(99,102,241,0.2)] shrink-0">
+                    <PackageCheck className="h-4 w-4" />
+                  </div>
               )}
             </div>
+            <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
+              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
+            `}>
+              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
+            </div>
+          </div>
+          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors
+            ${isInDev ? "italic opacity-70" : ""}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
+          `}>
+            {project.description}
+          </p>
+        </div>
 
+        <div className="flex flex-wrap items-center gap-3">
+          <div className="flex flex-wrap gap-2">
+            {project.tags.map((tag) => (
+              <Badge
+                key={tag}
+                variant="outline"
+                className={`rounded-full px-3 py-0.5 border-white/10 transition-all font-semibold text-[10px] uppercase tracking-wider
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "bg-white/5 group-hover:border-primary/50"}
+                `}
+              >
+                {tag}
+              </Badge>
+            ))}
             {isInDev && (
-              <div className="w-full max-w-[200px] h-1 bg-white/5 rounded-full overflow-hidden">
-                <div
-                  className={`h-full transition-all duration-1000 ${isPaused
-                    ? 'bg-orange-400/40'
-                    : 'bg-yellow-400/40 animate-shimmer bg-[length:200%_100%] bg-gradient-to-r from-transparent via-yellow-400/50 to-transparent'
-                    }`}
-                  style={{ width: `${project.development_progress || 0}%` }}
-                />
-              </div>
+              <Badge variant="secondary" className={`rounded-full px-3 py-0.5 font-bold text-[10px] uppercase tracking-widest flex items-center gap-1 ${isPaused
+                  ? 'bg-orange-500/20 border-orange-500/30 text-orange-400'
+                  : 'bg-primary/20 border-primary/30 text-primary animate-pulse'
+                }`}>
+                  {isPaused ? (
+                    <>
+                      <Pause className="h-3 w-3" />
+                      On pause
+                    </>
+                  ) : (
+                    <>
+                      WIP
+                    </>
+                  )}
+                </Badge>
             )}
-          </div>
-
-          <div className="flex gap-3 pt-2">
-            {isInDev ? (
-              <Button disabled className="rounded-full bg-white/5 text-muted-foreground border border-white/10 cursor-not-allowed text-xs h-8 px-4" aria-label="Coming soon">
-                <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
-                Coming Soon
-              </Button>
-            ) : (
-              project.project_url && (
-                <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
-                  ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
-                `}>
-                    <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
-                      <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
-                      Live Demo
-                    </Link>
-                  </Button>
-              )
+            {isFinished && (
+              <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-emerald-500/20 border-emerald-500/30 text-emerald-400 font-bold text-[10px] uppercase tracking-widest shadow-[0_0_10px_rgba(16,185,129,0.2)]">
+                  Finished
+                </Badge>
             )}
-
-            {project.github_url && (
-              <Button
-                asChild
-                variant="ghost"
-                size="sm"
-                className={`rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4`}
-              >
-                <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
-                  <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
-                  Code
-                </Link>
-              </Button>
+            {isArchived && (
+              <Badge variant="secondary" className="rounded-full px-3 py-0.5 bg-indigo-500/20 border-indigo-500/30 text-indigo-400 font-bold text-[10px] uppercase tracking-widest">
+                  Archived
+                </Badge>
             )}
           </div>
+
+          {isInDev && (
+            <div className="w-full max-w-[200px] h-1 bg-white/5 rounded-full overflow-hidden">
+              <div
+                className={`h-full transition-all duration-1000 ${isPaused
+                  ? 'bg-orange-400/40'
+                  : 'bg-yellow-400/40 animate-shimmer bg-[length:200%_100%] bg-gradient-to-r from-transparent via-yellow-400/50 to-transparent'
+                  }`}
+                style={{ width: `${project.development_progress || 0}%` }}
+              />
+            </div>
+          )}
+        </div>
+
+        <div className="flex gap-3 pt-2">
+          {isInDev ? (
+            <Button disabled className="rounded-full bg-white/5 text-muted-foreground border border-white/10 cursor-not-allowed text-xs h-8 px-4" aria-label="Coming soon">
+              <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+              Coming Soon
+            </Button>
+          ) : (
+            project.project_url && (
+              <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
+                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
+              `}>
+                  <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
+                    <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+                    Live Demo
+                  </Link>
+                </Button>
+            )
+          )}
+
+          {project.github_url && (
+            <Button
+              asChild
+              variant="ghost"
+              size="sm"
+              className={`rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4`}
+            >
+              <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
+                <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
+                Code
+              </Link>
+            </Button>
+          )}
         </div>
       </div>
     </div>

From 19c806046aec6d4b158dde5e39d12c346e50520b Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:36:59 +0200
Subject: [PATCH 06/42] =?UTF-8?q?fix:=20ajout=20d'un=20d=C3=A9grad=C3=A9?=
 =?UTF-8?q?=20de=20transparence=20en=20plus=20du=20blur=20pour=20fondre=20?=
 =?UTF-8?q?l'image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 9ef069d..1ce3c9d 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -97,11 +97,14 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div
               className="hidden md:block absolute inset-0 backdrop-blur-2xl"
               style={{
-                maskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)',
-                WebkitMaskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)'
+                maskImage: 'linear-gradient(to right, transparent 38%, black 55%, black 100%)',
+                WebkitMaskImage: 'linear-gradient(to right, transparent 38%, black 55%, black 100%)'
               }}
             />
 
+            {/* Desktop fade - image devient transparente progressivement vers la droite */}
+            <div className="hidden md:block absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-[38%] to-background to-[60%]" />
+
             {/* Mobile gradient */}
             <div className="md:hidden absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
 

From 6df11fc55a12d14f604469f6a073bd386bfd23a0 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:37:59 +0200
Subject: [PATCH 07/42] =?UTF-8?q?Revert=20"fix:=20ajout=20d'un=20d=C3=A9gr?=
 =?UTF-8?q?ad=C3=A9=20de=20transparence=20en=20plus=20du=20blur=20pour=20f?=
 =?UTF-8?q?ondre=20l'image"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 19c806046aec6d4b158dde5e39d12c346e50520b.
---
 components/project-card.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 1ce3c9d..9ef069d 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -97,14 +97,11 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div
               className="hidden md:block absolute inset-0 backdrop-blur-2xl"
               style={{
-                maskImage: 'linear-gradient(to right, transparent 38%, black 55%, black 100%)',
-                WebkitMaskImage: 'linear-gradient(to right, transparent 38%, black 55%, black 100%)'
+                maskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)',
+                WebkitMaskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)'
               }}
             />
 
-            {/* Desktop fade - image devient transparente progressivement vers la droite */}
-            <div className="hidden md:block absolute inset-0 bg-gradient-to-r from-transparent via-transparent via-[38%] to-background to-[60%]" />
-
             {/* Mobile gradient */}
             <div className="md:hidden absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
 

From e5493e53a4311b88f592bcc712a76a2d891f8630 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:39:57 +0200
Subject: [PATCH 08/42] =?UTF-8?q?fix:=20texte=20=C3=A0=20gauche,=20image?=
 =?UTF-8?q?=20=C3=A0=20droite,=20blur=20invers=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 9ef069d..4ebdc49 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -87,7 +87,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               sizes="(max-width: 768px) 100vw, 100vw"
               loading="lazy"
               decoding="async"
-              className={`object-cover object-left group-hover:scale-110 transition-transform duration-1000 ease-out
+              className={`object-cover object-right group-hover:scale-110 transition-transform duration-1000 ease-out
                 ${isInDev ? "grayscale brightness-50" : ""}
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
               `}
@@ -97,8 +97,8 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div
               className="hidden md:block absolute inset-0 backdrop-blur-2xl"
               style={{
-                maskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)',
-                WebkitMaskImage: 'linear-gradient(to right, transparent 35%, black 55%, black 100%)'
+                maskImage: 'linear-gradient(to left, transparent 35%, black 60%)',
+                WebkitMaskImage: 'linear-gradient(to left, transparent 35%, black 60%)'
               }}
             />
 
@@ -109,7 +109,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           </div>
         </>
       ) : (
-        <div className="relative w-full aspect-video md:absolute md:inset-y-0 md:left-0 md:w-[42%] md:aspect-auto bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-r border-white/5">
+          <div className="relative w-full aspect-video md:absolute md:inset-y-0 md:right-0 md:w-[42%] md:aspect-auto bg-muted/20 overflow-hidden border-b md:border-b-0 md:border-l border-white/5">
           <div className="absolute inset-0 flex flex-col items-center justify-center space-y-3 bg-white/[0.02] group-hover:bg-white/[0.04] transition-colors duration-500">
             <div className={`p-4 rounded-2xl border border-dashed transition-all duration-500
               ${isFinished ? "border-emerald-500/20 bg-emerald-500/5" : isArchived ? "border-indigo-500/20 bg-indigo-500/5" : "border-white/10 bg-white/5 group-hover:border-primary/20"}
@@ -128,7 +128,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:ml-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
+      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">

From 95b0ee505c552591e2a96209beb2e13b524cc68e Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:42:08 +0200
Subject: [PATCH 09/42] fix: limite la largeur du texte avec max-w-prose

---
 components/project-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 4ebdc49..d2ccc32 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -128,7 +128,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
+      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 max-w-prose">
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">

From 8808022fa672818920f7c114d9d5002b813eb1ce Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:43:47 +0200
Subject: [PATCH 10/42] fix: limite la description avec max-w-sm

---
 components/project-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index d2ccc32..9440e8e 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -128,7 +128,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 max-w-prose">
+      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
@@ -166,7 +166,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
             </div>
           </div>
-          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors
+          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors max-w-sm
             ${isInDev ? "italic opacity-70" : ""}
             ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
           `}>

From ab3e366d15cb84c19001ce9d409650c47a1474fe Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:44:54 +0200
Subject: [PATCH 11/42] fix: limite aussi la largeur des tags

---
 components/project-card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 9440e8e..9269786 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -175,7 +175,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         </div>
 
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2 max-w-sm">
             {project.tags.map((tag) => (
               <Badge
                 key={tag}

From 021f1d0d05a43bed80720a87c7f80748043c9e87 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Mon, 20 Jul 2026 15:45:24 +0200
Subject: [PATCH 12/42] =?UTF-8?q?fix:=20=C3=A9largit=20de=20max-w-sm=20?=
 =?UTF-8?q?=C3=A0=20max-w-md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 9269786..04f3063 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -166,7 +166,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
             </div>
           </div>
-          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors max-w-sm
+          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
             ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
           `}>
@@ -175,7 +175,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
         </div>
 
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex flex-wrap gap-2 max-w-sm">
+          <div className="flex flex-wrap gap-2 max-w-md">
             {project.tags.map((tag) => (
               <Badge
                 key={tag}

From 1a7e0cc90274783ec08a41d23e3b71df9cd75402 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:04:48 +0200
Subject: [PATCH 13/42] =?UTF-8?q?feat:=20d=C3=A9tection=20automatique=20de?=
 =?UTF-8?q?=20la=20luminosit=C3=A9=20du=20fond=20pour=20adapter=20la=20cou?=
 =?UTF-8?q?leur=20du=20texte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx   | 11 +++++---
 hooks/use-image-brightness.ts | 52 +++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 hooks/use-image-brightness.ts

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 04f3063..cf96691 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
+import { useImageBrightness } from "@/hooks/use-image-brightness"
 
 interface ProjectCardProps {
   project: Project
@@ -14,6 +15,8 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
+  const brightness = useImageBrightness(project.image_url)
+  const isDarkBg = brightness === 'dark'
 
   const statusBadges = (
     <>
@@ -128,7 +131,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
+      <div className={`relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 ${isDarkBg ? "text-white" : ""}`}>
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
@@ -166,9 +169,9 @@ export function ProjectCard({ project }: ProjectCardProps) {
               <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
             </div>
           </div>
-          <p className={`text-sm text-muted-foreground leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
+          <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : ""}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : isDarkBg ? "text-white/80" : "text-muted-foreground"}
           `}>
             {project.description}
           </p>
@@ -231,7 +234,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className="rounded-full bg-white/5 text-muted-foreground border border-white/10 cursor-not-allowed text-xs h-8 px-4" aria-label="Coming soon">
+            <Button disabled className={`rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 ${isDarkBg ? "text-white/60" : "text-muted-foreground"}`} aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
new file mode 100644
index 0000000..95caa9e
--- /dev/null
+++ b/hooks/use-image-brightness.ts
@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+
+type Brightness = 'light' | 'dark' | 'loading'
+
+export function useImageBrightness(imageUrl: string | null): Brightness {
+  const [brightness, setBrightness] = useState<Brightness>('loading')
+
+  useEffect(() => {
+    if (!imageUrl) {
+      setBrightness('dark')
+      return
+    }
+
+    let cancelled = false
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+
+    img.onload = () => {
+      if (cancelled) return
+      try {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        if (!ctx) { setBrightness('dark'); return }
+
+        const sw = Math.floor(img.naturalWidth * 0.4)
+        const sh = img.naturalHeight
+        canvas.width = sw
+        canvas.height = sh
+        ctx.drawImage(img, img.naturalWidth - sw, 0, sw, sh, 0, 0, sw, sh)
+
+        const { data } = ctx.getImageData(0, 0, sw, sh)
+        let total = 0
+        for (let i = 0; i < data.length; i += 4) {
+          total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+        }
+        setBrightness(total / (data.length / 4) > 128 ? 'light' : 'dark')
+      } catch {
+        setBrightness('dark')
+      }
+    }
+
+    img.onerror = () => {
+      if (!cancelled) setBrightness('dark')
+    }
+
+    img.src = imageUrl
+
+    return () => { cancelled = true }
+  }, [imageUrl])
+
+  return brightness
+}

From eaec60aa4b31ae925404a397e06639302e2e9aad Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:08:58 +0200
Subject: [PATCH 14/42] =?UTF-8?q?fix:=20remplace=20la=20d=C3=A9tection=20c?=
 =?UTF-8?q?anvas=20par=20un=20overlay=20sombre=20pour=20la=20lisibilit?=
 =?UTF-8?q?=C3=A9=20du=20texte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx   | 18 ++++++++----
 hooks/use-image-brightness.ts | 52 -----------------------------------
 2 files changed, 12 insertions(+), 58 deletions(-)
 delete mode 100644 hooks/use-image-brightness.ts

diff --git a/components/project-card.tsx b/components/project-card.tsx
index cf96691..5bfd28f 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,7 +4,6 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { useImageBrightness } from "@/hooks/use-image-brightness"
 
 interface ProjectCardProps {
   project: Project
@@ -15,8 +14,6 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
-  const brightness = useImageBrightness(project.image_url)
-  const isDarkBg = brightness === 'dark'
 
   const statusBadges = (
     <>
@@ -105,6 +102,15 @@ export function ProjectCard({ project }: ProjectCardProps) {
               }}
             />
 
+            {/* Desktop dark overlay - darkens the text area for readability */}
+            <div
+              className="hidden md:block absolute inset-0 bg-background/60"
+              style={{
+                maskImage: 'linear-gradient(to right, black 30%, transparent 65%)',
+                WebkitMaskImage: 'linear-gradient(to right, black 30%, transparent 65%)'
+              }}
+            />
+
             {/* Mobile gradient */}
             <div className="md:hidden absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
 
@@ -131,7 +137,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className={`relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 ${isDarkBg ? "text-white" : ""}`}>
+      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 text-white">
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
@@ -171,7 +177,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : isDarkBg ? "text-white/80" : "text-muted-foreground"}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-white/80"}
           `}>
             {project.description}
           </p>
@@ -234,7 +240,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className={`rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 ${isDarkBg ? "text-white/60" : "text-muted-foreground"}`} aria-label="Coming soon">
+            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-white/60" aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
deleted file mode 100644
index 95caa9e..0000000
--- a/hooks/use-image-brightness.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState, useEffect } from 'react'
-
-type Brightness = 'light' | 'dark' | 'loading'
-
-export function useImageBrightness(imageUrl: string | null): Brightness {
-  const [brightness, setBrightness] = useState<Brightness>('loading')
-
-  useEffect(() => {
-    if (!imageUrl) {
-      setBrightness('dark')
-      return
-    }
-
-    let cancelled = false
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-
-    img.onload = () => {
-      if (cancelled) return
-      try {
-        const canvas = document.createElement('canvas')
-        const ctx = canvas.getContext('2d')
-        if (!ctx) { setBrightness('dark'); return }
-
-        const sw = Math.floor(img.naturalWidth * 0.4)
-        const sh = img.naturalHeight
-        canvas.width = sw
-        canvas.height = sh
-        ctx.drawImage(img, img.naturalWidth - sw, 0, sw, sh, 0, 0, sw, sh)
-
-        const { data } = ctx.getImageData(0, 0, sw, sh)
-        let total = 0
-        for (let i = 0; i < data.length; i += 4) {
-          total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
-        }
-        setBrightness(total / (data.length / 4) > 128 ? 'light' : 'dark')
-      } catch {
-        setBrightness('dark')
-      }
-    }
-
-    img.onerror = () => {
-      if (!cancelled) setBrightness('dark')
-    }
-
-    img.src = imageUrl
-
-    return () => { cancelled = true }
-  }, [imageUrl])
-
-  return brightness
-}

From aca9385ab772f5293a40098812449b65e40b75bf Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:12:27 +0200
Subject: [PATCH 15/42] =?UTF-8?q?fix:=20d=C3=A9tection=20de=20luminosit?=
 =?UTF-8?q?=C3=A9=20canvas=20avec=20gestion=20CORS=20+=20texte=20adaptatif?=
 =?UTF-8?q?=20(titre,=20description,=20tags)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx   | 22 +++++--------
 hooks/use-image-brightness.ts | 60 +++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 hooks/use-image-brightness.ts

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 5bfd28f..13fc883 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
+import { useImageBrightness } from "@/hooks/use-image-brightness"
 
 interface ProjectCardProps {
   project: Project
@@ -14,6 +15,8 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
+  const brightness = useImageBrightness(project.image_url)
+  const isDarkBg = brightness === 'dark'
 
   const statusBadges = (
     <>
@@ -102,15 +105,6 @@ export function ProjectCard({ project }: ProjectCardProps) {
               }}
             />
 
-            {/* Desktop dark overlay - darkens the text area for readability */}
-            <div
-              className="hidden md:block absolute inset-0 bg-background/60"
-              style={{
-                maskImage: 'linear-gradient(to right, black 30%, transparent 65%)',
-                WebkitMaskImage: 'linear-gradient(to right, black 30%, transparent 65%)'
-              }}
-            />
-
             {/* Mobile gradient */}
             <div className="md:hidden absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
 
@@ -137,12 +131,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 text-white">
+      <div className={`relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 ${brightness === 'loading' ? '' : isDarkBg ? 'text-white' : 'text-black'}`}>
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
               <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-gradient group-hover:text-primary"}
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : isDarkBg ? "text-gradient group-hover:text-primary" : "text-black group-hover:text-gray-900"}
               `}>
                 {project.title}
               </h4>
@@ -172,12 +166,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
               ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
             `}>
-              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-primary"}`} />
+              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : isDarkBg ? "text-primary" : "text-black/60"}`} />
             </div>
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-white/80"}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : isDarkBg ? "text-white/80" : "text-black/60"}
           `}>
             {project.description}
           </p>
@@ -240,7 +234,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-white/60" aria-label="Coming soon">
+            <Button disabled className={`rounded-full border cursor-not-allowed text-xs h-8 px-4 ${isDarkBg ? 'bg-white/5 border-white/10 text-white/60' : 'bg-black/5 border-black/10 text-black/40'}`} aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
new file mode 100644
index 0000000..1b01a85
--- /dev/null
+++ b/hooks/use-image-brightness.ts
@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react'
+
+type Brightness = 'light' | 'dark' | 'loading'
+
+export function useImageBrightness(imageUrl: string | null): Brightness {
+  const [brightness, setBrightness] = useState<Brightness>('loading')
+
+  useEffect(() => {
+    if (!imageUrl) {
+      setBrightness('dark')
+      return
+    }
+
+    let cancelled = false
+    const img = new Image()
+
+    img.onload = () => {
+      if (cancelled) return
+      try {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        if (!ctx) { setBrightness('dark'); return }
+
+        const sw = Math.floor(img.naturalWidth * 0.4)
+        const sh = img.naturalHeight
+        canvas.width = sw
+        canvas.height = sh
+        ctx.drawImage(img, img.naturalWidth - sw, 0, sw, sh, 0, 0, sw, sh)
+
+        const { data } = ctx.getImageData(0, 0, sw, sh)
+        let total = 0
+        for (let i = 0; i < data.length; i += 4) {
+          total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+        }
+        setBrightness(total / (data.length / 4) > 128 ? 'light' : 'dark')
+      } catch {
+        setBrightness('dark')
+      }
+    }
+
+    img.onerror = () => {
+      if (!cancelled) setBrightness('dark')
+    }
+
+    try {
+      const url = new URL(imageUrl, window.location.origin)
+      if (url.origin !== window.location.origin) {
+        img.crossOrigin = 'anonymous'
+      }
+    } catch {
+      img.crossOrigin = 'anonymous'
+    }
+
+    img.src = imageUrl
+
+    return () => { cancelled = true }
+  }, [imageUrl])
+
+  return brightness
+}

From fbd35e3ebec22f1deb3a7758995d5a4e25e72d70 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:23:53 +0200
Subject: [PATCH 16/42] =?UTF-8?q?fix:=20utilise=20l'URL=20optimis=C3=A9e?=
 =?UTF-8?q?=20Next.js=20(=5Fnext/image)=20pour=20contourner=20CORS=20sur?=
 =?UTF-8?q?=20img.drayko.xyz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx   |  8 ++++----
 hooks/use-image-brightness.ts | 23 +++++++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 13fc883..e0cc5b7 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -183,8 +183,8 @@ export function ProjectCard({ project }: ProjectCardProps) {
               <Badge
                 key={tag}
                 variant="outline"
-                className={`rounded-full px-3 py-0.5 border-white/10 transition-all font-semibold text-[10px] uppercase tracking-wider
-                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "bg-white/5 group-hover:border-primary/50"}
+                className={`rounded-full px-3 py-0.5 transition-all font-semibold text-[10px] uppercase tracking-wider
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : isDarkBg ? "bg-white/5 border-white/10 group-hover:border-primary/50" : "bg-black/5 border-black/10 group-hover:border-black/30"}
                 `}
               >
                 {tag}
@@ -241,7 +241,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           ) : (
             project.project_url && (
               <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
-                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
+                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : isDarkBg ? "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20" : "bg-black text-white hover:bg-gray-800 hover:text-white hover:shadow-gray-500/20"}
               `}>
                   <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
                     <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
@@ -256,7 +256,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               asChild
               variant="ghost"
               size="sm"
-              className={`rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4`}
+              className={`rounded-full border font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 ${isDarkBg ? 'border-white/10 glass hover:bg-white/10 hover:text-foreground' : 'border-black/10 bg-black/5 hover:bg-black/10 text-black/80 hover:text-black'}`}
             >
               <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
                 <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
index 1b01a85..afb1639 100644
--- a/hooks/use-image-brightness.ts
+++ b/hooks/use-image-brightness.ts
@@ -2,6 +2,16 @@ import { useState, useEffect } from 'react'
 
 type Brightness = 'light' | 'dark' | 'loading'
 
+function getCanvasUrl(imageUrl: string): string {
+  try {
+    const url = new URL(imageUrl, window.location.origin)
+    if (url.origin !== window.location.origin) {
+      return `/_next/image?url=${encodeURIComponent(imageUrl)}&w=1920&q=75`
+    }
+  } catch {}
+  return imageUrl
+}
+
 export function useImageBrightness(imageUrl: string | null): Brightness {
   const [brightness, setBrightness] = useState<Brightness>('loading')
 
@@ -23,6 +33,8 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
 
         const sw = Math.floor(img.naturalWidth * 0.4)
         const sh = img.naturalHeight
+        if (sw === 0 || sh === 0) { setBrightness('dark'); return }
+
         canvas.width = sw
         canvas.height = sh
         ctx.drawImage(img, img.naturalWidth - sw, 0, sw, sh, 0, 0, sw, sh)
@@ -42,16 +54,7 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
       if (!cancelled) setBrightness('dark')
     }
 
-    try {
-      const url = new URL(imageUrl, window.location.origin)
-      if (url.origin !== window.location.origin) {
-        img.crossOrigin = 'anonymous'
-      }
-    } catch {
-      img.crossOrigin = 'anonymous'
-    }
-
-    img.src = imageUrl
+    img.src = getCanvasUrl(imageUrl)
 
     return () => { cancelled = true }
   }, [imageUrl])

From 3e02dfbb89510346658cb8e6641d17c01e63ff0d Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:28:39 +0200
Subject: [PATCH 17/42] =?UTF-8?q?fix:=20proxy=20API=20img-proxy=20pour=20c?=
 =?UTF-8?q?ontourner=20CORS=20+=20=C3=A9chantillonne=20le=20c=C3=B4t=C3=A9?=
 =?UTF-8?q?=20gauche=20de=20l'image=20(zone=20du=20texte)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/img-proxy/route.ts    | 35 +++++++++++++++++++++++++++++++++++
 hooks/use-image-brightness.ts | 25 ++++++++++++-------------
 2 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 app/api/img-proxy/route.ts

diff --git a/app/api/img-proxy/route.ts b/app/api/img-proxy/route.ts
new file mode 100644
index 0000000..4c12cd5
--- /dev/null
+++ b/app/api/img-proxy/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+export const runtime = 'nodejs'
+
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl.searchParams.get('url')
+  if (!url) {
+    return new NextResponse('Missing url parameter', { status: 400 })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (compatible; PortfolioBot/1.0)',
+      },
+    })
+
+    if (!response.ok) {
+      return new NextResponse('Failed to fetch image', { status: response.status })
+    }
+
+    const contentType = response.headers.get('content-type') || 'image/png'
+    const buffer = await response.arrayBuffer()
+
+    return new NextResponse(buffer, {
+      headers: {
+        'Content-Type': contentType,
+        'Cache-Control': 'public, max-age=86400',
+        'Access-Control-Allow-Origin': '*',
+      },
+    })
+  } catch {
+    return new NextResponse('Failed to fetch image', { status: 502 })
+  }
+}
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
index afb1639..c793a73 100644
--- a/hooks/use-image-brightness.ts
+++ b/hooks/use-image-brightness.ts
@@ -2,16 +2,6 @@ import { useState, useEffect } from 'react'
 
 type Brightness = 'light' | 'dark' | 'loading'
 
-function getCanvasUrl(imageUrl: string): string {
-  try {
-    const url = new URL(imageUrl, window.location.origin)
-    if (url.origin !== window.location.origin) {
-      return `/_next/image?url=${encodeURIComponent(imageUrl)}&w=1920&q=75`
-    }
-  } catch {}
-  return imageUrl
-}
-
 export function useImageBrightness(imageUrl: string | null): Brightness {
   const [brightness, setBrightness] = useState<Brightness>('loading')
 
@@ -31,13 +21,13 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
         const ctx = canvas.getContext('2d')
         if (!ctx) { setBrightness('dark'); return }
 
-        const sw = Math.floor(img.naturalWidth * 0.4)
+        const sw = Math.floor(img.naturalWidth * 0.58)
         const sh = img.naturalHeight
         if (sw === 0 || sh === 0) { setBrightness('dark'); return }
 
         canvas.width = sw
         canvas.height = sh
-        ctx.drawImage(img, img.naturalWidth - sw, 0, sw, sh, 0, 0, sw, sh)
+        ctx.drawImage(img, 0, 0, sw, sh, 0, 0, sw, sh)
 
         const { data } = ctx.getImageData(0, 0, sw, sh)
         let total = 0
@@ -54,7 +44,16 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
       if (!cancelled) setBrightness('dark')
     }
 
-    img.src = getCanvasUrl(imageUrl)
+    try {
+      const url = new URL(imageUrl, window.location.origin)
+      if (url.origin !== window.location.origin) {
+        img.src = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
+      } else {
+        img.src = imageUrl
+      }
+    } catch {
+      img.src = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
+    }
 
     return () => { cancelled = true }
   }, [imageUrl])

From 67e525b27d9870d0e120bbe69d4e3f8da5bd36dc Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:31:52 +0200
Subject: [PATCH 18/42] =?UTF-8?q?fix:=20remplace=20la=20d=C3=A9tection=20c?=
 =?UTF-8?q?anvas=20par=20mix-blend-mode:difference=20pour=20une=20adaptati?=
 =?UTF-8?q?on=20automatique=20fiable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index e0cc5b7..d2b2de9 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,7 +4,6 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { useImageBrightness } from "@/hooks/use-image-brightness"
 
 interface ProjectCardProps {
   project: Project
@@ -15,8 +14,6 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
-  const brightness = useImageBrightness(project.image_url)
-  const isDarkBg = brightness === 'dark'
 
   const statusBadges = (
     <>
@@ -131,12 +128,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className={`relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 ${brightness === 'loading' ? '' : isDarkBg ? 'text-white' : 'text-black'}`}>
+      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
               <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : isDarkBg ? "text-gradient group-hover:text-primary" : "text-black group-hover:text-gray-900"}
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-white mix-blend-difference"}
               `}>
                 {project.title}
               </h4>
@@ -164,14 +161,14 @@ export function ProjectCard({ project }: ProjectCardProps) {
               )}
             </div>
             <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
-              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100 shadow-primary/20"}
+              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100"}
             `}>
-              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : isDarkBg ? "text-primary" : "text-black/60"}`} />
+              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-white mix-blend-difference"}`} />
             </div>
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : isDarkBg ? "text-white/80" : "text-black/60"}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-white/80 mix-blend-difference"}
           `}>
             {project.description}
           </p>
@@ -184,7 +181,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 key={tag}
                 variant="outline"
                 className={`rounded-full px-3 py-0.5 transition-all font-semibold text-[10px] uppercase tracking-wider
-                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : isDarkBg ? "bg-white/5 border-white/10 group-hover:border-primary/50" : "bg-black/5 border-black/10 group-hover:border-black/30"}
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "text-white mix-blend-difference bg-white/5 border-white/10 group-hover:border-primary/50"}
                 `}
               >
                 {tag}
@@ -234,14 +231,14 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className={`rounded-full border cursor-not-allowed text-xs h-8 px-4 ${isDarkBg ? 'bg-white/5 border-white/10 text-white/60' : 'bg-black/5 border-black/10 text-black/40'}`} aria-label="Coming soon">
+            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-white/60 mix-blend-difference" aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
           ) : (
             project.project_url && (
               <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
-                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : isDarkBg ? "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20" : "bg-black text-white hover:bg-gray-800 hover:text-white hover:shadow-gray-500/20"}
+                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
               `}>
                   <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
                     <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
@@ -256,7 +253,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               asChild
               variant="ghost"
               size="sm"
-              className={`rounded-full border font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 ${isDarkBg ? 'border-white/10 glass hover:bg-white/10 hover:text-foreground' : 'border-black/10 bg-black/5 hover:bg-black/10 text-black/80 hover:text-black'}`}
+              className="rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 text-white mix-blend-difference"
             >
               <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
                 <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />

From 710bdd13f34821c3fe0f94f17a480d05607137b2 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:36:18 +0200
Subject: [PATCH 19/42] =?UTF-8?q?fix:=20remplace=20mix-blend-mode=20par=20?=
 =?UTF-8?q?text-shadow=20pour=20une=20lisibilit=C3=A9=20garantie=20sur=20t?=
 =?UTF-8?q?ous=20les=20fonds?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css             |  6 ++++++
 components/project-card.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 6dbe238..cd17658 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -462,6 +462,12 @@
   .scroll-margin-section {
     scroll-margin-top: 6rem;
   }
+
+  .text-contrast {
+    text-shadow:
+      0 0 8px rgba(0, 0, 0, 0.7),
+      0 0 8px rgba(255, 255, 255, 0.7);
+  }
 }
 
 @media print {
diff --git a/components/project-card.tsx b/components/project-card.tsx
index d2b2de9..b84eebd 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -133,7 +133,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
               <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-white mix-blend-difference"}
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-contrast text-white"}
               `}>
                 {project.title}
               </h4>
@@ -163,12 +163,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
             <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
               ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100"}
             `}>
-              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-white mix-blend-difference"}`} />
+              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-contrast text-white"}`} />
             </div>
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-white/80 mix-blend-difference"}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-contrast text-white/80"}
           `}>
             {project.description}
           </p>
@@ -181,7 +181,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 key={tag}
                 variant="outline"
                 className={`rounded-full px-3 py-0.5 transition-all font-semibold text-[10px] uppercase tracking-wider
-                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "text-white mix-blend-difference bg-white/5 border-white/10 group-hover:border-primary/50"}
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "text-contrast text-white bg-white/5 border-white/10 group-hover:border-primary/50"}
                 `}
               >
                 {tag}
@@ -231,7 +231,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-white/60 mix-blend-difference" aria-label="Coming soon">
+            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-contrast text-white/60" aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
@@ -253,7 +253,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               asChild
               variant="ghost"
               size="sm"
-              className="rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 text-white mix-blend-difference"
+              className="rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 text-contrast text-white"
             >
               <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
                 <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />

From 401d0d8497733a36ecdb7e6e62061f9e5dd10084 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:39:16 +0200
Subject: [PATCH 20/42] =?UTF-8?q?fix:=20proxy=20API=20+=20canvas=20=C3=A9c?=
 =?UTF-8?q?hantillonne=20le=20c=C3=B4t=C3=A9=20gauche=20+=20texte=20propre?=
 =?UTF-8?q?=20blanc/noir=20selon=20luminosit=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/img-proxy/route.ts    | 12 ++++------
 app/globals.css               |  6 -----
 components/project-card.tsx   | 22 ++++++++++--------
 hooks/use-image-brightness.ts | 44 +++++++++++++++--------------------
 4 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/app/api/img-proxy/route.ts b/app/api/img-proxy/route.ts
index 4c12cd5..1be0cb4 100644
--- a/app/api/img-proxy/route.ts
+++ b/app/api/img-proxy/route.ts
@@ -1,22 +1,18 @@
 import { NextRequest, NextResponse } from 'next/server'
 
-export const runtime = 'nodejs'
-
 export async function GET(request: NextRequest) {
   const url = request.nextUrl.searchParams.get('url')
   if (!url) {
-    return new NextResponse('Missing url parameter', { status: 400 })
+    return NextResponse.json({ error: 'Missing url' }, { status: 400 })
   }
 
   try {
     const response = await fetch(url, {
-      headers: {
-        'User-Agent': 'Mozilla/5.0 (compatible; PortfolioBot/1.0)',
-      },
+      headers: { 'User-Agent': 'PortfolioBot/1.0' },
     })
 
     if (!response.ok) {
-      return new NextResponse('Failed to fetch image', { status: response.status })
+      return NextResponse.json({ error: 'Fetch failed' }, { status: response.status })
     }
 
     const contentType = response.headers.get('content-type') || 'image/png'
@@ -30,6 +26,6 @@ export async function GET(request: NextRequest) {
       },
     })
   } catch {
-    return new NextResponse('Failed to fetch image', { status: 502 })
+    return NextResponse.json({ error: 'Proxy failed' }, { status: 502 })
   }
 }
diff --git a/app/globals.css b/app/globals.css
index cd17658..6dbe238 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -462,12 +462,6 @@
   .scroll-margin-section {
     scroll-margin-top: 6rem;
   }
-
-  .text-contrast {
-    text-shadow:
-      0 0 8px rgba(0, 0, 0, 0.7),
-      0 0 8px rgba(255, 255, 255, 0.7);
-  }
 }
 
 @media print {
diff --git a/components/project-card.tsx b/components/project-card.tsx
index b84eebd..91a316f 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
+import { useImageBrightness } from "@/hooks/use-image-brightness"
 
 interface ProjectCardProps {
   project: Project
@@ -14,6 +15,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
+  const isDarkBg = useImageBrightness(project.image_url) === 'dark'
 
   const statusBadges = (
     <>
@@ -93,7 +95,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               `}
             />
 
-            {/* Desktop blur gradient - starts at 35%, fully blurred by 55%, covers the rest of the card */}
+            {/* Desktop blur gradient */}
             <div
               className="hidden md:block absolute inset-0 backdrop-blur-2xl"
               style={{
@@ -128,12 +130,12 @@ export function ProjectCard({ project }: ProjectCardProps) {
       )}
 
       {/* Content Section */}
-      <div className="relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4">
+      <div className={`relative z-10 p-6 lg:p-8 md:mr-[42%] md:min-h-[300px] flex flex-col justify-center space-y-4 ${isDarkBg ? 'text-white' : 'text-black'}`}>
         <div className="space-y-2">
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
               <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : "text-contrast text-white"}
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : isDarkBg ? "text-gradient" : "text-black"}
               `}>
                 {project.title}
               </h4>
@@ -161,14 +163,14 @@ export function ProjectCard({ project }: ProjectCardProps) {
               )}
             </div>
             <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
-              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100"}
+              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : isDarkBg ? "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100" : "bg-black/5 border-black/10 opacity-0 group-hover:opacity-100"}
             `}>
-              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : "text-contrast text-white"}`} />
+              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : ""}`} />
             </div>
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}
-            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : "text-contrast text-white/80"}
+            ${isFinished ? "text-emerald-50/70" : isArchived ? "text-indigo-50/70" : isDarkBg ? "text-white/80" : "text-black/70"}
           `}>
             {project.description}
           </p>
@@ -181,7 +183,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 key={tag}
                 variant="outline"
                 className={`rounded-full px-3 py-0.5 transition-all font-semibold text-[10px] uppercase tracking-wider
-                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : "text-contrast text-white bg-white/5 border-white/10 group-hover:border-primary/50"}
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : isDarkBg ? "bg-white/5 border-white/10 group-hover:border-primary/50" : "bg-black/5 border-black/10 group-hover:border-black/30"}
                 `}
               >
                 {tag}
@@ -231,14 +233,14 @@ export function ProjectCard({ project }: ProjectCardProps) {
 
         <div className="flex gap-3 pt-2">
           {isInDev ? (
-            <Button disabled className="rounded-full bg-white/5 border border-white/10 cursor-not-allowed text-xs h-8 px-4 text-contrast text-white/60" aria-label="Coming soon">
+            <Button disabled className={`rounded-full border cursor-not-allowed text-xs h-8 px-4 ${isDarkBg ? 'bg-white/5 border-white/10 text-white/60' : 'bg-black/5 border-black/10 text-black/40'}`} aria-label="Coming soon">
               <Construction className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
               Coming Soon
             </Button>
           ) : (
             project.project_url && (
               <Button asChild size="sm" className={`rounded-full font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 shadow-lg text-xs h-8 px-4
-                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20"}
+                ${isFinished ? "bg-emerald-500 text-white hover:bg-emerald-400 hover:shadow-emerald-500/20" : isArchived ? "bg-indigo-500 text-white hover:bg-indigo-400 hover:shadow-indigo-500/20" : isDarkBg ? "bg-white text-black hover:bg-primary hover:text-white hover:shadow-primary/20" : "bg-black text-white hover:bg-gray-800 hover:text-white hover:shadow-gray-500/20"}
               `}>
                   <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
                     <ExternalLink className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
@@ -253,7 +255,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               asChild
               variant="ghost"
               size="sm"
-              className="rounded-full border border-white/10 glass hover:bg-white/10 hover:text-foreground font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 text-contrast text-white"
+              className={`rounded-full border font-bold tracking-tight transition-all duration-500 hover:scale-110 active:scale-95 text-xs h-8 px-4 ${isDarkBg ? 'border-white/10 glass hover:bg-white/10 hover:text-foreground' : 'border-black/10 bg-black/5 hover:bg-black/10'}`}
             >
               <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
                 <Github className="mr-1.5 h-3.5 w-3.5" aria-hidden="true" />
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
index c793a73..7170af2 100644
--- a/hooks/use-image-brightness.ts
+++ b/hooks/use-image-brightness.ts
@@ -1,17 +1,20 @@
 import { useState, useEffect } from 'react'
 
-type Brightness = 'light' | 'dark' | 'loading'
+function getThemeDefault(): 'light' | 'dark' {
+  if (typeof document === 'undefined') return 'dark'
+  const isDarkClass = document.documentElement.classList.contains('dark')
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+  return isDarkClass || prefersDark ? 'dark' : 'light'
+}
 
-export function useImageBrightness(imageUrl: string | null): Brightness {
-  const [brightness, setBrightness] = useState<Brightness>('loading')
+export function useImageBrightness(imageUrl: string | null): 'light' | 'dark' {
+  const [brightness, setBrightness] = useState<'light' | 'dark'>(getThemeDefault)
 
   useEffect(() => {
-    if (!imageUrl) {
-      setBrightness('dark')
-      return
-    }
+    if (!imageUrl) return
 
     let cancelled = false
+    const proxyUrl = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
     const img = new Image()
 
     img.onload = () => {
@@ -19,11 +22,11 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
       try {
         const canvas = document.createElement('canvas')
         const ctx = canvas.getContext('2d')
-        if (!ctx) { setBrightness('dark'); return }
+        if (!ctx) return
 
         const sw = Math.floor(img.naturalWidth * 0.58)
         const sh = img.naturalHeight
-        if (sw === 0 || sh === 0) { setBrightness('dark'); return }
+        if (sw < 2 || sh < 2) return
 
         canvas.width = sw
         canvas.height = sh
@@ -31,29 +34,20 @@ export function useImageBrightness(imageUrl: string | null): Brightness {
 
         const { data } = ctx.getImageData(0, 0, sw, sh)
         let total = 0
-        for (let i = 0; i < data.length; i += 4) {
+        const len = data.length
+        for (let i = 0; i < len; i += 4) {
           total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
         }
-        setBrightness(total / (data.length / 4) > 128 ? 'light' : 'dark')
+        const avg = total / (len / 4)
+        if (!cancelled) setBrightness(avg > 128 ? 'light' : 'dark')
       } catch {
-        setBrightness('dark')
+        // fallback: keep theme default
       }
     }
 
-    img.onerror = () => {
-      if (!cancelled) setBrightness('dark')
-    }
+    img.onerror = () => {}
 
-    try {
-      const url = new URL(imageUrl, window.location.origin)
-      if (url.origin !== window.location.origin) {
-        img.src = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
-      } else {
-        img.src = imageUrl
-      }
-    } catch {
-      img.src = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
-    }
+    img.src = proxyUrl
 
     return () => { cancelled = true }
   }, [imageUrl])

From c7ea5c29f6720ad6005babb9e3efc9b4cf6d23bc Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:50:09 +0200
Subject: [PATCH 21/42] =?UTF-8?q?fix:=20utilise=20le=20onLoad=20de=20Next.?=
 =?UTF-8?q?js=20Image=20+=20dessine=20l'=C3=A9l=C3=A9ment=20img=20directem?=
 =?UTF-8?q?ent=20sur=20canvas=20(same-origin,=20zero=20CORS)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/project-card.tsx   |  3 +-
 hooks/use-image-brightness.ts | 83 ++++++++++++++++-------------------
 2 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 91a316f..47bab50 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -15,7 +15,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
-  const isDarkBg = useImageBrightness(project.image_url) === 'dark'
+  const { isDarkBg, onImageLoad } = useImageBrightness()
 
   const statusBadges = (
     <>
@@ -89,6 +89,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
               sizes="(max-width: 768px) 100vw, 100vw"
               loading="lazy"
               decoding="async"
+              onLoad={onImageLoad}
               className={`object-cover object-right group-hover:scale-110 transition-transform duration-1000 ease-out
                 ${isInDev ? "grayscale brightness-50" : ""}
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
index 7170af2..037412b 100644
--- a/hooks/use-image-brightness.ts
+++ b/hooks/use-image-brightness.ts
@@ -1,56 +1,47 @@
-import { useState, useEffect } from 'react'
+'use client'
 
-function getThemeDefault(): 'light' | 'dark' {
-  if (typeof document === 'undefined') return 'dark'
+import { useState, useCallback } from 'react'
+
+function getThemeDefault(): boolean {
+  if (typeof document === 'undefined') return true
   const isDarkClass = document.documentElement.classList.contains('dark')
   const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  return isDarkClass || prefersDark ? 'dark' : 'light'
+  return isDarkClass || prefersDark
 }
 
-export function useImageBrightness(imageUrl: string | null): 'light' | 'dark' {
-  const [brightness, setBrightness] = useState<'light' | 'dark'>(getThemeDefault)
-
-  useEffect(() => {
-    if (!imageUrl) return
-
-    let cancelled = false
-    const proxyUrl = `/api/img-proxy?url=${encodeURIComponent(imageUrl)}`
-    const img = new Image()
-
-    img.onload = () => {
-      if (cancelled) return
-      try {
-        const canvas = document.createElement('canvas')
-        const ctx = canvas.getContext('2d')
-        if (!ctx) return
-
-        const sw = Math.floor(img.naturalWidth * 0.58)
-        const sh = img.naturalHeight
-        if (sw < 2 || sh < 2) return
-
-        canvas.width = sw
-        canvas.height = sh
-        ctx.drawImage(img, 0, 0, sw, sh, 0, 0, sw, sh)
-
-        const { data } = ctx.getImageData(0, 0, sw, sh)
-        let total = 0
-        const len = data.length
-        for (let i = 0; i < len; i += 4) {
-          total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
-        }
-        const avg = total / (len / 4)
-        if (!cancelled) setBrightness(avg > 128 ? 'light' : 'dark')
-      } catch {
-        // fallback: keep theme default
-      }
-    }
+function analyzeBrightness(img: HTMLImageElement): boolean {
+  try {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return getThemeDefault()
+
+    const sw = Math.floor(img.naturalWidth * 0.58)
+    const sh = img.naturalHeight
+    if (sw < 2 || sh < 2) return getThemeDefault()
 
-    img.onerror = () => {}
+    canvas.width = sw
+    canvas.height = sh
+    ctx.drawImage(img, 0, 0, sw, sh, 0, 0, sw, sh)
+
+    const { data } = ctx.getImageData(0, 0, sw, sh)
+    let total = 0
+    for (let i = 0; i < data.length; i += 4) {
+      total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+    }
+    return total / (data.length / 4) > 128
+  } catch {
+    return getThemeDefault()
+  }
+}
 
-    img.src = proxyUrl
+export function useImageBrightness() {
+  const [isDarkBg, setIsDarkBg] = useState(getThemeDefault)
 
-    return () => { cancelled = true }
-  }, [imageUrl])
+  const onImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget
+    if (img.src.startsWith('data:image/gif;base64')) return
+    setIsDarkBg(!analyzeBrightness(img))
+  }, [])
 
-  return brightness
+  return { isDarkBg, onImageLoad }
 }

From 73caac853720fa92aa13183f476fb804bd4c7b60 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 12:57:38 +0200
Subject: [PATCH 22/42] =?UTF-8?q?fix:=20remplace=20la=20d=C3=A9tection=20c?=
 =?UTF-8?q?anvas=20par=20une=20API=20serverless=20(sharp)=20pour=20contour?=
 =?UTF-8?q?ner=20d=C3=A9finitivement=20le=20CORS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/brightness/route.ts   | 35 ++++++++++++++++
 app/api/img-proxy/route.ts    | 31 --------------
 components/project-card.tsx   |  3 +-
 hooks/use-image-brightness.ts | 76 +++++++++++++++++++++--------------
 4 files changed, 82 insertions(+), 63 deletions(-)
 create mode 100644 app/api/brightness/route.ts
 delete mode 100644 app/api/img-proxy/route.ts

diff --git a/app/api/brightness/route.ts b/app/api/brightness/route.ts
new file mode 100644
index 0000000..c1fc2af
--- /dev/null
+++ b/app/api/brightness/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server'
+import sharp from 'sharp'
+
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl.searchParams.get('url')
+  if (!url) {
+    return NextResponse.json({ brightness: 'dark' })
+  }
+
+  try {
+    const response = await fetch(url, {
+      headers: { 'User-Agent': 'PortfolioBot/1.0' },
+    })
+    if (!response.ok) {
+      return NextResponse.json({ brightness: 'dark' })
+    }
+
+    const input = Buffer.from(await response.arrayBuffer())
+    const { data } = await sharp(input)
+      .resize(1, 1, { fit: 'cover' })
+      .raw()
+      .toBuffer({ resolveWithObject: true })
+
+    const r = data[0]
+    const g = data[1]
+    const b = data[2]
+    const brightness = 0.299 * r + 0.587 * g + 0.114 * b
+
+    return NextResponse.json({ brightness: brightness > 128 ? 'light' : 'dark' })
+  } catch {
+    return NextResponse.json({ brightness: 'dark' })
+  }
+}
+
+export const runtime = 'nodejs'
diff --git a/app/api/img-proxy/route.ts b/app/api/img-proxy/route.ts
deleted file mode 100644
index 1be0cb4..0000000
--- a/app/api/img-proxy/route.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-
-export async function GET(request: NextRequest) {
-  const url = request.nextUrl.searchParams.get('url')
-  if (!url) {
-    return NextResponse.json({ error: 'Missing url' }, { status: 400 })
-  }
-
-  try {
-    const response = await fetch(url, {
-      headers: { 'User-Agent': 'PortfolioBot/1.0' },
-    })
-
-    if (!response.ok) {
-      return NextResponse.json({ error: 'Fetch failed' }, { status: response.status })
-    }
-
-    const contentType = response.headers.get('content-type') || 'image/png'
-    const buffer = await response.arrayBuffer()
-
-    return new NextResponse(buffer, {
-      headers: {
-        'Content-Type': contentType,
-        'Cache-Control': 'public, max-age=86400',
-        'Access-Control-Allow-Origin': '*',
-      },
-    })
-  } catch {
-    return NextResponse.json({ error: 'Proxy failed' }, { status: 502 })
-  }
-}
diff --git a/components/project-card.tsx b/components/project-card.tsx
index 47bab50..45e5ece 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -15,7 +15,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
-  const { isDarkBg, onImageLoad } = useImageBrightness()
+  const isDarkBg = useImageBrightness(project.image_url)
 
   const statusBadges = (
     <>
@@ -89,7 +89,6 @@ export function ProjectCard({ project }: ProjectCardProps) {
               sizes="(max-width: 768px) 100vw, 100vw"
               loading="lazy"
               decoding="async"
-              onLoad={onImageLoad}
               className={`object-cover object-right group-hover:scale-110 transition-transform duration-1000 ease-out
                 ${isInDev ? "grayscale brightness-50" : ""}
                 ${isFinished ? "brightness-110 contrast-110" : isArchived ? "brightness-100" : ""}
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
index 037412b..ffc64c9 100644
--- a/hooks/use-image-brightness.ts
+++ b/hooks/use-image-brightness.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useEffect } from 'react'
 
 function getThemeDefault(): boolean {
   if (typeof document === 'undefined') return true
@@ -9,39 +9,55 @@ function getThemeDefault(): boolean {
   return isDarkClass || prefersDark
 }
 
-function analyzeBrightness(img: HTMLImageElement): boolean {
-  try {
-    const canvas = document.createElement('canvas')
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return getThemeDefault()
-
-    const sw = Math.floor(img.naturalWidth * 0.58)
-    const sh = img.naturalHeight
-    if (sw < 2 || sh < 2) return getThemeDefault()
+const cache = new Map<string, boolean>()
+const pending = new Map<string, Promise<boolean>>()
+
+function fetchBrightness(imageUrl: string): Promise<boolean> {
+  const cached = cache.get(imageUrl)
+  if (cached !== undefined) return Promise.resolve(cached)
+
+  const inFlight = pending.get(imageUrl)
+  if (inFlight) return inFlight
+
+  const promise = fetch(`/api/brightness?url=${encodeURIComponent(imageUrl)}`)
+    .then((res) => res.json())
+    .then((data) => {
+      const isDark = data.brightness === 'dark'
+      cache.set(imageUrl, isDark)
+      return isDark
+    })
+    .catch(() => {
+      const fallback = getThemeDefault()
+      cache.set(imageUrl, fallback)
+      return fallback
+    })
+    .finally(() => {
+      pending.delete(imageUrl)
+    })
+
+  pending.set(imageUrl, promise)
+  return promise
+}
 
-    canvas.width = sw
-    canvas.height = sh
-    ctx.drawImage(img, 0, 0, sw, sh, 0, 0, sw, sh)
+export function useImageBrightness(imageUrl?: string | null) {
+  const [isDarkBg, setIsDarkBg] = useState(getThemeDefault)
 
-    const { data } = ctx.getImageData(0, 0, sw, sh)
-    let total = 0
-    for (let i = 0; i < data.length; i += 4) {
-      total += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+  useEffect(() => {
+    if (!imageUrl) {
+      setIsDarkBg(getThemeDefault())
+      return
     }
-    return total / (data.length / 4) > 128
-  } catch {
-    return getThemeDefault()
-  }
-}
 
-export function useImageBrightness() {
-  const [isDarkBg, setIsDarkBg] = useState(getThemeDefault)
+    let cancelled = false
+
+    fetchBrightness(imageUrl).then((result) => {
+      if (!cancelled) setIsDarkBg(result)
+    })
 
-  const onImageLoad = useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget
-    if (img.src.startsWith('data:image/gif;base64')) return
-    setIsDarkBg(!analyzeBrightness(img))
-  }, [])
+    return () => {
+      cancelled = true
+    }
+  }, [imageUrl])
 
-  return { isDarkBg, onImageLoad }
+  return isDarkBg
 }

From 871d4ca82e757fe0a80aa76406470338ca9010f8 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 13:03:29 +0200
Subject: [PATCH 23/42] =?UTF-8?q?feat:=20remplace=20d=C3=A9tection=20auto?=
 =?UTF-8?q?=20luminosit=C3=A9=20par=20toggle=20manuel=20text=5Fcolor=20(no?=
 =?UTF-8?q?ir/blanc)=20dans=20l'admin?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/brightness/route.ts   | 35 -------------------
 components/project-card.tsx   |  4 +--
 components/project-form.tsx   | 37 +++++++++++++++++++-
 db/schema-pg.ts               |  1 +
 db/schema-sqlite.ts           |  1 +
 hooks/use-image-brightness.ts | 63 -----------------------------------
 lib/types.ts                  |  1 +
 7 files changed, 40 insertions(+), 102 deletions(-)
 delete mode 100644 app/api/brightness/route.ts
 delete mode 100644 hooks/use-image-brightness.ts

diff --git a/app/api/brightness/route.ts b/app/api/brightness/route.ts
deleted file mode 100644
index c1fc2af..0000000
--- a/app/api/brightness/route.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server'
-import sharp from 'sharp'
-
-export async function GET(request: NextRequest) {
-  const url = request.nextUrl.searchParams.get('url')
-  if (!url) {
-    return NextResponse.json({ brightness: 'dark' })
-  }
-
-  try {
-    const response = await fetch(url, {
-      headers: { 'User-Agent': 'PortfolioBot/1.0' },
-    })
-    if (!response.ok) {
-      return NextResponse.json({ brightness: 'dark' })
-    }
-
-    const input = Buffer.from(await response.arrayBuffer())
-    const { data } = await sharp(input)
-      .resize(1, 1, { fit: 'cover' })
-      .raw()
-      .toBuffer({ resolveWithObject: true })
-
-    const r = data[0]
-    const g = data[1]
-    const b = data[2]
-    const brightness = 0.299 * r + 0.587 * g + 0.114 * b
-
-    return NextResponse.json({ brightness: brightness > 128 ? 'light' : 'dark' })
-  } catch {
-    return NextResponse.json({ brightness: 'dark' })
-  }
-}
-
-export const runtime = 'nodejs'
diff --git a/components/project-card.tsx b/components/project-card.tsx
index 45e5ece..13d234b 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -4,8 +4,6 @@ import { Button } from "@/components/ui/button"
 import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { useImageBrightness } from "@/hooks/use-image-brightness"
-
 interface ProjectCardProps {
   project: Project
 }
@@ -15,7 +13,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
   const isArchived = project.is_archived;
   const isInDev = project.in_development;
   const isPaused = project.development_status === 'paused';
-  const isDarkBg = useImageBrightness(project.image_url)
+  const isDarkBg = project.text_color === 'black' ? false : true
 
   const statusBadges = (
     <>
diff --git a/components/project-form.tsx b/components/project-form.tsx
index b050a46..7e2dc54 100644
--- a/components/project-form.tsx
+++ b/components/project-form.tsx
@@ -11,7 +11,7 @@ import { createProject, updateProject } from "@/lib/actions"
 import { useRouter } from "next/navigation"
 import { Switch } from "@/components/ui/switch"
 import { Slider } from "@/components/ui/slider"
-import { Settings2, Sparkles, Save, Play, Pause } from "lucide-react"
+import { Settings2, Sparkles, Save, Play, Pause, Sun, Moon } from "lucide-react"
 
 interface ProjectFormProps {
   project?: Project
@@ -28,6 +28,7 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
   const [isCompleted, setIsCompleted] = useState(project?.is_completed || false)
   const [isArchived, setIsArchived] = useState(project?.is_archived || false)
   const [progress, setProgress] = useState(project?.development_progress || 0)
+  const [textColor, setTextColor] = useState<'black' | 'white'>(project?.text_color || 'white')
   const formRef = useRef<HTMLFormElement>(null)
 
   const router = useRouter()
@@ -50,6 +51,7 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
       is_completed: isCompleted,
       is_archived: isArchived,
       development_progress: progress,
+      text_color: textColor,
     }
 
     try {
@@ -182,6 +184,39 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
                   <Switch checked={isArchived} onCheckedChange={setIsArchived} className="scale-75" />
                 </div>
               </div>
+
+              <div className="p-3 rounded-xl bg-white/5 border border-white/5 space-y-3">
+                <Label className="text-sm font-bold flex items-center gap-2">
+                  <Sun className="h-4 w-4 text-muted-foreground" />
+                  Text Color
+                </Label>
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    type="button"
+                    onClick={() => setTextColor('white')}
+                    className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold text-xs transition-all ${
+                      textColor === 'white'
+                        ? 'bg-white text-black border-2 border-white shadow-lg'
+                        : 'bg-white/5 border border-white/10 text-muted-foreground hover:bg-white/10'
+                    }`}
+                  >
+                    <Moon className="h-4 w-4" />
+                    White
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setTextColor('black')}
+                    className={`flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-bold text-xs transition-all ${
+                      textColor === 'black'
+                        ? 'bg-black text-white border-2 border-black shadow-lg'
+                        : 'bg-black/5 border border-black/10 text-muted-foreground hover:bg-black/10'
+                    }`}
+                  >
+                    <Sun className="h-4 w-4" />
+                    Black
+                  </button>
+                </div>
+              </div>
             </div>
           </section>
 
diff --git a/db/schema-pg.ts b/db/schema-pg.ts
index 9d5e6a6..7783a69 100644
--- a/db/schema-pg.ts
+++ b/db/schema-pg.ts
@@ -15,6 +15,7 @@ export const projets = pgTable("projets", {
   is_completed: boolean("is_completed").default(false),
   is_archived: boolean("is_archived").default(false),
   development_progress: integer("development_progress").default(0),
+  text_color: text("text_color"),
   changelog: jsonb("changelog").$type<ChangelogEntry[]>().default([]),
   created_at: timestamp("created_at").defaultNow(),
 })
diff --git a/db/schema-sqlite.ts b/db/schema-sqlite.ts
index 95a0021..c68a3db 100644
--- a/db/schema-sqlite.ts
+++ b/db/schema-sqlite.ts
@@ -26,6 +26,7 @@ export const projets = sqliteTable("projets", {
   is_completed: integer("is_completed").default(0),
   is_archived: integer("is_archived").default(0),
   development_progress: integer("development_progress").default(0),
+  text_color: text("text_color"),
   changelog: jsonText("changelog").$type<any[]>(),
   created_at: timestampText("created_at"),
 }, (table) => ({
diff --git a/hooks/use-image-brightness.ts b/hooks/use-image-brightness.ts
deleted file mode 100644
index ffc64c9..0000000
--- a/hooks/use-image-brightness.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-
-function getThemeDefault(): boolean {
-  if (typeof document === 'undefined') return true
-  const isDarkClass = document.documentElement.classList.contains('dark')
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  return isDarkClass || prefersDark
-}
-
-const cache = new Map<string, boolean>()
-const pending = new Map<string, Promise<boolean>>()
-
-function fetchBrightness(imageUrl: string): Promise<boolean> {
-  const cached = cache.get(imageUrl)
-  if (cached !== undefined) return Promise.resolve(cached)
-
-  const inFlight = pending.get(imageUrl)
-  if (inFlight) return inFlight
-
-  const promise = fetch(`/api/brightness?url=${encodeURIComponent(imageUrl)}`)
-    .then((res) => res.json())
-    .then((data) => {
-      const isDark = data.brightness === 'dark'
-      cache.set(imageUrl, isDark)
-      return isDark
-    })
-    .catch(() => {
-      const fallback = getThemeDefault()
-      cache.set(imageUrl, fallback)
-      return fallback
-    })
-    .finally(() => {
-      pending.delete(imageUrl)
-    })
-
-  pending.set(imageUrl, promise)
-  return promise
-}
-
-export function useImageBrightness(imageUrl?: string | null) {
-  const [isDarkBg, setIsDarkBg] = useState(getThemeDefault)
-
-  useEffect(() => {
-    if (!imageUrl) {
-      setIsDarkBg(getThemeDefault())
-      return
-    }
-
-    let cancelled = false
-
-    fetchBrightness(imageUrl).then((result) => {
-      if (!cancelled) setIsDarkBg(result)
-    })
-
-    return () => {
-      cancelled = true
-    }
-  }, [imageUrl])
-
-  return isDarkBg
-}
diff --git a/lib/types.ts b/lib/types.ts
index d72181a..6f6e44e 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -14,6 +14,7 @@ export interface Project {
   development_progress?: number
   is_completed?: boolean
   is_archived?: boolean
+  text_color?: 'black' | 'white' | null
   changelog?: ChangelogEntry[]
 }
 

From b6b560893775c3e24ec8b060d35684c8d631d334 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Tue, 21 Jul 2026 13:09:05 +0200
Subject: [PATCH 24/42] fix: remplace text-gradient par text-white sur le
 titre, ajoute couleur explicite sur les tags en mode blanc

---
 components/project-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index 13d234b..b78d434 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -133,7 +133,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
           <div className="flex items-start justify-between gap-4">
             <div className="flex items-center gap-3 min-w-0">
               <h4 className={`text-xl lg:text-2xl font-bold tracking-tight truncate transition-all duration-500
-                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : isDarkBg ? "text-gradient" : "text-black"}
+                ${isFinished ? "text-emerald-400" : isArchived ? "text-indigo-400" : isDarkBg ? "text-white" : "text-black"}
               `}>
                 {project.title}
               </h4>
@@ -181,7 +181,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                 key={tag}
                 variant="outline"
                 className={`rounded-full px-3 py-0.5 transition-all font-semibold text-[10px] uppercase tracking-wider
-                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : isDarkBg ? "bg-white/5 border-white/10 group-hover:border-primary/50" : "bg-black/5 border-black/10 group-hover:border-black/30"}
+                  ${isFinished ? "bg-emerald-500/5 border-emerald-500/20 text-emerald-400/80" : isArchived ? "bg-indigo-500/5 border-indigo-500/20 text-indigo-400/80" : isDarkBg ? "bg-white/5 border-white/10 text-white group-hover:border-primary/50" : "bg-black/5 border-black/10 text-black group-hover:border-black/30"}
                 `}
               >
                 {tag}

From 51dd102009c9d91af97ce17c357da5eacfd60089 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:09:14 +0200
Subject: [PATCH 25/42] feat: ajoute le champ featured, section projet en
 vedette + grille 3 colonnes pour les autres projets

---
 app/page.tsx                      | 30 +++++++++--
 components/admin-project-card.tsx |  5 ++
 components/portfolio-content.tsx  | 50 +++++++++++++-----
 components/project-card-small.tsx | 88 +++++++++++++++++++++++++++++++
 components/project-form.tsx       | 10 ++++
 db/schema-pg.ts                   |  1 +
 db/schema-sqlite.ts               |  1 +
 drizzle/0001_add_featured.sql     |  1 +
 lib/types.ts                      |  1 +
 9 files changed, 170 insertions(+), 17 deletions(-)
 create mode 100644 components/project-card-small.tsx
 create mode 100644 drizzle/0001_add_featured.sql

diff --git a/app/page.tsx b/app/page.tsx
index 1fe82e5..d147e85 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import { db } from "@/db"
 import { projets as projetsTable } from "@/db/schema"
-import { desc } from "drizzle-orm"
+import { desc, eq, or, isNull } from "drizzle-orm"
 import type { Project } from "@/lib/types"
 import { PortfolioContent } from "@/components/portfolio-content"
 import { TechStack } from "@/components/tech-stack"
@@ -46,12 +46,32 @@ export default async function HomePage() {
     }
   }
 
-  let projects: Project[] = []
+  let featuredProject: Project | null = null
+  let otherProjects: Project[] = []
   let fetchError = false
 
   try {
-    const rawProjects = await db.select().from(projetsTable).orderBy(desc(projetsTable.created_at))
-    projects = rawProjects.map((p: any) => ({
+    const [rawFeatured] = await db.select().from(projetsTable)
+      .where(eq(projetsTable.featured, true))
+      .limit(1)
+
+    const rawOther = await db.select().from(projetsTable)
+      .where(
+        or(
+          eq(projetsTable.featured, false),
+          isNull(projetsTable.featured)
+        )
+      )
+      .orderBy(desc(projetsTable.created_at))
+
+    featuredProject = rawFeatured ? ({
+      ...rawFeatured,
+      id: rawFeatured.id.toString(),
+      created_at: rawFeatured.created_at?.toISOString() || new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    }) as unknown as Project : null
+
+    otherProjects = rawOther.map((p: any) => ({
       ...p,
       id: p.id.toString(),
       created_at: p.created_at?.toISOString() || new Date().toISOString(),
@@ -152,7 +172,7 @@ export default async function HomePage() {
               )}
             </div>
 
-            <PortfolioContent projects={projects} />
+            <PortfolioContent featuredProject={featuredProject} otherProjects={otherProjects} />
           </div>
         </section>
 
diff --git a/components/admin-project-card.tsx b/components/admin-project-card.tsx
index 4eee74f..4be96af 100644
--- a/components/admin-project-card.tsx
+++ b/components/admin-project-card.tsx
@@ -65,6 +65,11 @@ export function AdminProjectCard({ project, onDeleted, onUpdated }: AdminProject
                   Archived
                 </Badge>
               )}
+              {project.featured && (
+                <Badge variant="secondary" className="bg-amber-500/10 text-amber-500 border-amber-500/20 text-[10px]">
+                  Featured
+                </Badge>
+              )}
             </div>
             <p className="text-sm text-muted-foreground line-clamp-2 font-medium">
               {project.description || "No description."}
diff --git a/components/portfolio-content.tsx b/components/portfolio-content.tsx
index 3891ec4..481c72d 100644
--- a/components/portfolio-content.tsx
+++ b/components/portfolio-content.tsx
@@ -2,25 +2,51 @@
 
 import type { Project } from "@/lib/types"
 import { ProjectCard } from "@/components/project-card"
+import { ProjectCardSmall } from "@/components/project-card-small"
 
 interface PortfolioContentProps {
-  projects: Project[]
+  featuredProject: Project | null
+  otherProjects: Project[]
 }
 
-export function PortfolioContent({ projects }: PortfolioContentProps) {
+export function PortfolioContent({ featuredProject, otherProjects }: PortfolioContentProps) {
   return (
     <div className="space-y-16">
-      <div className="flex flex-col gap-6">
-        {projects.map((project, index) => (
-          <div
-            key={project.id}
-            style={{ animationDelay: `${index * 50}ms` }}
-            className="w-full animate-fade-in-up"
-          >
-            <ProjectCard project={project} />
+      {featuredProject && (
+        <section>
+          <div className="mb-8">
+            <h4 className="text-sm font-bold uppercase tracking-[0.2em] text-primary">
+              Projet en vedette
+            </h4>
           </div>
-        ))}
-      </div>
+          <div className="animate-fade-in-up">
+            <ProjectCard project={featuredProject} />
+          </div>
+        </section>
+      )}
+
+      {otherProjects.length > 0 && (
+        <section>
+          {featuredProject && (
+            <div className="mb-8">
+              <h4 className="text-sm font-bold uppercase tracking-[0.2em] text-muted-foreground">
+                Autres projets
+              </h4>
+            </div>
+          )}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {otherProjects.map((project, index) => (
+              <div
+                key={project.id}
+                style={{ animationDelay: `${index * 50}ms` }}
+                className="animate-fade-in-up"
+              >
+                <ProjectCardSmall project={project} />
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
     </div>
   )
 }
diff --git a/components/project-card-small.tsx b/components/project-card-small.tsx
new file mode 100644
index 0000000..a357a5c
--- /dev/null
+++ b/components/project-card-small.tsx
@@ -0,0 +1,88 @@
+import type { Project } from "@/lib/types"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { ExternalLink, Github, ImageOff } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+
+interface ProjectCardSmallProps {
+  project: Project
+}
+
+export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
+  return (
+    <div className="group relative rounded-2xl overflow-hidden glass border border-white/5 transition-all duration-500 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1">
+      {/* Image */}
+      <div className="relative w-full aspect-video overflow-hidden bg-muted/20">
+        {project.image_url ? (
+          <Image
+            src={project.image_url}
+            alt={`${project.title} - Project screenshot`}
+            fill
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            loading="lazy"
+            decoding="async"
+            className="object-cover object-center group-hover:scale-110 transition-transform duration-700 ease-out"
+          />
+        ) : (
+          <div className="absolute inset-0 flex flex-col items-center justify-center space-y-2">
+            <div className="p-3 rounded-2xl border border-dashed border-white/10 bg-white/5">
+              <ImageOff className="h-6 w-6 text-muted-foreground/40" />
+            </div>
+            <span className="text-[9px] font-black uppercase tracking-[0.2em] text-muted-foreground/30">
+              No preview
+            </span>
+          </div>
+        )}
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent" />
+      </div>
+
+      {/* Content */}
+      <div className="p-5 space-y-3">
+        <h4 className="text-lg font-bold tracking-tight text-white group-hover:text-primary transition-colors">
+          {project.title}
+        </h4>
+
+        {project.description && (
+          <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
+            {project.description}
+          </p>
+        )}
+
+        <div className="flex flex-wrap gap-1.5">
+          {project.tags.slice(0, 4).map((tag) => (
+            <Badge
+              key={tag}
+              variant="outline"
+              className="rounded-full px-2.5 py-0 text-[9px] font-semibold uppercase tracking-wider border-white/10 text-white/70 bg-white/5"
+            >
+              {tag}
+            </Badge>
+          ))}
+          {project.tags.length > 4 && (
+            <span className="text-[9px] text-muted-foreground/50 self-center">+{project.tags.length - 4}</span>
+          )}
+        </div>
+
+        <div className="flex gap-2 pt-2">
+          {project.project_url && (
+            <Button asChild size="sm" className="rounded-full h-8 px-4 text-xs font-bold tracking-tight bg-white text-black hover:bg-primary hover:text-white transition-all shadow-lg">
+              <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>
+                <ExternalLink className="mr-1.5 h-3.5 w-3.5" />
+                Live
+              </Link>
+            </Button>
+          )}
+          {project.github_url && (
+            <Button asChild variant="ghost" size="sm" className="rounded-full h-8 px-4 text-xs font-bold tracking-tight border border-white/10 glass hover:bg-white/10">
+              <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
+                <Github className="mr-1.5 h-3.5 w-3.5" />
+                Code
+              </Link>
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/project-form.tsx b/components/project-form.tsx
index 7e2dc54..94e9e3c 100644
--- a/components/project-form.tsx
+++ b/components/project-form.tsx
@@ -29,6 +29,7 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
   const [isArchived, setIsArchived] = useState(project?.is_archived || false)
   const [progress, setProgress] = useState(project?.development_progress || 0)
   const [textColor, setTextColor] = useState<'black' | 'white'>(project?.text_color || 'white')
+  const [featured, setFeatured] = useState(project?.featured || false)
   const formRef = useRef<HTMLFormElement>(null)
 
   const router = useRouter()
@@ -52,6 +53,7 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
       is_archived: isArchived,
       development_progress: progress,
       text_color: textColor,
+      featured,
     }
 
     try {
@@ -174,6 +176,14 @@ export function ProjectForm({ project, onSuccess }: ProjectFormProps) {
                 </div>
               )}
 
+              <div className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
+                <div className="space-y-0.5">
+                  <Label className="text-sm font-bold">Featured</Label>
+                  <p className="text-[9px] text-muted-foreground uppercase">Show as featured project</p>
+                </div>
+                <Switch checked={featured} onCheckedChange={setFeatured} className="scale-75" />
+              </div>
+
               <div className="grid grid-cols-3 gap-4">
                 <div className="flex items-center justify-between p-3 rounded-xl bg-white/5 border border-white/5">
                   <Label className="text-sm font-bold">Finished</Label>
diff --git a/db/schema-pg.ts b/db/schema-pg.ts
index 7783a69..0a7e9a8 100644
--- a/db/schema-pg.ts
+++ b/db/schema-pg.ts
@@ -15,6 +15,7 @@ export const projets = pgTable("projets", {
   is_completed: boolean("is_completed").default(false),
   is_archived: boolean("is_archived").default(false),
   development_progress: integer("development_progress").default(0),
+  featured: boolean("featured").default(false),
   text_color: text("text_color"),
   changelog: jsonb("changelog").$type<ChangelogEntry[]>().default([]),
   created_at: timestamp("created_at").defaultNow(),
diff --git a/db/schema-sqlite.ts b/db/schema-sqlite.ts
index c68a3db..8aef90e 100644
--- a/db/schema-sqlite.ts
+++ b/db/schema-sqlite.ts
@@ -27,6 +27,7 @@ export const projets = sqliteTable("projets", {
   is_archived: integer("is_archived").default(0),
   development_progress: integer("development_progress").default(0),
   text_color: text("text_color"),
+  featured: integer("featured").default(0),
   changelog: jsonText("changelog").$type<any[]>(),
   created_at: timestampText("created_at"),
 }, (table) => ({
diff --git a/drizzle/0001_add_featured.sql b/drizzle/0001_add_featured.sql
new file mode 100644
index 0000000..f996397
--- /dev/null
+++ b/drizzle/0001_add_featured.sql
@@ -0,0 +1 @@
+ALTER TABLE "projets" ADD COLUMN "featured" boolean DEFAULT false;--> statement-breakpoint
diff --git a/lib/types.ts b/lib/types.ts
index 6f6e44e..97b81ff 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -15,6 +15,7 @@ export interface Project {
   is_completed?: boolean
   is_archived?: boolean
   text_color?: 'black' | 'white' | null
+  featured?: boolean
   changelog?: ChangelogEntry[]
 }
 

From ba5fa8476731736be5f2cb5ce4d784d51455ccfd Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:10:43 +0200
Subject: [PATCH 26/42] fix: uniformise la hauteur des petites cards avec
 flex-col h-full

---
 components/project-card-small.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/project-card-small.tsx b/components/project-card-small.tsx
index a357a5c..5462e4a 100644
--- a/components/project-card-small.tsx
+++ b/components/project-card-small.tsx
@@ -11,7 +11,7 @@ interface ProjectCardSmallProps {
 
 export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
   return (
-    <div className="group relative rounded-2xl overflow-hidden glass border border-white/5 transition-all duration-500 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1">
+    <div className="group relative rounded-2xl overflow-hidden glass border border-white/5 transition-all duration-500 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1 h-full flex flex-col">
       {/* Image */}
       <div className="relative w-full aspect-video overflow-hidden bg-muted/20">
         {project.image_url ? (
@@ -38,7 +38,7 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
       </div>
 
       {/* Content */}
-      <div className="p-5 space-y-3">
+      <div className="p-5 space-y-3 flex-1 flex flex-col">
         <h4 className="text-lg font-bold tracking-tight text-white group-hover:text-primary transition-colors">
           {project.title}
         </h4>
@@ -49,7 +49,7 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
           </p>
         )}
 
-        <div className="flex flex-wrap gap-1.5">
+        <div className="flex flex-wrap gap-1.5 mt-auto">
           {project.tags.slice(0, 4).map((tag) => (
             <Badge
               key={tag}
@@ -64,7 +64,7 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
           )}
         </div>
 
-        <div className="flex gap-2 pt-2">
+        <div className="flex gap-2">
           {project.project_url && (
             <Button asChild size="sm" className="rounded-full h-8 px-4 text-xs font-bold tracking-tight bg-white text-black hover:bg-primary hover:text-white transition-all shadow-lg">
               <Link href={project.project_url} target="_blank" rel="noopener noreferrer" aria-label={`Live demo of ${project.title}`}>

From 316c6b07fd02cceca0ef9f1baf3d5d4c12e482b1 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:11:12 +0200
Subject: [PATCH 27/42] fix: passe le texte des petites cards en noir avec fond
 blanc

---
 components/project-card-small.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/project-card-small.tsx b/components/project-card-small.tsx
index 5462e4a..739bf6b 100644
--- a/components/project-card-small.tsx
+++ b/components/project-card-small.tsx
@@ -11,7 +11,7 @@ interface ProjectCardSmallProps {
 
 export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
   return (
-    <div className="group relative rounded-2xl overflow-hidden glass border border-white/5 transition-all duration-500 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1 h-full flex flex-col">
+    <div className="group relative rounded-2xl overflow-hidden bg-white border border-black/5 transition-all duration-500 hover:border-primary/30 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-1 h-full flex flex-col">
       {/* Image */}
       <div className="relative w-full aspect-video overflow-hidden bg-muted/20">
         {project.image_url ? (
@@ -39,12 +39,12 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
 
       {/* Content */}
       <div className="p-5 space-y-3 flex-1 flex flex-col">
-        <h4 className="text-lg font-bold tracking-tight text-white group-hover:text-primary transition-colors">
+        <h4 className="text-lg font-bold tracking-tight text-black group-hover:text-primary transition-colors">
           {project.title}
         </h4>
 
         {project.description && (
-          <p className="text-sm text-muted-foreground leading-relaxed line-clamp-3">
+          <p className="text-sm text-black/70 leading-relaxed line-clamp-3">
             {project.description}
           </p>
         )}
@@ -54,13 +54,13 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
             <Badge
               key={tag}
               variant="outline"
-              className="rounded-full px-2.5 py-0 text-[9px] font-semibold uppercase tracking-wider border-white/10 text-white/70 bg-white/5"
+              className="rounded-full px-2.5 py-0 text-[9px] font-semibold uppercase tracking-wider border-black/10 text-black/70 bg-black/5"
             >
               {tag}
             </Badge>
           ))}
           {project.tags.length > 4 && (
-            <span className="text-[9px] text-muted-foreground/50 self-center">+{project.tags.length - 4}</span>
+            <span className="text-[9px] text-black/50 self-center">+{project.tags.length - 4}</span>
           )}
         </div>
 
@@ -74,7 +74,7 @@ export function ProjectCardSmall({ project }: ProjectCardSmallProps) {
             </Button>
           )}
           {project.github_url && (
-            <Button asChild variant="ghost" size="sm" className="rounded-full h-8 px-4 text-xs font-bold tracking-tight border border-white/10 glass hover:bg-white/10">
+            <Button asChild variant="ghost" size="sm" className="rounded-full h-8 px-4 text-xs font-bold tracking-tight border border-black/10 bg-black/5 hover:bg-black/10 text-black">
               <Link href={project.github_url} target="_blank" rel="noopener noreferrer" aria-label={`Source code of ${project.title}`}>
                 <Github className="mr-1.5 h-3.5 w-3.5" />
                 Code

From 297a52004578f1689f17bd66516dbf07b753d72d Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:13:52 +0200
Subject: [PATCH 28/42] chore: supprime la migration manuelle (incompatible
 avec le snapshot drizzle)

---
 drizzle/0001_add_featured.sql | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 drizzle/0001_add_featured.sql

diff --git a/drizzle/0001_add_featured.sql b/drizzle/0001_add_featured.sql
deleted file mode 100644
index f996397..0000000
--- a/drizzle/0001_add_featured.sql
+++ /dev/null
@@ -1 +0,0 @@
-ALTER TABLE "projets" ADD COLUMN "featured" boolean DEFAULT false;--> statement-breakpoint

From b42dcdaf942870496e5530051cbd590df2b16ee7 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:16:14 +0200
Subject: [PATCH 29/42] =?UTF-8?q?fix:=20ne=20convertit=20les=20bool=C3=A9e?=
 =?UTF-8?q?ns=20en=200/1=20que=20pour=20SQLite,=20pas=20pour=20PostgreSQL?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/actions.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/lib/actions.ts b/lib/actions.ts
index 8961a0b..bcba52d 100644
--- a/lib/actions.ts
+++ b/lib/actions.ts
@@ -5,11 +5,15 @@ import { projets, admin, settings } from "@/db/schema"
 import { eq, desc } from "drizzle-orm"
 import { revalidatePath } from "next/cache"
 import type { Project, ChangelogEntry } from "./types"
+import { dbType } from "@/db/config"
 import bcrypt from "bcryptjs"
 
 function toSql(value: unknown): unknown {
   if (value == null) return null
-  if (typeof value === "boolean") return value ? 1 : 0
+  if (typeof value === "boolean") {
+    if (dbType === "sqlite") return value ? 1 : 0
+    return value
+  }
   if (typeof value === "string" || typeof value === "number") return value
   if (value instanceof Date) return value.toISOString()
   return value

From 626587fa4cba47a4823ce642af12043aaeeaf8f3 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:17:45 +0200
Subject: [PATCH 30/42] supprime les titres Projet en vedette et Autres projets

---
 components/portfolio-content.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/components/portfolio-content.tsx b/components/portfolio-content.tsx
index 481c72d..b83f72b 100644
--- a/components/portfolio-content.tsx
+++ b/components/portfolio-content.tsx
@@ -14,11 +14,6 @@ export function PortfolioContent({ featuredProject, otherProjects }: PortfolioCo
     <div className="space-y-16">
       {featuredProject && (
         <section>
-          <div className="mb-8">
-            <h4 className="text-sm font-bold uppercase tracking-[0.2em] text-primary">
-              Projet en vedette
-            </h4>
-          </div>
           <div className="animate-fade-in-up">
             <ProjectCard project={featuredProject} />
           </div>
@@ -27,13 +22,6 @@ export function PortfolioContent({ featuredProject, otherProjects }: PortfolioCo
 
       {otherProjects.length > 0 && (
         <section>
-          {featuredProject && (
-            <div className="mb-8">
-              <h4 className="text-sm font-bold uppercase tracking-[0.2em] text-muted-foreground">
-                Autres projets
-              </h4>
-            </div>
-          )}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {otherProjects.map((project, index) => (
               <div

From d0ea7cc2b89a7874a9baf0f4b08ab91c44a470cf Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:18:52 +0200
Subject: [PATCH 31/42] reduce l'espacement entre le projet featured et la
 grille

---
 components/portfolio-content.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/portfolio-content.tsx b/components/portfolio-content.tsx
index b83f72b..c2a3e0c 100644
--- a/components/portfolio-content.tsx
+++ b/components/portfolio-content.tsx
@@ -11,7 +11,7 @@ interface PortfolioContentProps {
 
 export function PortfolioContent({ featuredProject, otherProjects }: PortfolioContentProps) {
   return (
-    <div className="space-y-16">
+    <div className="space-y-8">
       {featuredProject && (
         <section>
           <div className="animate-fade-in-up">

From 08d29d455f78298439761982c73eff026375e258 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:20:57 +0200
Subject: [PATCH 32/42] remonte les boutons du hero avec items-start pt-48

---
 app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index d147e85..26df17b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -115,8 +115,8 @@ export default async function HomePage() {
       </header>
 
       <main className="relative z-10 pt-20">
-        <section className="relative min-h-[calc(100dvh-5rem)] flex items-center justify-center overflow-hidden">
-          <div className="container px-6 py-24 mx-auto text-center space-y-12">
+        <section className="relative min-h-[calc(100dvh-5rem)] flex items-start justify-center pt-48 overflow-hidden">
+          <div className="container px-6 mx-auto text-center space-y-10">
 
             <div className="space-y-6">
               <h2 className="text-7xl md:text-8xl lg:text-[10rem] font-black tracking-[calc(-0.05em)] leading-[0.85] animate-fade-in-up font-display">
@@ -133,7 +133,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-6 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />

From c2a6ece72bc7fd109cbce29c7bed31bc1eabb815 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:22:38 +0200
Subject: [PATCH 33/42] rapProche les boutons du sous-titre dans le hero

---
 app/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 26df17b..dbabe31 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -115,8 +115,8 @@ export default async function HomePage() {
       </header>
 
       <main className="relative z-10 pt-20">
-        <section className="relative min-h-[calc(100dvh-5rem)] flex items-start justify-center pt-48 overflow-hidden">
-          <div className="container px-6 mx-auto text-center space-y-10">
+        <section className="relative min-h-[calc(100dvh-5rem)] flex items-center justify-center overflow-hidden">
+          <div className="container px-6 py-24 mx-auto text-center space-y-6">
 
             <div className="space-y-6">
               <h2 className="text-7xl md:text-8xl lg:text-[10rem] font-black tracking-[calc(-0.05em)] leading-[0.85] animate-fade-in-up font-display">
@@ -133,7 +133,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-6 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />

From ef12820efa628be1b6c8ce2e956e670c2fb0677c Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:23:37 +0200
Subject: [PATCH 34/42] remonte tout le contenu du hero (items-start pt-32)

---
 app/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index dbabe31..68ed68a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -115,8 +115,8 @@ export default async function HomePage() {
       </header>
 
       <main className="relative z-10 pt-20">
-        <section className="relative min-h-[calc(100dvh-5rem)] flex items-center justify-center overflow-hidden">
-          <div className="container px-6 py-24 mx-auto text-center space-y-6">
+        <section className="relative min-h-[calc(100dvh-5rem)] flex items-start justify-center pt-32 overflow-hidden">
+          <div className="container px-6 mx-auto text-center space-y-6">
 
             <div className="space-y-6">
               <h2 className="text-7xl md:text-8xl lg:text-[10rem] font-black tracking-[calc(-0.05em)] leading-[0.85] animate-fade-in-up font-display">

From 4f58aed52f852e1d5076dcb55e47643848549447 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:24:31 +0200
Subject: [PATCH 35/42] augmente l'espace entre les deux boutons du hero

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 68ed68a..1ecb9eb 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -133,7 +133,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />

From 0dfdcac90ebc58127c5b51fff88abc45ffdcdeaa Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:25:48 +0200
Subject: [PATCH 36/42] retire la fleche ArrowUpRight sur la carte projet

---
 components/project-card.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/project-card.tsx b/components/project-card.tsx
index b78d434..1c04d16 100644
--- a/components/project-card.tsx
+++ b/components/project-card.tsx
@@ -1,7 +1,7 @@
 import type { Project } from "@/lib/types"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { ExternalLink, Github, ArrowUpRight, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
+import { ExternalLink, Github, Wrench, Construction, CheckCircle2, Archive, PackageCheck, ImageOff, Trophy, Play, Pause } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 interface ProjectCardProps {
@@ -160,11 +160,7 @@ export function ProjectCard({ project }: ProjectCardProps) {
                   </div>
               )}
             </div>
-            <div className={`p-2 rounded-full border transition-all duration-300 shadow-glow shrink-0
-              ${isFinished ? "bg-emerald-500/10 border-emerald-500/20 opacity-100 shadow-emerald-500/20" : isArchived ? "bg-indigo-500/10 border-indigo-500/20 opacity-100 shadow-indigo-500/20" : isDarkBg ? "bg-white/5 border-white/10 opacity-0 group-hover:opacity-100" : "bg-black/5 border-black/10 opacity-0 group-hover:opacity-100"}
-            `}>
-              <ArrowUpRight className={`h-4 w-4 ${isFinished ? "text-emerald-500" : isArchived ? "text-indigo-500" : ""}`} />
-            </div>
+
           </div>
           <p className={`text-sm leading-relaxed font-medium line-clamp-2 transition-colors max-w-md
             ${isInDev ? "italic opacity-70" : ""}

From 4adf9b28a83dbf850f9fd661300c5fb3d8e2ba08 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:27:02 +0200
Subject: [PATCH 37/42] augmente encore l'espace entre les boutons (gap-8)

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 1ecb9eb..fcb4f37 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -133,7 +133,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-6 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />

From 932a33b78f3248ee9d25f27de2d9a39f6b87a827 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:28:39 +0200
Subject: [PATCH 38/42] augmente l'espace entre les boutons et le texte du hero

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index fcb4f37..d49b3d6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -116,7 +116,7 @@ export default async function HomePage() {
 
       <main className="relative z-10 pt-20">
         <section className="relative min-h-[calc(100dvh-5rem)] flex items-start justify-center pt-32 overflow-hidden">
-          <div className="container px-6 mx-auto text-center space-y-6">
+          <div className="container px-6 mx-auto text-center space-y-10">
 
             <div className="space-y-6">
               <h2 className="text-7xl md:text-8xl lg:text-[10rem] font-black tracking-[calc(-0.05em)] leading-[0.85] animate-fade-in-up font-display">

From de3a47df3bb8d388152e176b305a5f3aeb43052d Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Wed, 22 Jul 2026 13:29:05 +0200
Subject: [PATCH 39/42] reduit l'espacement entre les deux boutons

---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index d49b3d6..c06483c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -133,7 +133,7 @@ export default async function HomePage() {
               </p>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
               <ScrollButton targetId="projects" size="lg" className="rounded-full px-8 bg-primary hover:bg-primary text-white hover:text-white shadow-xl shadow-primary/25 hover:shadow-2xl hover:shadow-primary/50 group w-full sm:w-auto transition-all text-sm font-bold uppercase tracking-widest">
                 Discover Projects
                 <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />

From 7fbae3dda2fc114ad516e62f9f4f792fb75f7071 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Sat, 25 Jul 2026 14:25:57 +0200
Subject: [PATCH 40/42] feat: add GitHub projects slider with admin management

- New github_projects table (Postgres + SQLite schemas)
- Server actions: create (with GitHub API fetch), list, delete, refresh
- Admin UI: dialog with URL input + category selector, project cards
- Homepage slider: 'Projects I've Created' / 'Projects I Use Daily'
- Drizzle migration 0001_soft_ghost_riders
---
 .../dashboard/admin-dashboard-client.tsx      |  58 ++++++++-
 app/page.tsx                                  |  24 +++-
 components/admin-github-project-card.tsx      |  97 ++++++++++++++
 components/delete-github-project-dialog.tsx   |  61 +++++++++
 components/github-project-dialog.tsx          | 100 +++++++++++++++
 components/github-project-slider.tsx          | 116 +++++++++++++++++
 db/schema-pg.ts                               |  12 ++
 db/schema-sqlite.ts                           |  12 ++
 db/schema.ts                                  |   1 +
 drizzle/0001_soft_ghost_riders.sql            |  11 ++
 drizzle/meta/_journal.json                    |   7 ++
 lib/actions.ts                                | 119 +++++++++++++++++-
 lib/types.ts                                  |  12 ++
 13 files changed, 623 insertions(+), 7 deletions(-)
 create mode 100644 components/admin-github-project-card.tsx
 create mode 100644 components/delete-github-project-dialog.tsx
 create mode 100644 components/github-project-dialog.tsx
 create mode 100644 components/github-project-slider.tsx
 create mode 100644 drizzle/0001_soft_ghost_riders.sql

diff --git a/app/admin/dashboard/admin-dashboard-client.tsx b/app/admin/dashboard/admin-dashboard-client.tsx
index 1246b1e..68589b6 100644
--- a/app/admin/dashboard/admin-dashboard-client.tsx
+++ b/app/admin/dashboard/admin-dashboard-client.tsx
@@ -2,15 +2,17 @@
 
 import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
-import { Plus, LogOut, Home, UserPlus, LayoutDashboard, Database, Activity } from "lucide-react"
+import { Plus, LogOut, Home, UserPlus, LayoutDashboard, Database, Activity, Github } from "lucide-react"
 import { AdminProjectCard } from "@/components/admin-project-card"
 import { ProjectDialog } from "@/components/project-dialog"
 import { AdminDialog } from "@/components/admin-dialog"
 import { AdminCard } from "@/components/admin-card"
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"
-import type { Project, Admin } from "@/lib/types"
+import type { Project, Admin, GitHubProject } from "@/lib/types"
 import { logoutAdmin } from "@/lib/admin-auth"
-import { getAdmins, getMaintenanceMode, getAvailability, getProjects } from "@/lib/actions"
+import { getAdmins, getMaintenanceMode, getAvailability, getProjects, getGitHubProjects } from "@/lib/actions"
+import { GitHubProjectDialog } from "@/components/github-project-dialog"
+import { AdminGitHubProjectCard } from "@/components/admin-github-project-card"
 import { MaintenanceToggle } from "@/components/maintenance-toggle"
 import { AvailabilityToggle } from "@/components/availability-toggle"
 import Link from "next/link"
@@ -18,6 +20,7 @@ import Link from "next/link"
 export default function AdminDashboardClient() {
   const [projects, setProjects] = useState<Project[]>([])
   const [admins, setAdmins] = useState<Admin[]>([])
+  const [githubProjects, setGitHubProjects] = useState<GitHubProject[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [addProjectOpen, setAddProjectOpen] = useState(false)
   const [addAdminOpen, setAddAdminOpen] = useState(false)
@@ -25,6 +28,7 @@ export default function AdminDashboardClient() {
   const [maintenanceMessage, setMaintenanceMessage] = useState("")
   const [maintenanceProgress, setMaintenanceProgress] = useState(0)
   const [isAvailable, setIsAvailable] = useState(true)
+  const [addGitHubProjectOpen, setAddGitHubProjectOpen] = useState(false)
 
   const fetchProjects = async () => {
     const result = await getProjects()
@@ -56,6 +60,13 @@ export default function AdminDashboardClient() {
     }
   }
 
+  const fetchGitHubProjects = async () => {
+    const result = await getGitHubProjects()
+    if (result.success) {
+      setGitHubProjects(result.data)
+    }
+  }
+
   const fetchAvailability = async () => {
     const result = await getAvailability()
     if (result.success && result.isAvailable !== undefined) {
@@ -70,12 +81,17 @@ export default function AdminDashboardClient() {
     fetchAdmins()
     fetchMaintenanceMode()
     fetchAvailability()
+    fetchGitHubProjects()
   }, [])
 
   const handleProjectDeleted = (projectId: string) => {
     setProjects((prev) => prev.filter((p) => p.id !== projectId))
   }
 
+  const handleGitHubProjectDeleted = (projectId: string) => {
+    setGitHubProjects((prev) => prev.filter((p) => p.id !== projectId))
+  }
+
   const handleProjectUpdated = () => {
     fetchProjects()
   }
@@ -182,6 +198,41 @@ export default function AdminDashboardClient() {
                   )}
                 </div>
 
+                {/* GitHub Projects Section */}
+                <div className="space-y-8 pt-8 border-t border-white/5">
+                  <div className="flex flex-col md:flex-row md:items-end justify-between gap-8">
+                    <div className="space-y-2">
+                      <h2 className="text-2xl font-bold tracking-tight">GITHUB PROJECTS</h2>
+                      <p className="text-muted-foreground font-medium max-w-xl text-sm">
+                        Add repos from GitHub — name & description are fetched automatically.
+                      </p>
+                    </div>
+                    <Button onClick={() => setAddGitHubProjectOpen(true)} className="rounded-xl h-12 px-6 bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/25 group self-start md:self-auto transition-all" aria-label="Add GitHub project">
+                      <Plus className="mr-2 h-4 w-4 group-hover:rotate-90 transition-transform duration-300" aria-hidden="true" />
+                      Add Repo
+                    </Button>
+                  </div>
+
+                  {githubProjects.length === 0 ? (
+                    <div className="bg-black/5 dark:bg-white/5 p-12 rounded-3xl border border-black/5 dark:border-white/5 text-center space-y-4 shadow-inner">
+                      <div className="w-16 h-16 rounded-full bg-black/5 dark:bg-white/5 mx-auto flex items-center justify-center text-muted-foreground">
+                        <Github className="h-8 w-8" />
+                      </div>
+                      <p className="text-muted-foreground italic">No GitHub projects added yet.</p>
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {githubProjects.map((gp) => (
+                        <AdminGitHubProjectCard
+                          key={gp.id}
+                          project={gp}
+                          onDeleted={handleGitHubProjectDeleted}
+                        />
+                      ))}
+                    </div>
+                  )}
+                </div>
+
               </div>
             </AccordionContent>
           </AccordionItem>
@@ -275,6 +326,7 @@ export default function AdminDashboardClient() {
 
       <ProjectDialog open={addProjectOpen} onOpenChange={setAddProjectOpen} onSuccess={fetchProjects} />
       <AdminDialog open={addAdminOpen} onOpenChange={setAddAdminOpen} onSuccess={fetchAdmins} />
+      <GitHubProjectDialog open={addGitHubProjectOpen} onOpenChange={setAddGitHubProjectOpen} onSuccess={fetchGitHubProjects} />
     </div>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index c06483c..6958693 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,9 @@
 import { db } from "@/db"
-import { projets as projetsTable } from "@/db/schema"
+import { projets as projetsTable, githubProjects as githubProjectsTable } from "@/db/schema"
 import { desc, eq, or, isNull } from "drizzle-orm"
-import type { Project } from "@/lib/types"
+import type { Project, GitHubProject } from "@/lib/types"
 import { PortfolioContent } from "@/components/portfolio-content"
+import { GitHubProjectSlider } from "@/components/github-project-slider"
 import { TechStack } from "@/components/tech-stack"
 import { Button } from "@/components/ui/button"
 import { ScrollButton } from "@/components/scroll-button"
@@ -49,6 +50,8 @@ export default async function HomePage() {
   let featuredProject: Project | null = null
   let otherProjects: Project[] = []
   let fetchError = false
+  let githubCreated: GitHubProject[] = []
+  let githubUsed: GitHubProject[] = []
 
   try {
     const [rawFeatured] = await db.select().from(projetsTable)
@@ -77,6 +80,21 @@ export default async function HomePage() {
       created_at: p.created_at?.toISOString() || new Date().toISOString(),
       updated_at: new Date().toISOString(),
     })) as unknown as Project[]
+    const rawGithub = await db.select().from(githubProjectsTable).orderBy(desc(githubProjectsTable.created_at))
+    githubCreated = rawGithub
+      .filter((p: any) => p.type === "created")
+      .map((p: any) => ({
+        ...p,
+        id: p.id.toString(),
+        created_at: p.created_at?.toISOString() || new Date().toISOString(),
+      })) as unknown as GitHubProject[]
+    githubUsed = rawGithub
+      .filter((p: any) => p.type === "used")
+      .map((p: any) => ({
+        ...p,
+        id: p.id.toString(),
+        created_at: p.created_at?.toISOString() || new Date().toISOString(),
+      })) as unknown as GitHubProject[]
   } catch (e) {
     console.error("Database connection error:", e)
     fetchError = true
@@ -176,6 +194,8 @@ export default async function HomePage() {
           </div>
         </section>
 
+        <GitHubProjectSlider created={githubCreated} used={githubUsed} />
+
         <TechStack />
       </main>
     </div >
diff --git a/components/admin-github-project-card.tsx b/components/admin-github-project-card.tsx
new file mode 100644
index 0000000..71b4cc8
--- /dev/null
+++ b/components/admin-github-project-card.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Trash2, RefreshCw, Github, Star, Loader2, ExternalLink } from "lucide-react"
+import { deleteGitHubProject, refreshGitHubProject } from "@/lib/actions"
+import { DeleteGitHubProjectDialog } from "./delete-github-project-dialog"
+import type { GitHubProject } from "@/lib/types"
+
+interface AdminGitHubProjectCardProps {
+  project: GitHubProject
+  onDeleted: (id: string) => void
+}
+
+export function AdminGitHubProjectCard({ project, onDeleted }: AdminGitHubProjectCardProps) {
+  const [refreshing, setRefreshing] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    await refreshGitHubProject(project.id)
+    setRefreshing(false)
+  }
+
+  return (
+    <>
+      <div className="bg-black/5 dark:bg-white/5 rounded-2xl border border-black/5 dark:border-white/5 p-5 space-y-3 hover:bg-black/10 dark:hover:bg-white/10 transition-colors group">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-2 min-w-0">
+            <Github className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            <span className="font-semibold text-sm truncate">{project.name}</span>
+          </div>
+          <div className="flex items-center gap-1 flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7"
+              onClick={handleRefresh}
+              disabled={refreshing}
+              title="Refresh from GitHub"
+            >
+              {refreshing ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RefreshCw className="h-3.5 w-3.5" />}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-7 w-7 text-destructive hover:text-destructive"
+              onClick={() => setDeleteOpen(true)}
+              title="Delete"
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </div>
+        {project.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2">{project.description}</p>
+        )}
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {project.language && (
+            <div className="flex items-center gap-1">
+              <div className="w-2 h-2 rounded-full bg-primary/60" />
+              <span>{project.language}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-1">
+            <Star className="h-3 w-3" />
+            <span>{project.stars}</span>
+          </div>
+          <a
+            href={project.github_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-auto flex items-center gap-1 hover:text-foreground transition-colors"
+          >
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+        <div className="pt-1">
+          <span className={`text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full ${
+            project.type === "created"
+              ? "bg-blue-500/10 text-blue-500"
+              : "bg-green-500/10 text-green-500"
+          }`}>
+            {project.type === "created" ? "Created" : "Used"}
+          </span>
+        </div>
+      </div>
+      <DeleteGitHubProjectDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        projectId={project.id}
+        projectName={project.name}
+        onDeleted={() => onDeleted(project.id)}
+      />
+    </>
+  )
+}
diff --git a/components/delete-github-project-dialog.tsx b/components/delete-github-project-dialog.tsx
new file mode 100644
index 0000000..7450dfc
--- /dev/null
+++ b/components/delete-github-project-dialog.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { useState } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { deleteGitHubProject } from "@/lib/actions"
+
+interface DeleteGitHubProjectDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  projectId: string
+  projectName: string
+  onDeleted: () => void
+}
+
+export function DeleteGitHubProjectDialog({
+  open,
+  onOpenChange,
+  projectId,
+  projectName,
+  onDeleted,
+}: DeleteGitHubProjectDialogProps) {
+  const [loading, setLoading] = useState(false)
+
+  const handleDelete = async () => {
+    setLoading(true)
+    const result = await deleteGitHubProject(projectId)
+    if (result.success) {
+      onDeleted()
+      onOpenChange(false)
+    }
+    setLoading(false)
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete GitHub Project</AlertDialogTitle>
+          <AlertDialogDescription>
+            Are you sure you want to remove <strong>{projectName}</strong> from the list?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={loading}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleDelete} disabled={loading} className="bg-destructive hover:bg-destructive/90">
+            {loading ? "Deleting..." : "Delete"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/components/github-project-dialog.tsx b/components/github-project-dialog.tsx
new file mode 100644
index 0000000..2822dc1
--- /dev/null
+++ b/components/github-project-dialog.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { createGitHubProject } from "@/lib/actions"
+import { Loader2, Github } from "lucide-react"
+
+interface GitHubProjectDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSuccess: () => void
+}
+
+export function GitHubProjectDialog({ open, onOpenChange, onSuccess }: GitHubProjectDialogProps) {
+  const [url, setUrl] = useState("")
+  const [type, setType] = useState<"created" | "used">("created")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!url.trim()) {
+      setError("Please enter a GitHub repository URL")
+      return
+    }
+    setLoading(true)
+    setError("")
+
+    const result = await createGitHubProject(url.trim(), type)
+    if (result.success) {
+      setUrl("")
+      setType("created")
+      setError("")
+      onSuccess()
+      onOpenChange(false)
+    } else {
+      setError(result.error || "Failed to add project")
+    }
+    setLoading(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Github className="h-5 w-5" />
+            Add GitHub Project
+          </DialogTitle>
+          <DialogDescription>
+            Paste a GitHub repository URL. The name and description will be fetched automatically.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="github-url">GitHub Repository URL</Label>
+            <Input
+              id="github-url"
+              placeholder="https://github.com/owner/repo"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              disabled={loading}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="project-type">Category</Label>
+            <Select value={type} onValueChange={(v) => setType(v as "created" | "used")} disabled={loading}>
+              <SelectTrigger id="project-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="created">Projects I&apos;ve Created</SelectItem>
+                <SelectItem value="used">Projects I Use Daily</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          {error && (
+            <p className="text-sm text-destructive bg-destructive/10 p-3 rounded-lg border border-destructive/20">
+              {error}
+            </p>
+          )}
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Fetching from GitHub...
+              </>
+            ) : (
+              "Add Project"
+            )}
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/github-project-slider.tsx b/components/github-project-slider.tsx
new file mode 100644
index 0000000..a98e825
--- /dev/null
+++ b/components/github-project-slider.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { useRef } from "react"
+import { ChevronLeft, ChevronRight, Star, GitFork, ExternalLink } from "lucide-react"
+import type { GitHubProject } from "@/lib/types"
+import Link from "next/link"
+
+interface GitHubProjectSliderProps {
+  created: GitHubProject[]
+  used: GitHubProject[]
+}
+
+function ProjectCard({ project }: { project: GitHubProject }) {
+  return (
+    <Link
+      href={project.github_url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex-shrink-0 w-[280px] snap-start"
+    >
+      <div className="h-full bg-white/40 dark:bg-white/5 backdrop-blur-xl rounded-2xl border border-black/5 dark:border-white/10 p-6 hover:bg-white/60 dark:hover:bg-white/10 hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 flex flex-col gap-3">
+        <div className="flex items-start justify-between gap-2">
+          <h3 className="font-bold text-sm truncate">{project.name}</h3>
+          <ExternalLink className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 mt-0.5" />
+        </div>
+        {project.description && (
+          <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">
+            {project.description}
+          </p>
+        )}
+        <div className="flex items-center gap-3 mt-auto pt-2">
+          {project.language && (
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-full bg-primary/60" />
+              <span className="text-[11px] font-medium text-muted-foreground">{project.language}</span>
+            </div>
+          )}
+          <div className="flex items-center gap-1 ml-auto">
+            <Star className="h-3 w-3 text-muted-foreground" />
+            <span className="text-[11px] font-medium text-muted-foreground">{project.stars}</span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+function ProjectRow({ title, projects }: { title: string; projects: GitHubProject[] }) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+
+  const scroll = (direction: "left" | "right") => {
+    if (!scrollRef.current) return
+    const amount = 300
+    scrollRef.current.scrollBy({
+      left: direction === "left" ? -amount : amount,
+      behavior: "smooth",
+    })
+  }
+
+  if (projects.length === 0) return null
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-bold tracking-tight">{title}</h3>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => scroll("left")}
+            className="p-1.5 rounded-full bg-white/40 dark:bg-white/10 border border-black/5 dark:border-white/10 hover:bg-white/60 dark:hover:bg-white/20 transition-colors"
+            aria-label="Scroll left"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <button
+            onClick={() => scroll("right")}
+            className="p-1.5 rounded-full bg-white/40 dark:bg-white/10 border border-black/5 dark:border-white/10 hover:bg-white/60 dark:hover:bg-white/20 transition-colors"
+            aria-label="Scroll right"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+      <div
+        ref={scrollRef}
+        className="flex gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-hide pb-2"
+        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+      >
+        {projects.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function GitHubProjectSlider({ created, used }: GitHubProjectSliderProps) {
+  if (created.length === 0 && used.length === 0) return null
+
+  return (
+    <section className="py-24 border-y border-white/5">
+      <div className="container mx-auto px-6 space-y-12">
+        <div className="space-y-4 max-w-2xl">
+          <div className="text-primary font-bold tracking-widest text-sm uppercase">Open Source</div>
+          <h3 className="text-4xl md:text-5xl font-bold tracking-tight">GITHUB PROJECTS</h3>
+          <p className="text-base text-muted-foreground font-medium">
+            Projects I&apos;ve built and tools I use daily.
+          </p>
+        </div>
+        <div className="space-y-10">
+          <ProjectRow title="Projects I've Created" projects={created} />
+          <ProjectRow title="Projects I Use Daily" projects={used} />
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/db/schema-pg.ts b/db/schema-pg.ts
index 0a7e9a8..07f3118 100644
--- a/db/schema-pg.ts
+++ b/db/schema-pg.ts
@@ -33,3 +33,15 @@ export const settings = pgTable("settings", {
   value: jsonb("value").notNull(),
   updated_at: timestamp("updated_at").defaultNow(),
 })
+
+export const githubProjects = pgTable("github_projects", {
+  id: serial("id").primaryKey(),
+  type: text("type").notNull().$type<"created" | "used">(),
+  github_url: text("github_url").notNull(),
+  name: text("name").notNull(),
+  description: text("description"),
+  language: text("language"),
+  stars: integer("stars").default(0),
+  order: integer("order").default(0),
+  created_at: timestamp("created_at").defaultNow(),
+})
diff --git a/db/schema-sqlite.ts b/db/schema-sqlite.ts
index 8aef90e..b7a65b8 100644
--- a/db/schema-sqlite.ts
+++ b/db/schema-sqlite.ts
@@ -48,3 +48,15 @@ export const settings = sqliteTable("settings", {
   value: jsonText("value").$type<any>(),
   updated_at: timestampText("updated_at"),
 })
+
+export const githubProjects = sqliteTable("github_projects", {
+  id: integer("id").primaryKey({ autoIncrement: true }),
+  type: text("type").notNull(),
+  github_url: text("github_url").notNull(),
+  name: text("name").notNull(),
+  description: text("description"),
+  language: text("language"),
+  stars: integer("stars").default(0),
+  order: integer("order").default(0),
+  created_at: timestampText("created_at"),
+})
diff --git a/db/schema.ts b/db/schema.ts
index 1fd47a9..cf28e90 100644
--- a/db/schema.ts
+++ b/db/schema.ts
@@ -8,4 +8,5 @@ export const {
   projets,
   admin,
   settings,
+  githubProjects,
 } = selectedSchema
diff --git a/drizzle/0001_soft_ghost_riders.sql b/drizzle/0001_soft_ghost_riders.sql
new file mode 100644
index 0000000..1f2405e
--- /dev/null
+++ b/drizzle/0001_soft_ghost_riders.sql
@@ -0,0 +1,11 @@
+CREATE TABLE "github_projects" (
+	"id" serial PRIMARY KEY NOT NULL,
+	"type" text NOT NULL,
+	"github_url" text NOT NULL,
+	"name" text NOT NULL,
+	"description" text,
+	"language" text,
+	"stars" integer DEFAULT 0,
+	"order" integer DEFAULT 0,
+	"created_at" timestamp DEFAULT now()
+);
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
index 897df90..cc3e2f0 100644
--- a/drizzle/meta/_journal.json
+++ b/drizzle/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1784293091515,
       "tag": "0000_stiff_nova",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1784393091515,
+      "tag": "0001_soft_ghost_riders",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/lib/actions.ts b/lib/actions.ts
index bcba52d..761a9f4 100644
--- a/lib/actions.ts
+++ b/lib/actions.ts
@@ -1,10 +1,10 @@
 "use server"
 
 import { db } from "@/db"
-import { projets, admin, settings } from "@/db/schema"
+import { projets, admin, settings, githubProjects } from "@/db/schema"
 import { eq, desc } from "drizzle-orm"
 import { revalidatePath } from "next/cache"
-import type { Project, ChangelogEntry } from "./types"
+import type { Project, ChangelogEntry, GitHubProject } from "./types"
 import { dbType } from "@/db/config"
 import bcrypt from "bcryptjs"
 
@@ -228,6 +228,121 @@ export async function updateAvailability(isAvailable: boolean) {
   }
 }
 
+function parseGithubUrl(url: string): { owner: string; repo: string } | null {
+  try {
+    const clean = url.replace(/\.git$/, "").replace(/\/$/, "")
+    const match = clean.match(/github\.com[:\/]([^\/]+)\/([^\/\s?#]+)/)
+    if (match) return { owner: match[1], repo: match[2] }
+    return null
+  } catch {
+    return null
+  }
+}
+
+export async function createGitHubProject(githubUrl: string, type: "created" | "used") {
+  try {
+    const parsed = parseGithubUrl(githubUrl)
+    if (!parsed) return { success: false, error: "Invalid GitHub URL" }
+
+    const res = await fetch(`https://api.github.com/repos/${parsed.owner}/${parsed.repo}`, {
+      headers: { "User-Agent": "v6-portfolio" },
+    })
+
+    if (!res.ok) {
+      if (res.status === 403) return { success: false, error: "GitHub API rate limit reached. Try again later." }
+      if (res.status === 404) return { success: false, error: "Repository not found." }
+      return { success: false, error: `GitHub API error: ${res.status}` }
+    }
+
+    const data = await res.json()
+    const values: Record<string, unknown> = {
+      type,
+      github_url: data.html_url,
+      name: data.name,
+      description: data.description || "",
+      language: data.language,
+      stars: data.stargazers_count || 0,
+      created_at: new Date(),
+    }
+
+    const [project] = await db.insert(githubProjects).values(values).returning()
+
+    revalidatePath("/")
+    revalidatePath("/admin/dashboard")
+    return { success: true, project }
+  } catch (error: unknown) {
+    console.error("Error creating GitHub project:", error)
+    return { success: false, error: (error as Error).message }
+  }
+}
+
+export async function getGitHubProjects() {
+  try {
+    const data = await db.select().from(githubProjects).orderBy(desc(githubProjects.created_at))
+    return {
+      success: true,
+      data: data.map((p: any) => ({
+        ...p,
+        id: p.id.toString(),
+        created_at: p.created_at?.toISOString() || new Date().toISOString(),
+      })) as unknown as GitHubProject[],
+    }
+  } catch (error: unknown) {
+    console.error("Error fetching GitHub projects:", error)
+    return { success: false, error: (error as Error).message, data: [] }
+  }
+}
+
+export async function deleteGitHubProject(id: string) {
+  try {
+    const numericId = validateId(id)
+    if (numericId === null) return { success: false, error: "Invalid ID" }
+    await db.delete(githubProjects).where(eq(githubProjects.id, numericId))
+    revalidatePath("/")
+    revalidatePath("/admin/dashboard")
+    return { success: true }
+  } catch (error: unknown) {
+    console.error("Error deleting GitHub project:", error)
+    return { success: false, error: "An unexpected error occurred" }
+  }
+}
+
+export async function refreshGitHubProject(id: string) {
+  try {
+    const numericId = validateId(id)
+    if (numericId === null) return { success: false, error: "Invalid ID" }
+
+    const [existing] = await db.select().from(githubProjects).where(eq(githubProjects.id, numericId)).limit(1)
+    if (!existing) return { success: false, error: "Project not found" }
+
+    const parsed = parseGithubUrl(existing.github_url)
+    if (!parsed) return { success: false, error: "Invalid GitHub URL in database" }
+
+    const res = await fetch(`https://api.github.com/repos/${parsed.owner}/${parsed.repo}`, {
+      headers: { "User-Agent": "v6-portfolio" },
+    })
+
+    if (!res.ok) return { success: false, error: `GitHub API error: ${res.status}` }
+
+    const data = await res.json()
+    await db.update(githubProjects)
+      .set({
+        name: data.name,
+        description: data.description || "",
+        language: data.language,
+        stars: data.stargazers_count || 0,
+      })
+      .where(eq(githubProjects.id, numericId))
+
+    revalidatePath("/")
+    revalidatePath("/admin/dashboard")
+    return { success: true }
+  } catch (error: unknown) {
+    console.error("Error refreshing GitHub project:", error)
+    return { success: false, error: (error as Error).message }
+  }
+}
+
 export async function getProjects() {
   try {
     const data = await db.select().from(projets).orderBy(desc(projets.created_at))
diff --git a/lib/types.ts b/lib/types.ts
index 97b81ff..d1ec503 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -31,3 +31,15 @@ export interface ChangelogEntry {
   date: string
   changes: string[]
 }
+
+export interface GitHubProject {
+  id: string
+  type: "created" | "used"
+  github_url: string
+  name: string
+  description: string | null
+  language: string | null
+  stars: number
+  order: number
+  created_at: string
+}

From 0ff2367f460af1074af027ab23e942cee5e1326b Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Sat, 25 Jul 2026 14:30:01 +0200
Subject: [PATCH 41/42] chore: remove Projects I've Created from GitHub slider

---
 app/page.tsx                         | 28 ++++++++++------------------
 components/github-project-slider.tsx | 12 +++++-------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6958693..3b46f81 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -50,8 +50,7 @@ export default async function HomePage() {
   let featuredProject: Project | null = null
   let otherProjects: Project[] = []
   let fetchError = false
-  let githubCreated: GitHubProject[] = []
-  let githubUsed: GitHubProject[] = []
+  let githubProjects: GitHubProject[] = []
 
   try {
     const [rawFeatured] = await db.select().from(projetsTable)
@@ -80,21 +79,14 @@ export default async function HomePage() {
       created_at: p.created_at?.toISOString() || new Date().toISOString(),
       updated_at: new Date().toISOString(),
     })) as unknown as Project[]
-    const rawGithub = await db.select().from(githubProjectsTable).orderBy(desc(githubProjectsTable.created_at))
-    githubCreated = rawGithub
-      .filter((p: any) => p.type === "created")
-      .map((p: any) => ({
-        ...p,
-        id: p.id.toString(),
-        created_at: p.created_at?.toISOString() || new Date().toISOString(),
-      })) as unknown as GitHubProject[]
-    githubUsed = rawGithub
-      .filter((p: any) => p.type === "used")
-      .map((p: any) => ({
-        ...p,
-        id: p.id.toString(),
-        created_at: p.created_at?.toISOString() || new Date().toISOString(),
-      })) as unknown as GitHubProject[]
+    const rawGithub = await db.select().from(githubProjectsTable)
+      .where(eq(githubProjectsTable.type, "used"))
+      .orderBy(desc(githubProjectsTable.created_at))
+    githubProjects = rawGithub.map((p: any) => ({
+      ...p,
+      id: p.id.toString(),
+      created_at: p.created_at?.toISOString() || new Date().toISOString(),
+    })) as unknown as GitHubProject[]
   } catch (e) {
     console.error("Database connection error:", e)
     fetchError = true
@@ -194,7 +186,7 @@ export default async function HomePage() {
           </div>
         </section>
 
-        <GitHubProjectSlider created={githubCreated} used={githubUsed} />
+        <GitHubProjectSlider projects={githubProjects} />
 
         <TechStack />
       </main>
diff --git a/components/github-project-slider.tsx b/components/github-project-slider.tsx
index a98e825..f367981 100644
--- a/components/github-project-slider.tsx
+++ b/components/github-project-slider.tsx
@@ -6,8 +6,7 @@ import type { GitHubProject } from "@/lib/types"
 import Link from "next/link"
 
 interface GitHubProjectSliderProps {
-  created: GitHubProject[]
-  used: GitHubProject[]
+  projects: GitHubProject[]
 }
 
 function ProjectCard({ project }: { project: GitHubProject }) {
@@ -93,8 +92,8 @@ function ProjectRow({ title, projects }: { title: string; projects: GitHubProjec
   )
 }
 
-export function GitHubProjectSlider({ created, used }: GitHubProjectSliderProps) {
-  if (created.length === 0 && used.length === 0) return null
+export function GitHubProjectSlider({ projects }: GitHubProjectSliderProps) {
+  if (projects.length === 0) return null
 
   return (
     <section className="py-24 border-y border-white/5">
@@ -103,12 +102,11 @@ export function GitHubProjectSlider({ created, used }: GitHubProjectSliderProps)
           <div className="text-primary font-bold tracking-widest text-sm uppercase">Open Source</div>
           <h3 className="text-4xl md:text-5xl font-bold tracking-tight">GITHUB PROJECTS</h3>
           <p className="text-base text-muted-foreground font-medium">
-            Projects I&apos;ve built and tools I use daily.
+            Tools I use daily.
           </p>
         </div>
         <div className="space-y-10">
-          <ProjectRow title="Projects I've Created" projects={created} />
-          <ProjectRow title="Projects I Use Daily" projects={used} />
+          <ProjectRow title="Projects I Use Daily" projects={projects} />
         </div>
       </div>
     </section>

From a4e3b71ee9fcc2729727eb5fc5cfa5d5465f26e8 Mon Sep 17 00:00:00 2001
From: ddrayko <ddrayko@proton.me>
Date: Sat, 25 Jul 2026 14:32:10 +0200
Subject: [PATCH 42/42] chore: remove subtitle from GitHub slider section

---
 components/github-project-slider.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/github-project-slider.tsx b/components/github-project-slider.tsx
index f367981..ca3b18f 100644
--- a/components/github-project-slider.tsx
+++ b/components/github-project-slider.tsx
@@ -101,9 +101,6 @@ export function GitHubProjectSlider({ projects }: GitHubProjectSliderProps) {
         <div className="space-y-4 max-w-2xl">
           <div className="text-primary font-bold tracking-widest text-sm uppercase">Open Source</div>
           <h3 className="text-4xl md:text-5xl font-bold tracking-tight">GITHUB PROJECTS</h3>
-          <p className="text-base text-muted-foreground font-medium">
-            Tools I use daily.
-          </p>
         </div>
         <div className="space-y-10">
           <ProjectRow title="Projects I Use Daily" projects={projects} />