🚀 Tarun's Portfolio 🚀

A modern, sleek, and fully responsive personal portfolio website built with cutting-edge web technologies.
Showcasing projects, skills, experience, and a newsletter subscription feature with smooth animations and intuitive navigation.

---

✨ Quick Preview of the Portfolio ✨

---

✨ Features

🎨 Modern UI/UX Sleek dark theme, smooth animations	📱 Responsive Mobile-first, works on all devices	⚡ Performance Fast load, optimized images
🎭 Framer Motion Engaging, smooth animations	🌙 Theme Support Easy dark/light mode	📧 Newsletter EmailJS integration
🧭 Smooth Scrolling Custom navigation	🎯 SEO Friendly Meta tags, best practices	🛡️ Accessible Radix UI, a11y best practices

---

🛠️ Tech Stack

Core Technologies

• Framework: Next.js 14 — React framework with SSR
• Language: TypeScript — Type-safe JavaScript
• Styling: Tailwind CSS — Utility-first CSS
• UI Components: shadcn/ui — Beautiful React components
• Animation: Framer Motion — Motion library

Libraries & Tools

• Email Service: EmailJS — Direct email from browser
• Form Validation: React Hook Form + Zod
• UI Framework: Radix UI — Accessible components
• Package Manager: pnpm
• Development: ESLint, PostCSS

---

📁 Project Structure

my-portfolio/
├── app/                # Next.js app directory
│   ├── page.tsx        # Main landing page
│   ├── layout.tsx      # Root layout
│   ├── globals.css     # Global styles
│   └── manifest.ts     # PWA manifest
├── components/         # React components
│   ├── header.tsx      # Navigation header
│   ├── about-section.tsx
│   ├── experience-section.tsx
│   ├── technical-skills.tsx
│   ├── projects-section.tsx
│   ├── newsletter-form.tsx
│   ├── footer.tsx
│   ├── ui/             # shadcn/ui components
│   └── hooks/          # Custom hooks
├── public/             # Static assets
│   └── images/
├── styles/             # Additional styles
├── utils/              # Utility functions
├── tailwind.config.ts  # Tailwind config
├── tsconfig.json       # TypeScript config
└── package.json        # Scripts & dependencies

---

🚦 Getting Started

Setup Instructions

Prerequisites

• Node.js 18+ or higher
• pnpm (or npm/yarn)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/my-portfolio.git
   cd my-portfolio

2. Install dependencies

   pnpm install
   # or
   npm install

3. Set up environment variables Create a .env.local file in the root directory (if needed for EmailJS):

   NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id
   NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id
   NEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key

4. Run the development server

   pnpm dev
   # or
   npm run dev

   Open http://localhost:3000 to view it in the browser.

---

🧩 Available Scripts

# Development server
pnpm dev

# Production build
pnpm build

# Start production server
pnpm start

# Run ESLint
pnpm lint

---

🎨 Customization

How to Personalize

Update Personal Information

• Edit component files in the components/ directory
• Modify text, links, and images to reflect your information
• Update social media links in components/header.tsx and components/footer.tsx

Styling

• Customize colors and themes in tailwind.config.ts
• Modify global styles in app/globals.css
• Component-specific styles are in individual component files

Add Projects

Edit components/projects-section.tsx to add your portfolio projects with descriptions, images, and links.

Configure Email Service

Set up EmailJS for the newsletter form:

1. Create an account at EmailJS
2. Set up email service and template
3. Add credentials to .env.local

---

📦 Dependencies

Key Packages

• next — React framework
• react & react-dom — UI library
• tailwindcss — CSS framework
• framer-motion — Animation library
• @radix-ui/* — UI components
• @hookform/resolvers — Form validation
• @emailjs/browser — Email service
• zod — Schema validation
• sonner — Toast notifications
• clsx — Conditional class names

---

🌐 Deployment

Deploy on Vercel (Recommended)

1. Push your code to GitHub
2. Visit Vercel
3. Import your repository
4. Add environment variables if needed
5. Deploy!

Other Deployment Options

• Netlify — Connect to Git repo and deploy automatically
• Docker — Containerize the application
• Self-hosted — Build and deploy to your own server

---

📝 License

This project is open source and available under the MIT License. See the LICENSE file for more information.

---

🤝 Contributing

How to Contribute

Contributions are welcome! Feel free to:

• Fork the repository
• Create a new branch for your feature
• Make your changes
• Submit a pull request

---

💬 Contact & Social

Connect with me on:

---

🙏 Acknowledgments

• shadcn/ui — Beautiful component library
• Vercel — Next.js creators & hosting platform
• Tailwind Labs — Tailwind CSS team
• Framer — Motion library creators

---

Made with ❤️ by Tarun