Portfolio Website

A modern, responsive portfolio website built with Next.js, React, TypeScript, and Firebase. Designed to showcase your projects, skills, and provide a way for potential clients or employers to contact you.

🚀 Features

• Modern Tech Stack: Built with Next.js 15, React 19, and TypeScript
• Responsive Design: Fully responsive design using Tailwind CSS
• Interactive Animations: Smooth animations powered by Framer Motion
• Contact Form: Firebase integration for handling contact form submissions
• Email Handling: Secure contact form that stores submissions in Firebase Firestore
• Vercel Ready: Optimized for deployment on Vercel
• Dark Mode Support: Built-in dark mode toggle support
• SEO Optimized: Meta tags and structured data for better SEO

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: React Icons, Lucide React
• Database: Firebase Firestore
• Deployment: Vercel
• Development: ESLint, PostCSS

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (version 18 or higher)
• npm, yarn, pnpm, or bun
• A Firebase project (for contact form functionality)

🚀 Getting Started

1. Clone the repository

   git clone <your-repo-url>
   cd portfolio

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   • Copy .env.example to .env.local
   • Fill in your Firebase configuration values:

   cp .env.example .env.local

4. Configure Firebase

   • Create a new Firebase project at Firebase Console
   • Enable Firestore Database
   • Get your Firebase config from Project Settings
   • Update the environment variables in .env.local

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

6. Open your browser Navigate to http://localhost:3000 to see the result.

🎨 Customization

Personal Information

• Update your name, bio, and contact information in src/components/Hero.tsx
• Add your social media links
• Replace placeholder content with your actual information

Skills Section

• Modify the skills array in src/components/Skills.tsx
• Add or remove technologies you work with
• Update icons and colors as needed

Contact Form

• The contact form is configured in src/components/ContactForm.tsx
• Form submissions are stored in Firebase Firestore
• Customize form fields as needed

Styling

• Global styles are in src/app/globals.css
• Component-specific styles use Tailwind CSS classes
• Modify the theme colors in tailwind.config.ts

🚀 Deployment

Deploy to Vercel

1. Connect your repository

   • Push your code to GitHub, GitLab, or Bitbucket
   • Import your project in Vercel Dashboard

2. Configure environment variables

   • Add all Firebase environment variables in Vercel dashboard
   • Go to Settings > Environment Variables
   • Add each variable from your .env.local file

3. Deploy

   • Vercel will automatically deploy your project
   • Subsequent pushes to main branch will trigger automatic deployments

Firebase Security Rules

Make sure to set up proper Firestore security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /contacts/{document} {
      allow create: if true;
      allow read, update, delete: if false;
    }
  }
}

📁 Project Structure

src/
├── app/                    # Next.js App Router
│   ├── globals.css        # Global styles
├── components/            # React components
│   ├── ContactForm.tsx   # Contact form component
│   ├── Hero.tsx         # Hero section component
│   └── Skills.tsx       # Skills section component
├── lib/                  # Utility functions
│   ├── firebase.ts      # Firebase configuration
│   └── contact.ts       # Contact form handlers
public/                   # Static assets
.env.example             # Environment variables template
vercel.json             # Vercel deployment configuration

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

If you have any questions or need help with setup, feel free to open an issue or contact me through the contact form on the website.