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

Discussion (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 Author

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 Author

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
zakiazfar 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 Author

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 Author

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 Author

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 Author

Thank you Andrew

Collapse
ismaildinar profile image
ismail-dinar

I love it. Great work

Collapse
m_ahmad profile image
Muhammad Ahmad Author

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 Author

Thank you Ali

Collapse
danielkrupnyy profile image
Daniel Krupnyy

Clean and minimalistic portfolio. I like it!

Collapse
m_ahmad profile image
Muhammad Ahmad Author

Thank you Daniel