https://github.com/bharath-s-j/portfolio
Personal Portfolio – A modern, fully responsive portfolio built with React, TypeScript, and Tailwind CSS, showcasing my projects, skills, and experiences. Includes a dark mode toggle and a contact form with email support.
https://github.com/bharath-s-j/portfolio
personal-website portfolio react tailwindcss typescript vercel vite-react-typescript web-development
Last synced: about 2 months ago
JSON representation
Personal Portfolio – A modern, fully responsive portfolio built with React, TypeScript, and Tailwind CSS, showcasing my projects, skills, and experiences. Includes a dark mode toggle and a contact form with email support.
- Host: GitHub
- URL: https://github.com/bharath-s-j/portfolio
- Owner: Bharath-S-J
- Created: 2025-02-08T16:58:32.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-29T11:30:43.000Z (about 1 year ago)
- Last Synced: 2025-03-29T12:26:27.160Z (about 1 year ago)
- Topics: personal-website, portfolio, react, tailwindcss, typescript, vercel, vite-react-typescript, web-development
- Language: TypeScript
- Homepage: https://bharathsjweb.vercel.app/
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# 🌐 My Personal Portfolio
Welcome to my personal portfolio! 🚀 This is a fully responsive, dark-mode-supported website that showcases my projects, skills, and experiences. It also includes a contact form for visitors to reach out.
## 📑 Table of Contents
- [✨ Features](#-features)
- [🛠 Technologies Used](#-technologies-used)
- [📥 Installation](#-installation)
- [🚀 Usage](#-usage)
- [📂 Project Structure](#-project-structure)
- [📬 Contact](#-contact)
---
## ✨ Features
✅ **Responsive Design** – Fully adaptable to all screen sizes 📱💻🖥️
✅ **Dark Mode** – Toggle between light and dark themes 🌞🌙
✅ **Projects Showcase** – Displays projects with descriptions, technologies, and links 🔗💡
✅ **Contact Form** – Visitors can send messages directly via email 📧
---
## 🛠 Technologies Used
- **Frontend:** React ⚛️, TypeScript ⌨️, Tailwind CSS 🎨
- **Build Tool:** Vite ⚡
- **Email Service:** Nodemailer 📩
- **Deployment:** Vercel ☁️
---
## 📥 Installation
1. Clone the repository:
```sh
git clone https://github.com/Bharath-S-J/Portfolio.git
cd portfolio
```
2. Install dependencies:
```sh
npm install
```
3. Create a `.env` file in the root directory and add your Gmail credentials:
```sh
GMAIL_USER_F=your-email@gmail.com //from email address
GMAIL_APP_PASSWORD=your-app-password
GMAIL_USER_T=your-email@gmail.com //to email address
```
---
## 🚀 Usage
1. Start the development server:
```sh
npm run dev
```
2. Open your browser and navigate to: [http://localhost:3000](http://localhost:3000)
3. To build the project for production:
```sh
npm run build
```
4. To preview the production build:
```sh
npm run preview
```
5. For contact form api (create a project in vercel):
```sh
vercel dev
```
---
## 📂 Project Structure
```
.vite/
api/
├── contact.mjs # Handles contact form submission using Nodemailer
src/
├── components/
│ ├── ContactForm.tsx # Contact form component
│ ├── Navbar.tsx # Navigation bar
│ ├── ProjectCard.tsx # Project card component
│ ├── ProjectModal.tsx # Project details modal
│ ├── ThemeToggle.tsx # Dark mode toggle
├── App.tsx # Main application file
├── main.tsx # React entry point
├── index.css # Global styles
├── vite-env.d.ts # TypeScript environment definitions
public/
├── vite.svg # Vite logo
index.html # Main HTML file
package.json # Project metadata & dependencies
tsconfig.json # TypeScript configuration
vite.config.ts # Vite configuration
postcss.config.js # PostCSS configuration
```
---
🚀 **Thank you for visiting my portfolio! Feel free to explore and connect.**