DEV Community

Cover image for Build Portfolio website with React and ChakraUi
Muhammad  Ahmad
Muhammad Ahmad

Posted on • Updated on

Build Portfolio website with React and ChakraUi

Pages

  • About
    • Skills
    • Career
    • Education
  • Articles
    • Blog posts
  • Open-source
    • open-source repositories list
  • Projects

Built with

Demo Link: Portfolio
GitHub Repo: Repo


Updated Portfolio website

Portfolio website 2

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

Demo Link: Portfolio
GitHub Repo: Repo

Update

Open-source page
  • Used github rest api to fetch user repositories
  • Updated page design with react-stack-grid
  • Used skeleton to show loading

Top comments (19)

Collapse
 
zablon18 profile image
Fernando Zablah

Hi Muhammad,

Great portfolio! I Will definitely check out Chakra UI for future projects.
One question, I like your avatar of your profile pic, did someone made it for you? Or did you used some app/online service to create it?

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Fernando.
I downloaded it from a website. There are different avatars websites where you can find such avatars.

Collapse
 
karthiknayak98 profile image
KarthikNayak

Can you tell which website?

Thread Thread
 
m_ahmad profile image
Muhammad Ahmad

I don't remember the link right now but I'll update you if I find it.

Thread Thread
 
karthiknayak98 profile image
KarthikNayak

Sure

Collapse
 
mohdahmad1 profile image
Mohd Ahmad

Hi Muhammad,

Your portfolio looks nice. Chakra UI is great, but have you tried TailwindCSS it gives you more flexibility.

BTW my name is Muhammad Ahmad too, from India, I had great pleasure after seeing Muslims are getting into the CS field.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thanks. Yes, I tried Tailwindcss but I didn't use it frequently. No doubt, Tailwindcss is great.
React + ChakraUI combination helps me to build products very fast.

Collapse
 
rayvikram profile image
rayvikram

Great. Is there any code Or component where I can get layout (sidebar, etc) Like ANTD or material UI.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you.
If you are asking for ChakraUi then yes. There are different sites where you can copy code for different components.

Collapse
 
cdthomp1 profile image
Cameron Thompson

Hello Muhammad,
I really like your portfolio, super nice and clean! Great work!

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice very slick with both the light and dark themes.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Andrew

Collapse
 
ismaildinar profile image
ismail-dinar

I love it. Great work

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Ismail

Collapse
 
alitahashakir profile image
Ali Taha Shakir

Hi Ahmad, nice work on your site, the design is great and I liked the animations.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Ali

Collapse
 
danielkrupnyy profile image
Daniel Krupnyy

Clean and minimalistic portfolio. I like it!

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Daniel