Vibe Code a Portfolio Website

Plan and produce a complete WordPress portfolio site architecture for a
solo designer / developer or small studio, focused on case studies and
client inquiries. Output should be production-ready.

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Name: [DESIGNER / STUDIO NAME]
- Discipline: [Branding / Web design / Product design / Full-stack dev]
- City: [CITY]
- Services offered: [3-5 services with starting prices]
- Engagement models: project-based, retainer, advisory
- Goals: 1-2 new high-quality clients per quarter
- Existing assets: logo, ~5-10 case-study projects

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: pure white (#ffffff) + near-black ink (#0a0a0a) + ONE
 accent (let user pick: ochre / electric green / muted slate). Override
 if user provides; AA-contrast for body.
- Type: high-contrast display serif for headings (PP Editorial New
 alternative, Cormorant Garamond) + Inter Tight for body + monospace
 for code (JetBrains Mono).

═══════════════════════════════════════════════════════════════
WORDPRESS STACK
═══════════════════════════════════════════════════════════════
- Theme: Bricks Builder + a lightweight starter theme OR a custom block
 theme. Bricks is recommended for portfolio sites because of the design
 freedom and performance. Justify briefly.
- Plugins (WP-CLI):
 wp plugin install --activate 
 bricks 
 advanced-custom-fields 
 wpforms-lite 
 wp-rocket 
 shortpixel-image-optimiser 
 wordpress-seo 
 better-search-replace
- Forms: WPForms or Fluent Forms for inquiry routing

═══════════════════════════════════════════════════════════════
DATA MODEL
═══════════════════════════════════════════════════════════════
- CPT `project` (case studies)
- ACF fields on `project`:
 - client (text)
 - year (number)
 - role (text, e.g., "Brand strategy & visual identity")
 - services_rendered (taxonomy: service_type)
 - hero_image (image)
 - cover_video (file/url optional)
 - problem_statement (wysiwyg)
 - approach (wysiwyg with image gallery)
 - outcome (wysiwyg)
 - metrics (repeater: label + value, e.g., "3x conversion" / "12 weeks
 to launch")
 - testimonial (group: quote + author + role)
 - live_url (url)
 - gallery (image gallery)
 - next_project (post object, for navigation)
- Taxonomies:
 - `service_type` (Brand identity / Web design / Product design / Dev)
 - `industry` (SaaS / Hospitality / Healthcare / etc.)

═══════════════════════════════════════════════════════════════
SITE MAP
═══════════════════════════════════════════════════════════════
1. Home
2. Work (case studies index)
3. Work > Project detail
4. Services
5. About
6. Process
7. Notes / Blog (optional, for SEO)
8. Contact / Inquire
9. Privacy

═══════════════════════════════════════════════════════════════
HOMEPAGE, BLOCK MARKUP
═══════════════════════════════════════════════════════════════
1. Sticky nav (minimal): wordmark left, anchor nav center, "Inquire"
 ink-outline pill right
2. Bold hero: eyebrow with line marker, large two-line headline ("I
 design things you can *trust*"), 1-line subhead, single CTA ("View
 work"), no decoration
3. 3-5 selected projects in big editorial cards (alternate left/right
 image-text on desktop, stack mobile)
 - Each: full-bleed cover image, project title (display serif), brief
 1-line description, "View case study →" link
4. About strip: small portrait + 3-paragraph bio
5. Services preview: 3-4 cards (no icons, just typography), each with
 starting price
6. Process: 4 steps in horizontal row (Discovery → Design → Build →
 Deliver)
7. Clients worked with (typeset names in a quiet row, no logos)
8. Selected testimonial (long pull-quote, large italic serif)
9. Contact CTA band: large headline ("Have a project in mind?") +
 "Inquire" CTA

═══════════════════════════════════════════════════════════════
PROJECT DETAIL TEMPLATE
═══════════════════════════════════════════════════════════════
- Cover image full-bleed (max 1600px)
- Project meta sidebar (sticky on desktop): client, year, role, services
 (chip list), live link
- Problem / Approach / Outcome sections, each with hero + body, optional
 inline imagery
- Process imagery / sketches grid
- Metrics callouts (3-4 large numbers with labels)
- Testimonial pull-quote (large italic serif, attribution small)
- Next / Previous project navigation at bottom

═══════════════════════════════════════════════════════════════
SERVICES PAGE
═══════════════════════════════════════════════════════════════
- 3-5 service offerings (e.g., Brand Identity / Web Design / Webflow
 Dev), each with:
 - Service name (display serif)
 - 2-paragraph description
 - Deliverables list (in prose with check icons)
 - Starting price ("From $X,XXX")
 - Engagement model (project / retainer / hourly)
 - 1-2 case studies linked
- Engagement models section: project vs retainer vs advisory
- FAQ specific to working with you (8-10 items)
- Contact CTA at bottom

═══════════════════════════════════════════════════════════════
INQUIRY FORM
═══════════════════════════════════════════════════════════════
- Multi-step (3 steps):
 Step 1: name, email, company (optional)
 Step 2: project type (select), budget range (select), timeline (select)
 Step 3: where you found me, brief project description
- Anti-spam: Cloudflare Turnstile + honeypot field
- Routing: email to you + optional Slack webhook
- Success state: "I'll reply within 2 business days" + suggested reading
 (link to a recent case study)

═══════════════════════════════════════════════════════════════
SEO & SCHEMA
═══════════════════════════════════════════════════════════════
- Schema: Person, CreativeWork (project), Organization (if studio)
- Image SEO: descriptive alt text, file naming
- Internal linking: project → services → related projects
- Open Graph image per project (project hero)

ADDITIONAL SEO REQUIREMENTS (implement all of these):

On-Page SEO for Every Page:
- Yoast/RankMath meta title template: "[Page Title] | [Site Name]" (under 60 chars)
- Meta description per page: 150-160 chars, include primary keyword + CTA
- Exactly ONE H1 per page — use the real, human headline; keep keywords in the title and meta, not the visible H1
- Logical H2 > H3 heading hierarchy, never skip a level
- Headings should include secondary keywords naturally,
  keep the section's real, human label (keywords in title and meta, not stuffed headings)
- Every image must have a descriptive alt attribute with keywords
- Internal links between related content using descriptive anchor text

Structured Data (JSON-LD via Yoast/RankMath + manual where needed):
- Primary schema types: ProfessionalService, Person, CreativeWork
- BreadcrumbList on all pages
- FAQPage schema on any page with an FAQ/accordion section
- Article schema on all blog posts (auto via Yoast)
- Validate schema with Google Rich Results Test before launch

Open Graph & Social Sharing:
- og:title, og:description, og:image, og:url on every page
- twitter:card=summary_large_image on every page
- Default OG image set in Yoast; per-page overrides for key landing pages
- OG images should be 1200x630px, branded, with clear text

Content SEO:
- Write real, useful body copy for every page (not just headings and CTAs).
  Every major section needs at least 2-3 sentences of descriptive text
  that search engines can index.
- Blog content strategy: 10 seed articles targeting long-tail keywords
  related to "designer / developer portfolio". List the titles and target keywords.
- Use the primary keyword once or twice where it reads naturally; keep the rest in titles and meta, never stuffed.
- Every CTA should use descriptive anchor text with the service keyword.

Technical SEO:
- XML sitemap split by post type (auto via Yoast)
- Canonical tags on all pages (auto via Yoast)
- robots.txt: allow all, point to sitemap
- 301 redirects plan for any renamed/moved content
- Breadcrumbs enabled via Yoast + schema
- Clean permalinks: pick one post-permalink base that fits the site (do not force /blog/ on a post-centric site); /%postname%/ is fine for pages
- Lazy load all images below the fold, eager load hero/LCP image
- Core Web Vitals targets: LCP < 2.5s, CLS < 0.1, INP < 200ms

SECURITY, ACCESSIBILITY & HONESTY (required):
- Escape all output (esc_html/esc_url/esc_attr), sanitize all input (sanitize_text_field + wp_unslash), and use a nonce + current_user_can() on every form handler and custom action. Emit JSON-LD with wp_json_encode().
- Target WCAG 2.2 AA: visible :focus-visible states, <label for> on every field, full keyboard operability, and @media (prefers-reduced-motion: reduce) around all motion.
- Never fabricate business data, testimonials, ratings, credentials, or stats; leave labeled {{TODO}} placeholders for anything the user has not supplied.
- PLUGIN INSTALL: some listed plugins are premium or not in the wordpress.org directory, so a single `wp plugin install` will error out. Split the list into free (wp.org) vs premium (upload/license), verify each slug, and note that gallery/group ACF fields and ACF Blocks need ACF Pro.
- Commit to ONE paradigm: a block theme (theme.json + block templates) OR a classic theme/builder — never mix them. If a plugin already owns a post type or feed (inventory, sermons, courses, job listings, podcast feeds), extend it — do not re-declare that CPT or emit a second, conflicting schema block.

═══════════════════════════════════════════════════════════════
PERFORMANCE
═══════════════════════════════════════════════════════════════
- LCP < 1.5s, portfolio sites need to feel snappy
- WP Rocket + Critical CSS + lazy loading
- ShortPixel WebP at 3 sizes per image
- Self-host Google Fonts
- Bricks output is light by default, keep it that way (audit unused
 modules)

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No "I'm passionate about design" filler, show, don't tell
- No emojis anywhere
- No fake stock photos of "designers at desks"
- No script/handwritten fonts
- No animated cursor effects or floating particles
- No real client logos without permission, use typeset names if
 unsure
- No "as featured in Forbes!" without proof
- No bouncing scroll-cue arrows
- No "Hire me" hero CTA without inquiry context, be specific about
 what you do

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
1. Site map
2. WP-CLI install commands
3. Project CPT register PHP + ACF JSON
4. theme.json (if block theme) OR Bricks templates
5. Block markup or Bricks template for homepage
6. Project detail template
7. Services page block markup
8. Inquiry form schema + routing
9. Performance audit checklist
10. Launch checklist (15 items)