Unveiling My Impressive Portfolio Crafted with Vite JS 🚀 | Coding With Saim

Posted by


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.

  1. 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-portfolio

This 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
  1. Install dependencies
    Next, install the dependencies required for building the project:
npm install
  1. Set up the project structure
    Create a new folder named src inside the project directory. This folder will contain all the source files for your portfolio website. Within the src folder, create a new file named index.html and 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>
  1. Create the main JavaScript file
    Inside the src folder, create a new file named main.js and add the following code:
console.log("Hello, world!");
  1. Update the Vite config file
    Open the vite.config.js file in the project directory and update it with the following configuration:
import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
});
  1. Run the development server
    To start the development server and preview your portfolio website, run the following command:
npm run dev

This will start the development server on http://localhost:3000. Open your web browser and navigate to this URL to see your portfolio website.

  1. 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! 🚀

0 0 votes
Article Rating
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@blink7412
1 month ago

Nice 🎉🎉

@blink7412
1 month ago

Very good