1+ import { personalInfo } from "@/data/personalInfo" ;
2+ import { ExternalLink , Github , Globe , Award , Code } from "lucide-react" ;
3+ import { Card , CardContent , CardHeader , CardTitle } from "@/components/ui/card" ;
4+ import { Badge } from "@/components/ui/badge" ;
5+ import { Link , useLocation } from "react-router-dom" ;
6+
7+ const Projects = ( ) => {
8+ const location = useLocation ( ) ;
9+
10+ return (
11+ < div className = "min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900" >
12+ { /* Animated background elements */ }
13+ < div className = "fixed inset-0 overflow-hidden pointer-events-none" >
14+ < div className = "absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse" > </ div >
15+ < div className = "absolute -bottom-40 -left-40 w-80 h-80 bg-cyan-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse animation-delay-2000" > </ div >
16+ < div className = "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-60 h-60 bg-teal-500 rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse animation-delay-4000" > </ div >
17+ </ div >
18+
19+ < div className = "relative z-10" >
20+ { /* Header Navigation */ }
21+ < header className = "py-6 px-6" >
22+ < nav className = "max-w-6xl mx-auto" >
23+ < div className = "flex space-x-8" >
24+ < Link
25+ to = "/"
26+ className = { `font-medium transition-colors ${
27+ location . pathname === "/"
28+ ? "text-cyan-400 border-b-2 border-cyan-400 pb-1"
29+ : "text-slate-400 hover:text-white"
30+ } `}
31+ >
32+ Chat
33+ </ Link >
34+ < Link
35+ to = "/resume"
36+ className = { `font-medium transition-colors ${
37+ location . pathname === "/resume"
38+ ? "text-cyan-400 border-b-2 border-cyan-400 pb-1"
39+ : "text-slate-400 hover:text-white"
40+ } `}
41+ >
42+ Resume
43+ </ Link >
44+ < Link
45+ to = "/projects"
46+ className = { `font-medium transition-colors ${
47+ location . pathname === "/projects"
48+ ? "text-cyan-400 border-b-2 border-cyan-400 pb-1"
49+ : "text-slate-400 hover:text-white"
50+ } `}
51+ >
52+ Projects
53+ </ Link >
54+ </ div >
55+ </ nav >
56+ </ header >
57+
58+ { /* Projects Content */ }
59+ < div className = "px-6 pb-8" >
60+ < div className = "max-w-6xl mx-auto" >
61+ < div className = "backdrop-blur-xl bg-white/10 rounded-3xl border border-white/20 p-8 shadow-2xl" >
62+ < div className = "text-center mb-8" >
63+ < h1 className = "text-4xl font-bold bg-gradient-to-r from-white to-cyan-400 bg-clip-text text-transparent mb-4" >
64+ Projects
65+ </ h1 >
66+ < p className = "text-slate-300 text-lg" >
67+ Explore my technical projects and research work
68+ </ p >
69+ </ div >
70+
71+ { /* Projects Grid */ }
72+ < div className = "grid gap-6 md:grid-cols-2 lg:grid-cols-1" >
73+ { personalInfo . projects . map ( ( project , index ) => (
74+ < Card key = { index } className = "bg-white/5 border-white/20 hover:bg-white/10 transition-all duration-300 hover:scale-[1.02]" >
75+ < CardHeader >
76+ < div className = "flex items-start justify-between" >
77+ < div className = "flex-1" >
78+ < CardTitle className = "text-white text-xl mb-2 flex items-center gap-2" >
79+ { project . name . includes ( "Patent" ) && (
80+ < Award className = "w-5 h-5 text-yellow-400" />
81+ ) }
82+ { project . name }
83+ </ CardTitle >
84+ </ div >
85+ < div className = "flex gap-2" >
86+ { /* Add project links here if available */ }
87+ { project . name . includes ( "GitHub" ) && (
88+ < a
89+ href = "#"
90+ className = "p-2 bg-gray-600/20 hover:bg-gray-600/30 text-gray-300 rounded-full transition-all duration-300 hover:scale-110"
91+ title = "View on GitHub"
92+ >
93+ < Github className = "w-4 h-4" />
94+ </ a >
95+ ) }
96+ < a
97+ href = "#"
98+ className = "p-2 bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 rounded-full transition-all duration-300 hover:scale-110"
99+ title = "View Project"
100+ >
101+ < ExternalLink className = "w-4 h-4" />
102+ </ a >
103+ </ div >
104+ </ div >
105+ </ CardHeader >
106+ < CardContent >
107+ < p className = "text-slate-300 leading-relaxed mb-4" >
108+ { project . description }
109+ </ p >
110+
111+ { /* Technologies */ }
112+ < div className = "flex flex-wrap gap-2" >
113+ { project . technologies . map ( ( tech , techIndex ) => (
114+ < Badge
115+ key = { techIndex }
116+ variant = "secondary"
117+ className = "bg-cyan-600/20 text-cyan-300 border-cyan-500/30 hover:bg-cyan-600/30"
118+ >
119+ < Code className = "w-3 h-3 mr-1" />
120+ { tech }
121+ </ Badge >
122+ ) ) }
123+ </ div >
124+ </ CardContent >
125+ </ Card >
126+ ) ) }
127+ </ div >
128+
129+ { /* Additional Info */ }
130+ < div className = "mt-8 p-6 bg-purple-900/20 rounded-xl border border-purple-500/30" >
131+ < h3 className = "text-lg font-semibold text-purple-300 mb-3 flex items-center gap-2" >
132+ < Globe className = "w-5 h-5" />
133+ More Projects
134+ </ h3 >
135+ < p className = "text-slate-300 text-sm" >
136+ For more detailed project information, code repositories, and live demos,
137+ feel free to ask me in the Chat section or visit my GitHub profile.
138+ </ p >
139+ < div className = "mt-4" >
140+ < a
141+ href = { personalInfo . social . github }
142+ target = "_blank"
143+ rel = "noopener noreferrer"
144+ className = "inline-flex items-center gap-2 px-4 py-2 bg-gray-600/20 hover:bg-gray-600/30 text-gray-300 rounded-full transition-all duration-300 hover:scale-105"
145+ >
146+ < Github className = "w-4 h-4" />
147+ < span className = "text-sm font-medium" > View GitHub Profile</ span >
148+ </ a >
149+ </ div >
150+ </ div >
151+ </ div >
152+ </ div >
153+ </ div >
154+ </ div >
155+ </ div >
156+ ) ;
157+ } ;
158+
159+ export default Projects ;
0 commit comments