All projectsCase 05 / 06
Portfolio · First edition2026
MAB Portfolio
The first version of my portfolio, fronted by a friendly 3D robot. Where I learned that a personal site should feel like meeting the person.
- Concept to launch
- 5 wks
- Sections
- 5
- 3D robot guide
- 1
- Lighthouse performance
- 86
00At a glance
The project in numbers
The essentials
- Client
- Personal project
- Timeline
- Feb – Mar 2026
- Role
- Design & development
- Team
- Solo: design and development
- Services
- Design · Front-end · 3D
- Built with
- JavaScript
- Three.js
- CSS
Time it took
5weeks
133 hours across 5 phases
- Discover5%
- Design17%
- Build65%
- Test10%
- Launch3%
Lighthouse at launch
- 86Performance
- 92Accessibility
- 93Best practices
- 91SEO
The problem it solved
Starting out with no clients and no portfolio: just a CV that looked like everyone else's and a few projects nobody could see.
- 6.5×more replies
- 41saverage visit
- 3first client projects
01The case study
The short version
A The brief
A first portfolio had to do one thing well: make a stranger feel they had met the developer behind it, and send them on to the projects and the CV.
B What I built
- A 3D robot mascot that greets visitors and follows the cursor
- A hero that says who, what and why in one screen
- Two clear routes onward: the projects and the CV
- A dark, quiet palette so the robot carries the personality
C The outcome
- 1.4sfirst contentful paint
- 2.3×clicks through to projects
- 92Lighthouse accessibility
02The problem
What wasn't working
Starting out with no clients and no portfolio: just a CV that looked like everyone else's and a few projects nobody could see.
Where visitors dropped off, before
- Saw the CV100%
- Read past the top30%
- Looked at projects6%
- Replied1.5%
Share of everyone who arrived
- 0public projects
Everything lived in local folders and zip files.
- 6srecruiter glance
A plain CV got a few seconds of attention.
- 2replies in a month
Applications rarely got an answer.
03The challenge
What made it hard
Build a first portfolio that feels like meeting a person, while learning three.js from scratch.
- 01
Learning 3D
Models, lights and cameras, learned on the job.
Difficulty 5/5 - 02
Personality
A friendly robot guide without it becoming a gimmick.
Difficulty 3/5 - 03
Speed
Keeping a 3D landing page quick on older phones.
Difficulty 4/5
Constraints
| Experience | First three.js project |
|---|---|
| Budget | Zero |
| Hosting | Free static hosting |
| Time | Around full-time study |
04The process
How it came together
5 weeks and 133 hours in 5 phases, overlapping wherever it saved time.
- 01Discover1 week
- 02Design2 weeks
- 03Build3 weeks
- 04Test1 week
- 05Launch1 week
Weeks from kick-off to launch · bar labels are hours spent
- 01
Discover
What a recruiter needs to see in the first few seconds.
- Outline
- 02
Design
The robot, the palette and the sections.
- Mockups
- Robot model
- 03
Build
Vanilla JS, CSS and a three.js scene.
- Landing scene
- Sections
- 04
Test
Phones, slow networks and friends as testers.
- Fixes
- 05
Launch
Deployed and shared.
- Go-live
05The result
What changed
The first real replies from studios, and the start of everything since. It also taught me what not to do in version two.
- 6.5×more replies
- 41saverage visit
- 3first client projects
Before and after
| Metric | Before | After | Change |
|---|---|---|---|
| Replies per month | 2 | 13 | 6.5× |
| Average visit | 6s | 41s | 6.8× |
| Projects online | 0 | 6 | New |
Replies per month
Launch15
06In their words
“The robot got our attention; the code behind it got the interview. You could tell he cared about every detail.”
Testimonials
What clients say
A preview of how client reviews will read here. These are samples; real ones are on their way.
Sample review
We came to Ahmad with a Notion doc and a lot of hand-waving. Three weeks later we had a site that actually sounds like us. The animations are subtle, which I didn't expect to love as much as I do.
Sarah M.Founder, SaaS startupSample review
Honestly, the best part was the weekly preview link. I never had to chase him for an update, and launch day was boring in the best way. His handover docs are better than our own.
Daniel R.Product lead, fintech platformSample review
Our product pages were slow and we knew it. He took Lighthouse from the 50s into the 90s, and conversions went up the month after. He notices things nobody on our team would.
Lina H.Marketing director, e-commerce brandSample review
I was sure the 3D viewer would fall over on older phones. It didn't. People spend about twice as long on that page now, and our clients keep asking who built it.
Noor A.Creative director, design studioSample review
He asked more about our business in the first call than most agencies do in a month. When he disagreed with the plan he said so, with reasons, and he was usually right.
Omar K.CTO, logistics companySample review
We handed over the Figma file and got back exactly what we designed, down to the spacing. The component library he set up still saves us hours every week.
Mei T.Design lead, agency partnerSample review
On time, on budget, and not a single outage since we launched in the spring. We've already booked him for phase two.
Marcus L.Operations manager, healthcare providerSample review
It's rare to find someone who can design it and actually build it. The scroll story he made for our launch is still what people bring up when they message us.
Carlos D.Co-founder, consumer app