# Building My Personal Portfolio Website with React and Tailwind CSS

## Introduction

Hello everyone! 🚀 I recently built and deployed my **personal portfolio website**, and I’m excited to share the journey with you. This portfolio is a reflection of my work, skills, and projects, crafted with modern web technologies like **React, TypeScript, Tailwind CSS, and Vite**.

If you haven’t checked it out yet, you can visit it here: [**deepakmodi.vercel.app**](https://deepakmodi.vercel.app/).

## 🔥 Features of My Portfolio

I wanted my portfolio to be **interactive, visually appealing, and user-friendly**. Here are some of its key features:

* **Responsive Design** 📱: It adapts seamlessly across different devices.
    
* **Smooth Animations** 🎨: Framer Motion for dynamic effects.
    
* **Dark Mode Support** 🌙: Toggle between light and dark themes.
    
* **SEO Optimized** 🔍: Metadata and structured data for better visibility.
    
* **Performance Optimized** ⚡: Fast-loading pages with minimal render-blocking.
    
* **Dynamic Sections** 🛠️:
    
    * **Hero Section**: Engaging introduction with a typewriter effect.
        
    * **About Me**: A brief introduction to my skills and background.
        
    * **Skills**: Technologies I am proficient in.
        
    * **Projects**: My best work with live links.
        
    * **Experience & Education**: My professional journey.
        
    * **Certifications**: Showcasing my learning credentials.
        
    * **Leetcode & GitHub Stats**: Visual representation of my coding journey.
        
    * **Contact**: Reach out to me directly.
        

## ⚙️ Tech Stack

#### **1️⃣ React.js (with Vite) ⚛️**

* A fast and efficient JavaScript library for building UI components.
    
* Used for a **component-based architecture** to structure the portfolio.
    
* **Vite** is used instead of Create React App for **faster development and optimized builds**.
    

#### **2️⃣ TypeScript 🦕**

* A superset of JavaScript that provides **static typing** for better code quality and maintainability.
    
* Helps catch errors during development, improving code reliability.
    

#### **3️⃣ Tailwind CSS 🎨**

* A **utility-first CSS framework** for quickly building modern and responsive UIs.
    
* Allows for **faster styling** without writing custom CSS files.
    
* Enables **dark mode** implementation effortlessly.
    

#### **4️⃣ Framer Motion 🎥**

* Used for adding **smooth animations** to different sections of the portfolio.
    
* Provides an easy way to create **fade-in effects, hover animations, and page transitions**.
    

#### **5️⃣ React Router 🌍**

* Enables smooth navigation across different sections.
    
* Used for **scroll-based navigation** within the portfolio.
    

#### **6️⃣ Lucide Icons 🖼️**

* A lightweight icon library for **modern and visually appealing icons**.
    
* Used in various sections like **skills, social links, and the navbar**.
    

#### **7️⃣ React GitHub Calendar 📊**

* Displays **GitHub contribution activity** dynamically.
    
* Fetches GitHub commit history to **showcase consistency and open-source work**.
    

#### **8️⃣ Vercel 🚀**

* A **serverless deployment platform** for hosting the portfolio.
    
* Provides **blazing-fast load times**, **automatic CI/CD**, and **custom domain support**.
    

## 🚀 Development Process

Building my **personal portfolio website** was a structured process—from setting up the project to deploying it live. Here’s a step-by-step breakdown! 👇

## **1️⃣ Setting Up the Project**

### **Step 1: Install Node.js & npm**

Before starting, I made sure **Node.js** and **npm** were installed. You can download Node.js (which includes npm) from:  
🔗 [https://nodejs.org/](https://nodejs.org/)

To check if everything is installed:

```sh
node -v   # Check Node.js version
npm -v    # Check npm version
```

### **Step 2: Initialize React with Vite**

I used **Vite** instead of Create React App because it’s **faster and more optimized**.  
To create a new project with **React & TypeScript**, I ran:

```sh
npm create vite@latest decodewithdeepak-portfolio --template react-ts
```

Then, navigated into the project folder:

```sh
cd decodewithdeepak-portfolio
```

## **2️⃣ Installing Dependencies**

### **Step 3: Install Required Packages**

I installed all necessary dependencies with:

```sh
npm install
```

#### **Essential Packages**

```sh
npm install react-router-dom     # For navigation
npm install lucide-react         # For modern icons
npm install framer-motion        # For animations
npm install react-github-calendar # To display GitHub contributions
```

#### **Development Tools**

```sh
npm install --save-dev eslint prettier  # Code formatting & linting
npm install --save-dev vite-plugin-eslint # ESLint integration for Vite
```

## **3️⃣ Configuring Tailwind CSS**

### **Step 4: Install Tailwind CSS**

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

This creates `tailwind.config.js` and `postcss.config.js` files.

### **Step 5: Configure Tailwind**

I updated **tailwind.config.js** to scan files inside `src/`:

```css
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### **Step 6: Add Tailwind to CSS**

In `src/index.css`, I added:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## **4️⃣ Setting Up the Project Structure**

To keep the project **organized**, I structured the files as follows:

```bash
📂 decodewithdeepak-portfolio
 ├── 📂 public/         # Static assets (favicon, images)
 ├── 📂 src/
 │   ├── 📂 components/  # Reusable components (Navbar, Hero, Projects)
 │   ├── 📂 hooks/       # Custom React hooks
 │   ├── App.tsx        # Main app component
 │   ├── main.tsx       # React entry point
 │   ├── index.css      # Global styles
 ├── package.json       # Project dependencies
 ├── tailwind.config.js # Tailwind configuration
 ├── vite.config.ts     # Vite configuration
 ├── tsconfig.json      # TypeScript configuration
```

## **5️⃣ Running the Project Locally**

To start the development server:

```sh
npm run dev
```

This runs the project at [**http://localhost:5173**](http://localhost:5173/) 🎉

## **6️⃣ Optimizing & Linting**

### **Step 7: ESLint & Prettier Setup**

To ensure clean code formatting, I installed:

```sh
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react
```

Created `.eslintrc.json`:

```json
{
  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
  "plugins": ["react"],
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}
```

To lint and fix errors automatically:

```sh
npm run lint --fix
```

## **7️⃣ Deploying to Vercel 🚀**

### **Step 8: Install Vercel CLI**

I deployed my portfolio to **Vercel** for free hosting.

```sh
npm install -g vercel
```

### **Step 9: Deploy the Project**

```sh
vercel login
vercel
```

Vercel automatically detected my **Vite + React + TypeScript** project and deployed it.

### **Step 10: Set Up a Custom Domain**

I configured **deepakmodi.vercel.app** as my domain in the Vercel dashboard.

## 🚧 **Challenges Faced & How I Overcame Them**

Building this portfolio wasn’t completely smooth sailing—I faced a few challenges along the way:

1️⃣ **🌑 Implementing Dark Mode Persistently**

* Initially, the theme would **reset on page reload**.
    
* **Solution:** I used `localStorage` to store the user's theme preference and applied it before rendering the page.
    

2️⃣ **⚡ Optimizing Performance for Fast Loading**

* Vite is fast, but **large images and animations slowed down performance**.
    
* **Solution:** I optimized images, used lazy loading, and leveraged **Framer Motion** for efficient animations.
    

3️⃣ **🔀 Fetching & Displaying Dynamic GitHub Contributions**

* GitHub API rate limits can sometimes cause **data fetching failures**.
    
* **Solution:** I used `react-github-calendar` to ensure a smooth experience without hitting API limits.
    

4️⃣ **🎨 Maintaining a Consistent Design**

* Styling everything manually in CSS was tedious.
    
* **Solution:** Tailwind CSS **greatly simplified styling**, ensuring a clean and uniform UI.
    

Each challenge taught me something valuable, making the final project more **polished, responsive, and user-friendly**! 🚀

## 🎯 Future Enhancements

Although the portfolio is live, improvements never stop! Some upcoming features:

* **Blog Section** 📖: To share insights on web development and DSA.
    
* **Testimonials** 🌟: To showcase feedback from peers and clients.
    
* **Interactive Projects Section** 🛠️: Live demos for featured projects.
    

## 💡 Key Takeaways

* **Keep it simple & clean** ✨: A minimalistic UI enhances user experience.
    
* **Optimize for performance** 🚀: Reduce unnecessary re-renders.
    
* **Make it interactive** 🔥: Engaging UI keeps visitors interested.
    
* **Stay consistent with branding** 🎨: Cohesive color schemes and typography matter.
    

## 🎉 **Final Thoughts**

Developing this portfolio was a **great learning experience**! It helped me refine my **React, TypeScript, Tailwind CSS, and Vite skills** while implementing **best practices for performance, accessibility, and animations**.

**🔗 Live Site:** [deepakmodi.vercel.app](https://deepakmodi.vercel.app/)  
**📂 GitHub Repository:** [github.com/decodewithdeepak](https://github.com/decodewithdeepak)

Have any suggestions? Let me know in the comments! You can also connect with me on [**LinkedIn**](https://linkedin.com/in/deepakmodi1) or check out my [**GitHub**](https://github.com/decodewithdeepak) for more projects.

Thanks for reading! 🚀