3d-creator-portfolio

# Jack — 3D Creator Portfolio Produce a dark, premium **3D-creator portfolio landing page**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, gradient text, magnetic-hover portrait, scroll marquee, char-reveal text, sticky-stacking cards, and responsive behavior described below. This is the authoritative build brief. Follow it exactly — the named colors, gradients, fonts, sizes, image URLs, and animations are locked. **Inlined images (critical):** `example.html` ships the hero portrait and the four About-section 3D decorations as **inlined `data:image/webp;base64,…` URIs** — keep those exactly as they are. Do **not** swap them back for the original `shrug-person-78902957.figma.site/...` URLs: that host rate-limits / 403s inside the preview sandbox and renders as broken images. When you copy the seed, the inlined images come with it; only replace one if the user supplies their own asset, and prefer a data URI over a remote URL. The 21 motionsites marquee GIFs and the 9 higgs/cloudfront project images stay as remote URLs (large stable CDNs). ## Stack - Default output: a single self-contained HTML file (the `example.html` seed) using vanilla CSS + JS. It already includes everything inline. - If the user explicitly asks for the React project: port the seed faithfully to **React 18 + TypeScript + Vite + Tailwind CSS + Framer Motion + lucide-react**. Same tokens, same markup structure, same animations. Section order: `HeroSection → MarqueeSection → AboutSection → ServicesSection → ProjectsSection → ContactSection (footer)`. Do not change the design while porting. - **Motion loading (locked).** If you emit a single self-contained inline-JSX file instead of the Vite project, Motion's React hooks (`useScroll`, `useTransform`, `useAnimationFrame`, …) exist only in the **React** UMD build: load `<script src="https://unpkg.com/framer-motion@11.11.13/dist/framer-motion.js"></script>` and read them off `window.Motion` — never the vanilla `https://unpkg.com/motion@.../dist/motion.js` DOM bundle, which lacks `useScroll` and renders a blank page. (The Vite project imports from npm and is unaffected.) ## Global styles — locked - Background `#0C0C0C` on `html, body, #root`, and the main wrapper. - Font: **Kanit** (Google Fonts, weights 300–900), `'Kanit', sans-serif`. - Page title: `Jack — 3D Creator`. - Global reset: `box-sizing: border-box; margin: 0; padding: 0`. - Main wrapper: `overflow-x: clip`. - `.hero-heading` gradient text: `background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%)` with `-webkit-background-clip: text` and `-webkit-text-fill-color: transparent`. ## 1. Hero Section (`h-screen`, flex column, `overflow-x: clip`) - **Navbar:** flex `justify-between`, 4 links — "About", "Price", "Projects", "Contact". Color `#D7E2EA`, font-medium, uppercase, `tracking-wider`. Sizes `text-sm md:text-lg lg:text-[1.4rem]`. Padding `px-6 md:px-10 pt-6 md:pt-8`. Hover: opacity 70%, 200ms. The four links map to anchors that must ALL resolve: "About" → `#about`, "Price" → the Services section (`id="price"`), "Projects" → `#projects`, "Contact" → the Contact footer (`id="contact"`). No dead anchors. - **Hero heading:** massive `<h1>` "Hi, i'm jack" (lowercase "i", curly apostrophe `&apos;`). `.hero-heading` gradient, font-black, uppercase, tracking-tight, leading-none, whitespace-nowrap, `w-full`. Sizes `text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw]`. Margin top `mt-6 sm:mt-4 md:-mt-5`. Wrapped in an `overflow-hidden` container. - **Bottom bar:** flex `justify-between items-end`, `pb-7 sm:pb-8 md:pb-10`. - Left: paragraph "a 3d creator driven by crafting striking and unforgettable projects", color `#D7E2EA`, font-light, uppercase, tracking-wide, leading-snug, `font-size: clamp(0.75rem, 1.4vw, 1.5rem)`, `max-w-[160px] sm:max-w-[220px] md:max-w-[260px]`. - Right: **ContactButton** (see Reusable components). - **Hero portrait:** centered, wrapped in a **Magnet** component (mouse-following). Image is the inlined portrait `data:` URI (originally `Rectangle_40443.81459862.png`). Magnet: `padding 150, strength 3, activeTransition "transform 0.3s ease-out", inactiveTransition "transform 0.6s ease-in-out"`. Positioning `absolute left-1/2 -translate-x-1/2 z-10`. Width `w-[280px] sm:w-[360px] md:w-[440px] lg:w-[520px]`. On mobile: `top-1/2 -translate-y-1/2`; on `sm+`: `sm:top-auto sm:translate-y-0 sm:bottom-0`. - **FadeIn delays:** Navbar `delay 0, y -20`. Heading `delay 0.15, y 40`. Left text `delay 0.35, y 20`. Contact button `delay 0.5, y 20`. Portrait `delay 0.6, y 30`. ## 2. Marquee Section Two rows of images that scroll horizontally based on page scroll position. Background `#0C0C0C`. Padding `pt-24 sm:pt-32 md:pt-40 pb-10`. - 21 GIFs from `motionsites.ai/assets/...` (exact URLs in the seed — keep them). - **Row 1:** first 11 images, tripled for seamless scroll. Moves RIGHT: `translateX(offset - 200)`. - **Row 2:** remaining 10 images, tripled. Moves LEFT: `translateX(-(offset - 200))`. - Scroll offset: `(window.scrollY - sectionTop + window.innerHeight) * 0.3`. - Each tile: 420×270px, `rounded-2xl`, `object-cover`, lazy-loaded. Gap `gap-3` between tiles and between rows. - `will-change: transform`; scroll listener is **passive**. ## 3. About Section (`min-h-screen`, centered, `px-5 sm:px-8 md:px-10 py-20`) Four decorative 3D images positioned absolutely in corners (all inlined `data:` URIs in the seed): - **Top-left** — moon icon (`moon_icon.11395d36.png`): `w-[120px] sm:w-[160px] md:w-[210px]`, `top-[4%] left-[1%] sm:left-[2%] md:left-[4%]`. FadeIn `delay 0.1, x -80, dur 0.9`. - **Bottom-left** — 3D object (`p59_1.4659672e.png`): `w-[100px] sm:w-[140px] md:w-[180px]`, `bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]`. FadeIn `delay 0.25, x -80, dur 0.9`. - **Top-right** — lego icon (`lego_icon-1.703bb594.png`): `w-[120px] sm:w-[160px] md:w-[210px]`, `top-[4%] right-[1%] sm:right-[2%] md:right-[4%]`. FadeIn `delay 0.15, x 80, dur 0.9`. - **Bottom-right** — 3D group (`Group_134-1.2e04f3ce.png`): `w-[130px] sm:w-[170px] md:w-[220px]`, `bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]`. FadeIn `delay 0.3, x 80, dur 0.9`. - **Heading:** "About me", `.hero-heading` gradient, font-black, uppercase, leading-none, tracking-tight, centered, `font-size: clamp(3rem, 12vw, 160px)`. FadeIn `delay 0, y 40`. - **Animated paragraph (AnimatedText):** char-by-char scroll-driven opacity (0.2 → 1) based on scroll progress, offset `['start 0.8', 'end 0.2']`. Text: "With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!" Color `#D7E2EA`, font-medium, centered, leading-relaxed, `max-w-[560px]`, `font-size: clamp(1rem, 2vw, 1.35rem)`. - **ContactButton** below the text. Gap heading→text `gap-10 sm:gap-14 md:gap-16`; gap text→button `gap-16 sm:gap-20 md:gap-24`. ## 4. Services Section (white `#FFFFFF`, `rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]`) Padding `px-5 sm:px-8 md:px-10 py-20 sm:py-24 md:py-32`. - **Heading:** "Services" in `#0C0C0C`, font-black, uppercase, centered, `font-size: clamp(3rem, 12vw, 160px)`, `mb-16 sm:mb-20 md:mb-28`. - 5 items, vertical list, `max-w-5xl`, centered. Each: number (font-black, `clamp(3rem, 10vw, 140px)`, `#0C0C0C`) on the left + name & description stacked on the right. Name: font-medium, uppercase, `clamp(1rem, 2.2vw, 2.1rem)`. Description: font-light, leading-relaxed, `max-w-2xl`, `clamp(0.85rem, 1.6vw, 1.25rem)`, opacity 0.6. 1px borders `rgba(12,12,12,0.15)`. Padding `py-8 sm:py-10 md:py-12`. Staggered FadeIn: each item `delay = i * 0.1`. - `01 — 3D Modeling`: "Creation of detailed objects, characters, or environments tailored to specific client needs, ideal for games, products, and visualizations." - `02 — Rendering`: "High-quality, photorealistic renders that showcase designs with custom lighting, textures, and materials to bring concepts to life." - `03 — Motion Design`: "Dynamic animations and motion graphics that add energy and storytelling to brands, products, and digital experiences." - `04 — Branding`: "Crafting cohesive visual identities — from logos to full brand systems — that communicate a clear and memorable presence." - `05 — Web Design`: "Designing clean, modern, and conversion-focused websites with attention to layout, typography, and user experience." ## 5. Projects Section (dark `#0C0C0C`, `rounded-t-[40px] sm:rounded-t-[50px] md:rounded-t-[60px]`, `-mt-10 sm:-mt-12 md:-mt-14`, `z-10`) - **Heading:** "Project" (singular), `.hero-heading` gradient, same styling as other headings. - **3 sticky-stacking project cards** that scale down as you scroll past them (Framer Motion `useScroll` + `useTransform`). Each card is `sticky top-24 md:top-32` inside an `h-[85vh]` container. - Scale: `targetScale = 1 - (totalCards - 1 - index) * 0.03`. Each card offset `top: ${index * 28}px`. - Card: `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]`, `border-2 border-[#D7E2EA]`, background `#0C0C0C`, padding `p-4 sm:p-6 md:p-8`. - **Top row:** number (huge, same style as services), category label, project name, and a **LiveProjectButton** ("Live Project" ghost pill). - **Bottom row:** two-column image grid — left column (40%) has 2 stacked images, right column (60%) has 1 tall image. All `rounded-[40px] sm:rounded-[50px] md:rounded-[60px]`. Left-top height `clamp(130px, 16vw, 230px)`; left-bottom height `clamp(160px, 22vw, 340px)`. - Project data (higgs/cloudfront URLs are in the seed — keep them): - `01 — Nextlevel Studio` (Client) - `02 — Aura Brand Identity` (Personal) - `03 — Solaris Digital` (Client) ## 6. Contact Section (footer) A closing `<footer id="contact">` so the navbar's **Contact** link resolves to a real target. Dark background `#0C0C0C`, centered column, generous padding (e.g. `80px 24px 120px`, `gap` ~32px). Contains a large gradient headline using `.hero-heading` (e.g. "Let's talk") and a **ContactButton** ("Contact Me"). Keep it minimal — its job is to be a real, scrollable anchor target consistent with the bundled `example.html`. ## Reusable Components - **ContactButton:** rounded-full pill. Background `linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)`. Box-shadow `0px 4px 4px rgba(181,1,167,0.25), 4px 4px 12px #7721B1 inset`. White 2px outline with `-3px` offset. Text: white, font-medium, uppercase, tracking-widest. Sizes `px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4`, `text-xs sm:text-sm md:text-base`. Label "Contact Me". - **LiveProjectButton:** ghost/outline pill. Rounded-full, `border-2 border-[#D7E2EA]`, text `#D7E2EA`, font-medium, uppercase, tracking-widest. Sizes `px-8 py-3 sm:px-10 sm:py-3.5`, `text-sm sm:text-base`. Hover `bg-[#D7E2EA]/10`. Label "Live Project". - **FadeIn:** Framer Motion wrapper, `whileInView` with `viewport={{ once: true, margin: "50px", amount: 0 }}`. Props: `delay`, `duration` (default 0.7), `x` (default 0), `y` (default 30). Easing `[0.25, 0.1, 0.25, 1]`. Use `motion.create()` for dynamic element types. (In the vanilla seed this is an `IntersectionObserver` + CSS transition.) - **Magnet:** mouse-following magnetic hover. Track mouse position relative to element center; apply `translate3d` divided by `strength`. Activates when cursor is within `padding` distance of the element edge. Transition-in `0.3s ease-out`, out `0.6s ease-in-out`. `will-change: transform`. - **AnimatedText:** char-by-char scroll reveal. Each character goes opacity 0.2 → 1 based on its position relative to scroll progress. Framer Motion `useScroll` on the paragraph, offset `['start 0.8', 'end 0.2']`. Each char uses an invisible placeholder + an absolutely-positioned animated span. (In the seed, a scroll listener lights up character spans progressively.) ## Key Dependencies (React port)