ai-designer-portfolio

What this skill does

# AI Designer Portfolio — "Viktor Oddy" Creative Studio Landing

Produce a premium **single-page creative-studio landing page** on a **white background throughout**. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data only; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, fonts, section order, animations, button shadows, and responsive behavior described below.

This is the authoritative build brief. Follow it exactly — the named colors, button shadows, fonts, section order, asset URLs, and animations are locked.

## Stack

- Default output: the single self-contained `example.html` seed. It already includes everything inline.
- If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully into the file structure below. Same tokens, same markup structure, `lucide-react` for icons. Do not change the design while porting.

```
src/App.tsx                          — hero, marquee, section composition
src/components/Button.tsx            — primary/secondary/tertiary variants
src/components/TestimonialSection.tsx — quote + parallax image
src/components/PricingSection.tsx    — two pricing cards
src/components/TestimonialCarousel.tsx — auto-scrolling cards
src/components/ProjectsSection.tsx   — project showcase
src/components/PartnerSection.tsx    — mouse-trail CTA
src/components/Footer.tsx
src/components/CopyrightBar.tsx
src/components/BottomNav.tsx
src/hooks/useInViewAnimation.ts      — IntersectionObserver scroll-trigger
src/index.css                        — font faces, marquee + fade-in-up keyframes
```

## Fonts — locked

Two custom fonts via `@font-face`:

```css
@font-face { font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PP Neue Montreal';
  src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'PP Mondwest';
  src: url('/PPMondwest-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
```

- **Body default**: PP Neue Montreal with system fallbacks.
- **Serif accent**: PP Mondwest — used for the logo, the highlighted words inside headings ("next wave", "bold way.", "Apple", "builders"), project names, the partner heading, and the "V" / "Viktor Oddy" wordmarks.
- The seed also loads free near-equivalent web fonts (Space Grotesk / IBM Plex Mono / DM Serif Display) so the page renders cleanly when the commercial fonts are unreachable. Keep that fallback link — the real `@font-face` declarations win when reachable. Tagline uses a **monospace** font.

## Color palette — locked

```
--dark:           #051A24   (primary dark, hero logo/heading, dark pricing card, buttons)
--dark-2:         #0D212C   (secondary dark, large headings)
--light-on-dark:  #F6FCFF   (text on dark)
--light-on-dark-2:#E0EBF0   (muted text on dark)
--body:           #051A24   (body text)
--muted:          #273C46   (muted text, quote author)
background:       #ffffff   throughout
```

Project descriptions use `rgba(5,26,36,0.7)`. Do not introduce other accent hues — there is no colored accent; the design is a near-monochrome dark-on-white.

## Button shadows — critical for the design feel

```
Primary:   0 1px 2px 0 rgba(5,26,36,0.1), 0 4px 4px 0 rgba(5,26,36,0.09), 0 9px 6px 0 rgba(5,26,36,0.05),
           0 17px 7px 0 rgba(5,26,36,0.01), 0 26px 7px 0 rgba(5,26,36,0), inset 0 2px 8px 0 rgba(255,255,255,0.5)
Secondary: 0 0 0 0.5px rgba(0,0,0,0.05), 0 4px 30px rgba(0,0,0,0.08)
Card:      0 4px 16px rgba(0,0,0,0.08)
```

- **Primary** button: `bg #051A24`, white text, `rounded-full`, `padding 12px 28px`, the multi-layer primary shadow incl. the inset highlight.
- **Secondary**: white bg, `#051A24` text, no border, secondary shadow.
- **Tertiary**: white bg, combined secondary + card shadow (used for Custom Project "Start a chat").

## Section order (exact)

1. **Hero** — centered narrow column `max-width:440px`, `padding:48px 24px 0` (`pt-12 md:pt-16`).
   - Logo "Viktor Oddy" in **PP Mondwest serif**, `32 / 40 / 44px`, weight 600, `#051A24`, tracking-tight, `mb-4`, delay `.1s`.
   - Tagline "The creative studio of Viktor Oddy" in **monospace**, `text-xs md:text-sm`, `#051A24`, `mb-2`, delay `.2s`.
   - Heading two lines: "Build the next wave," / "the bold way." with **"wave,"** and **"bold way."** in serif. `32 / 40 / 44px`, `leading-[1.1]`, `#0D212C`, tracking-tight, `whitespace-nowrap`, delay `.3s`.
   - Description: three paragraphs in `flex-col gap-6`, `text-sm md:text-base`, `#051A24`, `leading-relaxed`, `mt-5 md:mt-6`, delay `.4s`. (1) "I spent seven years at Apple…", (2) "The studio is deliberately small…", (3) "Projects start at $5,000 per month."
   - Two buttons in `flex-col sm:flex-row`, gap 3/4, `mt-5 md:mt-6`, delay `.5s`: "Start a chat" (primary) + "View projects" (secondary).

2. **Infinite marquee** — full width, `mt-16 md:mt-20 mb-16`. 8 GIFs **duplicated (16 total)** in a flex row, `animate-marquee` `translateX(0) → translateX(-50%)`, **30s linear infinite desktop / 10s mobile**. Images `h-[280px] md:h-[500px]`, `object-cover`, `mx-3`, `rounded-2xl`, `shadow-lg`. URLs (keep as remote — stable motionsites CDN):
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-space-voyage-preview-eECLH3Yc-475920.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-portfolio-cosmic-preview-BpvWJ3Nc-89ab29.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-velorah-preview-CJNTtbpd-626d83.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-asme-preview-B_nGDnTP-7fb29d.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-transform-data-preview-Cx5OU29N-910cf9.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-aethera-preview-DknSlcTa-097fee.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-orbit-web3-preview-BXt4OttD-f84442.gif`
   - `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-nexora-preview-cx5HmUgo-d2d4a4.gif`

3. **Testimonial quote** — `py-12 px-6`, `max-w-2xl`, centered.
   - lucide `Quote` icon `w-6 h-6 text-slate-900`, delay `.1s`.
   - Large quote "I left **Apple** to build the studio I always wanted to work with" ("Apple" serif), `32 / 40 / 44px`, `leading-[1.1]`, `#0D212C`, tracking-tight, delay `.2s`.
   - Author "Viktor Oddy" italic, `text-sm`, `#273C46`, delay `.3s`.
   - Three text logos: "Apple" (80px / 24px), "IDEO" (83px / 24px), "Polygon" (110px / 24px), `font-medium text-slate-900`, delay `.4s`.
   - **Parallax image** below: `w-full max-w-xs rounded-2xl shadow-lg`, alt "Chris Halaska", delay `.5s`. Keep this URL (stable higgs CDN):
     `https://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143-069da9.webp&w=1280&q=85`
     Parallax = IntersectionObserver + passive scroll listener with `requestAnimationFrame`, max offset 200px.

4. **Pricing** — full width, `py-12 px-6`. Two cards `grid-cols-1 md:grid-cols-2 gap-8`, right-aligned on desktop (`md:justify-end md:max-w-4xl`, container `margin-left:auto`). Each `rounded-[40px]`, `pl-10 pr-10 md:pr-24 pt-3 pb-10`.
   - **Card 1 (dark)**, delay `.1s`: `bg #051A24`, inset shadow, text `#F6FCFF / #E0EBF0`. Title "Monthly Partnership" (`22px`, medium). Desc "A dedicated creative design team. / You work directly with Viktor." Price "$5,000" (`text-2xl`, `#F6FCFF`) + "Monthly". Buttons "Start a chat" (primary) + "How it works" (secondary), both → `https://halaskastudio