Bold Portfolio Hero demo
Bold Portfolio Hero

A bold, high-energy portfolio hero featuring a striking vertical gradient from red-orange to orange, designed for creative professionals and artist showcase sites.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 8.3 KB · 1137 words
# System Prompt: Build "Bold Portfolio Hero" Landing Page

You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page on the first attempt. **Theme:** Bold Portfolio Hero — a 2024–2026 creative portfolio style with a vibrant red-orange gradient, oversized Anton typography, CSS-masked imagery, and glowing blobs. **Sections required:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* Keep ALL styling in a dedicated `style.css` file. The `style="..."` attribute is **forbidden** anywhere in the HTML.
* Target everything via class or ID selectors only.
* Keep HTML semantic and clean; changing the look must require editing only the CSS file, never the markup.

**1.2 CSS Variables & Theme Tokens**
Define all visual tokens in `:root` (and theme classes) using CSS variables:
* **Colors:** `--primary: #fd2601`, `--secondary: #f37e1c`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--white: #fefefe`, `--white-opaque: rgba(255,255,255,0.08)`, `--white-border: rgba(255,255,255,0.9)`.
* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce this in both themes. Never use pure `#ffffff`; use `#fefefe` where near-white is needed.
* **Radius/Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
* **Spacing/Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* **Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast`.

**1.3 Mandatory Dark Mode Support**
* Dark Mode **must** be defined even though this theme is gradient-dominant: provide dark tokens under `@media (prefers-color-scheme: dark)` and/or a `.dark` class. In dark mode, deepen the gradient (e.g., toward darker reds/oranges) and swap text tokens so contrast stays accessible.
* Theme switching must work purely via CSS variables — no HTML restructuring. Persist choice via `localStorage`, fall back to `prefers-color-scheme` on first visit, and include a visible toggle with correct `aria-pressed` / `aria-label` state.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment.
* All layouts must be mobile-responsive out of the box (rows → columns on small viewports). No horizontal scrolling at any breakpoint.

**1.5 Framework Default**
* Use Tailwind CSS (or clean custom CSS via `@layer` / `@apply`) unless otherwise requested. All utilities must map back to CSS variables or reusable classes (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Anton** (display/headlines) and **Inter** (body) from Google Fonts via `<link>` or `@import`; bind to `--font-display` and `--font-base`.
* Use **Google Material Symbols** for all icons. Raw inline SVGs and local icon files are **forbidden** — **exception:** the giant faint background text may be rendered as an SVG `<text>` element (opacity 0.08, blur 4px) since it is decorative typography, not an icon.

## 2. THEME-SPECIFIC VISUAL SPECIFICATION

* **Hero background:** `background: linear-gradient(to bottom, #fd2601, #f37e1c)` — pure CSS, no background video.
* **Headline:** `font-family: 'Anton'`, `font-size: clamp(4rem, 12vw, 180px)`, `text-transform: uppercase`, white text.
* **Central portrait:** Apply a brush-stroke shape via `-webkit-mask-image` / `mask-image` so the image overlaps the headline text, creating depth. The mask shape must be defined in CSS (e.g., via a `mask-image` gradient/radial composite or a CSS-drawn brush shape) — no external image assets required; use a placeholder portrait only if none is supplied.
* **Glowing blobs:** 2–3 absolutely positioned elements, 300–600px, `filter: blur(80px)`, `mix-blend-mode: screen`, `opacity: 0.6`, colored `#F4791B` / `#f37e1c`, placed behind the portrait.
* **Giant background text:** Faint SVG text (opacity 0.08, blur 4px) repeating the brand name behind the hero content.
* **HIRE ME button:** Circular, white border, transparent fill; on hover fills white with `#fd2601` text. Minimum touch target 44×44px.
* **Brand strip:** A row of client/brand wordmarks (styled text, no images) at the bottom of the hero, flex-aligned and horizontally scrollable-safe on mobile.
* **Selection:** `::selection { background: #fefefe; color: #fd2601; }`.
* Apply the same gradient/bold language consistently to all sections below (Features, How It Works, Testimonials, Pricing, FAQ, Final CTA, Footer) — cards on `--bg-secondary` / `--white-opaque` surfaces with `--white-border` subtle borders, adapting tokens for light/dark modes.

## 3. COMPONENT STATE REQUIREMENTS

**3.1 Buttons** — Style all states via CSS classes only:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` min 44×44px.
* **Hover:** brightness/shadow shift, `cursor: pointer`.
* **Focus:** distinct focus ring via `outline`/`box-shadow` using CSS variables.
* **Active:** `transform: scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, renders an animated Google Icon spinner without distorting dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error`.
* `.btn-danger` (e.g., destructive actions) must be visually distinct in both themes.

**3.2 Cards (Features, Pricing, Testimonials)** —
* **Default:** flexible flexbox layout, `--bg-secondary` surface, subtle border + `--shadow-sm`.
* **Hover:** elevation shift or `transform: translateY(-2px)`.
* **Focus-within:** border highlight when a child link/button is focused.
* **Loading:** shimmer skeleton animation defined in CSS, no layout jumps.
* **Empty state:** Google Icon + guidance text fallback structure.

**3.3 Forms & Inputs (FAQ contact / newsletter in Footer or Final CTA)** —
* Account for: empty, focused (outline ring), filled, valid (success border/icon), invalid (error border, red text, error icon), disabled, read-only.
* Structure: flex container wrapping label, input, and a dedicated error feedback element with `aria-live="polite"`.

**3.4 FAQ Accordion** —
* Semantic `<details>`/`<summary>` or ARIA-compliant custom accordion; full keyboard operability; animated open/close via CSS transitions; visible focus states; never rely on color alone to indicate expanded state (use a rotating Google Icon chevron).

**3.5 Modals/Popups (if any, e.g., pricing plan details)** —
* States: opening, open, loading, success/error, closing — all CSS-animated.
* Centered flex container, backdrop overlay, Google Icon close button, focus trapping, close via `Esc` and overlay click. Layer with `--z-modal`.

## 4. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing, no horizontal overflow at any viewport.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; respect `prefers-reduced-motion` (disable blobs animation, transforms, and shimmer when reduced motion is requested).
* **Accessibility:** sufficient contrast in both light and dark modes; semantic HTML5 elements; correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, toasts, loading).
* **Mandatory visual feedback:** every click, hover, or submission triggers a visible state change.
* **Copy:** Write ALL user-facing copy in English. Use realistic portfolio/agency copy (not lorem ipsum) for headlines, feature descriptions, testimonials, pricing tiers, and FAQ answers.

## 5. DELIVERABLE & OUTPUT FORMAT

* **Files:** Separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference.
* **Naming:** One consistent convention (BEM or a fixed utility set) across the entire deliverable — never mix conventions.
* **Placeholders:** Only where content was genuinely unspecified (e.g., portrait image, brand logos) — use clearly labeled placeholders there.
* Deliver the complete, working landing page in a single response: full `index.html`, `style.css`, and `script.js`.