DEV Community

Cover image for Create professional portfolio website with Nextjs and ChakraUI
Muhammad  Ahmad
Muhammad Ahmad

Posted on • Updated on

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

Demo Link: Portfolio
GitHub Repo: Repo

Skills

screen1

Open source projects

screen2

screen3

Developer story

screen4

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

Top comments (31)

Collapse
 
youpiwaza profile image
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 :

scrolls

Here's my config :

support details

I'm on Chrome beta.

Hope it helps ;)

Cheers

Collapse
 
m_ahmad profile image
Muhammad Ahmad

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

Collapse
 
mayankkalbhor profile image
Mayank K

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

Thread Thread
 
mayankkalbhor profile image
Mayank K

Is this fixed

Collapse
 
akshat202002 profile image
Akshat202002

can you update your app to chakra v2

Collapse
 
m_ahmad profile image
Muhammad Ahmad • 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.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

@akshat202002 Are you facing any issues on chakraUI v2?

Collapse
 
akshat202002 profile image
Akshat202002

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

Thread Thread
 
m_ahmad profile image
Muhammad Ahmad

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

Collapse
 
lewiskori profile image
Lewis kori

This is amazing.
I ♥ next.js and chakra

Collapse
 
m_ahmad profile image
Muhammad Ahmad

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

Collapse
 
mayankkalbhor profile image
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.

Collapse
 
m_ahmad profile image
Muhammad Ahmad • 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
Collapse
 
mayankkalbhor profile image
Mayank K

Got it. Thanks I will follow the steps

Collapse
 
aligerm profile image
Ali

Great work man.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you Ali.

Collapse
 
karthiknayak98 profile image
KarthikNayak

Amazing..

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you.

Collapse
 
siarhei_siniak_marketing profile image
Siarhei Siniak

do you use a custom domain for a portfolio website?

Collapse
 
m_ahmad profile image
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.

Collapse
 
siarhei_siniak_marketing profile image
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?

Collapse
 
kudoabhijeet profile image
Abhijeet Prasad

amazing 🚀

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thank you.

Collapse
 
dev_emmy profile image
nshimiye_emmy

this is great mn congraturations

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Glad you liked it.

Collapse
 
mayhs19 profile image
Shyam Sunder VR

This is pretty awesome. Nice work !!

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thanks

Some comments have been hidden by the post's author - find out more