DEV Community

loading...
Cover image for Create professional portfolio website with Nextjs and ChakraUI

Create professional portfolio website with Nextjs and ChakraUI

Muhammad Ahmad
Full Stack Developer. Passionate about Tech.
Updated on ・1 min read

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 (22)

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 Kalbhor

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

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
dev_emmy profile image
nshimiye_emmy

this is great mn congraturations

Collapse
m_ahmad profile image
Muhammad Ahmad Author

Glad you liked it.

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
mayankkalbhor profile image
Mayank Kalbhor

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

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 crate home page component
  • Similarly create other pages one by one
Collapse
mayankkalbhor profile image
Mayank Kalbhor

Got it. Thanks I will follow the steps

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

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

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