<p>Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my portfolio website with Nextjs. And I really loved it. It was so easy to recreate my portfolio website with Nextjs.
So far I'm using some of Nextjs features.</p>
<h1>Built with</h1>
<ul>
<li>React Framework - <a href="https://nextjs.org/">Nextjs</a></li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a></li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a></li>
</ul>
<blockquote>
<p><strong>Demo Link:</strong> <a href="https://my-portfolio-ma-ahmad.vercel.app">NextPortfolio</a>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/myPortfolio">Repo</a></p>
</blockquote>
<h3>Skills</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy9nhrh697g1czkbfy1z.png" alt="screen1"></p>
<h3>Open source projects</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r98v94u1cidrf1ycq33.png" alt="screen2"></p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xel2ey7j60u5q7psjxmj.png" alt="screen3"></p>
<h3>Developer story</h3>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6srfuga2owd9xk32cu1.png" alt="screen4"></p>
<p>Note: I have already created this website with reactjs and chakraUI.</p>
<p>{% link https://dev.to/m_ahmad/portfolio-website-template-built-with-react-and-chakraui-15ok %}</p>


<p>Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my portfolio website with Nextjs. And I really loved it. It was so easy to recreate my portfolio website with Nextjs. <br>
So far I'm using some of Nextjs features.</p>
<h1>
  <a name="built-with" href="#built-with">
  </a>
  Built with
</h1>

<ul>
<li>React Framework - <a href="https://nextjs.org/">Nextjs</a>
</li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a>
</li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a>
</li>
</ul>

<blockquote>
<p><strong>Demo Link:</strong> <a href="https://my-portfolio-ma-ahmad.vercel.app">NextPortfolio</a><br>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/myPortfolio">Repo</a></p>
</blockquote>
<h3>
  <a name="skills" href="#skills">
  </a>
  Skills
</h3>

<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--8pJP6Emi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy9nhrh697g1czkbfy1z.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--8pJP6Emi--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy9nhrh697g1czkbfy1z.png" alt="screen1" loading="lazy"></a></p>
<h3>
  <a name="open-source-projects" href="#open-source-projects">
  </a>
  Open source projects
</h3>

<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_9WnZQVy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r98v94u1cidrf1ycq33.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_9WnZQVy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r98v94u1cidrf1ycq33.png" alt="screen2" loading="lazy"></a></p>

<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4HjCFh51--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xel2ey7j60u5q7psjxmj.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4HjCFh51--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xel2ey7j60u5q7psjxmj.png" alt="screen3" loading="lazy"></a></p>
<h3>
  <a name="developer-story" href="#developer-story">
  </a>
  Developer story
</h3>

<p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DG48pyhw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6srfuga2owd9xk32cu1.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DG48pyhw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6srfuga2owd9xk32cu1.png" alt="screen4" loading="lazy"></a></p>

<p>Note: I have already created this website with reactjs and chakraUI.</p>


<div class="ltag__link">
  <a href="/m_ahmad" class="ltag__link__link">
    <div class="ltag__link__pic">
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vrvEKvHu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--iCCO7GRa--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/370400/bda2fd3e-cb65-4abb-81e6-1f50edf567dd.png" alt="m_ahmad" loading="lazy">
    </div>
  </a>
  <a href="/m_ahmad/portfolio-website-template-built-with-react-and-chakraui-15ok" class="ltag__link__link">
    <div class="ltag__link__content">
      <h2>Build Portfolio website with React and ChakraUi</h2>
      <h3>Muhammad  Ahmad ・ Apr 3 ・ 1 min read</h3>
      <div class="ltag__link__taglist">
        <span class="ltag__link__tag">#webdev</span>
        <span class="ltag__link__tag">#react</span>
        <span class="ltag__link__tag">#javascript</span>
        <span class="ltag__link__tag">#productivity</span>
      </div>
    </div>
  </a>
</div>




Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my portfolio website with Nextjs. And I really loved it. It was so easy to recreate my portfolio website with Nextjs. 
So far I'm using some of Nextjs features.

# Built with
- React Framework - [Nextjs](https://nextjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

> **Demo Link:** [NextPortfolio](https://my-portfolio-ma-ahmad.vercel.app)
> **GitHub Repo:** [Repo](https://github.com/MA-Ahmad/myPortfolio)

### Skills
![screen1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xy9nhrh697g1czkbfy1z.png)

### Open source projects
![screen2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r98v94u1cidrf1ycq33.png)

![screen3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xel2ey7j60u5q7psjxmj.png)

### Developer story
![screen4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6srfuga2owd9xk32cu1.png)

Note: I have already created this website with reactjs and chakraUI.

{% link https://dev.to/m_ahmad/portfolio-website-template-built-with-react-and-chakraui-15ok %}






Currently, I'm learning Nextjs and Typescript. And for learning perspective I decided to rebuilt my...

Create professional portfolio website with Nextjs and ChakraUI

Built with

Skills

Open source projects

Developer story