Beautiful Portfolio Website with NextJS & ChakraUI
Tags: nextjs, chakraui, react, framermotion
Published: 2022-01-04 02:28:05

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r8bduq58c5f0v3urlk8.png)

Website: https://teo-nextjs-portfolio.vercel.app/
Github: https://github.com/WenLonG12345/teo-nextjs-portfolio 

[![Watch the video](https://img.youtube.com/vi/qHkA8ruGz-g/maxresdefault.jpg)](https://youtu.be/qHkA8ruGz-g)

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
- NextJS — popular React framework that offers many benefits without complex configuration.
- ChakraUI — beautiful and simple UI components library
- framer-motion — easy-to-use animation library for React
- Spotify Now Playing integration
- EmailJS — email service that send email directly with custom template.
Vercel — platform used for deployment


## Showcase (Dark Mode)
Here is some of the screenshot for the features.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn06gil6u3hwwd8afh0e.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt395k1q2onjywc2dtok.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arn6qg559hqhga39v1bg.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv2u46lbgqq9k92b3f71.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79maxpv27j44pbfyl563.png)
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)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ch3yh6a7c3dmqiguzoyn.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8h92igiu80nkfiqr3e3.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu18jx3zl140w66zdquf.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nitjcwnj61yekc925n9.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wshj4o7up4h451pcyji.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ioibu2tpwxqo97iogp5.png)

## Mobile-responsive
Also, I tried hard to cater all the screens to be mobile-responsive. Here is some screenshots to show.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a63jon28lvbrhjuxvzh8.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2po55y120xn7zx2gskl0.png)
  
## Conclusion
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! 🧀