Muhammad Ahmad

Posted on Jun 20, 2021 • Edited on Jul 29, 2023

Create professional portfolio website with Nextjs and ChakraUI

#nextjs #webdev #react #chakraui

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
UI components - Chakra UI
Icons - react icons

Demo Link: Portfolio
GitHub Repo: Repo

Skills

Open source projects

Developer story

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

Build Portfolio website with React and ChakraUi

Muhammad Ahmad ・ Apr 3 '21

#webdev #react #javascript #productivity

Top comments (31)

max • Jun 22 '21

Pretty neat overall. Got a little bug : In developper sotry I got some scrollbar (both horizontal & vertical) in each story.

Here's what it looks like :

Here's my config :

I'm on Chrome beta.

Hope it helps ;)

Cheers

Muhammad Ahmad • Jun 22 '21

Glad you liked it.
I'll fix this issue soon.

Mayank K • Jul 17 '21

I too found it out and was checking how to fix it

Mayank K • Aug 19 '21

Is this fixed

Akshat202002 • Jul 28 '23

can you update your app to chakra v2

Muhammad Ahmad • Aug 5 '23 • Edited

@akshat202002
I have updated the majority of npm packages to their latest versions. You can now use node v16.x.
For node versions 18 and 19, try to run this command export NODE_OPTIONS=--openssl-legacy-provider, but this is a temporary solution and not recommended.

Muhammad Ahmad • Jul 29 '23

@akshat202002 Are you facing any issues on chakraUI v2?

Akshat202002 • Jul 30 '23

yeah I've having trouble with node v18 as well as other dependencies

Muhammad Ahmad • Jul 30 '23

Alright.
Currently, I'm busy with other projects. I'll upgrade it to latest chakra version soon.

Lewis kori • Jun 21 '21

This is amazing.
I ♥ next.js and chakra

Muhammad Ahmad • Jun 21 '21

Glad you liked it.
Great work by the creators of next.js and chakraUi.

Mayank K • Jul 17 '21

Is there any step by step guide for this? I was checking how i can start from basic create-next-app and then start building something like this.

Muhammad Ahmad • Jul 17 '21 • Edited

No.
But you can follow these steps to create a site like this.

Create basic Next app.
Install ChakraUI and other related packages
First start with nav-bar component. Create nav-bar.
Then create home page component
Similarly create other pages one by one

Mayank K • Jul 17 '21

Got it. Thanks I will follow the steps

Ali • Jun 26 '21

Great work man.

Muhammad Ahmad • Jun 26 '21

Thank you Ali.

KarthikNayak • Jun 24 '21

Amazing..

Muhammad Ahmad • Jun 25 '21

Thank you.

Siarhei Siniak • Jun 21 '21

do you use a custom domain for a portfolio website?

Muhammad Ahmad • Jun 21 '21

Yes. I'm using custom domain for my portfolio-website but it is built with react. I'll migrate it from react to Nextjs.

Siarhei Siniak • Jun 21 '21

i've few issues with web search indexing. I've checked your website with site:mahmad.me. It seems that your blog post links are not indexed, only some general caption for the website. Is that ok?