Beautiful Portfolio Website with NextJS & ChakraUI



Live Demo on Portfolio Website

After more than 2 months working in React Native, I was roughly understand how React works. Then, an idea came to my mind, why don’t I build myself a personal portfolio? It was a great thing to built to showcase all my skills and even good for presenting myself.

But mobile apps seems a bit burden as not everyone willing to download and install the apps into their phone just to understand your work right? People usually just want a click to reach their destination. Hence, website is my 1st choice!

Tech Stack

  1. NextJS — popular React framework that offers many benefits without complex configuration.
  2. ChakraUI — beautiful and simple UI components library
  3. framer-motion — easy-to-use animation library for React
  4. Spotify Now Playing integration
  5. EmailJS — email service that send email directly with custom template.
  6. Vercel — platform used for deployment

Showcase (Dark Mode)

Here is some of the screenshot for the features.

Of course, with Chakra UI, it is very easy to setup both light & dark mode by using useColorModeValue(). (personally prefer dark mode).

Screenshot (Light Mode)


Also, I tried hard to cater all the screens to be mobile-responsive. Here is some screenshots to show.


It is my 1st time working on web development. My experience was amazing with all these beautiful UI and animation. The challenges I faced was screen size responsive. I work on many different solutions and eventually obtain the best value for each components.

Do give me any feedback if I made any mistakes in this project. But overall, I think it is a good practices for me as a developer and programmer to keep myself passionate on develop something for either myself or the community.

Thanks for your time in reading this. and let’s meet in the next article! 🧀




Android Dev and Kotlin Lover, Currently learning React Native and planning to do more on Mobile Dev 🚀

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

LeetCode — Remove Duplicates from Sorted list

Custom Preloading Strategy in Angular

Getting the class in static methods

Hey, this is my first blog🖐

How to exit/break from a Javascript looping

Enhance Your Prismic + Gatsby Site with a Table of Contents

A sign on a wooden fence says ‘This Way’ and points to the right

What is Sails.js and what’s new with the upcoming 1.0 version

Top 5 Features for Salesforce Lightning Developer in Winter’21 Release #BeReleaseReady

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Android Dev and Kotlin Lover, Currently learning React Native and planning to do more on Mobile Dev 🚀

More from Medium

Build Instagram login page with Next.js and TailwindCSS (all articles)

Add SEO Friendly headers to your NextJs project.

Code a blog with and Next.js

code a blog in next.js and Sanity as a CMS by Sabir Hussain

Next.js vs React: A complete Comparison Guidance in 2022 | Optymize