DEV Community: Muhammad Ahmad

I asked Claude to explain an API request as a tiny machine

Muhammad Ahmad — Mon, 26 Oct 2026 15:04:16 +0000

Hey everyone 👋

// Detect dark theme var iframe = document.getElementById('tweet-2114729698127454239-901'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2114729698127454239&theme=dark" }

Play with it here → mahmad.me/blocks/interactive/api-lifecycle

It started with one line

Anatomy is a Claude skill that explains an idea by building a small machine instead of a diagram. I gave it this:

"/anatomy explain how an API lifecycle works with database and cache, interactive"

The first version already worked: it was a full bench with a shuttle running on a rail. The fun part was the back and forth after that.

Every part means something 🔧

There are no boxes and arrows. Each piece of the machine is a real part of the request:

💳 The card is the request. It rides on a little shuttle with wheels that actually roll.
🚧 The gate is auth. It only lifts when the token is valid.
🗄️ The drawers are the database. A drawer slides out to fetch the row.
💾 The floppy slot on the monitor is where the response lands before it shows on screen.

Click the monitor and it zooms in so you can read the profile.

What I changed after the first version

The cache keeps its copy. At first the cache handed its only copy to the shuttle. That's wrong: a cache read doesn't remove anything, so now it makes a copy.
No clicking mid-flight. Flushing the cache while a request was on its way caused weird results, so the controls lock until the trip finishes.
Realism. I moved the floppy slot to the front of the monitor, gave the shuttle rolling wheels, and made the card slide into the slot in one smooth hop.
Zoom controls (+ / − / reset) inside the frame, so you can get close to any station.

Play with it in your favorite AI tool 🤖

Every block on my site has an Open in menu: v0, ChatGPT, Claude or Cursor. It sends the full source along, so you can ask how it works, change it, or build your own machine from it.

Or add it straight to your project:

npx shadcn add https://mahmad.me/r/api-lifecycle.json

Source code

The block and everything else on my site are open source.

If you like it, please give the repo a star ⭐ → github.com/MA-Ahmad/myPortfolio.
It really helps!

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

Muhammad Ahmad — Sat, 24 Oct 2026 16:30:28 +0000

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 👇

I finally rebuilt my portfolio website (and added a terminal theme)

Muhammad Ahmad — Mon, 19 Oct 2026 10:59:23 +0000

Hey everyone 👋

It's been a long time since my last portfolio update post. My portfolio mahmad.me was built back in 2021 with Next.js and Chakra UI, and some of you might remember my earlier posts about it.

For a long time I wanted to update it. The design felt old, the packages were outdated, and I had a list of ideas I wanted to try. But office work kept me busy, and the update kept moving to "next weekend" 😅

Finally I got some time, and I rebuilt it.

What's new

Chakra UI ➡️ Tailwind CSS

The whole site moved from Chakra UI to Tailwind CSS, and I upgraded to Next.js 16 with React 19. Chakra UI served me really well for years, but this time I wanted more control over the styling and a lighter setup.

A fresh design

The homepage is now a clean one-page layout with:

A big isometric "MA" mark at the top
A pixel avatar that assembles itself from tiny pixels when the page loads (click it to replay, hover to break it apart)
My GitHub contribution graph
A Stack section with the tools I use every day
Experience, education, and projects, all on one page
Light and dark mode
A command menu: press ⌘ K or / to jump anywhere

A second theme: Terminal 🖥️

This is the part I enjoyed most. I created a completely different version of the portfolio that looks like a terminal: monospace font, whoami, cat experience.log, and an ASCII art portrait made from characters.

You can open it from the command menu under Themes, or directly at mahmad.me/themes/terminal.

Switching between the two themes plays a pixel transition: the current page breaks into small squares that disappear in a ripple from where you clicked, and the other theme shows up underneath. It uses the browser's View Transitions API, so it's fast and smooth.

I set it up so each theme lives in its own folder, so adding more themes later is easy.

Friendly for AI agents too

The site also has plain markdown versions of my profile (/llms.txt, /about.md, /experience.md, and more), so AI tools can read my profile easily.

Credits 🙏

The new design of the main site is inspired by the beautiful portfolio of chanhdai.com. Huge thanks for sharing such great work, it gave me the push I needed to finally redo mine.

Source code

The portfolio is open source. If you like it, please give it a star ⭐ It really motivates me to keep building.

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

Let me know what you think in the comments, and which theme you like more: the main one or the terminal one? 😄

Spent the weekend crafting a delightful animated card using @chakra_ui and @framer motion! 🌟✨

Muhammad Ahmad — Sun, 24 Dec 2023 17:59:49 +0000

🚀 The Concept: The idea of an animated card took shape in my mind, and I couldn't wait to turn it into a reality. Framer Motion stood out as an incredibly powerful tool, seamlessly integrated with ReactJS and Chakra UI, making the animation process a joy.

🎬 Animation Magic: The flexibility and capabilities of Framer Motion, combined with the versatility of Chakra UI, allowed me to craft a mesmerizing animated card. The ease of implementation and the vast array of motion features truly made this project an enjoyable experience.

✨ The Takeaways: This endeavor reiterated the potency of using Framer Motion with ReactJS and Chakra UI. The synergy of these tools not only allowed me to create an animated card but also opened doors to endless creative possibilities.

🌟 Final Thoughts: Crafting this animated card was a delightful journey. It reaffirmed my passion for creative exploration and innovation. With Framer Motion and Chakra UI by my side, I'm excited about the boundless opportunities ahead in the world of animation!

Let's keep creating, innovating, and bringing our imaginations to life! ✨🚀

ChakraUI TemplatesKart - UI updates

