{"slug":"portfolio-website","title":"How to vibe code a portfolio website with Xpersona","shortTitle":"Portfolio website","goal":"build a portfolio website","description":"Plan a simple portfolio structure, copy, sections, responsive layout, and first deploy checklist with Xpersona and OpenCode.","audience":"Creators, freelancers, students, and job seekers who need a clean site without getting stuck in design details.","searchIntents":["how to vibe code a portfolio website","vibe coding portfolio site","build portfolio website with AI","OpenCode portfolio website prompt"],"firstPrompt":"Help me build a portfolio website with Xpersona. Give me the page sections, copy outline, component list, responsive layout notes, and first OpenCode prompt.","buildPlan":["Choose the portfolio goal: jobs, freelance leads, case studies, or personal proof.","Ask Xpersona for a one-page structure with hero, work samples, proof, about, contact, and footer.","Run OpenCode on the first page and keep the initial design restrained, readable, and mobile-safe.","Check links, images, metadata, and responsive spacing before adding more pages."],"pitfalls":["Adding animations before the basic sections are readable.","Using vague project cards without outcomes or screenshots.","Forgetting metadata and contact paths before sharing the site."],"faq":[{"question":"Can Xpersona write the portfolio copy too?","answer":"Yes. Start by giving Xpersona your role, audience, strongest projects, and the action you want visitors to take."},{"question":"How many pages should a first portfolio have?","answer":"One strong page is usually enough for a first pass. Add case-study pages only when the homepage cards are clear."}],"canonicalUrl":"https://www.xpersona.co/vibe-coding/portfolio-website","machineUrl":"https://www.xpersona.co/api/v1/guides/vibe-coding/portfolio-website","provider":{"name":"Xpersona","baseUrl":"https://www.xpersona.co/v1","defaultOpenCodeModel":"xpersona/xpersona-frieren-coder","displayModelName":"Xpersona Frieren 1"},"setupSteps":[{"name":"Describe the end goal","ui":"Guide input","description":"Write the thing you want to create in plain language. Keep it concrete: app, website, chatbot, dashboard, bug fix, or feature."},{"name":"Try the chat plan","ui":"Xpersona chat","description":"Open chat and ask Xpersona for the first build plan, files to edit, risks, and a tiny first milestone."},{"name":"Start usage based billing","ui":"Pricing","description":"When the plan is useful, start usage based billing so one subscription can cover chat, setup keys, OpenCode, and /v1 clients."},{"name":"Create the setup key","ui":"Dashboard key page","description":"Create one private setup key. Treat it like a password and paste it only into tools you control."},{"name":"Choose Xpersona in OpenCode","ui":"OpenCode provider picker","description":"Open the provider screen, choose Xpersona, paste the setup key, and pick xpersona/xpersona-frieren-coder."},{"name":"Run the first repo prompt","ui":"OpenCode prompt","description":"Ask OpenCode for the smallest useful implementation step. Review the diff, run checks, and continue from the result."},{"name":"Check usage and keep iterating","ui":"Usage dashboard","description":"Use the dashboard to inspect requests, tokens, spend, and status after each real run."}],"recommendedLinks":{"guide":"https://www.xpersona.co/vibe-coding/portfolio-website","hub":"https://www.xpersona.co/vibe-coding","chat":"https://www.xpersona.co/chat","pricing":"https://www.xpersona.co/pricing?checkoutTier=payg","opencode":"https://www.xpersona.co/opencode","dashboardOnboarding":"https://www.xpersona.co/dashboard/onboarding","usageDashboard":"https://www.xpersona.co/dashboard/usage","llms":"https://www.xpersona.co/llms.txt","llmsFull":"https://www.xpersona.co/llms-full.txt"}}