Build Your First Portfolio

Mission 03: Build Your First Portfolio with AI

Mission 3 of 9

Build Your First Portfolio with AI

Use structured AI prompts to scaffold your initial Next.js / React portfolio starter codebase.

Use structured AI prompt templates in Prompt Lab

Initialize a clean Next.js portfolio project

Start the development server and view local app in browser

Mission Prerequisites

Node.js & npm

Git Configured

Mission Tasks (0 / 3)

Click tasks as you execute them locally

TASK 01

Copy Structured Portfolio Prompt

Use Explorush Prompt Lab to copy a structured prompt for your portfolio.

Code snippet

Create a modern developer portfolio using Next.js 15, React 19, and Tailwind CSS.
Requirements:
1. Hero section with name, headline, bio, and social links.
2. Projects section with project cards (title, description, tech tags, demo & repo links).
3. Skills section with categorized tech stacks.
4. Contact section with functional inquiry form.
5. Clean responsive dark/light color palette using modern design tokens.

Expected Output: Prompt copied.

TASK 02

Run Dev Server

Start the local Next.js development server.

$npm run dev

Expected Output: Ready in 1.2s — Local: http://localhost:3000

TASK 03

Open Browser

Open http://localhost:3000 in Chrome/Brave/Firefox to view the running web app.

Expected Output: Portfolio site loads cleanly in browser.

Expected Result

Your portfolio starter project builds and renders locally at http://localhost:3000.

Super Admin Verified Mission (+100 XP)

Submit Proof of Completion

Upload a Screenshot (PNG/JPG) or PDF Document showing your executed code/output. Submitting allows you to immediately continue to the next mission while Super Admin verifies your work!

Click or drag proof file here to upload

Supports UI Screenshots (PNG, JPG, WebP) or PDF documents (Max 10MB)

Tip: You can submit your proof and advance to the next mission immediately.