129 lines
5.2 KiB
TypeScript
129 lines
5.2 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { gsap } from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { MapPin, BookOpen, User } from "lucide-react";
|
|
import { useReducedMotion } from "../hooks/useReducedMotion";
|
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
export default function AboutSection() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const reducedMotion = useReducedMotion();
|
|
|
|
useEffect(() => {
|
|
if (reducedMotion || !sectionRef.current) return;
|
|
|
|
const ctx = gsap.context(() => {
|
|
gsap.fromTo(
|
|
".about-reveal",
|
|
{ y: 50, opacity: 0 },
|
|
{
|
|
y: 0,
|
|
opacity: 1,
|
|
duration: 1,
|
|
stagger: 0.15,
|
|
ease: "expo.out",
|
|
scrollTrigger: {
|
|
trigger: sectionRef.current,
|
|
start: "top 70%",
|
|
toggleActions: "play none none none",
|
|
},
|
|
},
|
|
);
|
|
}, sectionRef);
|
|
|
|
return () => ctx.revert();
|
|
}, [reducedMotion]);
|
|
|
|
return (
|
|
<section
|
|
id="about"
|
|
ref={sectionRef}
|
|
className="relative py-32 md:py-40 px-6"
|
|
>
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Section label */}
|
|
<div className="about-reveal flex items-center gap-4 mb-16">
|
|
<span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
|
|
001
|
|
</span>
|
|
<div className="flex-1 h-px bg-pink-brand/20" />
|
|
<span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
|
|
Identity
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main heading */}
|
|
<h2 className="about-reveal font-display text-4xl md:text-6xl lg:text-7xl font-light text-grey-900 mb-16 leading-tight">
|
|
A young adult from
|
|
<br />
|
|
<span className="text-gradient">Europe</span>
|
|
</h2>
|
|
|
|
{/* Content grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12">
|
|
{/* Left column - main text */}
|
|
<div className="md:col-span-7 space-y-8">
|
|
<p className="about-reveal text-grey-600 text-lg md:text-xl leading-relaxed font-body">
|
|
I am a curious mind navigating the intersection of technology,
|
|
psychology, and philosophy. My work spans from low-level systems
|
|
to sophisticated web platforms, always driven by a desire to
|
|
understand how things work beneath the surface.
|
|
</p>
|
|
<p className="about-reveal text-grey-500 text-base leading-relaxed font-body">
|
|
Reading is a core part of who I am - it shapes how I think about
|
|
problems and approach solutions. I believe in building things that
|
|
are both technically sound and thoughtfully designed.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Right column - details */}
|
|
<div className="md:col-span-5 space-y-6">
|
|
<div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
|
|
<MapPin className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display font-medium text-grey-900 mb-1">
|
|
Location
|
|
</h3>
|
|
<p className="text-grey-500 text-sm font-body">Europe</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
|
|
<User className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display font-medium text-grey-900 mb-1">
|
|
Age
|
|
</h3>
|
|
<p className="text-grey-500 text-sm font-body">Young adult</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="about-reveal group p-6 rounded-2xl bg-skin-100/50 border border-pink-brand/5 hover:border-pink-brand/15 transition-all duration-300 hover:shadow-lg hover:shadow-pink-brand/5">
|
|
<div className="flex items-start gap-4">
|
|
<div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
|
|
<BookOpen className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display font-medium text-grey-900 mb-1">
|
|
Passion
|
|
</h3>
|
|
<p className="text-grey-500 text-sm font-body">Avid reader</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|