Build Your First Portfolio

Mission 05: Customize Your Portfolio

Mission 5 of 9

Customize Your Portfolio

Modify personal information, update headings, change colors, and add real project descriptions.

Edit text props and static data inside React components

Replace placeholder images with real media or icons

Observe instant Hot Reloading in your browser

Mission Prerequisites

Project Open in Editor

Mission Tasks (0 / 3)

Click tasks as you execute them locally

TASK 01

Update Hero Bio

Edit your name and headline in the Hero component.

Code snippet

<h1 className="text-4xl font-bold">Hi, I'm [Your Name] 👋</h1>
<p className="text-lg">Full-Stack Developer & AI Builder</p>

Expected Output: Browser automatically refreshes with updated bio.

TASK 02

Update Social & Contact Links

Replace placeholder URLs with your actual GitHub, LinkedIn, and email addresses.

Expected Output: Social buttons point to your live profiles.

TASK 03

Add Real Skills Tags

Update the Skills section array with languages and frameworks you use (React, Next.js, Node.js, Python, Git).

Expected Output: Skill badges display updated tags.

Expected Result

Your portfolio reflects your authentic bio, social links, and current skill set.

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.