Build a Modern Portfolio Website with React, Vite, and Tailwind CSS

This article walks you through creating a sleek, modern portfolio website from scratch using React, Vite, and Tailwind CSS. This guide is designed to be beginner-friendly, so even if you’re new to these technologies, you’ll be able to follow along and build your own impressive online portfolio. An accompanying video walks through the full process.

This tutorial covers building a visually appealing and responsive portfolio website using modern web development tools. You’ll learn how to set up your project with Vite, structure your components in React, and style everything with Tailwind CSS. The result will be a dynamic, scrollable website with a fixed image section, showcasing your skills and projects in a professional and engaging way.

Getting Started with Vite

Vite is a blazing-fast build tool that significantly speeds up the development process, especially when working with React. Unlike traditional build tools that can take a while to compile changes, Vite offers near-instant updates, making it a joy to work with.

To begin, navigate to your desired project directory in your terminal. Then, use the following command to create a new Vite project:

npm create vite@latest

The command will prompt you for a project name. Let’s call it "personal-portfolio". Next, select "React" as your framework and "TypeScript" as your variant. Once these selections are made, Vite will scaffold a new project with the necessary files and configurations.

Project Setup and Structure

After the project is created, navigate into the "personal-portfolio" directory using the cd personal-portfolio command. Then, install the project dependencies with:

npm install

Once the dependencies are installed, you can open the project in your code editor. Visual Studio Code is popular; you can open it from the terminal using the command code ..

Now, let’s take a quick tour of the project structure:

• **public/:** This folder houses static assets like images, logos, and other files that don’t require processing by Vite.
• **src/:** This is where the majority of your code will reside. It contains the following:
  • **assets/:** This folder can be used to store images and other assets specific to your components.
  • **app.css:** This is the main CSS file where global styles are defined.
  • **app.tsx:** This is the root component of your application, the entry point for rendering your UI.
  • **index.css:** This file applies styles to the main HTML file.
  • **main.tsx:** This file initializes the React application and mounts it to the DOM.
• **index.html:** This is the main HTML file that serves as the entry point for your application. Vite injects the React application into this file.
• **package.json:** This file contains metadata about your project, including dependencies, scripts, and version information.
• **tsconfig.json:** This file configures the TypeScript compiler options.

## Running the Development Server To start the development server, use the following command in your terminal: npm run dev Vite will start a development server, and you’ll see a URL in the terminal (usually `http://localhost:5173/`). Open this URL in your browser to view your application. Any changes you make to your code will be reflected in the browser almost instantly, thanks to Vite’s hot module replacement (HMR) feature. ## Basic React Structure The `app.tsx` file is the heart of your React application. It contains the main component that renders the initial UI. You can modify this file to start building your portfolio website. Let’s clear out the default content and add a simple heading: typescript function App() { return ( <div> <h1>My Portfolio</h1> </div> ); } export default App; Save the file, and you should see “My Portfolio” displayed in your browser. This confirms that your React application is running correctly. ## Tailwind CSS Integration Tailwind CSS is a utility-first CSS framework that allows you to style your application directly in your HTML using pre-defined utility classes. To integrate Tailwind CSS into your Vite project, you’ll need to install the necessary packages and configure Tailwind. First, install Tailwind CSS and its peer dependencies: npm install -D tailwindcss postcss autoprefixer Next, generate the `tailwind.config.js` and `postcss.config.js` files: npx tailwindcss init -p This command creates two files: `tailwind.config.js`, which is used to configure Tailwind CSS, and `postcss.config.js`, which is used to configure PostCSS. Open the `tailwind.config.js` file and configure the `content` array to include the files where you’ll be using Tailwind CSS classes: javascript /** @type {import(‘tailwindcss’).Config} */ module.exports = { content: [ “./index.html”, “./src/**/*.{js,ts,jsx,tsx}”, ], theme: { extend: {}, }, plugins: [], } Finally, add the Tailwind CSS directives to your `index.css` file: css @tailwind base; @tailwind components; @tailwind utilities; Now, you can start using Tailwind CSS classes in your React components. For example, let’s style the heading in `app.tsx`: typescript function App() { return ( <div className=”flex items-center justify-center h-screen bg-gray-100″> <h1 className=”text-4xl font-bold text-gray-800″>My Portfolio</h1> </div> ); } export default App; Save the file, and you should see the heading styled with Tailwind CSS classes, centered on the screen with a gray background.

## Key Takeaways

• Vite provides a fast and efficient build tool for React applications.
• The project structure includes `public/`, `src/`, `index.html`, and configuration files.
• Tailwind CSS can be easily integrated to style your application with utility classes.
• `npm run dev` starts the development server with hot module replacement.

## FAQ ### What is Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It’s known for its lightning-fast cold start and hot module replacement (HMR). ### Why use Tailwind CSS? Tailwind CSS is a utility-first CSS framework that allows you to rapidly style your web applications without writing custom CSS. It promotes consistency and maintainability. ### How do I add images to my project? Place your images in the `public/` or `src/assets/` directory. You can then reference them in your components using relative paths. ### Can I use other CSS frameworks with React and Vite? Yes, while this tutorial focuses on Tailwind CSS, you can use other CSS frameworks like Bootstrap or Material-UI with React and Vite. The setup process will vary depending on the framework. ### Where can I learn more about React? The official React documentation is a great resource for learning React concepts and best practices: https://react.dev/ By following these steps, you’ve successfully set up a React project with Vite and integrated Tailwind CSS. You’re now ready to start building your modern portfolio website, adding components, styling them with Tailwind CSS, and showcasing your skills and projects to the world. Remember to consult the documentation for both React and Tailwind CSS as you continue to develop your portfolio.

Credit: Creator

Credit: Writer

Credit: Reviewer