Create professional portfolio website with Nextjs and 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

Comments

[max]

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]

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

[Mayank K]

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

[Mayank K]

Is this fixed

[Akshat202002]

can you update your app to chakra v2

[Muhammad Ahmad]

@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]

@akshat202002 Are you facing any issues on chakraUI v2?

[Akshat202002]

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

[Muhammad Ahmad]

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

[Lewis kori]

This is amazing.
I ♥ next.js and chakra

[Muhammad Ahmad]

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

[Mayank K]

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]

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]

Got it. Thanks I will follow the steps

[Ali]

Great work man.

[Muhammad Ahmad]

Thank you Ali.

[KarthikNayak]

Amazing..

[Muhammad Ahmad]

Thank you.

[Siarhei Siniak]

do you use a custom domain for a portfolio website?

[Muhammad Ahmad]

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]

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?

[Abhijeet Prasad]

amazing 🚀

[Muhammad Ahmad]

Thank you.

[nshimiye_emmy]

this is great mn congraturations

[Muhammad Ahmad]

Glad you liked it.

[Shyam Sunder VR]

This is pretty awesome. Nice work !!

[Muhammad Ahmad]

Thanks