Skip to content

Commit 609a9bf

Browse files
codevoid048codevoid048
committed
feat: add Aurora background component and enhance UI with subtle design adjustments
1 parent 0d34452 commit 609a9bf

11 files changed

Lines changed: 276 additions & 169 deletions

File tree

‎app/layout.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/theme-provider"
66
import ErrorReporter from "@/components/ErrorReporter";
77
import Script from "next/script";
88
import { Analytics } from "@vercel/analytics/next"
9+
import Aurora from "@/components/ui/aurora"
910

1011
const inter = Inter({
1112
subsets: ["latin"],
@@ -83,8 +84,18 @@ export default function RootLayout({
8384
children: React.ReactNode;
8485
}>) {
8586
return (
86-
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
87-
<body className="antialiased font-sans">
87+
<html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
88+
<body className="antialiased font-sans relative">
89+
{/* Aurora Background */}
90+
<div className="fixed inset-0 -z-20 w-screen h-screen">
91+
<Aurora
92+
colorStops={["hsl(0 0% 12%)", "hsl(0 0% 40%)", "hsl(0 0% 95%)"]}
93+
blend={0.5}
94+
amplitude={1.0}
95+
speed={0.5}
96+
/>
97+
</div>
98+
8899
<ErrorReporter />
89100
<Script
90101
src="https://slelguoygbfzlpylpxfs.supabase.co/storage/v1/object/public/scripts//route-messenger.js"

‎app/page.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ export default function Home() {
4040

4141
return (
4242
<main className="relative min-h-screen">
43-
{/* Background */}
44-
<div className="fixed inset-0 bg-background z-0"></div>
45-
4643
{/* Content */}
4744
<div className="relative z-20">
4845
<Navbar />

‎components/sections/contact.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,6 @@ export default function Contact() {
5555

5656
return (
5757
<section id="contact" className="py-6 md:py-10 mb-10 relative overflow-hidden">
58-
{/* Subtle background overlay for better readability */}
59-
<div className="absolute inset-0 bg-background/80"></div>
6058

6159
<div className="container mx-auto px-4 relative z-10">
6260
<motion.div
@@ -77,14 +75,14 @@ export default function Contact() {
7775
transition={{ duration: 0.5 }}
7876
className="max-w-2xl mx-auto"
7977
>
80-
<div className="bg-card/50 backdrop-blur-sm rounded-xl p-8 border border-border">
78+
<div className="bg-card/10 backdrop-blur-sm rounded-xl p-8 border border-border">
8179
<h3 className="text-2xl font-semibold font-sans mb-6 text-foreground text-center">Send Me a Message</h3>
8280

8381
{isSubmitted ? (
8482
<motion.div
8583
initial={{ opacity: 0, y: 20 }}
8684
animate={{ opacity: 1, y: 0 }}
87-
className="border border-border rounded-lg p-4 text-center bg-accent/50"
85+
className="border border-border rounded-lg p-4 text-center bg-accent/10"
8886
>
8987
<p className="text-foreground font-medium">
9088
Thank you for your message! I'll get back to you soon.
@@ -94,7 +92,7 @@ export default function Contact() {
9492
<form onSubmit={handleSubmit} className="space-y-6">
9593
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
9694
<div>
97-
<label htmlFor="name" className="block text-sm font-medium text-muted-foreground mb-1">
95+
<label htmlFor="name" className="block text-sm font-medium text-foreground mb-1">
9896
Name
9997
</label>
10098
<Input
@@ -103,13 +101,13 @@ export default function Contact() {
103101
value={formState.name}
104102
onChange={handleChange}
105103
required
106-
className="bg-background border-border text-foreground placeholder:text-muted-foreground"
104+
className="bg-card/20 border-border text-foreground placeholder:text-muted-foreground"
107105
placeholder="Your name"
108106
/>
109107
</div>
110108

111109
<div>
112-
<label htmlFor="email" className="block text-sm font-medium text-muted-foreground mb-1">
110+
<label htmlFor="email" className="block text-sm font-medium text-foreground mb-1">
113111
Email
114112
</label>
115113
<Input
@@ -119,14 +117,14 @@ export default function Contact() {
119117
value={formState.email}
120118
onChange={handleChange}
121119
required
122-
className="bg-background border-border text-foreground placeholder:text-muted-foreground"
120+
className="bg-card/20 border-border text-foreground placeholder:text-muted-foreground"
123121
placeholder="Your email address"
124122
/>
125123
</div>
126124
</div>
127125

128126
<div>
129-
<label htmlFor="message" className="block text-sm font-medium text-muted-foreground mb-1">
127+
<label htmlFor="message" className="block text-sm font-medium text-foreground mb-1">
130128
Message
131129
</label>
132130
<Textarea
@@ -135,15 +133,15 @@ export default function Contact() {
135133
value={formState.message}
136134
onChange={handleChange}
137135
required
138-
className="bg-background border-border text-foreground placeholder:text-muted-foreground min-h-[100px]"
136+
className="bg-card/20 border-border text-foreground placeholder:text-muted-foreground min-h-[100px]"
139137
placeholder="Your message to me..."
140138
/>
141139
</div>
142140

143141
<Button
144142
type="submit"
145143
disabled={isSubmitting}
146-
className="w-full bg-accent hover:bg-accent/90 border border-border text-accent-foreground transition-all"
144+
className="w-full bg-accent/30 hover:bg-accent/50 border border-border text-accent-foreground transition-all"
147145
>
148146
{isSubmitting ? (
149147
<span className="flex items-center">

‎components/sections/footer.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ export default function Footer() {
1111

1212
return (
1313
<footer className="py-8 border-t border-border relative overflow-hidden">
14-
{/* Subtle background overlay for better readability */}
15-
<div className="absolute inset-0 bg-background/50 pointer-events-none"></div>
1614
<div className="container mx-auto px-4">
1715
<div className="flex flex-col md:flex-row items-center justify-center">
1816
<motion.div

‎components/sections/intro.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,13 @@ export default function Intro() {
1717
<h1 className="text-4xl md:text-6xl font-extrabold font-sans tracking-tight text-foreground">
1818
William Keri
1919
</h1>
20-
<p className="mt-3 font-bold text-base md:text-lg text-muted-foreground">
20+
<p className="mt-3 font-bold text-base md:text-lg text-foreground">
2121
Software Engineer • Competitive Programmer
2222
</p>
2323

2424
<div className="mt-6">
2525
<span id="about" className="sr-only">About</span>
26-
<p className="text-muted-foreground text-base md:text-lg leading-relaxed">
26+
<p className="text-foreground text-base md:text-lg leading-relaxed">
2727
Passionate Full Stack Developer with expertise in modern web technologies and AI/ML integration. Currently interning as Full-Stack Developer while freelancing on community and innovative projects. I specialize in building scalable applications with a strong foundation in competitive programming and cloud technologies like AWS and Docker, always focusing on delivering efficient, user-centric solutions that drive business value.
2828
</p>
2929
</div>
@@ -58,7 +58,7 @@ function SocialLink({
5858
return (
5959
<motion.a
6060
href={href}
61-
className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-card/50 hover:bg-accent text-muted-foreground hover:text-accent-foreground transition-all duration-300 hover:shadow-lg hover:shadow-accent/25 hover:scale-110 border border-border"
61+
className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-card/20 hover:bg-accent text-accent-foreground hover:text-accent-foreground transition-all duration-300 hover:shadow-lg hover:shadow-accent/25 hover:scale-110 border border-border"
6262
aria-label={label}
6363
whileHover={{ y: -2 }}
6464
whileTap={{ scale: 0.95 }}

‎components/sections/navbar.tsx‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33
import { useState, useEffect, useRef } from "react"
44
import { motion, AnimatePresence } from "framer-motion"
55
import { User, Code, Briefcase, Mail, Folder, Sun, Moon } from "lucide-react"
6-
import { useTheme } from "next-themes"
6+
// import { useTheme } from "next-themes"
77
import Dock, { type DockItemData } from "@/components/ui/dock"
88

99
export default function Navbar() {
1010
const [activeSection, setActiveSection] = useState("about")
1111
const [scrolled, setScrolled] = useState(false)
1212
const [isOpen, setIsOpen] = useState(false)
13-
const [isAnimating, setIsAnimating] = useState(false)
14-
const [animationOrigin, setAnimationOrigin] = useState({ x: 0, y: 0 })
15-
const desktopThemeButtonRef = useRef<HTMLButtonElement>(null)
16-
const { theme, setTheme } = useTheme()
13+
// const [isAnimating, setIsAnimating] = useState(false)
14+
// const [animationOrigin, setAnimationOrigin] = useState({ x: 0, y: 0 })
15+
// const desktopThemeButtonRef = useRef<HTMLButtonElement>(null)
16+
// const { theme, setTheme } = useTheme()
1717

1818
const navItems = [
1919
{ id: "about", label: "About", icon: User },
@@ -65,6 +65,8 @@ export default function Navbar() {
6565
}, 100)
6666
}
6767

68+
// Theme switcher function commented out - default dark theme
69+
/*
6870
const toggleTheme = () => {
6971
// Determine which button is currently visible and get its position
7072
const isMobile = window.innerWidth < 768
@@ -103,10 +105,12 @@ export default function Navbar() {
103105
setTheme(theme === "dark" ? "light" : "dark")
104106
}
105107
}
108+
*/
106109

107110
return (
108111
<>
109-
{/* Theme Transition Overlay */}
112+
{/* Theme Transition Overlay commented out - default dark theme */}
113+
{/*
110114
<AnimatePresence>
111115
{isAnimating && (
112116
<motion.div
@@ -142,6 +146,7 @@ export default function Navbar() {
142146
/>
143147
)}
144148
</AnimatePresence>
149+
*/}
145150
{/* Desktop Floating Navbar */}
146151
<div className="fixed top-3 left-0 right-0 z-50 hidden md:block">
147152
<div className="flex justify-center">
@@ -152,7 +157,7 @@ export default function Navbar() {
152157
className={`transition-all duration-500 ${scrolled ? "scale-95" : "scale-100"}`}
153158
>
154159
<div className="relative">
155-
<div className="bg-background/80 backdrop-blur-lg border border-border rounded-full px-6 py-3 shadow-2xl w-[600px] md:w-[700px]">
160+
<div className="bg-background/20 backdrop-blur-lg border border-border rounded-full px-6 py-3 shadow-2xl w-[600px] md:w-[700px]">
156161
<div className="flex items-center justify-center px-4 gap-2">
157162
<div className="flex items-center space-x-1">
158163
{navItems.map((item) => (
@@ -163,14 +168,15 @@ export default function Navbar() {
163168
onClick={() => handleNavigation(item.id)}
164169
/>
165170
))}
166-
<button
171+
{/* Theme switcher commented out - default dark theme */}
172+
{/* <button
167173
ref={desktopThemeButtonRef}
168174
onClick={toggleTheme}
169175
aria-label="Toggle theme"
170176
className="ml-2 inline-flex items-center justify-center rounded-full border border-border bg-accent hover:bg-accent/80 text-foreground transition-colors h-8 w-8"
171177
>
172178
{theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
173-
</button>
179+
</button> */}
174180
</div>
175181
</div>
176182
</div>
@@ -188,13 +194,16 @@ export default function Navbar() {
188194
icon: <item.icon size={20} />,
189195
label: item.label,
190196
onClick: () => handleNavigation(item.id),
191-
className: activeSection === item.id ? "bg-accent border-accent-foreground/50" : ""
192-
})).concat({
197+
className: activeSection !== item.id ? "bg-accent border-accent-foreground/50" : ""
198+
}))
199+
// Theme switcher commented out - default dark theme
200+
/* .concat({
193201
icon: theme === "dark" ? <Sun size={20} /> : <Moon size={20} />,
194202
label: "Theme",
195203
onClick: toggleTheme,
196204
className: ""
197-
})}
205+
}) */
206+
}
198207
panelHeight={64}
199208
baseItemSize={36}
200209
magnification={48}

‎components/sections/projects.tsx‎

Lines changed: 5 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -57,48 +57,6 @@ export default function Projects() {
5757

5858
return (
5959
<section id="projects" className="py-6 md:py-10 relative overflow-hidden">
60-
{/* Animated background elements */}
61-
<div className="absolute inset-0 bg-background/80"></div>
62-
63-
{/* Floating geometric shapes */}
64-
<motion.div
65-
className="absolute top-20 left-10 w-20 h-20 border border-accent/20 rounded-full"
66-
animate={{
67-
y: [0, -20, 0],
68-
rotate: [0, 180, 360],
69-
}}
70-
transition={{
71-
duration: 8,
72-
repeat: Infinity,
73-
ease: "easeInOut"
74-
}}
75-
/>
76-
<motion.div
77-
className="absolute top-40 right-20 w-16 h-16 border border-accent/20 rounded-lg"
78-
animate={{
79-
y: [0, 15, 0],
80-
x: [0, -10, 0],
81-
}}
82-
transition={{
83-
duration: 6,
84-
repeat: Infinity,
85-
ease: "easeInOut",
86-
delay: 1
87-
}}
88-
/>
89-
<motion.div
90-
className="absolute bottom-32 left-1/4 w-12 h-12 bg-accent/10 rounded-full blur-sm"
91-
animate={{
92-
scale: [1, 1.2, 1],
93-
opacity: [0.3, 0.6, 0.3],
94-
}}
95-
transition={{
96-
duration: 4,
97-
repeat: Infinity,
98-
ease: "easeInOut",
99-
delay: 2
100-
}}
101-
/>
10260

10361
<div className="container mx-auto px-4 relative z-10">
10462
<motion.div
@@ -119,7 +77,7 @@ export default function Projects() {
11977

12078
{/* Tab Toggle */}
12179
<div className="mb-6">
122-
<div className="bg-card/50 border border-border p-1.5 rounded-full flex w-fit mx-auto shadow-inner">
80+
<div className="bg-card/10 border border-border p-1.5 rounded-full flex w-fit mx-auto shadow-inner">
12381
<TabButton active={activeTab === "freelance"} onClick={() => setActiveTab("freelance")}>
12482
Freelance
12583
</TabButton>
@@ -160,8 +118,8 @@ function TabButton({
160118
onClick={onClick}
161119
className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 relative ${
162120
active
163-
? "bg-accent text-accent-foreground border border-border"
164-
: "text-muted-foreground hover:text-foreground hover:bg-accent/50 border border-transparent"
121+
? "bg-accent/40 text-accent-foreground border border-border"
122+
: "text-foreground hover:text-foreground hover:bg-accent/30 border border-transparent"
165123
}`}
166124
>
167125
{children}
@@ -227,7 +185,7 @@ function ProjectCard({
227185
}) {
228186
return (
229187
<motion.div
230-
className="relative rounded-xl border border-border bg-card/50 p-6 group"
188+
className="relative rounded-xl border border-border bg-card/10 p-6 group"
231189
initial={{ opacity: 0, y: 50, rotateX: -15 }}
232190
whileInView={{
233191
opacity: 1,
@@ -290,7 +248,7 @@ function ProjectCard({
290248
</motion.h3>
291249

292250
<motion.p
293-
className="text-muted-foreground mb-4 leading-relaxed"
251+
className="text-foreground mb-4 leading-relaxed"
294252
initial={{ x: -20, opacity: 0 }}
295253
whileInView={{ x: 0, opacity: 1 }}
296254
transition={{ delay: index * 0.1 + 0.3 }}

0 commit comments

Comments
 (0)