<p>I have created multiple portfolio website templates using ChakraUI and React. You can check my previous posts for different portfolio templates.
My own portfolio <a href="https://mahmad.me">mahmad.me</a> 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 Dev.to as a CMS.</p>
<p>Github Repo: https://github.com/MA-Ahmad/mahmad.me
Live Demo: https://mahmad-me.vercel.app</p>
<h2>Technologies used</h2>
<ul>
<li><a href="https://tailwindcss.com">Tailwind CSS</a> -  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.</li>
<li><a href="https://www.typescriptlang.org">TypeScript</a> - 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.</li>
<li><a href="https://nextjs.org">Next.js</a> - 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.</li>
<li><a href="https://docs.dev.to/api">Dev.to API</a> - to dynamically build the blog.</li>
<li><a href="https://www.framer.com/motion">Framer Motion</a> - to add slick and beautiful animations.</li>
</ul>
<h2>Things I'll improve</h2>
<ul>
<li>Add a custom domain name</li>
<li>Add my resume</li>
<li>Add Canonical URLs to my blog page</li>
</ul>
<h2>Preview</h2>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g8lsqqgt7gyys8fjrsp.png" alt="blog"></p>


<p>I have created multiple portfolio website templates using ChakraUI and React. You can check my previous posts for different portfolio templates. <br>
My own portfolio <a href="https://mahmad.me" target="_blank" rel="noopener noreferrer">mahmad.me</a> is built using ChakraUI. <br>
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 Dev.to as a CMS.  </p>

<p>Github Repo: <a href="https://github.com/MA-Ahmad/mahmad.me" target="_blank" rel="noopener noreferrer">https://github.com/MA-Ahmad/mahmad.me</a><br>
Live Demo: <a href="https://mahmad-me.vercel.app" target="_blank" rel="noopener noreferrer">https://mahmad-me.vercel.app</a></p>

<h2>
  <a name="technologies-used" href="#technologies-used">
  </a>
  Technologies used
</h2>

<ul>
<li>
<a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a> -  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.</li>
<li>
<a href="https://www.typescriptlang.org" target="_blank" rel="noopener noreferrer">TypeScript</a> - 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.</li>
<li>
<a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a> - 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.</li>
<li>
<a href="https://docs.dev.to/api">Dev.to API</a> - to dynamically build the blog.</li>
<li>
<a href="https://www.framer.com/motion" target="_blank" rel="noopener noreferrer">Framer Motion</a> - to add slick and beautiful animations.</li>
</ul>

<h2>
  <a name="things-ill-improve" href="#things-ill-improve">
  </a>
  Things I'll improve
</h2>

<ul>
<li>Add a custom domain name</li>
<li>Add my resume</li>
<li>Add Canonical URLs to my blog page</li>
</ul>

<h2>
  <a name="preview" href="#preview">
  </a>
  Preview
</h2>

<p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g8lsqqgt7gyys8fjrsp.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g8lsqqgt7gyys8fjrsp.png" alt="blog" loading="lazy"></a></p>



I have created multiple portfolio website templates using ChakraUI and React. You can check my previous posts for different portfolio templates. 
My own portfolio [mahmad.me](https://mahmad.me) 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 Dev.to as a CMS.  

Github Repo: https://github.com/MA-Ahmad/mahmad.me
Live Demo: https://mahmad-me.vercel.app

## Technologies used
* [Tailwind CSS](https://tailwindcss.com) -  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](https://www.typescriptlang.org) - 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](https://nextjs.org) - 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.
* [Dev.to API](https://docs.dev.to/api) - to dynamically build the blog.
* [Framer Motion](https://www.framer.com/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

## Preview
![blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g8lsqqgt7gyys8fjrsp.png)

I have created multiple portfolio website templates using ChakraUI and React. You can check my...

Let's create a portfolio website using Dev.to as a CMS

Technologies used

Things I'll improve

Preview