You can build a portfolio like mine after reading this article.
A portfolio is a place where you can showcase all your skills to the world. As a developer, you really need a portfolio to showcase your projects, blogs, and much more.
But why do we need to build a portfolio with Next.js? We all know next.js is react framework with out-of-box performance. So you are not required to worry about your portfolio performance. Everything is taken care of by next.js and Vercel. Let's get into action
We can configure tailwind with next.js with a single command. As below:
npx create-next-app -e with-tailwindcss your-portfolio-name
The above command automatically configures your Tailwind setup based on the official Next.js example.
Once the installation is completed navigate to your project folder using
cd your-portfolio-name and start the dev server using
yarn dev command. You can see the below page if you hit
http://localhost:3000 in the browser.
components folder in the root directory to add your portfolio components. Create a file called
Navigation.js and add the below code:
The navigation component is the header section of your portfolio. In the above code, you can see
dark: class to support dark mode. Add the
Navigation component to
_app.js file as below. MyApp component is used to initialize pages.
To add a Footer with social links, Create a Footer.js file in the components folder and add the below code:
Footer.js component to
_app.js file as below
About.js file inside components folder and add the below code:
I just added some dummy texts above for the demo. Include your profile image from the public folder as above. Placeholder
blur prop in image component is to add loading effects. Import
About component to
index.js file as below:
I have removed the older template code and added the above code. Now your portfolio looks like below:
Now let's add dark mode to our portfolio. Adding dark mode is very simple. Create
ThemeSwitch component to add a toggle switch to toggle between Dark Mode and Light Mode.
To support Dark Mode in Next.js we need to add
next-themes package to our dependency. Now import
useTheme from next-theme to ThemeSwitch Component as below:
ThemeSwitch Component to
Navigation component and include
next-themes ThemeProvider in
_app.js as below:
attribute=class is to enable dark and light mode manually. I have disabled system preference by
darkMode option to
tailwind.config.js file to toggle dark mode manually instead of relying on the operating system preference.
After the above changes, our portfolio looks like below:
You can deploy your portfolio in Vercel within 2 steps as below:
- Create a Vercel Account
- Connect your repository and click deploy.
You can add multiple pages like projects, blogs by creating new files inside the pages folder. I hope you have found this useful.
Thank you for reading.
Get more updates on Twitter.
- 10 React Packages with 1K UI Components
- No More ../../../ Import in React
- Redux Toolkit - The Standard Way to Write Redux
- 5 Packages to Optimize and Speed Up Your React App During Development
- How To Use Axios in an Optimized and Scalable Way With React
- 15 Custom Hooks to Make your React Component Lightweight
- 10 Ways to Host Your React App For Free
- How to Secure JWT in a Single-Page Application
- Redux Auth Starter: A Zero Config CRA Template