Skip to content

Commit 4c2a79a

Browse files
eshanizedeshanized
committed
feat(projects): enhance project cards with vibrant colors
- Update hero background with blue-purple-teal gradients - Add glow effects to stats cards - Replace cyan-emerald with purple-teal color combinations - Update project card hover effects - Improve visual appeal of terminal-style elements
1 parent d721235 commit 4c2a79a

1 file changed

Lines changed: 25 additions & 25 deletions

File tree

‎app/projects/page.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,10 @@ export default function Projects() {
9393
{/* Grid pattern background */}
9494
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
9595

96-
{/* Gradient overlays */}
97-
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-background to-blue-50/30 dark:from-slate-950 dark:via-background dark:to-slate-900"></div>
98-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.1),transparent_50%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(59,130,246,0.15),transparent_50%)]"></div>
99-
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(16,185,129,0.08),transparent_50%)] dark:bg-[radial-gradient(circle_at_70%_80%,rgba(16,185,129,0.12),transparent_50%)]"></div>
96+
{/* Gradient overlays - Vibrant */}
97+
<div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-background via-purple-50/30 to-teal-50/30 dark:from-blue-950 dark:via-background dark:via-purple-950/30 dark:to-teal-950/30"></div>
98+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(96,165,250,0.15),transparent_50%)] dark:bg-[radial-gradient(circle_at_30%_20%,rgba(96,165,250,0.2),transparent_50%)]"></div>
99+
<div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(167,139,250,0.1),transparent_50%)] dark:bg-[radial-gradient(circle_at_70%_80%,rgba(167,139,250,0.15),transparent_50%)]"></div>
100100