Muhammad Ahmad — Wed, 20 Jul 2022 15:46:19 +0000

Hello CharkaUI lovers,

This article presents new UI changes in TemplatesKart

Let's see what new changes I made.

Description

Created beautiful settings drawer which contains color mode switcher and presets.
Removed color mode switcher and color palette from header.
Created Figma designs of the component categories.

Settings Drawer

Figma designs of the component categories

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

New landing page of TemplatesKart website

Muhammad Ahmad — Sun, 29 May 2022 14:43:40 +0000

On weekend, I modified TemplatesKart website landing page.
Let's have a look what changes I made.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Old Hero Section

New Hero Section

New Components Preview Section

Free 12 new Chakra UI components - TemplatesKart

Muhammad Ahmad — Sun, 15 May 2022 15:35:03 +0000

Let's find out 12 new chakra-ui components that I have added to TemplatesKart website recently.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Milestones
- With cards on both sides
- With cards on one side
- With icons year-wise
Pricing
- Single tier
- Two tiers
Sidebars
- With header
- Without header
Page Sections
- CTA banner
- Mission section
- Overview section
Features
- With cards
- Simple 2 columns

Some Components Screenshots

Milestones

Pricing

Sidebar

Overview section

Features

Show your support
Give a ⭐️ on Github if you like my work! 🙏

Free 10 new Chakra UI components - TemplatesKart

Muhammad Ahmad — Sat, 07 May 2022 22:51:03 +0000

Let's find out 10 new chakra-ui components that I added to TemplatesKart website recently.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Heroes
- With gradient cover
- Simply centered
Blog
- Newsletter
Cards
- Join community
Navbars
- Multiple links
- Simple one
Testimonials
- Card with border
Page Sections
- Small detail
Footers
- With logo left
- Large with logo left

Some Components Screenshots

Newsletters

Join community card

Navbars

Hero section with gradient

Testimonial

Show your support
Give a ⭐️ on Github if you like my work! 🙏

Free 10 Chakra UI components - TemplatesKart

Muhammad Ahmad — Wed, 04 May 2022 01:25:59 +0000

Let's find out 10 new chakra-ui components that I added to TemplatesKart website.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

Heroes
- Simply centred
- Image on right side
- Left align content
- Background image
Blog
- With border
- Posts feed
Cards
- User card
- Course card
Stats
- Library stats
Testimonials
- with dotted box

Some Components Screenshots

Image on right side

Background Image

Left align content

User card

Library stats

Show your support
Please give a ⭐️ on Github if you like my work! 🙏

Find out 8 new chakraUI components that I built

Muhammad Ahmad — Thu, 28 Apr 2022 18:59:42 +0000

Hi folks,
I added 8 new components to TemplatesKart website. So I want to share them with you. Please check these components and let me know about your suggestions if you have any.

Here are the components list

Cards
- Product card
- Exclusive offer
Blog
- With transparent background
- Blog list with tag
Forms
- Magic link
Testimonials
- With Large image
- Card with avatar
- Card with avatar 2

Some Screenshots

Magic link

Blog card

Testimonial card

Product card

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

TemplatesKart | New landing page built with ChakraUI

Muhammad Ahmad — Sun, 24 Apr 2022 11:38:12 +0000

TemplatesKart provides an easy solution to getting the look you want for your website without having to mess around with too much code.

I launched this website a week ago. Now I updated the following pages UI for better user experience.

Landing Page Sections - https://templateskart.com
- Hero Section
- Key Features
- Product Overview
Projects Page - https://templateskart.com/projects
Components Page - https://templateskart.com/components

Some key features of TemplatesKart

50+ Components
6 Projects
100% Open Source
Typescript Support
Light and Dark Mode support for all components
Fully Responsive components

Github Repo: TemplatesKart Code

Screenshots

Landing Page

Projects Page

Components Page

TemplatesKart | Free Chakra UI Components and Projects

Muhammad Ahmad — Wed, 20 Apr 2022 10:52:43 +0000

Project Overview

TemplatesKart is a powerful set of fully responsive and accessible React components and projects.

Demo: TemplatesKart
Github Repo: TemplatesKart Code

How I built it

Framework: Next.js
Styling: Chakra UI
Animations: Framer Motion
Deployment: Vercel

There are 2 main sections in TemplatesKart

1. ProjectsKart (6 projects)

Currently there are 6 projects. ProjectsKart provides an easy solution to getting the look you want for your website without having to mess around with too much code. User can view project pages and copy code of components.

ProjectsKart Page

Project Page

2. ComponentsKart (40 components)

It is a list of beautiful and responsive React components to build your application. Some of these components are extracted from ProjectsKart and some are built separately.

ComponentsKart Page

Component Page

Why I built TemplatesKart

In 2020, I started learning Reactjs and I explored multiple React component libraries like AntDesign, MaterialUI, Tailwindcss and ChakraUI. All those libraries are great. But I found ChakraUI the best React component library although ChakraUI was new at that time. It Provides just enough to get started, implements sensible defaults, but is also very extensible and customisable. So I started using it and created multiple small projects with it. So far I built 5 to 10 projects with ChakraUI. Some projects are open source. In my new projects, sometimes i need to copy old components code from my previous projects. But it was time consuming process. Because I always need to open codebase of that specific project. So as per my needs and to make copy code process more convenient I created a TemplatesKart website. I added all my previous open source ChakraUI projects and most commonly used components.

TemplatesKart website is open source. Feel free to like and contribute.

Website link: https://templateskart.com
Github repo: https://github.com/MA-Ahmad/templateskart

Screenshots

Reviews component

Stacked lists component

Inspiration & Thanks

Chakra Templates️