Nilanth

Posted on Aug 27, 2021 • Updated on Apr 22, 2023 • Originally published at betterprogramming.pub

Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support

#react #nextjs #javascript #webdev

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: