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.

🔥 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/

To check if everything is installed:

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:

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

Then, navigated into the project folder:

cd decodewithdeepak-portfolio

2️⃣ Installing Dependencies

Step 3: Install Required Packages

I installed all necessary dependencies with:

npm install

Essential Packages

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

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

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/:

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:

@tailwind base;
@tailwind components;
@tailwind utilities;

4️⃣ Setting Up the Project Structure

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

📂 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:

npm run dev

This runs the project at localhost:5173 🎉

6️⃣ Optimizing & Linting

Step 7: ESLint & Prettier Setup

To ensure clean code formatting, I installed:

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

Created .eslintrc.json:

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

To lint and fix errors automatically:

npm run lint --fix

7️⃣ Deploying to Vercel 🚀

Step 8: Install Vercel CLI

I deployed my portfolio to Vercel for free hosting.

npm install -g vercel

Step 9: Deploy the Project

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
📂 GitHub Repository: github.com/decodewithdeepak

Have any suggestions? Let me know in the comments! You can also connect with me on LinkedIn or check out my GitHub for more projects.

Thanks for reading! 🚀