In this tutorial, I will walk you through the process of creating a stunning portfolio website using Vite JS. Vite is a build tool that focuses on fast builds and instant hot module replacement, making it perfect for developing and showcasing your web development projects.
To begin, make sure you have Node.js installed on your computer. You can download it from the official website if you don’t already have it installed.
- Create a new Vite project
To create a new Vite project, open your terminal and run the following command:
npm init vite@latest my-stunning-portfolioThis will create a new Vite project in a directory named my-stunning-portfolio. Navigate to the project directory using the cd command:
cd my-stunning-portfolio- Install dependencies
Next, install the dependencies required for building the project:
npm install- Set up the project structure
Create a new folder namedsrcinside the project directory. This folder will contain all the source files for your portfolio website. Within thesrcfolder, create a new file namedindex.htmland add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Stunning Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
</body>
</html>- Create the main JavaScript file
Inside thesrcfolder, create a new file namedmain.jsand add the following code:
console.log("Hello, world!");- Update the Vite config file
Open thevite.config.jsfile in the project directory and update it with the following configuration:
import { defineConfig } from 'vite';
export default defineConfig({
root: 'src',
});- Run the development server
To start the development server and preview your portfolio website, run the following command:
npm run devThis will start the development server on http://localhost:3000. Open your web browser and navigate to this URL to see your portfolio website.
- Customize your portfolio
Now that you have set up the basic structure of your portfolio website, it’s time to customize it with your own content and design. You can add HTML elements, CSS styles, and JavaScript functionality to make your portfolio unique and engaging.
I hope this tutorial has helped you get started with creating a stunning portfolio website using Vite JS. Have fun coding and showcasing your web development projects! 🚀
Nice 🎉🎉
Very good