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:

1. Create a Vercel Account
2. 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

Twiter Stats

More Blogs

1. Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
2. 10 React Packages with 1K UI Components
3. No More ../../../ Import in React
4. Redux Toolkit – The Standard Way to Write Redux
5. 5 Packages to Optimize and Speed Up Your React App During Development
6. How To Use Axios in an Optimized and Scalable Way With React
7. 15 Custom Hooks to Make your React Component Lightweight
8. 10 Ways to Host Your React App For Free
9. How to Secure JWT in a Single-Page Application
10. Redux Auth Starter: A Zero Config CRA Template