Skip to content

Commit ee56f5d

Browse files
alothmanmoealothmanmoe
committed
Create intro header component
1 parent 8e0eeed commit ee56f5d

File tree

2 files changed

+141
-71
lines changed

2 files changed

+141
-71
lines changed

‎src/app/page.tsx‎

Lines changed: 7 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,12 @@
1+
'use client';
2+
3+
import {IntroHeader} from "@/components/main/IntroHeader";
4+
15
export default function Home() {
6+
27
return (
3-
<div className="flex flex-col flex-1 items-center justify-center">
4-
<h1 className="mt-20">Initial NextJS Setup!</h1>
5-
<h1>Initial NextJS Setup!</h1>
6-
<h1>Initial NextJS Setup!</h1>
7-
<h1>Initial NextJS Setup!</h1>
8-
<h1>Initial NextJS Setup!</h1>
9-
<h1>Initial NextJS Setup!</h1>
10-
<h1>Initial NextJS Setup!</h1>
11-
<h1>Initial NextJS Setup!</h1>
12-
<h1>Initial NextJS Setup!</h1>
13-
<h1>Initial NextJS Setup!</h1>
14-
<h1>Initial NextJS Setup!</h1>
15-
<h1>Initial NextJS Setup!</h1>
16-
<h1>Initial NextJS Setup!</h1>
17-
<h1>Initial NextJS Setup!</h1>
18-
<h1>Initial NextJS Setup!</h1>
19-
<h1>Initial NextJS Setup!</h1>
20-
<h1>Initial NextJS Setup!</h1>
21-
<h1>Initial NextJS Setup!</h1>
22-
<h1>Initial NextJS Setup!</h1>
23-
<h1>Initial NextJS Setup!</h1>
24-
<h1>Initial NextJS Setup!</h1>
25-
<h1>Initial NextJS Setup!</h1>
26-
<h1>Initial NextJS Setup!</h1>
27-
<h1>Initial NextJS Setup!</h1>
28-
<h1>Initial NextJS Setup!</h1>
29-
<h1>Initial NextJS Setup!</h1>
30-
<h1>Initial NextJS Setup!</h1>
31-
<h1>Initial NextJS Setup!</h1>
32-
<h1>Initial NextJS Setup!</h1>
33-
<h1>Initial NextJS Setup!</h1>
34-
<h1>Initial NextJS Setup!</h1>
35-
<h1>Initial NextJS Setup!</h1>
36-
<h1>Initial NextJS Setup!</h1>
37-
<h1>Initial NextJS Setup!</h1>
38-
<h1>Initial NextJS Setup!</h1>
39-
<h1>Initial NextJS Setup!</h1>
40-
<h1>Initial NextJS Setup!</h1>
41-
<h1>Initial NextJS Setup!</h1>
42-
<h1>Initial NextJS Setup!</h1>
43-
<h1>Initial NextJS Setup!</h1>
44-
<h1>Initial NextJS Setup!</h1>
45-
<h1>Initial NextJS Setup!</h1>
46-
<h1>Initial NextJS Setup!</h1>
47-
<h1>Initial NextJS Setup!</h1>
48-
<h1>Initial NextJS Setup!</h1>
49-
<h1>Initial NextJS Setup!</h1>
50-
<h1>Initial NextJS Setup!</h1>
51-
<h1>Initial NextJS Setup!</h1>
52-
<h1>Initial NextJS Setup!</h1>
53-
<h1>Initial NextJS Setup!</h1>
54-
<h1>Initial NextJS Setup!</h1>
55-
<h1>Initial NextJS Setup!</h1>
56-
<h1>Initial NextJS Setup!</h1>
57-
<h1>Initial NextJS Setup!</h1>
58-
<h1>Initial NextJS Setup!</h1>
59-
<h1>Initial NextJS Setup!</h1>
60-
<h1>Initial NextJS Setup!</h1>
61-
<h1>Initial NextJS Setup!</h1>
62-
<h1>Initial NextJS Setup!</h1>
63-
<h1>Initial NextJS Setup!</h1>
64-
<h1>Initial NextJS Setup!</h1>
65-
<h1>Initial NextJS Setup!</h1>
66-
<h1>Initial NextJS Setup!</h1>
67-
<h1>Initial NextJS Setup!</h1>
68-
<h1>Initial NextJS Setup!</h1>
69-
<h1>Initial NextJS Setup!</h1>
70-
<h1>Initial NextJS Setup!</h1>
71-
<h1>Initial NextJS Setup!</h1>
72-
<h1>Initial NextJS Setup!</h1>
73-
<br />
8+
<div className="min-h-screen min-w-screen">
9+
<IntroHeader />
7410
</div>
7511
);
7612
}

