🚀 Personal Portfolio Website

A modern, responsive portfolio website built with React, TypeScript, and Tailwind CSS to showcase my projects, skills, and experience. The site focuses on clean UI, performance, and accessibility.

---

✨ Features

• ⚛️ Built with React 19 + TypeScript
• 🎨 Styled using Tailwind CSS v4 (CSS-first config, no tailwind.config.js)
• 📱 Fully responsive design
• ⚡ Fast build & dev environment using Vite
• 🧩 Reusable and well-structured components
• 🌙 Dark/light theme with no flash on first paint
• 📬 Contact form wired to EmailJS
• 🔍 SEO-friendly metadata

---

🛠️ Tech Stack

• Frontend: React 19, TypeScript, React Router
• Styling: Tailwind CSS v4, shadcn/ui, lucide-react
• Build Tool: Vite
• Linting: ESLint
• Deployment: GitHub Pages (custom domain via public/CNAME)

---

📂 Project Structure

src/
├── assets/             # Images, icons, logos
├── components/ui/      # shadcn/ui primitives (button, card, sonner)
├── custom_components/  # Page sections (hero, about, skills, projects, …)
├── lib/                # Shared helpers (cn)
├── pages/              # Page-level components (home, notFound)
├── types/              # Shared TypeScript interfaces
├── index.css           # Tailwind theme tokens, animations, utilities
├── App.tsx             # Root component / routes
├── main.tsx            # Entry point

Static assets (skill icons, project images, resume, CNAME) live in public/.

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Node.js (v18 or later recommended)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/sachinspeaks/Portfolio.git

# Navigate to the project folder
cd Portfolio

# Install dependencies
npm install

Run Locally

npm run dev

The app will start on:

http://localhost:5173

---

📦 Build for Production

npm run build

Preview the production build:

npm run preview

---

🌐 Deployment

Deployed to GitHub Pages on the custom domain in public/CNAME:

npm run deploy   # runs the build, then publishes dist/ via gh-pages

Because the site is served from the domain root, base is "/" in vite.config.ts. If you fork this and deploy to user.github.io/<repo>/ instead, change base to "/<repo>/" and remove public/CNAME.

---

🔐 Environment Variables

The contact form uses EmailJS. Create a .env 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

The form posts three fields — name, email, and message — so the EmailJS template must reference {{name}}, {{email}} and {{message}}.

⚠️ Do not commit .env files to GitHub. Note that VITE_-prefixed values are embedded in the client bundle and are therefore public; the EmailJS public key is designed for this, but keep quotas and allowed origins configured in the EmailJS dashboard.

---

📸 Screenshots

---

📌 Roadmap

• Add dark mode
• Improve animations
• Add blog section
• Enhance accessibility

---

📄 License

This project is open source and available under the MIT License.

---

👤 Author

Sachin

• Portfolio: https://geekysachin.com
• GitHub: https://github.com/sachinspeaks
• LinkedIn: https://www.linkedin.com/in/sachinnsut/

---

⭐ If you like this project, consider giving it a star!