--- name: ai-designer-portfolio description: "Use this plugin when the user wants a premium single-page creative-studio / designer portfolio landing page on a white background: serif-accented hero, an infinite GIF marquee, parallax testimonial, two-card pricing, an auto-scrolling testimonial carousel, vertical project showcase, a mouse-trail partner CTA, and a fixed floating bottom nav. Invoke for 'designer portfolio', 'creative studio landing page', 'agency one-pager', or when the user references the Viktor Oddy / AI Designer Portfolio template." version: 0.1.0 od: mode: prototype surface: web scenario: design preview: type: html entry: example.html design_system: requires: false --- # 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.com/./book`. - **Card 2 (light)**, delay `.2s`: `bg white`, card shadow. Title "Custom Project" (`22px`, medium). Desc "Fixed scope, fixed timeline. / Same team, same standards." Price "$5,000" (`text-2xl`, `#0D212C`) + "Minimum". One button "Start a chat" (tertiary). 5. **Testimonial carousel** — full width, `py-20`. Header row (`md:max-w-4xl md:ml-auto`): title "What **builders** say" ("builders" serif, large heading size) left; right = 5 filled black `Star` icons (`w-5 h-5 fill-black`) + "Clutch 5/5". Auto-scroll **3s interval, pauses on hover**, prev/next circular buttons (`w-12 h-12 rounded-full border border-[#0D212C]/20`, lucide `ChevronLeft/ChevronRight`). Cards **427.5px wide desktop** (full width minus 48px mobile), `gap-6`, exit anim (opacity fade + scale down). Each card: `bg-white rounded-[32px] md:rounded-[40px]`, card shadow, `px-6 md:pl-10 md:pr-24 py-8`. Content: custom SVG quote mark, quote text (`text-base #0D212C leading-relaxed`), author row with circular avatar (`w-12 h-12`), name (`font-semibold text-sm`), role with `→` arrow prefix. **Testimonials tripled for infinite scroll**; transform `cubic-bezier(0.4,0,0.2,1)` `0.8s`. - Marcus Anderson — CEO, Data.storage - alexwu — Founder, Nexgate - James Mitchell — VP Product, LaunchPad - Rachel Foster — Co-founder, Nexus Labs - David Zhang — Head of Design, Paradigm Labs 6. **Projects** — `max-w-[1200px] px-6 py-12`, vertical stack of 3, `gap-16 md:gap-20`. Each: text block offset left (`ml-20 md:ml-28`) with project name in **serif** (`text-2xl md:text-3xl`, weight 600, `#051A24`) + description (`text-sm md:text-base`, `#051A24/70`); full-width image below (`rounded-2xl shadow-lg object-cover`). Each item fades in independently via IntersectionObserver. - "evr" — "From idea to millions raised for a web3 AI product" — `…/hero-evr-ventures-preview-DZxeVFEX.gif` - "Automation Machines" — "Streamlining industrial automation processes" — `…/hero-automation-machines-preview-DlTveRIN.gif` - "xPortfolio" — "Modern portfolio management platform" — `…/hero-xportfolio-preview-D4A8maiC.gif` 7. **Partner** — full width, `py-12 px-6`. Large white container `max-w-7xl py-48 rounded-[40px]` subtle shadow. On mouse hover, GIF thumbnails (from the marquee array) **spawn at cursor** with random rotation (−10..+10°), fade out over **1000ms** with scale-down, spawn no faster than **every 80ms**, cleaned up via timeout/rAF. Centered heading "Partner with us" in **serif**, `48 / 64 / 80px`, `#0D212C`, `mb-12`. CTA = dark pill with circular avatar + "Start chat with Viktor", primary shadow. 8. **Footer** — `py-12 px-6 max-w-[1200px]`, flex row (`md:flex-row`). Left: "Start a chat" primary button. Right: lucide `ArrowUpRight`, then two columns: (1) Services, Work, About (anchors); (2) x.com, LinkedIn (`target="_blank"`). Links `text-base #051A24 hover:opacity-70`. 9. **Copyright bar** — `max-w-[1200px] px-6 py-4`, flex `justify-between`: "Vortex Studio Limited" left, "Austin, USA" right. `text-sm #051A24`. 10. **Fixed bottom nav** — `z-50`, fixed `bottom-6`, centered `left-1/2 -translate-x-1/2`. White bg, `rounded-full`, `px-8 py-2`, primary layered shadow. Contains "V" in serif (`text-2xl`, weight 600, `#051A24`) + "Start a chat" primary button. ## Animations — locked ```css @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } ``` - All sections use a `useInViewAnimation` hook (IntersectionObserver threshold 0.1, triggers once). Elements get `animate-fade-in-up` when in view, otherwise `opacity-0`. In the vanilla seed this is one IntersectionObserver that toggles an `.in-view` class on `.reveal` elements. - Each element within a section carries a **staggered `animationDelay`** (0.1s, 0.2s, 0.3s, …). - Parallax: passive scroll listener + `requestAnimationFrame`, max ±200px offset. - Partner mouse-trail: `mousemove` handler throttled to 80ms, random rotation, 1s fade+scale-down, removed on timeout. ## Avatars (critical) `example.html` ships every avatar as an **inlined `data:image/svg+xml;base64,…` URI** generated from initials (colored circle + letters) — keep that approach. The prompt mentions Pexels avatars; do **not** fetch `i.pravatar.cc`, `api.dicebear.com`, Pexels, or any other remote avatar host — external avatar hosts rate-limit / 403 inside the preview sandbox and render as broken images. Generate small inline SVG data URIs instead. The large GIF previews (motionsites CDN) and the parallax still (images.higgs.ai) **stay as remote URLs** — they are large stable CDN media. ## Responsive - `<768px`: single-column hero CTA, marquee duration 10s, carousel cards `calc(100vw - 48px)`. - `≥768px`: hero CTA row, marquee images 500px tall, pricing two columns, carousel header row, larger headings, footer row. - `≥1024px`: largest heading sizes (44px headings, 80px partner heading). ## Start from the seed Copy `example.html` first. Only swap copy/data (studio name, testimonials, projects, prices). Do not rewrite the CSS variables, button shadows, fonts, section order, or animation logic — they are the fidelity anchor.