Back to templates
Portfolio template

Personal Developer Portfolio

A polished single-page developer portfolio with blog support, animated sections, and a single-config-file edit point.

Next.js 14TypeScriptTailwind CSSshadcn/uiMagic UIFramer MotionContent Collections (MDX blog)
View on GitHubUpstream source

Clone it

terminalClone the template
git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/portfolio ./personal-portfolio
cd personal-portfolio
pnpm install
pnpm dev

What's in the box

  • Single config file (`src/data/resume.tsx`) — your entire portfolio lives here
  • Animated hero with avatar + intro
  • Skills, work, education, projects, hackathons sections (each toggleable)
  • MDX blog with syntax highlighting and SEO metadata
  • Light + dark mode
  • Mobile-first responsive
  • One-click Vercel deploy

When to use

Use it

You're a developer, designer, or technical founder who wants a beautiful single-page portfolio that ships in one config-file edit. Includes a blog so you can publish without setting up a CMS.

Skip it

You need a multi-page agency site with services pages, case studies, and a contact form pipeline — pick a different template or build with VibeKit's Website UI component instead.

The 10 customization sections

When you ask your AI agent to customize this template, it will walk through these sections in order, asking you the questions for each. The agent only edits the files needed to apply your answers — no restructuring.

  1. 01 · Hero4 q

    Avatar, name, one-line intro, location, social handles.

    • →What's your full name and a one-line intro? (e.g. "Software engineer building developer tools")
    • →Where are you based? (city, country)
    • →What's your avatar image URL? (square photo or a generated avatar)
    • →Which socials do you want in the hero? (GitHub, X/Twitter, LinkedIn, YouTube, email)
  2. 02 · About / Summary1 q

    Short bio paragraph that appears below the hero.

    • →Write your bio in 3–5 sentences. What do you build? Who do you work with? What's your superpower?
  3. 03 · Skills1 q

    Tag-style list of your skills/technologies.

    • →List your top 8–15 skills (e.g. TypeScript, React, Next.js, PostgreSQL, AWS).
  4. 04 · Work Experience2 q

    Timeline of jobs with company, title, dates, logo, and one-paragraph description.

    • →List your work experience in reverse-chronological order. For each: company name, your title, start/end dates, location, and 2–3 sentences about what you did.
    • →Do you have logos for each company? (URLs or local paths)
  5. 05 · Education2 q

    Schools / degrees / bootcamps.

    • →List your education entries: institution, degree, dates, optional logo.
    • →Want to include this section, or skip it?
  6. 06 · Projects2 q

    Featured projects — title, description, tech stack, image/video, live + source links.

    • →Pick your top 3–6 projects. For each: title, 1–2 sentence description, tech stack, image or video URL, live demo URL, source URL.
    • →Are any of these private? If so, leave the source URL out and only show the live demo.
  7. 07 · Hackathons2 q

    Hackathons / competitions you've won or participated in.

    • →List hackathons (optional). For each: name, dates, location, what you built, place/award.
    • →Skip this section entirely if not applicable.
  8. 08 · Blog2 q

    MDX-powered blog. Posts live in `content/blog/`.

    • →Do you want the blog enabled? If yes, do you have 1–3 starter posts to seed it, or should it start empty?
    • →Should the blog be in the nav, or only accessible via direct URL?
  9. 09 · Contact / footer2 q

    Footer with social links and optional contact email/CTA.

    • →Should the footer have a CTA? (e.g. "Get in touch" → mailto, or "Hire me" → external form)
    • →Confirm your social URLs match the hero socials.
  10. 10 · Branding & Theme3 q

    Colors, fonts, favicon.

    • →What's your brand color? (hex)
    • →Default theme: light, dark, or follow system?
    • →Do you want a custom favicon? (URL or describe)

Customization prompt — paste into your AI agent

After you clone, open the project in Claude Code, Cursor, Cline, or any agent that reads files. Paste this prompt to start the section-by-section interview:

paste into your AI agentCustomization interview prompt
I want to customize the "Personal Developer Portfolio" template using the VibeKit customization guide.

Walk me through the 10 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.

After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.

CUSTOMIZATION GUIDE:
When the user picks this template, walk them through the 10 sections IN ORDER. Ask the questions for each section, gather answers, then write the entire `src/data/resume.tsx` file based on their answers. Set the brand color in the Tailwind config + `globals.css`. Replace placeholder copy with their answers. Don't change file structure — only edit the config file and content/blog/.

SECTIONS:
1. Hero — Avatar, name, one-line intro, location, social handles.
   Questions: 
     - What's your full name and a one-line intro? (e.g. "Software engineer building developer tools")
     - Where are you based? (city, country)
     - What's your avatar image URL? (square photo or a generated avatar)
     - Which socials do you want in the hero? (GitHub, X/Twitter, LinkedIn, YouTube, email)

2. About / Summary — Short bio paragraph that appears below the hero.
   Questions: 
     - Write your bio in 3–5 sentences. What do you build? Who do you work with? What's your superpower?

3. Skills — Tag-style list of your skills/technologies.
   Questions: 
     - List your top 8–15 skills (e.g. TypeScript, React, Next.js, PostgreSQL, AWS).

4. Work Experience — Timeline of jobs with company, title, dates, logo, and one-paragraph description.
   Questions: 
     - List your work experience in reverse-chronological order. For each: company name, your title, start/end dates, location, and 2–3 sentences about what you did.
     - Do you have logos for each company? (URLs or local paths)

5. Education — Schools / degrees / bootcamps.
   Questions: 
     - List your education entries: institution, degree, dates, optional logo.
     - Want to include this section, or skip it?

6. Projects — Featured projects — title, description, tech stack, image/video, live + source links.
   Questions: 
     - Pick your top 3–6 projects. For each: title, 1–2 sentence description, tech stack, image or video URL, live demo URL, source URL.
     - Are any of these private? If so, leave the source URL out and only show the live demo.

7. Hackathons — Hackathons / competitions you've won or participated in.
   Questions: 
     - List hackathons (optional). For each: name, dates, location, what you built, place/award.
     - Skip this section entirely if not applicable.

8. Blog — MDX-powered blog. Posts live in `content/blog/`.
   Questions: 
     - Do you want the blog enabled? If yes, do you have 1–3 starter posts to seed it, or should it start empty?
     - Should the blog be in the nav, or only accessible via direct URL?

9. Contact / footer — Footer with social links and optional contact email/CTA.
   Questions: 
     - Should the footer have a CTA? (e.g. "Get in touch" → mailto, or "Hire me" → external form)
     - Confirm your social URLs match the hero socials.

10. Branding & Theme — Colors, fonts, favicon.
   Questions: 
     - What's your brand color? (hex)
     - Default theme: light, dark, or follow system?
     - Do you want a custom favicon? (URL or describe)

Begin with section 1 now.