104 lines
4.3 KiB
TypeScript
104 lines
4.3 KiB
TypeScript
"use client";
|
||
|
||
import React, { useRef } from "react";
|
||
import { motion, useTransform } from "motion/react";
|
||
import { Parallax } from "@/components/parallax/Parallax";
|
||
import { Reveal } from "@/components/motion/Reveal";
|
||
import { Stagger } from "@/components/motion/Stagger";
|
||
import { TRANSITIONS } from "@/lib/animation";
|
||
|
||
export function AboutSection() {
|
||
const imageRef = useRef<HTMLDivElement>(null);
|
||
|
||
return (
|
||
<section
|
||
id="about"
|
||
aria-label="About"
|
||
className="relative w-full overflow-clip py-24 md:py-36"
|
||
>
|
||
{/* Ambient vignette */}
|
||
<Parallax speed={0.06} className="pointer-events-none absolute inset-0 -z-10">
|
||
<div className="absolute inset-0 bg-[radial-gradient(800px_400px_at_80%_10%,rgba(255,255,255,0.08),transparent_70%)]" />
|
||
</Parallax>
|
||
|
||
<div className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-12 md:gap-12">
|
||
{/* Copy */}
|
||
<div className="md:col-span-6 lg:col-span-7">
|
||
<Stagger delayChildren={0.05}>
|
||
<Reveal>
|
||
<h2 className="text-pretty text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-300">
|
||
Craft meets code.
|
||
</h2>
|
||
</Reveal>
|
||
<Reveal delay={0.05}>
|
||
<p className="mt-4 text-balance text-base leading-relaxed text-neutral-300 md:text-lg">
|
||
I shape cinematic experiences for the web—where motion guides, parallax breathes, and details
|
||
obsess. From VFX supervision to full‑stack development, I build interfaces that feel alive while
|
||
staying accessible and fast.
|
||
</p>
|
||
</Reveal>
|
||
<Reveal delay={0.1}>
|
||
<ul className="mt-6 grid grid-cols-1 gap-3 text-sm text-neutral-200 sm:grid-cols-2">
|
||
<li className="rounded-lg glass p-3">
|
||
• Smooth-scrolling narratives with Lenis
|
||
</li>
|
||
<li className="rounded-lg glass p-3">
|
||
• Scroll-linked motion via Framer Motion
|
||
</li>
|
||
<li className="rounded-lg glass p-3">
|
||
• Performance-first, a11y conscious
|
||
</li>
|
||
<li className="rounded-lg glass p-3">
|
||
• Filmic depth, considered typography
|
||
</li>
|
||
</ul>
|
||
</Reveal>
|
||
</Stagger>
|
||
</div>
|
||
|
||
{/* Visual */}
|
||
<div className="md:col-span-6 lg:col-span-5">
|
||
<motion.div
|
||
ref={imageRef}
|
||
className="relative aspect-[4/5] w-full overflow-hidden rounded-2xl glass-strong"
|
||
initial={{ opacity: 0, y: 16 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true, margin: "0px 0px -10% 0px" }}
|
||
transition={TRANSITIONS.base}
|
||
>
|
||
{/* Parallax layers */}
|
||
<Parallax speed={0.12} className="absolute -inset-8">
|
||
<div className="h-full w-full bg-[radial-gradient(600px_300px_at_30%_10%,rgba(255,255,255,0.10),transparent_70%)]" />
|
||
</Parallax>
|
||
<Parallax speed={-0.08} className="absolute inset-0">
|
||
<div className="h-full w-full bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.06)_40%,transparent_80%)]" />
|
||
</Parallax>
|
||
|
||
{/* Grid accent */}
|
||
<motion.div
|
||
className="absolute inset-0 opacity-[0.08]"
|
||
style={{
|
||
backgroundImage:
|
||
"linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
|
||
backgroundSize: "24px 24px",
|
||
color: "rgb(255 255 255)",
|
||
}}
|
||
/>
|
||
|
||
{/* Caption */}
|
||
<motion.div
|
||
className="absolute bottom-0 left-0 right-0 p-4 text-xs text-neutral-300/80 backdrop-blur-sm"
|
||
initial={{ opacity: 0, y: 6 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ ...TRANSITIONS.base, delay: 0.1 }}
|
||
>
|
||
Parallax composition with layered gradients and light bloom.
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|