Skip to content

Commit 6f7138f

Browse files
dshal20dshal20
committed
feat: profile page design
1 parent fecf6b8 commit 6f7138f

File tree

2 files changed

+376
-0
lines changed

2 files changed

+376
-0
lines changed

‎src/app/dashboard/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ export default async function DashboardPage() {
2626
<Link href="/" className="btn btn-neutral btn-outline" aria-label="Go home">
2727
<span>Home</span>
2828
</Link>
29+
<Link href="/profile" className="btn btn-neutral btn-outline" aria-label="Go to profile">
30+
<span>Profile</span>
31+
</Link>
2932
<form action={logout}>
3033
<button type="submit" className="btn btn-neutral btn-outline">
3134
<span>Log out</span>

‎src/app/profile/page.tsx‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
import { Shield, Star, Trophy, Swords, Pencil } from "lucide-react";
2+
import { createClient as createServerClient } from "../../lib/supabase/server";
3+
import { redirect } from "next/navigation";
4+
import { Cinzel } from "next/font/google";
5+
6+
//font for words
7+
const cinzel = Cinzel({
8+
subsets: ["latin"],
9+
weight: ["400", "700"],
10+
});
11+
12+
export default async function ProfilePage() {
13+
const supabase = await createServerClient();
14+
const {
15+
data: { user },
16+
} = await supabase.auth.getUser();
17+
18+
if (!user) {
19+
redirect("/login");
20+
}
21+
22+
const username = user.email?.split('@')[0] || 'User';
23+
24+
const joinedDate = user.created_at
25+
? new Date(user.created_at).toLocaleDateString('en-US', {
26+
year: 'numeric',
27+
month: 'long',
28+
day: 'numeric'
29+
})
30+
: 'Unknown';
31+
32+
return (
33+
<main className="relative min-h-dvh p-8">
34+
{/* Background with blur */}
35+
<div
36+
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
37+
style={{
38+
backgroundImage: "url('/gemininight3.png')",
39+
filter: "blur(0.5px)",
40+
zIndex: 0,
41+
}}
42+
/>
43+
{/* Dark Overlay */}
44+
<div
45+
className="absolute inset-0 bg-black opacity-85"
46+
style={{ zIndex: 0 }}
47+
/>
48+
49+
{/* Content */}
50+
<div className={`relative ${cinzel.className}`} style={{ zIndex: 1 }}>
51+
{/* Header */}
52+
<div className="text-center mb-8">
53+
<h1 className="text-4xl font-bold mb-2" style={{ color: "#be9661" }}>
54+
Adventurer Profile
55+
</h1>
56+
<p className="text-base" style={{ color: "#A0A0A0" }}>
57+
Your journey through the coding realm
58+
</p>
59+
</div>
60+
61+
{/* Main Content - Two Columns */}
62+
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
63+
{/* Left Column */}
64+
<div className="space-y-6">
65+
{/* Avatar Section */}
66+
<div
67+
className="rounded-lg p-6"
68+
style={{
69+
backgroundColor: "#191922",
70+
border: "0.5px solid rgba(190, 150, 97, 0.3)",
71+
}}
72+
>
73+
<div className="flex flex-col items-center">
74+
{/* Avatar Circle */}
75+
<div
76+
className="w-32 h-32 rounded-full flex items-center justify-center mb-4"
77+
style={{
78+
border: "3px solid #be9661",
79+
boxShadow: "0 0 20px rgba(190, 150, 97, 0.5)",
80+
}}
81+
>
82+
<Shield size={64} style={{ color: "#be9661" }} />
83+
</div>
84+
{/* Switch Avatar Button */}
85+
<button
86+
className="px-4 py-2 rounded-lg flex items-center gap-2"
87+
style={{
88+
backgroundColor: "#232331",
89+
color: "#E0E0E0",
90+
borderColor: "rgba(190, 150, 97, 0.3)",
91+
borderWidth: "0.5px",
92+
borderStyle: "solid",
93+
}}
94+
>
95+
<Swords size={16} style={{ color: "#be9661" }} />
96+
<span>Switch Avatar</span>
97+
</button>
98+
</div>
99+
</div>
100+
101+
{/* Skills & Mastery Section */}
102+
<div
103+
className="rounded-lg p-6"
104+
style={{
105+
backgroundColor: "#191922",
106+
border: "0.5px solid rgba(190, 150, 97, 0.3)",
107+
}}
108+
>
109+
<div className="flex items-center gap-2 mb-6">
110+
<Star size={20} style={{ color: "#be9661" }} />
111+
<h2 className="text-xl font-semibold" style={{ color: "#be9661" }}>
112+
Skills & Mastery
113+
</h2>
114+
</div>
115+
116+
{/* Python Skill */}
117+
<div className="mb-4">
118+
<div className="flex justify-between items-center mb-2">
119+
<span className="text-base" style={{ color: "#E0E0E0" }}>
120+
Python
121+
</span>
122+
<span className="text-base" style={{ color: "#E0E0E0" }}>
123+
85%
124+
</span>
125+
</div>
126+
<div
127+
className="h-3 rounded-full overflow-hidden"
128+
style={{ backgroundColor: "#404040" }}
129+
>
130+
<div
131+
className="h-full rounded-full"
132+
style={{
133+
width: "85%",
134+
background: "linear-gradient(to right, #be9661, #a7e4e7)",
135+
}}
136+
/>
137+
</div>
138+
</div>
139+
140+
{/* Java Skill */}
141+
<div className="mb-4">
142+
<div className="flex justify-between items-center mb-2">
143+
<span className="text-base" style={{ color: "#E0E0E0" }}>
144+
Java
145+
</span>
146+
<span className="text-base" style={{ color: "#E0E0E0" }}>
147+
72%
148+
</span>
149+
</div>
150+
<div
151+
className="h-3 rounded-full overflow-hidden"
152+
style={{ backgroundColor: "#404040" }}
153+
>
154+
<div
155+
className="h-full rounded-full"
156+
style={{
157+
width: "72%",
158+
background: "linear-gradient(to right, #a7e4e7, #be9661)",
159+
}}
160+
/>
161+
</div>
162+
</div>
163+
164+
{/* C++ Skill */}
165+
<div>
166+
<div className="flex justify-between items-center mb-2">
167+
<span className="text-base" style={{ color: "#E0E0E0" }}>
168+
C++
169+
</span>
170+
<span className="text-base" style={{ color: "#E0E0E0" }}>
171+
68%
172+
</span>
173+
</div>
174+
<div
175+
className="h-3 rounded-full overflow-hidden"
176+
style={{ backgroundColor: "#404040" }}
177+
>
178+
<div
179+
className="h-full rounded-full"
180+
style={{
181+
width: "68%",
182+
background: "linear-gradient(135deg, #be9661, #a7e4e7, #be9661)",
183+
}}
184+
/>
185+
</div>
186+
</div>
187+
</div>
188+
</div>
189+
190+
{/* Right Column */}
191+
<div>
192+
{/* Combined User Info and Detailed Info Section */}
193+
<div
194+
className="rounded-lg p-6 relative"
195+
style={{
196+
backgroundColor: "#191922",
197+
border: "0.5px solid rgba(190, 150, 97, 0.3)",
198+
}}
199+
>
200+
{/* Edit Profile Button */}
201+
<button
202+
className="absolute top-6 right-6 px-4 py-2 rounded-lg flex items-center gap-2 border"
203+
style={{
204+
borderColor: "rgba(190, 150, 97, 0.3)",
205+
color: "#E0E0E0",
206+
backgroundColor: "transparent",
207+
}}
208+
>
209+
<Pencil size={16} style={{ color: "#be9661" }} />
210+
<span>Edit Profile</span>
211+
</button>
212+
213+
{/* Username */}
214+
<h2 className="text-3xl font-bold mb-1" style={{ color: "#be9661" }}>
215+
{username}
216+
</h2>
217+
{/* Rank/Title */}
218+
<p className="text-base mb-6" style={{ color: "#A0A0A0" }}>
219+
Knight of the Coding Realm
220+
</p>
221+
222+
{/* Statistics */}
223+
<div className="grid grid-cols-3 gap-4 mb-6">
224+
{/* Level */}
225+
<div
226+
className="rounded-lg p-4 flex flex-col items-center"
227+
style={{
228+
backgroundColor: "#191922",
229+
borderColor: "rgba(190, 150, 97, 0.3)",
230+
borderWidth: "0.5px",
231+
borderStyle: "solid",
232+
}}
233+
>
234+
<Trophy size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
235+
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
236+
Level
237+
</span>
238+
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
239+
42
240+
</span>
241+
</div>
242+
243+
{/* XP */}
244+
<div
245+
className="rounded-lg p-4 flex flex-col items-center"
246+
style={{
247+
backgroundColor: "#191922",
248+
borderColor: "rgba(190, 150, 97, 0.3)",
249+
borderWidth: "0.5px",
250+
borderStyle: "solid",
251+
}}
252+
>
253+
<Star size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
254+
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
255+
XP
256+
</span>
257+
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
258+
12,847
259+
</span>
260+
</div>
261+
262+
{/* Quests */}
263+
<div
264+
className="rounded-lg p-4 flex flex-col items-center"
265+
style={{
266+
backgroundColor: "#191922",
267+
borderColor: "rgba(190, 150, 97, 0.3)",
268+
borderWidth: "0.5px",
269+
borderStyle: "solid",
270+
}}
271+
>
272+
<Swords size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
273+
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
274+
Quests
275+
</span>
276+
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
277+
127
278+
</span>
279+
</div>
280+
</div>
281+
282+
{/* Detailed Info */}
283+
{/* Class */}
284+
<div className="flex items-start gap-3 mb-4 relative">
285+
<div
286+
className="absolute left-0 top-0 bottom-0 rounded"
287+
style={{
288+
backgroundColor: "#be9661",
289+
width: "4px",
290+
marginTop: "-2px",
291+
marginBottom: "-2px",
292+
}}
293+
/>
294+
<div className="pl-3">
295+
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
296+
Class
297+
</span>
298+
<span className="text-base block" style={{ color: "#E0E0E0" }}>
299+
Python Warrior
300+
</span>
301+
</div>
302+
</div>
303+
304+
{/* Guild */}
305+
<div className="flex items-start gap-3 mb-4 relative">
306+
<div
307+
className="absolute left-0 top-0 bottom-0 rounded"
308+
style={{
309+
backgroundColor: "#be9661",
310+
width: "4px",
311+
marginTop: "-2px",
312+
marginBottom: "-2px",
313+
}}
314+
/>
315+
<div className="pl-3">
316+
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
317+
Guild
318+
</span>
319+
<span className="text-base block" style={{ color: "#E0E0E0" }}>
320+
The Algorithm Knights
321+
</span>
322+
</div>
323+
</div>
324+
325+
{/* Joined Quest */}
326+
<div className="flex items-start gap-3 mb-4 relative">
327+
<div
328+
className="absolute left-0 top-0 bottom-0 rounded"
329+
style={{
330+
backgroundColor: "#be9661",
331+
width: "4px",
332+
marginTop: "-2px",
333+
marginBottom: "-2px",
334+
}}
335+
/>
336+
<div className="pl-3">
337+
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
338+
Joined Quest
339+
</span>
340+
<span className="text-base block" style={{ color: "#E0E0E0" }}>
341+
{joinedDate}
342+
</span>
343+
</div>
344+
</div>
345+
346+
{/* Bio */}
347+
<div className="flex items-start gap-3 relative">
348+
<div
349+
className="absolute left-0 top-0 bottom-0 rounded"
350+
style={{
351+
backgroundColor: "#be9661",
352+
width: "4px",
353+
marginTop: "-2px",
354+
marginBottom: "-4px",
355+
}}
356+
/>
357+
<div className="pl-3">
358+
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
359+
Bio
360+
</span>
361+
<span className="text-base block" style={{ color: "#E0E0E0" }}>
362+
A seasoned warrior in the realm of code, seeking legendary bugs to slay and epic features to build. Master of multiple languages and slayer of countless bugs. Ready for the next adventure!
363+
</span>
364+
</div>
365+
</div>
366+
</div>
367+
</div>
368+
</div>
369+
</div>
370+
</main>
371+
);
372+
}
373+

0 commit comments

Comments
 (0)