DEV Community

Wen Long
Wen Long

Posted on

Beautiful Portfolio Website with NextJS & ChakraUI

Image description

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

Watch the video

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 descriptionImage descriptionImage descriptionImage descriptionImage description
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 descriptionImage descriptionImage descriptionImage descriptionImage descriptionImage description

Mobile-responsive

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

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! 🧀

Top comments (0)