101101
<div className="container relative mx-auto px-4 sm:px-6 lg:px-8 py-32 lg:py-40">
102102
<motion.div
@@ -106,11 +106,11 @@ export default function Projects() {
106106
className="text-center"
107107
>
108108
{/* Terminal-style status badge */}
109-
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg">
109+
<div className="inline-flex items-center space-x-3 mb-6 px-4 py-2 bg-background/80 backdrop-blur-sm border border-border/50 rounded-lg shadow-lg glow-blue">
110110
<div className="flex space-x-1.5">
111-
<div className="w-2.5 h-2.5 bg-red-400 rounded-full"></div>
112-
<div className="w-2.5 h-2.5 bg-yellow-400 rounded-full"></div>
113-
<div className="w-2.5 h-2.5 bg-emerald-400 rounded-full animate-pulse"></div>
111+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-red-400 to-red-500 rounded-full shadow-lg shadow-red-400/50"></div>
112+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-yellow-400 to-yellow-500 rounded-full shadow-lg shadow-yellow-400/50"></div>
113+
<div className="w-2.5 h-2.5 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full animate-pulse shadow-lg shadow-emerald-400/50"></div>
114114
</div>
115115
<span className="text-xs font-mono text-muted-foreground">projects.repository.tsx</span>
116116
</div>
@@ -119,7 +119,7 @@ export default function Projects() {
119119
<div className="mb-6 space-y-2">
120120
<div className="text-left max-w-fit mx-auto">
121121
<span className="text-sm font-mono text-muted-foreground/70">1 </span>
122-
<span className="text-sm font-mono text-cyan-500">const</span>
122+
<span className="text-sm font-mono text-blue-500">const</span>
123123
<span className="text-sm font-mono text-foreground"> projects = await </span>
124124
<span className="text-sm font-mono text-purple-500">fetchRepos</span>
125125
<span className="text-sm font-mono text-foreground">();</span>
@@ -128,16 +128,16 @@ export default function Projects() {
128128
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-foreground tracking-tight leading-[1.1]">
129129
Open Source{" "}
130130
<span className="relative inline-block">
131-
<span className="font-mono bg-gradient-to-r from-cyan-600 via-blue-500 to-orange-500 bg-clip-text text-transparent">
131+
<span className="font-mono bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 bg-clip-text text-transparent">
132132
Projects
133133
</span>
134-
<span className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-600 via-blue-500 to-orange-500 rounded-full"></span>
134+
<span className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-teal-500 rounded-full"></span>
135135
</span>
136136
</h1>
137137

138138
<div className="text-left max-w-fit mx-auto">
139139
<span className="text-sm font-mono text-muted-foreground/70">2 </span>
140-
<span className="text-sm font-mono text-cyan-500">return</span>
140+
<span className="text-sm font-mono text-blue-500">return</span>
141141
<span className="text-sm font-mono text-foreground"> projects.</span>
142142
<span className="text-sm font-mono text-purple-500">filter</span>
143143
<span className="text-sm font-mono text-foreground">(</span>
@@ -170,7 +170,7 @@ export default function Projects() {
170170
transition={{ duration: 0.6, delay: 0.2 }}
171171
className="flex flex-col sm:flex-row gap-4 justify-center mb-16"
172172
>
173-
<Button size="lg" className="font-mono bg-gradient-to-r from-cyan-600 to-orange-600 hover:from-cyan-700 hover:to-orange-700 text-white shadow-lg hover:shadow-xl transition-all group">
173+
<Button size="lg" className="font-mono bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:from-blue-700 hover:via-purple-700 hover:to-teal-700 text-white shadow-lg hover:shadow-xl transition-all group glow-blue">
174174
<span className="mr-2">$</span>
175175
git clone --recursive
176176
<ChevronRight className="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform" />
@@ -192,31 +192,31 @@ export default function Projects() {
192192
>
193193
<div className="relative group">
194194
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
195-
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-blue-500/30 rounded-lg p-6 hover:border-blue-500/60 transition-all">
195+
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-blue-500/30 rounded-lg p-6 hover:border-blue-500/60 transition-all glow-blue">
196196
<div className="text-xs font-mono text-blue-400 mb-2">{">"} repos.length</div>
197-
<div className="text-3xl lg:text-4xl font-bold font-mono text-cyan-400 mb-1">
197+
<div className="text-3xl lg:text-4xl font-bold font-mono text-purple-400 mb-1">
198198
{projects.length}+
199199
</div>
200200
<div className="text-xs font-mono text-muted-foreground/70">// repositories</div>
201201
</div>
202202
</div>
203203

204204
<div className="relative group">
205-
<div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-emerald-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
206-
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-cyan-500/30 rounded-lg p-6 hover:border-cyan-500/60 transition-all">
207-
<div className="text-xs font-mono text-cyan-400 mb-2">{">"} stars.total()</div>
208-
<div className="text-3xl lg:text-4xl font-bold font-mono text-emerald-400 mb-1">
205+
<div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-teal-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
206+
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-purple-500/30 rounded-lg p-6 hover:border-purple-500/60 transition-all glow-purple">
207+
<div className="text-xs font-mono text-purple-400 mb-2">{">"} stars.total()</div>
208+
<div className="text-3xl lg:text-4xl font-bold font-mono text-teal-400 mb-1">
209209
{projects.reduce((acc, p) => acc + p.stars, 0).toLocaleString()}+
210210
</div>
211211
<div className="text-xs font-mono text-muted-foreground/70">// github stars</div>
212212
</div>
213213
</div>
214214

215215
<div className="relative group">
216-
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-blue-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
217-
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-emerald-500/30 rounded-lg p-6 hover:border-emerald-500/60 transition-all">
218-
<div className="text-xs font-mono text-emerald-400 mb-2">{">"} languages.count</div>
219-
<div className="text-3xl lg:text-4xl font-bold font-mono text-blue-400 mb-1">
216+
<div className="absolute inset-0 bg-gradient-to-br from-teal-500/10 to-emerald-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
217+
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-teal-500/30 rounded-lg p-6 hover:border-teal-500/60 transition-all glow-teal">
218+
<div className="text-xs font-mono text-teal-400 mb-2">{">"} languages.count</div>
219+
<div className="text-3xl lg:text-4xl font-bold font-mono text-emerald-400 mb-1">
220220
{languages.length - 1}+
221221
</div>
222222
<div className="text-xs font-mono text-muted-foreground/70">// languages</div>
@@ -225,9 +225,9 @@ export default function Projects() {
225225

226226
<div className="relative group">
227227
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-emerald-500/10 rounded-lg blur-xl group-hover:blur-2xl transition-all"></div>
228-
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-blue-500/30 rounded-lg p-6 hover:border-blue-500/60 transition-all">
228+
<div className="relative bg-slate-900/90 dark:bg-slate-950/90 backdrop-blur-sm border border-blue-500/30 rounded-lg p-6 hover:border-blue-500/60 transition-all glow-blue">
229229
<div className="text-xs font-mono text-blue-400 mb-2">{">"} forks.sum()</div>
230-
<div className="text-3xl lg:text-4xl font-bold font-mono text-cyan-400 mb-1">
230+
<div className="text-3xl lg:text-4xl font-bold font-mono text-purple-400 mb-1">
231231
{projects.reduce((acc, p) => acc + p.forks, 0)}+
232232
</div>
233233
<div className="text-xs font-mono text-muted-foreground/70">// contributions</div>

0 commit comments

Comments
 (0)