Build your porfolio using Next.jS and TailwindCSS

Introduction

Building a portfolio website can be a great way to showcase your work and skills to potential employers or clients. In this article, we will go over how to build a portfolio website using Next.js and TailwindCSS.

Setup

First, you will need to have Node.js and npm (Node Package Manager) installed on your computer. If you don't have these already, you can download them from the official website Nodejs.

Next, create a new directory for your project and navigate to it in the terminal. Run the following command to create a new Next.js app:

> npx create-next-app@latest my-portfolio --eslint
> cd my-portfolio

This will create a new directory with the basic structure for a Next.js app.

To use TailwindCSS with your project, you will need to install it using npm. In the terminal, navigate to the root of your project and run the following command:

> npm install -D tailwindcss postcss autoprefixer

After it is installed, you will need to create a new CSS file in the "styles" directory and import TailwindCSS. You can do this by running the following command in the terminal:

> npx tailwindcss init -p

This will create a new "tailwind.config.js" and "postcss.config.js" file in the root of your project, and a new "styles/tailwind.css" file. You can use this file to customize your Tailwind configuration, if desired.

Next, add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

After this add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, you can import this CSS file in your pages or components. In the "pages/_app.js" file, you can import the CSS file and apply it to the whole application.

import "../styles/globals.css"

Finally to start your build process of the project run the following code in you project's root directory

npm run dev

You can now start building your portfolio website using Next.js and TailwindCSS. Use the built-in Next.js components like "Link" and "Head" to create a navigation menu and page titles. Use TailwindCSS classes to style your elements and create a consistent look and feel throughout your website.

Finally, you can deploy your website to a hosting service like Vercel or Netlify. These services will automatically build and deploy your website when you push changes to your git repository.