Add Jack 3D Creator portfolio template (Phase 1) with PRD

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Msa87P1aZQSV9MWhEu3VfJ
2026-10-02 02:09:03 +00:00
1 parent 6bd8165e6d
commit 6f3e3bc858
@@ -0,0 +1,61 @@
+import FadeIn from '../components/FadeIn';
+import Magnet from '../components/Magnet';
+import ContactButton from '../components/ContactButton';
+import { portrait } from '../data/content';
+
+const links = [
+  { label: 'About', href: '#about' },
+  { label: 'Price', href: '#services' },
+  { label: 'Projects', href: '#projects' },
+  { label: 'Contact', href: 'mailto:hello@example.com' },
+];
+
+export default function HeroSection() {
+  return (
+    <section className="relative flex h-screen flex-col" style={{ overflowX: 'clip' }}>
+      <FadeIn delay={0} y={-20}>
+        <nav className="flex justify-between px-6 pt-6 md:px-10 md:pt-8">
+          {links.map((l) => (
+            <a
+              key={l.label}
+              href={l.href}
+              className="text-sm font-medium uppercase tracking-wider text-[#D7E2EA] transition-opacity duration-200 hover:opacity-70 md:text-lg lg:text-[1.4rem]"
+            >
+              {l.label}
+            </a>
+          ))}
+        </nav>
+      </FadeIn>
+
+      <div className="overflow-hidden">
+        <FadeIn delay={0.15} y={40}>
+          <h1 className="hero-heading mt-6 w-full whitespace-nowrap text-center text-[14vw] font-black uppercase leading-none tracking-tight sm:mt-4 sm:text-[15vw] md:-mt-5 md:text-[16vw] lg:text-[17.5vw]">
+            Hi, i’m jack
+          </h1>
+        </FadeIn>
+      </div>
+
+      <div className="absolute left-1/2 top-1/2 z-10 w-[280px] -translate-x-1/2 -translate-y-1/2 sm:bottom-0 sm:top-auto sm:w-[360px] sm:translate-y-0 md:w-[440px] lg:w-[520px]">
+        <FadeIn delay={0.6} y={30}>
+          <Magnet padding={150} strength={3} activeTransition="transform 0.3s ease-out" inactiveTransition="transform 0.6s ease-in-out" className="!block">
+            <img src={portrait} alt="Portrait of Jack" className="w-full" />
+          </Magnet>
+        </FadeIn>
+      </div>
+
+      <div className="mt-auto flex items-end justify-between px-6 pb-7 sm:pb-8 md:px-10 md:pb-10">
+        <FadeIn delay={0.35} y={20}>
+          <p
+            className="max-w-[160px] font-light uppercase leading-snug tracking-wide text-[#D7E2EA] sm:max-w-[220px] md:max-w-[260px]"
+            style={{ fontSize: 'clamp(0.75rem, 1.4vw, 1.5rem)' }}
+          >
+            a 3d creator driven by crafting striking and unforgettable projects
+          </p>
+        </FadeIn>
+        <FadeIn delay={0.5} y={20} className="relative z-20">
+          <ContactButton />
+        </FadeIn>
+      </div>
+    </section>
+  );
+}