Skip to content

Commit 3dfe6c6

Browse files
vspcoderzvspcoderz
committed
Great Hero Section Man
1 parent d13a661 commit 3dfe6c6

File tree

10 files changed

+140
-142
lines changed

10 files changed

+140
-142
lines changed

‎package-lock.json‎

Lines changed: 16 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"@gsap/react": "^2.1.2",
1213
"clsx": "^2.1.1",
14+
"gsap": "^3.13.0",
1315
"motion": "^12.23.12",
1416
"next": "15.4.5",
1517
"react": "19.1.0",

‎public/terminal.gif‎

7.6 MB
Loading

‎src/app/globals.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@
55
.font-space-grotesk {
66
font-family: var(--font-space-grotesk) , 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
77
}
8+
.font-oswald {
9+
font-family: var(--font-oswald) , 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
10+
}
811
.font-space-mono {
912
font-family: var(--font-space-mono) , 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1013
}
11-
.font-borel {
12-
font-family: var(--font-borel) , 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14+
.font-cambay {
15+
font-family: var(--font-cambay) , 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
1316
}

‎src/app/layout.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "./globals.css";
2-
import { Space_Grotesk, Space_Mono, Borel } from "next/font/google";
2+
import { Space_Grotesk, Space_Mono, Cambay, Oswald} from "next/font/google";
33

44
const spaceGrotesk = Space_Grotesk({
55
subsets: ["latin"],
@@ -13,12 +13,18 @@ const spaceMono = Space_Mono({
1313
weight: ["400", "700"],
1414
});
1515

16-
const borel = Borel({
16+
const cambay = Cambay({
1717
subsets: ["latin"],
18-
variable: "--font-borel",
18+
variable: "--font-cambay",
1919
weight: ["400"],
2020
});
2121

22+
const oswald = Oswald({
23+
subsets: ["latin"],
24+
variable: "--font-oswald",
25+
weight: ["400"],
26+
})
27+
2228
export const metadata = {
2329
title: "Vspcoderz Portfolio ",
2430
description:
@@ -33,7 +39,7 @@ export default function RootLayout({ children }) {
3339
return (
3440
<html lang="en">
3541
<body
36-
className={`bg-zinc-900 text-zinc-100 ${spaceGrotesk.variable} ${spaceMono.variable}`}
42+
className={`bg-zinc-900 text-zinc-100 ${spaceGrotesk.variable} ${spaceMono.variable} ${cambay.variable}`}
3743
>
3844
{children}
3945
</body>

‎src/app/page.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import React from "react";
1+
"use client";
2+
3+
import React, { useState } from "react";
24
import HeroSection from "@/components/HeroSection";
35

46
const Home = () => {

‎src/components/Anime.jsx‎

Whitespace-only changes.

‎src/components/HeroSection.jsx‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,69 @@
1+
import Image from "next/image";
12
import React from "react";
2-
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
3+
import { WordRotate } from "@/components/ui/word-rotate";
34

45
const HeroSection = () => {
56
return (
67
<>
7-
<section className="w-full h-screen flex justify-center items-center">
8-
<div className="absolute top-24 left-1/4 w-1/2 h-96 flex items-center justify-center z-0">
9-
<TextHoverEffect text="Hello!" />
10-
</div>
11-
12-
<div className="relative z-10 flex flex-col gap-2 items-center">
13-
<h1 className="text-8xl font-space-mono">Hi I am Vspcoderz.</h1>
14-
<span className="text-8xl font-space-grotesk">Coder. Minecraft</span>
15-
</div>
8+
<section className="w-full h-screen bg-neutral-900">
9+
<section className="min-h-screen w-full flex items-center bg-neutral-900">
10+
<main className="w-full flex flex-col items-center justify-center pt-24 pb-16 border-y-2 border-dashed border-gray-600 ">
11+
{/* Accent Graphic */}
12+
<span className="rounded-2xl bg-white/10 shadow-lg p-3 flex items-center justify-center mb-8">
13+
<Image
14+
src="/logo.png"
15+
alt="Hero Logo"
16+
width={72}
17+
height={72}
18+
className="h-14 w-14 object-cover rounded-2xl"
19+
priority
20+
/>
21+
</span>
22+
{/* Bold Headline */}
23+
<div className="flex flex-col items-center gap-2 ">
24+
<h1 className="text-5xl flex items-center justify-center sm:text-7xl font-space-mono font-extrabold uppercase tracking-tight text-white text-center">
25+
I am
26+
<div className="flex items-center justify-center ml-8">
27+
<Image
28+
src="/terminal.gif"
29+
alt="Title GIF"
30+
width={72}
31+
height={72}
32+
className="h-14 w-14 object-cover mr-4 rounded-2xl"
33+
priority
34+
/>
35+
<span className="text-primary"> Vspcoderz.</span>
36+
</div>
37+
</h1>
38+
</div>
39+
{/* Subtitle / Role */}
40+
<div className="mt-6 mb-2">
41+
<WordRotate
42+
className="text-lg sm:text-2xl text-gray-400 tracking-wide text-center"
43+
duration={1300}
44+
words={[
45+
"Full-Stack Devloper",
46+
"DSA Student",
47+
"Minecraft Modder",
48+
"Curious About Tech",
49+
]}
50+
/>
51+
</div>
52+
{/* Buttons */}
53+
<div className="flex gap-5 mt-10 flex-wrap justify-center">
54+
<button className="px-8 py-3 bg-white text-black text-lg rounded-full font-semibold shadow-lg hover:bg-gray-300/90 transition">
55+
My Work
56+
</button>
57+
<button className="px-8 py-3 bg-neutral-900 text-white text-lg rounded-full font-semibold shadow border border-white/10 hover:bg-neutral-800 transition">
58+
Contact
59+
</button>
60+
</div>
61+
</main>
62+
{/* Modern Bottom Divider */}
63+
<div className="w-full flex justify-center mt-16 absolute bottom-12 left-0">
64+
<div className="h-2 w-32 rounded-full bg-white/10 shadow-md" />
65+
</div>
66+
</section>
1667
</section>
1768
</>
1869
);

‎src/components/ui/text-hover-effect.jsx‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎src/components/ui/word-rotate.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
"use client";
2+
3+
import { AnimatePresence, motion, MotionProps } from "motion/react";
4+
import { useEffect, useState } from "react";
5+
6+
import { cn } from "@/lib/utils";
7+
8+
export function WordRotate({
9+
words,
10+
duration = 2500,
11+
motionProps = {
12+
initial: { opacity: 0, y: -50 },
13+
animate: { opacity: 1, y: 0 },
14+
exit: { opacity: 0, y: 50 },
15+
transition: { duration: 0.25, ease: "easeOut" },
16+
},
17+
className,
18+
}) {
19+
const [index, setIndex] = useState(0);
20+
21+
useEffect(() => {
22+
const interval = setInterval(() => {
23+
setIndex((prevIndex) => (prevIndex + 1) % words.length);
24+
}, duration);
25+
26+
// Clean up interval on unmount
27+
return () => clearInterval(interval);
28+
}, [words, duration]);
29+
30+
return (
31+
<div className="overflow-hidden py-2">
32+
<AnimatePresence mode="wait">
33+
<motion.h1
34+
key={words[index]}
35+
className={cn(className)}
36+
{...motionProps}
37+
>
38+
{words[index]}
39+
</motion.h1>
40+
</AnimatePresence>
41+
</div>
42+
);
43+
}

0 commit comments

Comments
 (0)