feat:added project details page with prod. api
This commit is contained in:
sanjidaRimi023
@@ -0,0 +1,102 @@
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function ProjectCard({ project, color, index, isInView }) {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
setMousePosition({ x, y });
|
||||
};
|
||||
|
||||
return (
|
||||
<Link to={`/projects/${project._id}`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 60, rotateX: 15 }}
|
||||
animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: index * 0.08 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHovered(false);
|
||||
setMousePosition({ x: 50, y: 50 });
|
||||
}}
|
||||
>
|
||||
{/* Main Card Container with 3D Tilt */}
|
||||
<div
|
||||
className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
|
||||
style={{
|
||||
transform: isHovered
|
||||
? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
|
||||
: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
|
||||
transition: isHovered
|
||||
? "transform 0.1s ease-out"
|
||||
: "transform 0.4s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Image Container */}
|
||||
<div className="aspect-[16/13] overflow-hidden relative">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Dynamic Shine Overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-8">
|
||||
<div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
|
||||
{/* Category */}
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={
|
||||
isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
|
||||
}
|
||||
className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
|
||||
>
|
||||
{project.category}
|
||||
</motion.span>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
{/* View Project Link */}
|
||||
<Link
|
||||
to={project.liveUrl}
|
||||
className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
|
||||
>
|
||||
<span className="font-medium text-sm tracking-wider">live</span>
|
||||
<ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Neon Border Glow */}
|
||||
<div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -1,9 +1,10 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useProjects } from "@/hooks/queires/useProjects";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { ArrowRight, ExternalLink } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ProjectCard } from "./ProjectCard";
|
||||
|
||||
const gradientColors = [
|
||||
"from-neon-blue/90",
|
||||
@@ -98,99 +99,3 @@ export default function ProjectsSection() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectCard({ project, color, index, isInView }) {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
setMousePosition({ x, y });
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 60, rotateX: 15 }}
|
||||
animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: index * 0.08 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHovered(false);
|
||||
setMousePosition({ x: 50, y: 50 });
|
||||
}}
|
||||
>
|
||||
{/* Main Card Container with 3D Tilt */}
|
||||
<div
|
||||
className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
|
||||
style={{
|
||||
transform: isHovered
|
||||
? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
|
||||
: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
|
||||
transition: isHovered
|
||||
? "transform 0.1s ease-out"
|
||||
: "transform 0.4s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Image Container */}
|
||||
<div className="aspect-[16/13] overflow-hidden relative">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Dynamic Shine Overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-8">
|
||||
<div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
|
||||
{/* Category */}
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={
|
||||
isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
|
||||
}
|
||||
className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
|
||||
>
|
||||
{project.category}
|
||||
</motion.span>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
{/* View Project Link */}
|
||||
<Link
|
||||
to={project.liveUrl}
|
||||
className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
|
||||
>
|
||||
<span className="font-medium text-sm tracking-wider">live</span>
|
||||
<ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Neon Border Glow */}
|
||||
<div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user