<p><strong>Demo Link:</strong> <a href="https://mahmad.me">Portfolio</a>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/portfolio">Repo</a></p>
<h1>Pages</h1>
<ul>
<li>Home Page</li>
<li>Intro</li>
<li>Highlights</li>
<li>Achievements</li>
<li>Projects</li>
<li>Achievements</li>
<li>Show progress yearly wise</li>
<li>About</li>
<li>Career</li>
<li>Education</li>
<li>Open-source</li>
<li>open-source repositories list (card design)</li>
<li>Blog</li>
<li>Published articles list</li>
</ul>
<h1>Built with</h1>
<ul>
<li>Programming language - <a href="https://www.typescriptlang.org/">Typescript</a></li>
<li>Front-end library - <a href="https://reactjs.org/">Reactjs</a></li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a></li>
<li>Animation library - <a href="https://www.framer.com/motion/">Framer Motion</a></li>
<li>Images placeholder - <a href="https://www.framer.com/motion/">blurhash</a></li>
<li>Progressive image loading - <a href="https://github.com/FormidableLabs/react-progressive-image">react-progressive-image</a></li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a></li>
</ul>
<hr>
<h1>Update</h1>
<h5><a href="https://mahmad.me/#/open-source">Open-source page</a></h5>
<ul>
<li>Used github rest api to fetch user repositories</li>
<li>Updated page design with react-stack-grid</li>
<li>Used loading skeleton</li>
</ul>


<p><strong>Demo Link:</strong> <a href="https://mahmad.me">Portfolio</a><br>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/portfolio">Repo</a></p>

<h1>
  <a name="pages" href="#pages">
  </a>
  Pages
</h1>

<ul>
<li>Home Page

<ul>
<li>Intro</li>
<li>Highlights</li>
<li>Achievements</li>
<li>Projects</li>
</ul>


</li>
<li>Achievements

<ul>
<li>Show progress yearly wise</li>
</ul>


</li>
<li>About

<ul>
<li>Career</li>
<li>Education</li>
</ul>


</li>
<li>Open-source

<ul>
<li>open-source repositories list (card design)</li>
</ul>


</li>
<li>Blog

<ul>
<li>Published articles list</li>
</ul>


</li>
</ul>

<h1>
  <a name="built-with" href="#built-with">
  </a>
  Built with
</h1>

<ul>
<li>Programming language - <a href="https://www.typescriptlang.org/">Typescript</a>
</li>
<li>Front-end library - <a href="https://reactjs.org/">Reactjs</a>
</li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a>
</li>
<li>Animation library - <a href="https://www.framer.com/motion/">Framer Motion</a>
</li>
<li>Images placeholder - <a href="https://www.framer.com/motion/">blurhash</a>
</li>
<li>Progressive image loading - <a href="https://github.com/FormidableLabs/react-progressive-image">react-progressive-image</a>
</li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a>
</li>
</ul>


<hr>

<h1>
  <a name="update" href="#update">
  </a>
  Update
</h1>

<h5>
  <a name="opensource-page" href="#opensource-page">
  </a>
  <a href="https://mahmad.me/#/open-source">Open-source page</a>
</h5>

<ul>
<li>Used github rest api to fetch user repositories</li>
<li>Updated page design with react-stack-grid</li>
<li>Used loading skeleton</li>
</ul>



**Demo Link:** [Portfolio](https://mahmad.me)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/portfolio)

# Pages
- Home Page
 - Intro
 - Highlights
  - Achievements
 - Projects
- Achievements
 - Show progress yearly wise
- About
 - Career
 - Education
- Open-source
 - open-source repositories list (card design)
- Blog
 - Published articles list

# Built with
- Programming language - [Typescript](https://www.typescriptlang.org/)
- Front-end library - [Reactjs](https://reactjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Animation library - [Framer Motion](https://www.framer.com/motion/)
- Images placeholder - [blurhash](https://www.framer.com/motion/)
- Progressive image loading - [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

---

# Update
##### [Open-source page](https://mahmad.me/#/open-source)
* Used github rest api to fetch user repositories
* Updated page design with react-stack-grid
* Used loading skeleton

Demo Link: Portfolio GitHub Repo: Repo           Pages    Home...

Create a beautiful personal website with react, ChakraUi and framerMotion

Pages

Built with

Update

Open-source page