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: NextPortfolio
GitHub Repo: Repo

Skills

screen1

Open source projects

screen2

screen3

Developer story

screen4

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

Discussion (25)

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 Author

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
lewiskori profile image
Lewis kori

This is amazing.
I ♥ next.js and chakra

Collapse
m_ahmad profile image
Muhammad Ahmad Author

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 Author • Edited on

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 Author

Thank you Ali.

Collapse
karthiknayak98 profile image
KarthikNayak

Amazing..

Collapse
m_ahmad profile image
Muhammad Ahmad Author

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 Author

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 Author

Thank you.

Collapse
dev_emmy profile image
nshimiye_emmy

this is great mn congraturations

Collapse
m_ahmad profile image
Muhammad Ahmad Author

Glad you liked it.

Collapse
anshuman1307 profile image
anshuman1307

Looks stunning.

Could you please let me know how to remove the blue border on close and menu buttons.

Collapse
m_ahmad profile image
Muhammad Ahmad Author • Edited on

Thank you.
You can remove it by installing focus-visible package.
You can also take help from my previous portfolio code.
Github Repo
Demo

Collapse
mayhs19 profile image
Shyam Sunder VR

This is pretty awesome. Nice work !!

Collapse
m_ahmad profile image
Muhammad Ahmad Author

Thanks

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