Create a New Vite Project with React Template

 Setting up a React + Vite project for building your personal portfolio is a great choice because it provides a fast development environment with modern features. Here's a step-by-step guide to help you set up your React + Vite project and start building your personal portfolio:

Step 1: Create a New Vite Project with React Template

1. Open your terminal (command prompt or terminal in VSCode) and run the following command to create a new Vite project with React template:

   npm create vite@latest my-portfolio --template react
   

   This will create a new folder called my-portfolio with all the necessary files for a React project using Vite.

2. After the project is created, navigate to the project directory:

   cd my-portfolio
   

3. Install the dependencies:

   npm install
   

---

Step 2: Set Up Tailwind CSS (Optional)

If you want to use Tailwind CSS for styling your portfolio (which is highly recommended for quick, responsive, and clean design), follow these steps:

1. Install the required packages for Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   

2. Initialize Tailwind CSS configuration:

   npx tailwindcss init
   

   This will create a tailwind.config.js file.

3. Open tailwind.config.js and set up the content path:

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

4. Create a new CSS file (e.g., src/styles/index.css), and add the following Tailwind directives:

   /* src/styles/index.css */
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

5. Import this CSS file into your src/main.jsx:

   import './styles/index.css';
   

---

Step 3: Start the Development Server

Now that everything is set up, you can run the development server and see your portfolio project in action:

npm run dev

Open your browser and go to http://localhost:3000 to see the default React page.

---

Step 4: Build the Structure of Your Portfolio

Now, let's start building the actual structure of your personal portfolio. Here’s a typical structure for a personal portfolio:

1. Home Section: An introduction to who you are (your name, profession, skills).
2. About Section: More details about your journey, education, and goals.
3. Projects Section: A showcase of your projects (with descriptions and links).
4. Contact Section: Information for contacting you (like email or a contact form).
5. Footer Section: Links to your social media or other important links.

You can divide these sections into different components for a clean and modular structure.

---

Step 5: Create Portfolio Components

Inside the src folder, create the following components:

• Home.jsx — Introduction section
• About.jsx — About section
• Projects.jsx — Projects showcase
• Contact.jsx — Contact form or contact information
• Footer.jsx — Footer with social media links

For example, in src/components/Home.jsx:

function Home() {
  return (
    <section className="h-screen flex items-center justify-center bg-blue-500 text-white">
      <div className="text-center">
        <h1 className="text-4xl font-bold">Hello, I'm Shashankar Ki</h1>
        <p className="mt-4 text-xl">A passionate web developer</p>
      </div>
    </section>
  );
}

export default Home;

Repeat similar steps for the other sections like About, Projects, Contact, etc.

---

Step 6: Layout the Components in App.jsx

In your src/App.jsx, import the components and arrange them in order:

import Home from './components/Home';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';

function App() {
  return (
    <div>
      <Home />
      <About />
      <Projects />
      <Contact />
      <Footer />
    </div>
  );
}

export default App;

---

Step 7: Add Basic Styling and Tailwind Classes

Use Tailwind CSS classes to style your components. For example, in the Home.jsx component, I used h-screen, flex, items-center, justify-center, and other utility classes to center the content vertically and horizontally.

You can also create custom CSS classes in src/styles/index.css for global styles.

---

Step 8: Add Navigation (Optional)

If you want to add navigation to jump to different sections of your portfolio, you can use React Router.

1. Install react-router-dom:

   npm install react-router-dom
   

2. Set up routes and links in your App.jsx file:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Projects from './components/Projects';
import Contact from './components/Contact';
import Footer from './components/Footer';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/projects" element={<Projects />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

---

Step 9: Deploy the Portfolio

Once you're done with your portfolio, you can deploy it to platforms like Netlify, Vercel, or GitHub Pages.

For example, to deploy with Netlify:

1. Push your code to GitHub (if you haven’t already).
2. Go to Netlify and create a new site from GitHub.
3. Follow the steps to deploy, and your portfolio will be live!

---

Conclusion:

By following these steps, you can easily create a React + Vite personal portfolio website with Tailwind CSS (optional) for styling. You'll learn React, Vite, and Tailwind in the process, and you can showcase your skills with a beautiful, modern portfolio.

Let me know if you need help with any specific part of the setup!