Skip to content

feat: enhance homepage interactivity with hover effects and dynamic c… #34

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
kirito666coder merged 1 commit into from
Jul 5, 2026
Merged

feat: enhance homepage interactivity with hover effects and dynamic c… #34

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
Binary file added web/public/SLVG.mp3
View file
Open in desktop
Binary file not shown.
191 changes: 138 additions & 53 deletions web/src/app/(root)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { useEffect, useMemo, useState } from 'react';

import Link from 'next/link';

Check warning on line 5 in web/src/app/(root)/page.tsx

View workflow job for this annotation

GitHub Actions / build 

'Link' is defined but never used. Allowed unused vars must match /^_/u

import { ScrollSmoother } from '@/lib/gsap';

Expand Down Expand Up @@ -30,6 +30,15 @@

const [timerDone, setTimerDone] = useState(introAlreadyPlayed);

const { homePageHover, setHomePageHover } = useAppStore();

const getClass = (id: string) =>
`transition-all duration-500 ${
homePageHover && homePageHover !== id
? 'blur-sm opacity-40'
: 'blur-0 opacity-100'
}`;

const shouldRunIntro = useMemo(() => {
return !introAlreadyPlayed;
}, []);
Expand Down Expand Up @@ -110,15 +119,94 @@
{!loading && (
<div className="sm:text-foreground relative h-screen px-6 py-20 text-white lg:py-32">
<div className="absolute">
<Logo className="text-6xl" />
<div
onMouseEnter={() => setHomePageHover('logo')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('logo')} ${
homePageHover === 'logo' ? 'scale-110' : 'scale-100'
}`}
>
<Logo className="text-6xl transition-transform duration-500" />
</div>

<div className="mt-8 ml-2 flex items-center gap-5">
<ButtonHoverLineEffect>
<TransitionLink href="/blogs" revealName="blogs" x={0}>
Blogs
</TransitionLink>
</ButtonHoverLineEffect>
{session?.user.role === 'admin' && (
<div
onMouseEnter={() => setHomePageHover('blogs')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('blogs')} ${
homePageHover === 'blogs' ? 'scale-110' : 'scale-100'
}`}
>
<ButtonHoverLineEffect>
<TransitionLink href="/blogs" revealName="blogs" x={0}>
Blogs
</TransitionLink>
</ButtonHoverLineEffect>
</div>

<div
onMouseEnter={() => setHomePageHover('about')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('about')} ${
homePageHover === 'about' ? 'scale-110' : 'scale-100'
}`}
>
<ButtonHoverLineEffect>
<TransitionLink
href="/about"
revealName="About"
x={100}
>
About
</TransitionLink>
</ButtonHoverLineEffect>
</div>

<div
onMouseEnter={() => setHomePageHover('theme')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('theme')} ${
homePageHover === 'theme' ? 'scale-110' : 'scale-100'
}`}
>
<ButtonHoverLineEffect>
<ThemeToggleButton />
</ButtonHoverLineEffect>
</div>

<div
onMouseEnter={() => setHomePageHover('signin')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('signin')} ${
homePageHover === 'signin' ? 'scale-110' : 'scale-100'
}`}
>
<ButtonHoverLineEffect>
<SignIn session={session} status={status} />
</ButtonHoverLineEffect>
</div>
</div>
<div className="mt-2 flex items-end gap-5">
{session && (
<div
onMouseEnter={() => setHomePageHover('signin')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('signin')} ${
homePageHover === 'signin' ? 'scale-110' : 'scale-100'
}`}
>
<p className="text-background bg-foreground mt-1 ml-2 w-fit p-0.5 px-3">
Logged in as {session.user.name}
</p>
</div>
)}
<div
onMouseEnter={() => setHomePageHover('admin')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('admin')} ${
homePageHover === 'admin' ? 'scale-110' : 'scale-100'
}`}
>
<ButtonHoverLineEffect>
<TransitionLink
href="/admin"
Expand All @@ -128,55 +216,52 @@
Admin
</TransitionLink>
</ButtonHoverLineEffect>
)}

<ButtonHoverLineEffect>
<TransitionLink href="/about" revealName="About" x={100}>
About
</TransitionLink>
</ButtonHoverLineEffect>

<ButtonHoverLineEffect>
<ThemeToggleButton />
</ButtonHoverLineEffect>

<ButtonHoverLineEffect>
<SignIn session={session} status={status} />
</ButtonHoverLineEffect>

{/* <ButtonHoverLineEffect>
<button
onClick={() => {
seedData();
}}
>
Seed
</button>
</ButtonHoverLineEffect> */}
</div>
</div>
{session && (
<p className="text-background bg-foreground mt-1 ml-2 w-fit p-0.5">
Logged in as {session.user.name}
</p>
)}
</div>
<h1 className="absolute bottom-0">
<TextIntro delay={0.2}>
<div className="text-2xl leading-5 font-bold uppercase">
tech blogs 2026
</div>
</TextIntro>

<TextIntro delay={0.4}>
<div className="font-ops h-15 w-full text-7xl leading-18 uppercase md:h-20 md:text-8xl md:leading-24 lg:h-25 lg:text-9xl lg:leading-30">
Coding
</div>
</TextIntro>
<TextIntro delay={0.6}>
<div className="font-ops h-15 w-full text-7xl leading-12.25 uppercase md:h-19 md:text-8xl md:leading-18 lg:h-24 lg:text-9xl lg:leading-25">
Logs
</div>
</TextIntro>
<h1 className="absolute bottom-0 cursor-pointer">
<div
onMouseEnter={() => setHomePageHover('tech')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('tech')} ${
homePageHover === 'tech' ? 'scale-110' : 'scale-100'
}`}
>
<TextIntro delay={0.2}>
<div className="text-2xl leading-5 font-bold uppercase">
tech blogs 2026
</div>
</TextIntro>
</div>

