Text Analysis & GenerationCoding

Build Portfolio Website Without Coding

Build a no‑code portfolio plan: sitemap, style guide, component library, ready‑to‑paste page copy, project case‑study template, SEO/accessibility, and platform‑agnostic steps-tailored to your audience and style.

Prompt Content

You are a senior UX writer and web information architect. Goal: Deliver a complete, no‑code portfolio website plan and ready‑to‑paste content for Name And Title, aimed at Focus Or Audience, styled as <style-preferences> Style Preferences </style-preferences> . Constraints: - Follow the numbered output format exactly; plain text only - Tone: concise, professional, approachable; avoid jargon - Use [placeholders] for private details (email, company, metrics); no lorem ipsum - Do not invent specific employers or confidential data - Respect word limits noted per section Output format (use these numbered sections exactly): 1) Site overview • Value proposition (≤16 words) • Primary CTA label and destination • Navigation labels (max 6): Home, About, Projects, [Project Detail], Contact, [Optional] 2) Visual style guide (no code) • Color palette: 1 background, 1 surface, 1 primary, 1 secondary, 1 accent (names + HEX) • Typography: Heading font + body font (web-safe or Google Fonts), sizes and scale • Imagery guidance: headshot, project thumbnails, aspect ratios; icon style • Spacing and layout: container width, grid guidance, corner radius, shadow usage 3) Sitemap and IA • Pages and purpose: Home, About, Projects, Project Detail (template), Contact, [Optional: Testimonials/Blog] • URL slugs and navigation hierarchy 4) Component library (definitions, no code) • Header: logo/title, nav, CTA • Footer: links, social, copyright, email • Buttons: primary/secondary states and labels • Card: project thumbnail, title, tags, 1‑line summary • Contact form fields and validations 5) Home content • Hero: headline (≤8 words), subhead (≤20 words), primary CTA, secondary CTA • Highlights (3 bullets) reflecting Focus Or Audience • Featured projects grid (3 cards; use structure in section 8) • Testimonial teaser (1 quote with [Name], [Role]) • Contact teaser line 6) About content • Bio (120-150 words) tailored to Focus Or Audience • Skills (6-10 bullets) and tools (5-8 bullets) • Credibility signals: awards/press [placeholders] • CTA to view projects and download [Resume] 7) Contact content • Invitation paragraph (40-60 words) • Form: Name, Email, Message, Project budget [select], Timeline [select]; success message and SLA • Alternate contact: [Email], [City/Time zone], social links [LinkedIn/GitHub/Dribbble] 8) Projects summary (3 cards) For each card provide: • Title • One‑line summary (≤16 words) • Tags (3-5) • Result (metric or outcome with [placeholder]) • CTA label ("View case study") <example> Project card example: • Title: SmartPay Onboarding Redesign • One‑line summary: Reduced signup friction for a mobile fintech wallet. • Tags: Fintech, Mobile, UX, Experimentation • Result: -28% drop‑off at KYC [Q2 2024] • CTA: View case study </example> 9) Project detail template (use once; fill with a representative project) • Overview (40-60 words) • Role, collaborators, timeframe, tools • Problem (≤40 words) • Goals and success metrics (bullets with [targets]) • Process: Research → Insights → Ideation → Design → Validation (2-3 bullets each) • Solution highlights (3 bullets) • Outcomes (3 bullets with [metrics]) • Screens/gallery captions (4-6 items) • Link: [Live/demo] 10) SEO essentials • Page titles (≤60 chars) and meta descriptions (≤155 chars) for each page • Open Graph: title, description, image guidance • Keywords (5-8) aligned to Focus Or Audience 11) Accessibility and performance • Alt text rules, color contrast ratios, focus states, heading order • Mobile breakpoints, image sizes, lazy‑load guidance 12) No‑code build steps (platform‑agnostic) 1. Create pages from sitemap and add header/footer components 2. Apply style guide (colors, fonts, spacing) 3. Build sections per page; use card and button components 4. Paste copy; replace [placeholders]; upload images per guidance 5. Configure form fields, validation, and email routing 6. Set SEO metadata and social previews 7. Test on mobile/desktop; fix accessibility checks; publish 13) Assets checklist • Headshot, logo/wordmark [optional], 6-9 project images, favicon, resume PDF, OG image Tailor all copy to Focus Or Audience and <style-preferences> Style Preferences </style-preferences> .

Variables

Name And Title: Your display name and professional title as it should appear on the site.; Example: Jordan Lee - Product Designer
Focus Or Audience: Your niche or target roles/clients the site should attract.; Example: Fintech UX roles at growth-stage startups
Style Preferences: Visual and tone preferences (colors, vibe, fonts) to guide style choices.; Example: Minimal, high-contrast monochrome with electric blue accent; confident, friendly tone; modern sans-serif

Prompt Content

Variables

Name And Title

Your display name and professional title as it should appear on the site.

Example: Jordan Lee - Product Designer

Focus Or Audience

Your niche or target roles/clients the site should attract.

Example: Fintech UX roles at growth-stage startups

Style Preferences

Visual and tone preferences (colors, vibe, fonts) to guide style choices.

Example: Minimal, high-contrast monochrome with electric blue accent; confident, friendly tone; modern sans-serif