| 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:
@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)
-
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).
-
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.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-portfolio-cosmic-preview-BpvWJ3Nc-89ab29.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-velorah-preview-CJNTtbpd-626d83.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-asme-preview-B_nGDnTP-7fb29d.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-transform-data-preview-Cx5OU29N-910cf9.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-aethera-preview-DknSlcTa-097fee.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-orbit-web3-preview-BXt4OttD-f84442.gifhttps://plugin-assets.open-design.ai/plugins/ai-designer-portfolio/hero-nexora-preview-cx5HmUgo-d2d4a4.gif
-
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.
-
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).
-
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
-
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
-
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.
-
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.
-
Copyright bar — max-w-[1200px] px-6 py-4, flex justify-between: "Vortex Studio Limited" left, "Austin, USA" right. text-sm #051A24.
-
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
@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.
