Skip to content

Feat: profile page design #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sateipel11 merged 1 commit into from
Nov 15, 2025
Merged

Feat: profile page design #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ export default async function DashboardPage() {
<Link href="/" className="btn btn-neutral btn-outline" aria-label="Go home">
<span>Home</span>
</Link>
<Link href="/profile" className="btn btn-neutral btn-outline" aria-label="Go to profile">
<span>Profile</span>
</Link>
<form action={logout}>
<button type="submit" className="btn btn-neutral btn-outline">
<span>Log out</span>
Expand Down
373 changes: 373 additions & 0 deletions src/app/profile/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,373 @@
import { Shield, Star, Trophy, Swords, Pencil } from "lucide-react";
import { createClient as createServerClient } from "../../lib/supabase/server";
import { redirect } from "next/navigation";
import { Cinzel } from "next/font/google";

//font for words
const cinzel = Cinzel({
subsets: ["latin"],
weight: ["400", "700"],
});

export default async function ProfilePage() {
const supabase = await createServerClient();
const {
data: { user },
} = await supabase.auth.getUser();

if (!user) {
redirect("/login");
}

const username = user.email?.split('@')[0] || 'User';

const joinedDate = user.created_at
? new Date(user.created_at).toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
})
: 'Unknown';

return (
<main className="relative min-h-dvh p-8">
{/* Background with blur */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: "url('/gemininight3.png')",
filter: "blur(0.5px)",
zIndex: 0,
}}
/>
{/* Dark Overlay */}
<div
className="absolute inset-0 bg-black opacity-85"
style={{ zIndex: 0 }}
/>

{/* Content */}
<div className={`relative ${cinzel.className}`} style={{ zIndex: 1 }}>
{/* Header */}
<div className="text-center mb-8">
<h1 className="text-4xl font-bold mb-2" style={{ color: "#be9661" }}>
Adventurer Profile
</h1>
<p className="text-base" style={{ color: "#A0A0A0" }}>
Your journey through the coding realm
</p>
</div>

{/* Main Content - Two Columns */}
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Left Column */}
<div className="space-y-6">
{/* Avatar Section */}
<div
className="rounded-lg p-6"
style={{
backgroundColor: "#191922",
border: "0.5px solid rgba(190, 150, 97, 0.3)",
}}
>
<div className="flex flex-col items-center">
{/* Avatar Circle */}
<div
className="w-32 h-32 rounded-full flex items-center justify-center mb-4"
style={{
border: "3px solid #be9661",
boxShadow: "0 0 20px rgba(190, 150, 97, 0.5)",
}}
>
<Shield size={64} style={{ color: "#be9661" }} />
</div>
{/* Switch Avatar Button */}
<button
className="px-4 py-2 rounded-lg flex items-center gap-2"
style={{
backgroundColor: "#232331",
color: "#E0E0E0",
borderColor: "rgba(190, 150, 97, 0.3)",
borderWidth: "0.5px",
borderStyle: "solid",
}}
>
<Swords size={16} style={{ color: "#be9661" }} />
<span>Switch Avatar</span>
</button>
</div>
</div>

{/* Skills & Mastery Section */}
<div
className="rounded-lg p-6"
style={{
backgroundColor: "#191922",
border: "0.5px solid rgba(190, 150, 97, 0.3)",
}}
>
<div className="flex items-center gap-2 mb-6">
<Star size={20} style={{ color: "#be9661" }} />
<h2 className="text-xl font-semibold" style={{ color: "#be9661" }}>
Skills & Mastery
</h2>
</div>

{/* Python Skill */}
<div className="mb-4">
<div className="flex justify-between items-center mb-2">
<span className="text-base" style={{ color: "#E0E0E0" }}>
Python
</span>
<span className="text-base" style={{ color: "#E0E0E0" }}>
85%
</span>
</div>
<div
className="h-3 rounded-full overflow-hidden"
style={{ backgroundColor: "#404040" }}
>
<div
className="h-full rounded-full"
style={{
width: "85%",
background: "linear-gradient(to right, #be9661, #a7e4e7)",
}}
/>
</div>
</div>

{/* Java Skill */}
<div className="mb-4">
<div className="flex justify-between items-center mb-2">
<span className="text-base" style={{ color: "#E0E0E0" }}>
Java
</span>
<span className="text-base" style={{ color: "#E0E0E0" }}>
72%
</span>
</div>
<div
className="h-3 rounded-full overflow-hidden"
style={{ backgroundColor: "#404040" }}
>
<div
className="h-full rounded-full"
style={{
width: "72%",
background: "linear-gradient(to right, #a7e4e7, #be9661)",
}}
/>
</div>
</div>

