Baby's First Portfolio:
Meet the Baby
“small ideas. brighter beginnings.”
Don't understand this? Copy this prompt & ask your AI agent!
Hackathons should be fun, welcoming, and full of learning! AI coding tools (Claude, ChatGPT, Cursor, v0, Gemini, Copilot) are 100% allowed at haX.baby. If anything in this brief feels confusing, or you don't know how to start, just click below, paste the prompt to your AI assistant, and let it explain the challenge in simple words, brainstorm cute project ideas, and build your 48-hour plan with you!
The Challenge
Every portfolio starts with a hello. Build a cute, creative, immersive portfolio website for a character.
In Simple Words
Think of it like building a personal portfolio website, but instead of a human resume, your “client” is a delightful little character! You pick the colors, the interactive surprises, the sound effects, and how their story unfolds as someone scrolls through the page.
Your website must tell visitors three core things:
1. What they are
Their identity, species, look, quirks, and personality. Who is this little creature?
2. What they do
Their craft, profession, inventions, or projects. What do they make, design, or take care of?
3. What their story is
How they came to be, where they live, and where they are going — told through interactive scenes or scroll.
Choose Your Track
Pick one of the two tracks below. Both are evaluated on the exact same rubric, and both have an equal chance to win.
The Skull Baby (Pip)
“Everyone gets the same baby. The contest is what you do with them.”
Meet Pip, a baby with a skull face who works as a Junior Dream Engineer. You build Pip's portfolio. Because everyone starts with the same baby, you compete on creative execution, animation, storytelling, and personality.
- Canon character details are locked (name, skull face, job).
- Visual style is 100% open (pixel art, 3D, retro 90s, hand-drawn).
- Perfect if you love frontend craft, motion, and styling!
Your Own Baby (Original Character)
“Bring your own creation to life.”
Invent an original character and build their portfolio. It can be a friendly ghost, a sleepy cloud, a baby robot, an alien, a monster, or a fantastical version of yourself.
- Complete freedom of character concept and world.
- You write a short character sheet on your site.
- Can showcase your real-world skills or a totally fictional job!
Meet Pip: Track 1 Canon
Pip is the canon skull baby for Track 1. Here is Pip's official reference sketch and profile.
The Work Pip Shows in the Portfolio
Choose at least 3 of these as Pip's showcase projects, or invent your own in the same whimsical spirit:
1. The Lullaby Lab
A music box or generative soothing lullaby that Pip composed.
2. Nightlight Collection
A gallery of glowing lamps and bedside lanterns Pip designed.
3. Dream Delivery Routes
The interactive map Pip uses to fly across rooftops delivering dreams.
4. Rattle & Block Toys
Playable, interactive toys Pip invented that visitors can click or stack.
5. Bedtime Storybook
A cozy bedtime story Pip wrote and illustrated.
6. Pip's Growth Chart
Pip's skills shown as a baby height growth-chart on a nursery wall.
Pip Creator Asset Pack (Free to Download)
To give every builder a running start, here are official, premade visual assets matching Pip's Midnight Nursery canon. Clean, high-resolution studio renders with watermarks removed, ready to use in your website.
Pip Waving on Cloud
Pip floating on a sleepy cloud waving a tiny hand. Ideal for hero sections, floating avatars, or interactive cursor followers.
The Lullaby Lab Music Box
Pastel music box with golden winding key and floating star chimes. Perfect for Showcase Project 1 or your Web Audio sound toggle!
Dream Nightlight Lantern
Glowing sleeping crescent moon porcelain lamp with brass handle. Perfect for Project 2 (Nightlight Collection) or day/night mode!
Pip Studio Character Portrait
Official full-body reference illustration of Pip holding the nightlight lantern. Great for About Me or character bio cards.
What is Locked vs. What is Open
| Locked (Canon — Keep these) | Open (You decide — Make it yours!) |
|---|---|
| Pip's name, skull face, and baby age | Pip's origin story: how Pip got here |
| Profession: Junior Dream Engineer | The town, the world, the neighborhood, and supporting creatures |
| Friendly, gentle, cute tone (never gory) | Visual art style: pixel art, 3D, retro 90s, collage, or hand-drawn |
| Pip is the host/narrator of the site | Real details of the projects, and the unique voice of the writing |
Track 2 Guidelines: Your Own Baby
If you choose Track 2, your character must be original. You must write a short character sheet on your site.
The 5-Point Character Sheet
On your website (in an “About” section or modal), include these 5 quick fields:
- 1. Name: What is your character called?
- 2. What they are: Species, appearance, and personality.
- 3. What they do: Profession, special talent, or hobby.
- 4. Their story: How they came to be and what journey they are on.
- 5. Tagline: A memorable one-line motto.
| Rule | Guideline |
|---|---|
| No Existing IP | No Disney, Pokémon, Sanrio, anime, or video game characters or lookalikes. Must be 100% original. |
| Real or Fictional Content | The portfolio can show your real-world coding/design skills through the character, or a fully made-up magical job. Both are valid! |
| Friendly & Kind | Playful, kind, and cute. Nothing gory, violent, hateful, or disrespectful of any culture. |
Required in Both Tracks
Every submission in Track 1 and Track 2 must include these 6 core elements:
What they are
An intro that introduces the character's identity, look, and personality.
What they do
A projects / work section showing at least 3 things they made (real or fictional).
Their story
An origin or journey told through scroll, scenes, or animation (not a wall of text!).
Immersion
At least one moment that reacts to the visitor: mouse tracking, clicks, or sound with a mute toggle.
Mobile-friendly layout
The site must look great and function smoothly on phones and tablets.
One hidden Easter egg
Something delightful for curious visitors to discover (a secret click, a hidden lullaby, a waking animation).
Golden Rule: Story Over Text
Keep each section to about 150 words or fewer. Do not write a novel. Tell the story through creative layout, motion, illustration, and playful interaction!
The Tiers: What to Build
Section 5 is your baseline. The tiers show how far to take it. Remember: one polished interaction beats five half-broken ones!
Tier 1: Complete Portfolio
Achievable by most builders. Do these and your site is complete.
- Character reacts to cursor: Eyes follow pointer or head tilts smoothly (with touch fallback).
- Scroll-driven story: Scenes advance cleanly with scroll.
- Day/night or mood toggle: Changes character expression and color palette.
- Responsive layout: Looks crisp on small phone screens.
- One hidden Easter egg: Discoverable and cute.
Tier 2: Memorable Standout
Separates strong builders. Pick 1 or 2 and polish them well.
- Lullaby Lab with real audio: Web Audio API synth or music box with required mute switch.
- Flashlight / nightlight cursor: Canvas or CSS mask illuminating dark dream layers.
- Dream Delivery map animation: SVG path motion synced with scroll.
- Interactive storybook: Page-turn flip animation with touch & keyboard support.
- Mini-game: Stack the blocks, catch falling dreams, or rattle sounds.
Tier 3: Legendary
Rare and impressive. Attempt only if your core is already rock-solid.
- 3D WebGL / Three.js model: Rotate and interact with the character in 3D.
- Live dream guestbook: Real backend where visitors leave wishes.
- Character remembers visitor: LocalStorage returning-visit memory and custom greetings.
- Character chats back: AI or rule-based dialogue in character voice.
- High Lighthouse scores (90+): Fast load speed even with rich audio and art.
Side Quests (Up to +13 Bonus Points)
Optional early-web nostalgic side quests. Points are added directly to your evaluation:
Live Guestbook
“Leave a message or dream wish for the baby” on a persistent guestbook wall.
Sparkle Cursor Trail
Retro stars, dreamy bones, bubbles, or glitter following the pointer.
Hit Counter Odometer
“Dreams delivered: 1,204” or vintage visitor counter odometer.
Click Sounds + Mute
Baby giggles, rattle clicks, or soft wind chimes. A mute switch is strictly required.
Responsive Chaos Mode
Whimsical retro personality that reshapes dynamically to any screen dimension.
Judging Rubric
Both tracks are judged on the same rubric and compete on one shared leaderboard.
Functionality & Polish
Working buttons, smooth interactions, zero console errors, clean state management.
Early-Web Soul
Playful 90s/00s whimsy, distinct creative personality, feeling like a real cozy web place.
Creativity & Surprises
Easter eggs, unexpected toys, fresh storytelling, and creative twists.
Clean Craft
Mobile responsiveness, fast rendering, accessible controls, tidy code.
How Judges Compare Entries
Track 1 comparisons lean heavily on execution: polish, storytelling, and motion craft. Track 2 comparisons lean on originality: character design, voice, and world-building. Taking on harder tiers helps your score only if they work. A broken Tier 3 feature scores worse than a clean, charming Tier 1 site.
Rules & What to Submit
Everything you need to know about fair play, tech stacks, and submitting your project.
| Topic | Rule & Guideline |
|---|---|
| Stack Freedom | Use any web stack: plain HTML/CSS/JS, React, Next.js, Vue, Svelte, or Astro. Any backend is fine. |
| Built During Sprint | Must be built during the 48 hours. Public GitHub commit history between 17–19 October is required. |
| Solo or Squad | Build solo or in a squad of up to 3 people. Each teammate joins with their registered account. |
| AI Tools Welcome | Claude, ChatGPT, Copilot, Cursor, v0 are all allowed! You remain responsible for understanding and shipping your code. |
| Art Credit | Hand-drawn, SVG/CSS, pixel art, and AI-generated art are all allowed, but credit every source visibly in your footer or credits. |
| Mute Toggle | Sound is celebrated, but always provide an easy-to-spot, working mute switch. |
| Mobile First | The website must render and interact smoothly on phones and tablets. |
What to Submit by 19 October 2026, 17:17 IST
The submission portal will open at 18th Oct 17:17 IST (24 hours after kickoff) and close at code freeze.
Live Deployed Website URL
Hosted on Vercel, Netlify, GitHub Pages, Cloudflare, etc.
Public GitHub Repository
Showing commit history from 17–19 October 2026.
Story Behind Your Build
Short write-up (a few paragraphs) on your character and proudest features.
Character Sheet (Track 2)
Your 5-point character profile if building an original creation.
Credits
Attributions for art, audio, and open-source libraries used.
Timeline & $400 Prize Pool
48 cozy hours to create something that feels like you. Here are the milestones and rewards:
| Date & Time (IST) | Milestone |
|---|---|
| 19 Sep 2026 | Account & Sandbox Pass: sign up and unlock workspace |
| 14 Oct 2026 | Squad Roster Freeze: form team or declare solo |
| 17 Oct · 17:17 IST | Kickoff: Brief revealed, 48 hours begin |
| 18 Oct · 17:17 IST | Submissions Open & Live Deploy Check |
| 19 Oct · 17:17 IST | Code Freeze & Submissions Close |
Google AI credits, exclusive haX merchandise, verified champion certificate, and core engineering interview opportunity.
AI credits, haX goodies bundle, and verified runner-up certificate.
AI credits, haX community perks, and verified podium certificate.
AI credits, haX digital swag pack, and verified finalist certificate.
Builder Tips from the Organizers
Proven advice from our team to make your 48 hours cozy, fun, and winning:
Pick one core idea and make it feel alive. A character who reacts to you on a phone beats a long list of half-broken features.
Start with Tier 1. Get a deployed, working site on Day 1, then layer on Tier 2 hard interactions.
Test on your phone early. Do the mobile check on day one, not in the frantic last hour before code freeze.
Make the Easter egg delightful. A sleeping character you can wake, a secret lullaby, or a hidden room is pure joy.
Tell the story through motion, not text walls. Keep text snippets under 150 words and let visuals shine.
Keep the mute button visible. If your site plays cute sounds or music, always give visitors instant volume control.
The submission portal will open at 18th Oct 17:17 IST (24 hours after kickoff). You can open the submission page now to review the requirements and prepare your repository, live demo, and story.
Open submission page