| 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.gif
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.
