我把個人作品集改造成 Theme Studio 互動遊樂場：將主題接上螢幕即可開啟

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

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 👇