‎src/components/main/IntroHeader.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
'use client';
2+
import {motion} from "motion/react";
3+
import {siteConfig} from "@/config/SiteConfig";
4+
import {FaRocket} from "react-icons/fa";
5+
6+
const BackgroundGrid = () => (
7+
<div className="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
8+
{/* Faded tech grid */}
9+
<div
10+
className="absolute inset-0 bg-[linear-gradient(to_right,rgba(59,130,246,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(59,130,246,0.04)_1px,transparent_1px)] bg-size-[48px_48px] mask-[radial-gradient(ellipse_at_center,black_40%,transparent_85%)] rotate-45 scale-150 origin-center"/>
11+
12+
{/* Large ambient glows */}
13+
<div className="absolute -top-24 -left-32 h-104 w-104 rounded-full bg-primary/12 blur-3xl"/>
14+
<div className="absolute top-[18%] -right-24 h-88 w-88 rounded-full bg-blue-500/12 blur-3xl"/>
15+
<div className="absolute -bottom-32 left-[18%] h-96 w-[24rem] rounded-full bg-blue-400/10 blur-3xl"/>
16+
17+
{/* Center beam / hero energy */}
18+
<div
19+
className="absolute left-1/2 top-0 h-full w-lg -translate-x-1/2 bg-[radial-gradient(ellipse_at_center,rgba(59,130,246,0.12)_0%,rgba(59,130,246,0.06)_28%,transparent_68%)]"/>
20+
21+
{/* Framed geometry accents */}
22+
<div
23+
className="absolute left-[8%] top-[16%] h-40 w-40 rotate-12 rounded-3xl border border-primary/15 bg-primary/5 backdrop-blur-sm float-animation"/>
24+
<div
25+
className="absolute right-[10%] top-[24%] h-28 w-28 rotate-45 rounded-2xl border border-blue-400/20 bg-blue-500/10 animate-pulse"/>
26+
<div
27+
className="absolute bottom-[18%] right-[20%] h-44 w-44 -rotate-12 rounded-full border border-primary/15 bg-primary/5 float-animation"/>
28+
<div
29+
className="absolute bottom-[22%] left-[14%] h-20 w-20 rotate-12 rounded-xl border border-blue-400/20 bg-blue-400/10 animate-pulse"/>
30+
31+
{/* Subtle connection lines */}
32+
<div
33+
className="absolute left-[18%] top-[30%] h-px w-88 rotate-18 bg-linear-to-r from-transparent via-primary/25 to-transparent"/>
34+
<div
35+
className="absolute right-[18%] bottom-[28%] h-px w-[18rem] -rotate-24 bg-linear-to-r from-transparent via-blue-400/25 to-transparent"/>
36+
37+
{/* Floating highlight dots */}
38+
<div
39+
className="absolute left-[22%] top-[24%] h-2.5 w-2.5 rounded-full bg-primary/70 shadow-[0_0_20px_rgba(59,130,246,0.45)] animate-ping"/>
40+
<div
41+
className="absolute left-[32%] bottom-[26%] h-2 w-2 rounded-full bg-blue-400/70 shadow-[0_0_18px_rgba(96,165,250,0.4)] float-animation"/>
42+
<div
43+
className="absolute right-[26%] top-[34%] h-2.5 w-2.5 rounded-full bg-primary/60 shadow-[0_0_18px_rgba(59,130,246,0.4)] animate-pulse"/>
44+
<div
45+
className="absolute right-[16%] bottom-[20%] h-3 w-3 rounded-full bg-blue-500/60 shadow-[0_0_20px_rgba(59,130,246,0.4)] float-animation"/>
46+
47+
{/* Bottom glow shelf */}
48+
<div className="absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-primary/8 via-blue-500/4 to-transparent"/>
49+
</div>
50+
)
51+
52+
const containerVariants = {
53+
hidden: {opacity: 0},
54+
visible: {
55+
opacity: 1,
56+
transition: {
57+
staggerChildren: 0.2,
58+
delayChildren: 0.1
59+
}
60+
}
61+
}
62+
63+
const childVariants = {
64+
hidden: {opacity: 0, y: 30},
65+
visible: {
66+
opacity: 1,
67+
y: 0,
68+
transition: {
69+
duration: 0.8
70+
}
71+
}
72+
}
73+
74+
export function IntroHeader() {
75+
return (
76+
<section
77+
id="about"
78+
className="min-h-screen w-full relative flex flex-col items-center justify-center overflow-hidden"
79+
>
80+
<BackgroundGrid/>
81+
<motion.div
82+
initial="hidden"
83+
animate="visible"
84+
variants={containerVariants}
85+
className="relative z-10 flex flex-col items-center justify-center text-center gap-8 px-4 sm:px-8 lg:px-16 w-full max-w-6xl mx-auto pt-20 sm:pt-24 lg:pt-28"
86+
>
87+
<motion.div variants={childVariants} className="space-y-6 flex flex-col items-center">
88+
<h1 title='name' className="text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight">
89+
<span title='name' className="bg-linear-to-r from-foreground via-primary to-blue-500 bg-clip-text text-transparent">
90+
{siteConfig.profile.fullName}
91+
</span>
92+
</h1>
93+
94+
<div className="relative w-full bg-card/40 backdrop-blur-sm border border-primary/20 rounded-2xl p-6 shadow-2xl">
95+
<h2
96+
title={siteConfig.profile.position}
97+
className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-linear-to-r from-primary via-blue-500 to-primary bg-clip-text text-transparent mb-3"
98+
>
99+
{siteConfig.profile.position}
100+
</h2>
101+
<div className="w-40 h-1 bg-linear-to-r from-primary to-blue-500 rounded-full mx-auto"/>
102+
</div>
103+
104+
<motion.p
105+
variants={childVariants}
106+
className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed"
107+
>
108+
Building software that feels simple on the surface and solid underneath.
109+
</motion.p>
110+
</motion.div>
111+
112+
<motion.div
113+
variants={childVariants}
114+
className="flex flex-col sm:flex-row items-center gap-4 mt-8 mb-16"
115+
>
116+
<button
117+
className="group relative overflow-hidden bg-linear-to-r from-primary to-blue-500 hover:from-blue-500 hover:to-primary text-primary-foreground px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 hover:cursor-pointer"
118+
onClick={() => {
119+
document.getElementById(siteConfig.navbar.routes[0].link.slice(1))?.scrollIntoView({behavior: 'smooth'})
120+
}}
121+
>
122+
<div className="flex items-center gap-3">
123+
<FaRocket className="w-5 h-5 group-hover:animate-bounce"/>
124+
Jump In
125+
<div className="w-2 h-2 bg-white/80 rounded-full animate-pulse"/>
126+
</div>
127+
<div
128+
className="absolute inset-0 bg-white/20 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"/>
129+
</button>
130+
</motion.div>
131+
</motion.div>
132+
</section>
133+
)
134+
}

0 commit comments

Comments
 (0)