Hey everyone 👋
Last time I shared my rebuilt portfolio with a terminal theme. It has a third theme now (a notebook one), and I built a small playground just to switch between them 😄
Meet Theme Studio → mahmad.me/theme-studio
How it works
The three versions of my site are cards on a canvas, with a display in the middle. To open one, you drag a wire from its card into the display, like plugging a cable into an old TV. 🔌
The fun parts
- ⚡ Lightning sparks jump between the wire and the display when you get close.
- 📦 Skill icons ride down the wire once it's plugged in.
- 📺 The screen turns on like an old TV, and then the page opens.
Fast navigation from every page
I didn't want people to hunt for the playground, so a small live copy of it sits in the bottom-right corner of the home page, the terminal theme and the notebook theme (on desktop). It plugs in one theme after another, and one click opens the real thing.
Source code
MA-Ahmad
/
myPortfolio
A pixel-perfect portfolio with three themes and a Theme Studio playground
My personal portfolio, showing my skills, experience, projects and articles. It also has a playground where you can switch between three versions of the site.
→ Live site: mahmad.me
Home page · mahmad.me
Playground · mahmad.me/theme-studio
Notebook theme · mahmad.me/themes/notebook
Terminal theme · mahmad.me/themes/terminal
Overview
Stack
- Next.js 16 and React 19
- Tailwind CSS
- Framer Motion
- Prisma with PostgreSQL
- Cloudflare Workers
Featured
- Light/Dark themes
- Three versions of the site: classic, terminal and notebook
- Playground: Theme Studio, where you drag a wire from a theme into a display to open it, with live cursors from other visitors
- Blog from local MDX posts and Dev.to articles
- GitHub contribution graph
- Command menu (⌘ K)
- AI-ready with /llms.txt
- Link preview image for sharing
License
Everything in this repository is licensed under the MIT license.
If you fork it, make sure to remove all my personal information (profile, projects, blog posts…
If you like it, a star ⭐ really helps. What should I plug into the display next? Tell me in the comments 👇
Top comments (9)
I like that the switching itself is the demo, not a settings menu. My own site went through the same argument with itself — I kept asking whether a visitor should have to learn an interaction before they see any work, and the corner copy that cycles themes on its own answers that worry better than any toggle would. The risk I would watch is the novelty wearing thin on a return visit, when someone just wants the terminal theme straight away. Did you keep a plain route to each theme for the visitor who has already decided?
Yes. Each theme has its own address:
mahmad.me/themes/terminalandmahmad.me/themes/notebook. The command menu (⌘K) also has a Themes group that links straight to each one. The animated card is extra, not a gate.That address-per-theme choice is the part I would keep, because it turns a theme from a preference into a place someone can actually send me. I can link a reader straight to the terminal view instead of telling them to open a menu and click twice, and that removes the exact moment where most visitors give up. The command menu as an index, not a gate, matters for the same reason: I have seen my own site lose people at a settings screen that asked them to choose before they had seen anything worth choosing. Do you find one theme gets most of the direct links, or does the split stay fairly even?
I don't have the split yet, since this is a new view of my portfolio and I haven't looked at it per theme. I'll keep an eye on the views for at least a week.
A week is the right call, and I would watch one thing alongside the raw views: where the visit came from. On my own site, direct links behaved very differently from menu clicks, because a direct link lands someone in a finished view while a menu click still asks them to choose. If terminal pulls most of the direct traffic but notebook wins on return visits, that tells you something different from a simple split. What would you change first if one theme clearly pulls ahead?
A week is a sensible window, and since each theme already has its own address you will get a clean read without extra tracking. I would compare direct visits per theme path rather than total page views, because the command menu can hide which view people actually stayed in. If terminal pulls ahead, I would still keep the other themes linkable rather than making one the default, since the whole point is that a visitor can land straight on the version someone sent them. What would you change first if one theme clearly wins after that week?
For the next iteration, I’d make the same plug-in interaction work without dragging: let someone tap a theme card to open it on touch, and give the cards a clear focus + Enter/Space path for keyboard users. That keeps the playful demo while making the portfolio’s theme previews usable on phones and without a pointer.
Thanks, great call! I've just built it. You can now tap a theme card on your phone, or Tab to a card and press Enter. It still plays the same wire-and-packets animation before the theme opens, so the fun bit is still there, you just don't have to drag. Cmd/Ctrl-click opens a theme in a new tab too. Let me know how it feels on your phone!
Nice, that gives touch and keyboard users a direct route while keeping the animation. I can’t give you a phone feel report yet, but I’d check one more edge: after opening a theme, can a visitor return to the same focused card without restarting the animation?