Creating a Personal Portfolio Website Using React, Vite, and Tailwind CSS

Building a personal portfolio website is a great way to showcase your skills, projects, and experience to potential employers or clients. In this tutorial, we will be using React, Vite, and Tailwind CSS to create a modern and responsive portfolio website.

Step 1: Set up the project
First, make sure you have Node.js installed on your computer. You can check if Node.js is installed by running the following command in your terminal:

node --version

If Node.js is not installed, you can download and install it from the official website.

Once Node.js is installed, create a new directory for your project and navigate to it in your terminal:

mkdir portfolio-website
cd portfolio-website

Next, initialize a new Node.js project using npm:

npm init -y

Step 2: Install dependencies
Now that we have set up the project, let’s install the dependencies we need for our portfolio website. Run the following command in your terminal:

npm install react react-dom @vitejs/plugin-react tailwindcss@latest postcss@latest autoprefixer@latest

Step 3: Configure Tailwind CSS
Create a new file named tailwind.config.js in the root directory of your project and add the following content:

module.exports = {
  mode: 'jit',
  purge: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Next, create a new file named postcss.config.js in the root directory of your project and add the following content:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Step 4: Create the project structure
Create a new directory named src in the root directory of your project. Inside the src directory, create a new file named index.js and add the following content:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Next, create a new file named index.css in the src directory and add the following content:

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

Step 5: Configure Vite
Create a new file named vite.config.js in the root directory of your project and add the following content:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss('./tailwind.config.js')],
});

Step 6: Start the development server
To start the development server and preview your portfolio website, run the following command in your terminal:

npm run dev

Open your browser and navigate to http://localhost:3000 to see your portfolio website in action.

Step 7: Build your portfolio website
Once you are happy with your portfolio website, you can build it for production by running the following command in your terminal:

npm run build

This will create a dist directory in your project with the optimized production build of your portfolio website.

And that’s it! You’ve now created a personal portfolio website using React, Vite, and Tailwind CSS. Feel free to customize the website further by adding more components, styling, and content to showcase your skills and projects. Happy coding!