{/* C++ Skill */}
<div>
<div className="flex justify-between items-center mb-2">
<span className="text-base" style={{ color: "#E0E0E0" }}>
C++
</span>
<span className="text-base" style={{ color: "#E0E0E0" }}>
68%
</span>
</div>
<div
className="h-3 rounded-full overflow-hidden"
style={{ backgroundColor: "#404040" }}
>
<div
className="h-full rounded-full"
style={{
width: "68%",
background: "linear-gradient(135deg, #be9661, #a7e4e7, #be9661)",
}}
/>
</div>
</div>
</div>
</div>

{/* Right Column */}
<div>
{/* Combined User Info and Detailed Info Section */}
<div
className="rounded-lg p-6 relative"
style={{
backgroundColor: "#191922",
border: "0.5px solid rgba(190, 150, 97, 0.3)",
}}
>
{/* Edit Profile Button */}
<button
className="absolute top-6 right-6 px-4 py-2 rounded-lg flex items-center gap-2 border"
style={{
borderColor: "rgba(190, 150, 97, 0.3)",
color: "#E0E0E0",
backgroundColor: "transparent",
}}
>
<Pencil size={16} style={{ color: "#be9661" }} />
<span>Edit Profile</span>
</button>

{/* Username */}
<h2 className="text-3xl font-bold mb-1" style={{ color: "#be9661" }}>
{username}
</h2>
{/* Rank/Title */}
<p className="text-base mb-6" style={{ color: "#A0A0A0" }}>
Knight of the Coding Realm
</p>

{/* Statistics */}
<div className="grid grid-cols-3 gap-4 mb-6">
{/* Level */}
<div
className="rounded-lg p-4 flex flex-col items-center"
style={{
backgroundColor: "#191922",
borderColor: "rgba(190, 150, 97, 0.3)",
borderWidth: "0.5px",
borderStyle: "solid",
}}
>
<Trophy size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
Level
</span>
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
42
</span>
</div>

{/* XP */}
<div
className="rounded-lg p-4 flex flex-col items-center"
style={{
backgroundColor: "#191922",
borderColor: "rgba(190, 150, 97, 0.3)",
borderWidth: "0.5px",
borderStyle: "solid",
}}
>
<Star size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
XP
</span>
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
12,847
</span>
</div>

{/* Quests */}
<div
className="rounded-lg p-4 flex flex-col items-center"
style={{
backgroundColor: "#191922",
borderColor: "rgba(190, 150, 97, 0.3)",
borderWidth: "0.5px",
borderStyle: "solid",
}}
>
<Swords size={24} style={{ color: "#be9661", marginBottom: "8px" }} />
<span className="text-sm mb-1" style={{ color: "#A0A0A0" }}>
Quests
</span>
<span className="text-2xl font-bold" style={{ color: "#be9661" }}>
127
</span>
</div>
</div>

{/* Detailed Info */}
{/* Class */}
<div className="flex items-start gap-3 mb-4 relative">
<div
className="absolute left-0 top-0 bottom-0 rounded"
style={{
backgroundColor: "#be9661",
width: "4px",
marginTop: "-2px",
marginBottom: "-2px",
}}
/>
<div className="pl-3">
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
Class
</span>
<span className="text-base block" style={{ color: "#E0E0E0" }}>
Python Warrior
</span>
</div>
</div>

{/* Guild */}
<div className="flex items-start gap-3 mb-4 relative">
<div
className="absolute left-0 top-0 bottom-0 rounded"
style={{
backgroundColor: "#be9661",
width: "4px",
marginTop: "-2px",
marginBottom: "-2px",
}}
/>
<div className="pl-3">
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
Guild
</span>
<span className="text-base block" style={{ color: "#E0E0E0" }}>
The Algorithm Knights
</span>
</div>
</div>

{/* Joined Quest */}
<div className="flex items-start gap-3 mb-4 relative">
<div
className="absolute left-0 top-0 bottom-0 rounded"
style={{
backgroundColor: "#be9661",
width: "4px",
marginTop: "-2px",
marginBottom: "-2px",
}}
/>
<div className="pl-3">
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
Joined Quest
</span>
<span className="text-base block" style={{ color: "#E0E0E0" }}>
{joinedDate}
</span>
</div>
</div>

{/* Bio */}
<div className="flex items-start gap-3 relative">
<div
className="absolute left-0 top-0 bottom-0 rounded"
style={{
backgroundColor: "#be9661",
width: "4px",
marginTop: "-2px",
marginBottom: "-4px",
}}
/>
<div className="pl-3">
<span className="text-sm block mb-1" style={{ color: "#A0A0A0" }}>
Bio
</span>
<span className="text-base block" style={{ color: "#E0E0E0" }}>
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!
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
);
}