Initial commit

src/components/AboutSection.tsx

@@ -0,0 +1,128 @@
+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>
+  );
+}