DEV Community

Cover image for Let's create a portfolio website using as a CMS
Muhammad  Ahmad
Muhammad Ahmad

Posted on


Let's create a portfolio website using as a CMS

I have created multiple portfolio website templates using ChakraUI and React. You can check my previous posts for different portfolio templates.
My own portfolio is built using ChakraUI.
I am a big fan of ChakraUI but since being introduced to Tailwind at work, I've started to understand the benefits. Now I created a portfolio template with Tailwind using as a CMS.

Github Repo:
Live Demo:

Technologies used

  • Tailwind CSS - Have been working with CSS for over 4 years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc.
  • TypeScript - It's how JavaScript should have been by default. The combination of static type checking with intelligent code completion provides a significant boost in developer productivity. Not only can you work faster, but you can also catch a ton of errors before they arise.
  • Next.js - I don't try to hide the fact that I love Next.js, it's so simple to use and give so many out of the box features.
  • API - to dynamically build the blog.
  • Framer Motion - to add slick and beautiful animations.

Things I'll improve

  • Add a custom domain name
  • Add my resume
  • Add Canonical URLs to my blog page



Latest comments (4)

aligerm profile image

Your portfolios list is amazing. Keep it up man.

mayankkalbhor profile image
Mayank K

This is nice. NextJS is definitely great. I am also thinking of using NextJS instead of Gatsby.

sasicodes profile image
Info Comment hidden by post author - thread only accessible via permalink
Sasidharan • Edited

Try to get your portfolio for free.

Example portfolio -

I hope this will be useful.

zakiazfar profile image
Mohd Ahmad

😍😍 I love the animations

Some comments have been hidden by the post's author - find out more

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React