How to create a portfolio website using Next.js, Chakra UI and Framer Motion February 15, 2022
For the construction of my website, I choose to use and discover Next.js for its ease of use to create a Single Page Application, for a portfolio it is just excellent!
As I was browsing Youtube to learn more about the React framework, I came across a youtuber named Takuya Matsuyama who is a full-stack developer based in Japan. It is from his video worthy of a relaxing cooking show that I wanted to test the stack. Let's see what intrigued me the most during the development.
1 - Setting up the project with Next.JS and Chakra UI
After installing the necessary dependencies, the best practice is to have a well structured project as below.
Pages files
pages
posts
works
React components files
components
layouts
Non-react modules
lib
Static files for images
public
images
It is in the pages folder that there will be our static pages like the main page index.js. Next also has in its component cupboard the built-in component next/tag to add the title of our site and the meta tags that promote natural referencing.
In the layouts folder, the main.js file will help me to better structure the parent components by adding for example the width of my container which will be taken into account in the whole site.
The magic starts then by implementing Chakra UI (_app.js) with its provider specific for Next. Chakra is a component library for React using props to add style, from there, it is now possible to use our components.
2 - Support for dark themes
The addition of the dark theme with Chakra UI is even simpler, it is in the lib file that we have our theme (theme.js). In this file, we will have objects that will have in their fields the css properties (font style, heading, links...).
Then, we initialize the theme by creating a new document with Next (_document.js) so that it takes into account the color mode in the DOM.
3 - Animate page sections with Framer Motion
Framer Motion is a ready-to-use animation library for React from Framer. To animate our components, the library proposes ready-to-use props by giving them css animation values like animate, transiton ...
The best practice for this is to build a component that takes the parameters of how the child component will be animated.
For transitions between pages, Framer offers the AnimatePresence component which animates your parameter back before changing page to give that dynamic effect.
4 - Deploy the website on Vercel
Vercel is the best complete platform to put your work online with Next. Like your github repo with Vercel and deploy it.
I hope you found this article useful. Feel free to check out the github repository below to learn more about this project.
- Repositoryhttps://github.com/eyeschico/portfolio
- StackNext.JS, Chakra UI, Framer Motion