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
This is a portfolio application built by using Next.js, ChakraUi, Typescript and Dev.to api.
Screenshots
Home page (mahmad.me)
Terminal theme (mahmad.me/themes/terminal)
Built with
- Framework: Next.js 16 (Pages Router) with React 19
- Styling: Tailwind CSS
- Animations: Framer Motion
- UI primitives: Radix UI and Base UI (tooltips), Headless UI (disclosures, popover), cmdk (command menu)
- Icons: Lucide and React Icons
- Theming: next-themes (light / dark)
-
Blog content:
.mdxfiles parsed with gray-matter and remark, with Prism syntax highlighting - ORM: Prisma with PostgreSQL
- Analytics: Vercel Analytics, Google Analytics, Microsoft Clarity
- Deployment: Vercel
-
APIs:
- Dev.to for blog posts
- GitHub Contributions API for the contribution graph
Pages
-
/- Profile, overview, GitHub contribution graph, tech stack, experience, education, and projects. Statically generated and revalidated once a day. -
/blog- The 10 latest posts, merged from local.mdxfiles…
Let me know what you think in the comments, and which theme you like more: the main one or the terminal one? 😄
Top comments (3)
Cool! 👍 I gave it a star ⭐
Thank you!
Good job 👏