This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
I’m a full-stack developer based in Sweden who enjoys turning messy ideas into clean, scalable web applications. I like good code, thoughtful UX, and working closely with designers and product folks to build things that actually get used. Currently exploring new opportunities and looking for my next role somewhere in the EU.
Portfolio
--labels dev-tutorial=devnewyear2026
How I Built It
One month. That's how long it took me to build my entire portfolio. And honestly? A lot of that time was spent undoing things, changing my mind, asking AI agents to try different approaches, and updating the same Plan.md file so many times I should've just lived in it.
But today? It's live. 🚀 ehsan-pourhadi.com/
Let me walk you through what actually happened, what I learned, and all the weird stuff I hid in my site that nobody asked for but I built anyway.
The Philosophy: Keep It Simple, Make It Weird
First, let me tell you what I didn't change: the core idea that all portfolio data lives in one JSON file. I kept that because it works. Separate content in MDX, separate data in JSON, build pages from both. No overthinking.
But everything else? Yeah, Started with a brand new installation of Astro and keep adding stuff.
The big realization was: nobody scrolls. Like, genuinely nobody. I had this beautiful parallax effect on my about page. Total waste. I ripped it out and replaced it with a compact overview of my experience and education. Now it's scannable. Fast. Honest.
What I'm Most Proud Of
1. New /work Page (The Game Changer)
This one genuinely changed how I think about portfolios.
Instead of listing all portfolio items under the work menu, I created a dedicated /work page that shows places I've worked. Nice and scannable.
Then when you click into /work/{workplace}, that's where the deep stuff lives:
- Short descriptions of my responsibilities there
- Soft skills for that role
- Projects related to that workplace
- Team members (with avatars from the boring-avatars npm package for people I don't have photos of)
Why? Because it's easier to scan. You see the company, click if you care, then you get the full context. It's not a wall of portfolio items—it's a story about where I've been and what I did there.
Clean overview first, details only if you want them.
I still keep the /portfolio page too though—that's where you can see everything in one place if you just want to browse all my work without the "by company" filter. Sometimes people want the complete list, so I kept that.
2. Better Skill Representation
I got tired of progress bars and arbitrary 1-10 numbers. Now each skill has a level description:
- Beginner 1-4: I've experimented and built something basic for personal use.
- Professional 5-7: I've worked with it professionally and deployed it to production.
- Advanced 8-9: Several years of experience, regularly working with it in production.
- Expert 10: Highly confident, capable of mentoring others, comfortable making architectural decisions.
Plus I added years to each skill. So instead of looking at a radar chart and seeing meaningless numbers, you understand what I've actually done with each tool. Way more useful.
3. Separated /products from /portfolio
New distinction:
- /portfolio: Client work and collaborative projects
- /products: Stuff I built completely myself
This matters because it shows the difference between "code I wrote within a team" and "full-stack projects I owned from start to finish." Both are valuable, but they're different. Now people can see both.
4. Search and AI Chat (Algolia Agent Studio)
I integrated Algolia search to show I can actually work with third-party APIs. Full-text search across my entire site. But the cooler part? I built a chat feature using Algolia Agent Studio where you can ask questions about me, my projects, my skills. It's supposed to be an AI agent that knows everything about my portfolio.
Problem: Still waiting on my Beta access to go live with it. So right now it exists, it works locally, but the world can't use it yet. Classic.
The lesson here? Sometimes you build cool stuff and it's not ready. That's fine.
5. Color Redesign: Red → Yellow/Orange
I used red and purple as my primary colors for years. Loved it. But then... every AI agents started using the same red/purple combo.
Switched to yellow as primary, orange as secondary, blue as accent.
It stands out. It's warmer. It doesn't look like every other AI tool's marketing site. The secondary color (orange-400) gets heavy use, and the blue accent adds sophistication. Much better distribution of color—80/20 rule applies even to design.
6. Guestbook with Bad Word Filtering
Remember guestbooks? That old internet vibe? Yeah, I missed it. Built one using Upstash Redis and Vercel Serverless, with bad word filtering using npm packages.
I didn't even search for the filtering packages—I just told my AI agent the problem and it threw back two options. I checked what they did, and they were exactly what I needed. Felt like magic.
The guestbook lets people leave messages. It filters the gross stuff. It saves to Redis. It works. And honestly? I hope people use it. It feels retro in the best way.
7. Music Player That Actually Works
Replaced the static Spotify embed with a custom media player and custom audio visualization. The hard part? Making it work with Astro Islands without losing the state managed in Zustand, and making sure music keeps playing when you navigate between pages.
Built a GlobalAudioPlayer that handles this. You start a song, navigate around, come back—it's still playing. Small detail that most sites forget about.
8. Resume Page and Print Layout
Updated my resume layout so if you actually print it, the header and footer disappear, the layout reformats nicely, and you get a professional-looking resume with proper page breaks.
Small detail, but it matters when someone wants to download a PDF.
9. AI Prompts Shared Publicly
I use specific prompts for AI work, and I wanted to share them. So I created a /prompts page with the prompts I actually use. They're tuned to how I work, how I write, and what I ask for.
Still iterating on this because I want it to feel authentic, not like I'm selling a course.
10. GitHub Contributions Animation
I added my GitHub contribution graph because it's a visual representation of how active I am. Yeah, it doesn't show work I did on Bitbucket or private repos, so it's incomplete, but it's still useful.
Found a really cool animation idea on Reddit and adapted it. Now my contributions have this nice animated reveal effect.
11. New /roles Page
This one's for the future mostly, but I created a page that shows roles I can work as based on my experience and skills. Not the titles I've had, but the actual work I can do.
It needs more love (better storytelling, actual links), but the structure is there.
12. Testimonials with Motion Animations
Had testimonials on my LinkedIn for years. Brought them to the site with animations inspired by PrebuiltUI. They slide in, they rotate slightly, they feel alive.
13. Credits Page
Built with help from multiple AI tools and refined by me? Gotta credit where credit's due. Added a /credits page that lists all the tools, libraries, and AI assistance that went into building this.
14. Deployed to Google Cloud with Docker and Caddy
With help from an AI agent, this took maybe 15 minutes. Created a Dockerfile, set up Caddy as the web server, pushed to Google Cloud. Done.
The deployment is easy when someone walks you through it. But I actually understand what's happening now, so next time I can do it myself.
15. The Floating Island (And Recraft.ai)
I wanted something next to my name on the homepage. Not a boring background, not a video. Something weird.
I found Recraft.ai (generative vector art from prompts) and spent time refining a prompt until I got this floating island with a machine on it and a tiny man (me) operating it. It feels like a modern metaphor for a developer using tools to generate code.
Then I animated some binary (0s and 1s) floating around it. It's the kind of thing nobody needs, but when you see it? You remember it.
16. 3D Cards with Mouse-Tracking Perspective
Looked at a ton of CodePen inspiration (there's this one by Smit29 that's just chef's kiss). Built 3D cards that follow your mouse, shift their perspective, and cast moving shadows.
Nothing groundbreaking, but they feel premium. They make the site more interactive without being gimmicky.
17. Easter Eggs Everywhere 🥚
I went full chaotic developer mode here.
Console Easter Egg: Open dev tools and you'll see messages that... let's just say they're me having fun with my own site.
Game Mode: There's a secret code (you can find it in the developer tools hint 👀) that unlocks a clicker game. You get points, unlock new pages, the whole thing. The long-term plan is to actually gate some portfolio items behind this, make people earn seeing what I've built. But for now, it's just pure dopamine.
Pixel World: This one's my favorite. Scroll to the bottom of the page, then keep scrolling. Ten times. Magic happens. A whole pixel art world appears—neon cats that run randomly, pixel art that follows light/dark mode. And if you click the fire ten times? Welcome to hell mode. The aesthetic shifts. Everything burns.
I worked with AI on this one using Nanobannan's AntiGravity, got some concept art, then spent a few hours in Photoshop cleaning it up and cutting it into usable pieces. That part? All me. AI got me 70% there, I finished the last 30%.
The Duck: There's also just a tiny debug duck that lives randomly in the footer. No reason. It's there. It's cute. That's it.
What I Learned
Throw Everything at the Wall
The design philosophy that worked best: try 10 ideas, see what sticks, pick the 3 that feel right. Don't overthink it. The floating island was an experiment. The 3D cards were an experiment. Some experiments failed (the Neo4j graph idea was too cluttered). But the ones that worked really worked.
80/20 on Color
Don't use your primary and secondary colors for everything. Reserve them. Use accent colors liberally. That's what makes a design feel balanced and not overwhelming. I've been over-saturating primary color for years—this redesign fixed that.
Agents Need a Plan.md
Always create a Plan.md and mark things done as you go. Manually verify everything works. I updated my plan probably 50 times during this project. Sounds tedious, but it kept me sane when I was undoing an hour of work and trying a different approach.
Talk to Agents Like a Client
When I didn't like what an agent produced, I stopped using my "developer brain" and started talking like a client would talk to me:
"Nah, I don't like this. Can we try something else?"
Instead of:
"Refactor the component architecture to use XYZ pattern..."
Simpler language often gets better results. And when agents did something I liked, I'd say "good job, we're done, now refactor this to follow best practices and make it production ready." That cleanup magic is real.
Using Antigravity:
Besides the chat and Agents features, I had a bit of a fight getting Prettier to behave. I ended up rolling back to an older version of the Prettier VS Code extension to make it work properly. Also, the auto-suggestions were sometimes a little too fast and occasionally interrupted my typing flow.
Nobody Scrolls
Seriously, rip out the long scrolling sections. People scan fast. Show them what matters in 2 seconds or they bounce. Compact, scannable layouts > beautiful narratives nobody reads.
Header Should Only Show Important Stuff
I removed /services because I don't freelance or contract—I work as a consultant or full-time. Having a services page made no sense. Now the header is clean and purposeful.
What's Next
- /life page: A more personal, storytelling section about my life, career journey, and actual personal experiences (not just professional achievements).
- Better image handling and lazy loading: Current setup is good but not optimized.
- Better content overall: Video presentations for each product, better photography for portfolio items.
- IoT projects: I've done Arduino and Raspberry Pi projects (temperature sensors, relay switches, auto plant watering, Pi-Hole setup) that deserve to live on the site.
- More coherent design: Everything's close, but I want it to feel even more unified and intentional.
Top comments (0)