Kinou/portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modif logo project card

Browse Source
This commit is contained in:
kinou-p 2025-10-02 14:16:57 +02:00
parent ea9ba687a8
commit 1bd2576a8e
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ProjectCard.tsx
View File

@ -1,6 +1,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { ArrowRight } from "lucide-react";
interface ProjectCardProps { interface ProjectCardProps {
title: string; title: string;
@ -31,11 +32,18 @@ export const ProjectCard = ({ title, description, icon, image, technologies, del
onClick={handleClick} onClick={handleClick}
className={projectId ? "cursor-pointer" : ""} className={projectId ? "cursor-pointer" : ""}
> >
<Card className="h-full hover:shadow-lg transition-all duration-300 border-border/50 bg-card/50 backdrop-blur relative overflow-hidden"> <Card className="h-full hover:shadow-lg transition-all duration-300 border-border/50 bg-card/50 backdrop-blur relative overflow-hidden group">
{/* Indicateur cliquable en bas à droite */}
{projectId && (
<div className="absolute bottom-4 right-4 w-8 h-8 rounded-full bg-primary/10 group-hover:bg-primary/20 flex items-center justify-center transition-all duration-300 group-hover:scale-110">
<ArrowRight className="w-4 h-4 text-primary group-hover:translate-x-0.5 transition-transform duration-300" />
</div>
)}
{image && ( {image && (
<div className="absolute top-4 right-4 w-16 h-16 rounded-lg overflow-hidden border-2 border-background/20 shadow-lg"> <div className="absolute top-4 right-4 w-16 h-16 rounded-lg overflow-hidden border-2 border-background/20 shadow-lg">
<img <img
src={image} src={image}
alt={`${title} preview`} alt={`${title} preview`}
className="w-full h-full object-cover" className="w-full h-full object-cover"
/> />
@ -56,7 +64,7 @@ export const ProjectCard = ({ title, description, icon, image, technologies, del
{technologies.slice(0, 6).map((tech, index) => ( {technologies.slice(0, 6).map((tech, index) => (
<div <div
key={tech.name} key={tech.name}
className="w-8 h-8 rounded bg-background/50 p-1.5 flex items-center justify-center" className="w-10 h-10 rounded bg-background/50 p-2 flex items-center justify-center"
title={tech.name} title={tech.name}
> >
{tech.iconUrl ? ( {tech.iconUrl ? (
@ -71,7 +79,7 @@ export const ProjectCard = ({ title, description, icon, image, technologies, del
</div> </div>
))} ))}
{technologies.length > 6 && ( {technologies.length > 6 && (
<div className="w-8 h-8 rounded bg-background/50 flex items-center justify-center text-xs text-muted-foreground"> <div className="w-10 h-10 rounded bg-background/50 flex items-center justify-center text-xs text-muted-foreground">
+{technologies.length - 6} +{technologies.length - 6}
</div> </div>
)} )}