<div
onMouseEnter={() => setHomePageHover('coding')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('coding')} ${
homePageHover === 'coding' ? 'scale-110' : 'scale-100'
}`}
>
<TextIntro delay={0.4}>
<div className="font-ops h-15 w-full text-7xl leading-18 uppercase md:h-20 md:text-8xl md:leading-24 lg:h-25 lg:text-9xl lg:leading-30">
Coding
</div>
</TextIntro>
</div>

<div
onMouseEnter={() => setHomePageHover('logs')}
onMouseLeave={() => setHomePageHover(null)}
className={`${getClass('logs')} ${
homePageHover === 'logs' ? 'scale-110' : 'scale-100'
}`}
>
<TextIntro delay={0.6}>
<div className="font-ops h-15 w-full text-7xl leading-12.25 uppercase md:h-19 md:text-8xl md:leading-18 lg:h-24 lg:text-9xl lg:leading-25">
Logs
</div>
</TextIntro>
</div>
</h1>
</div>
)}
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/about/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function Footer() {
Ready to <br /> collaborate?
</h3>
<p className="text-background/60 max-w-sm text-lg font-light">
I'm currently available for freelance projects and exciting new
I&apos;m currently available for freelance projects and exciting new
opportunities.
</p>
</div>
Expand Down
43 changes: 19 additions & 24 deletions web/src/app/about/components/JourneyTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ export function JourneyTimeline() {
</div>

<div className="border-border/30 relative ml-4 space-y-16 border-l pl-8 md:ml-6 md:pl-12">
{/* Timeline Item 1 */}
<div
ref={(el) => {
timelineNodesRef.current[0] = el;
Expand All @@ -70,21 +69,18 @@ export function JourneyTimeline() {
2024 — PRESENT
</span>
<span className="text-foreground/40 hidden md:inline">•</span>
<span className="text-xl font-medium">
Senior Frontend Engineer
</span>
<span className="text-xl font-medium">Lorem Ipsum Title</span>
</div>
<h3 className="text-foreground/80 mb-4 text-xl">
Tech Innovations Inc.
Lorem Company Name
</h3>
<p className="text-foreground/60 max-w-2xl leading-relaxed">
Leading the frontend architecture for next-generation web
applications. Spearheading the migration to Next.js 14 and
implementing complex WebGL features for immersive user experiences.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam.
</p>
</div>

{/* Timeline Item 2 */}
<div
ref={(el) => {
timelineNodesRef.current[1] = el;
Expand All @@ -94,22 +90,19 @@ export function JourneyTimeline() {
<div className="timeline-dot bg-foreground/50 border-background absolute top-1.5 -left-[2.85rem] h-6 w-6 rounded-full border-4 md:-left-[3.85rem]" />
<div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<span className="font-ops text-foreground/70 text-2xl tracking-widest md:text-3xl">
2021 — 2024
2022 — 2024
</span>
<span className="text-foreground/40 hidden md:inline">•</span>
<span className="text-xl font-medium">Full Stack Developer</span>
<span className="text-xl font-medium">Lorem Ipsum Position</span>
</div>
<h3 className="text-foreground/80 mb-4 text-xl">
Creative Digital Agency
</h3>
<h3 className="text-foreground/80 mb-4 text-xl">Ipsum Studio</h3>
<p className="text-foreground/60 max-w-2xl leading-relaxed">
Developed and maintained multiple high-traffic e-commerce platforms.
Specialized in creating fluid animations using GSAP and building
robust scalable backends with Node.js.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis
aute irure dolor in reprehenderit.
</p>
</div>

{/* Timeline Item 3 */}
<div
ref={(el) => {
timelineNodesRef.current[2] = el;
Expand All @@ -119,16 +112,18 @@ export function JourneyTimeline() {
<div className="timeline-dot bg-foreground/20 border-background absolute top-1.5 -left-[2.85rem] h-6 w-6 rounded-full border-4 md:-left-[3.85rem]" />
<div className="mb-4 flex flex-col gap-2 md:flex-row md:items-center md:gap-6">
<span className="font-ops text-foreground/50 text-2xl tracking-widest md:text-3xl">
2019 — 2021
2020 — 2022
</span>
<span className="text-foreground/40 hidden md:inline">•</span>
<span className="text-xl font-medium">Junior Web Developer</span>
<span className="text-xl font-medium">Dolor Sit Amet</span>
</div>
<h3 className="text-foreground/80 mb-4 text-xl">Startup Studio</h3>
<h3 className="text-foreground/80 mb-4 text-xl">
Placeholder Organization
</h3>
<p className="text-foreground/60 max-w-2xl leading-relaxed">
Began professional journey building responsive landing pages,
optimizing web performance, and learning the fundamentals of UI/UX
design.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt.
</p>
</div>
</div>
Expand Down
Loading
Loading