I turned my portfolio into a playground (plug a theme into a display to open it)

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…

View on GitHub

If you like it, a star ⭐ really helps. What should I plug into the display next? Tell me in the comments 👇