Steps to build a portfolio website using Next.js and Tailwind with Dark Mode Support.
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
Next.js and Tailwind Configuration
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.
Creating Navigation Section
Create a 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.
Creating Footer Section
To add a Footer with social links, Create a Footer.js file in the components folder and add the below code:
Add the Footer.js
component to _app.js
file as below
About Component
Create 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:
Dark Mode Support
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:
Add 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 enableSystem=false
Change darkMode
option to class
in 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:
Light Mode
Dark Mode
Deploying in Vercel
You can deploy your portfolio in Vercel within 2 steps as below:
- Create a Vercel Account
- Connect your repository and click deploy.
Conclusion
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.
You can support me by buying me a coffee ☕
eBook
Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples
ReactJS Optimization Techniques and Development Resources
Twitter Realtime Followers Count
More Blogs
- Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
- 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
Top comments (3)
Looking good!
I built my personal website with this exact setup a few months ago:
thomasledoux.be
Amazing work!
Can you extend this tutorial to create the portfolio exactly like yours ?
Some comments have been hidden by the post's author - find out more