Modern Portfolio Website — React + TailwindCSS

A fast, responsive, and personal portfolio built with React, Vite, and TailwindCSS. Designed for performance, accessibility, and easy deployment. Includes a client-side contact form powered by EmailJS.

---

Badges

---

Table of Contents

• Overview
• Tech Stack
• Key Features
• Getting Started
• Environment Variables
• Screenshots
• Deployment
• Performance & Accessibility
• License
• References
• Attribution

---

Overview

This project is a modern portfolio website built with React and TailwindCSS, bundled using Vite for fast development and optimized production builds. It supports light/dark themes, responsive layouts, animated visuals, and a functional contact form using EmailJS without a backend. It also includes a showcase page featuring a number of projects.

---

Tech Stack

• React — Component-based UI
• Vite — Fast dev server and build tool
• TailwindCSS — Utility-first styling
• Lucide Icons — Consistent iconography
• EmailJS — Client-side email handling
• Vercel — Hosting and CI/CD
• gsap - Text type animation.

---

Key Features

• Theme Toggle

  • Light/Dark/System mode with persisted preference (localStorage)

• Responsive UI

  • Mobile-first layout with adaptive navigation
  • Glassmorphism effects for menus and cards

• Projects Showcase

  • Project cards with tech stack tags and external links (demo and source code)

• Contact Section

  • Social links
  • Contact form with EmailJS integration and toast notifications

• Project Showcase Page

  • Featuring portfolio worthy projects

---

Getting Started

Prerequisites

Node.js (v18+ recommended) Git

Development Build

To run this project locally, follow these steps:

• Clone your fork of the repository:

git clone git@github.com:your-username/portfolio.git

• Navigate to the project directory

cd portfolio

• Install dependencies

npm install

• Start the development server

npm run dev

The app will be available at: http://localhost:5173

Production Build

npm run build
npm run preview

Environment Variables

Create a .env file in the project root:

VITE_EMAILJS_SERVICE_ID = your_service_id;
VITE_EMAILJS_TEMPLATE_ID = your_template_id;
VITE_EMAILJS_PUBLIC_KEY = your_public_key;

These are required for the contact form to function correctly.

Screenshots

Project Showcase:

Deployment

Vercel

Push the repository to GitHub

Sign in to Vercel

Import the repository

Configure environment variables

Deploy

The site will be hosted at:

https://your-project-name.vercel.app

Performance & Accessibility

• Optimized bundle via Vite

• TailwindCSS purge for minimal CSS output

• Semantic HTML and accessible color contrast

• Responsive images and lazy loading where applicable

License

This project is licensed under the MIT License. See the LICENSE file for more details. Let me know if you'd like further modifications! 🚀

References

• React

• TailwindCSS

• Vite

• Lucide Icons

• EmailJS

• Vercel

• React Bits

Attribution

The favicon used in this project was generated using the following graphics from Twitter Twemoji:

• Graphics Title: 1f47e.svg
• Graphics Author: Copyright 2020 Twitter, Inc and other contributors
• Graphics Source
• Graphics License: CC-BY 4.0