🚀 Hritik Sharma's Portfolio

A modern, responsive portfolio website built with Next.js 15, showcasing my skills, experience, and projects. Features smooth animations, interactive components, and a clean, professional design.

✨ Features

• Modern Design: Clean, professional UI with a dark theme
• Responsive Layout: Optimized for all device sizes
• Smooth Animations: Powered by Framer Motion for fluid transitions
• Interactive Components: Custom navigation, sheets, and transitions
• Type Animations: Dynamic text effects with react-type-animation
• Performance Optimized: Built with Next.js 15 and Tailwind CSS v4
• Accessibility: Screen reader friendly with proper ARIA labels

🛠️ Tech Stack

• Framework: Next.js 15.4.4
• Styling: Tailwind CSS v4
• Animations: Framer Motion
• UI Components: Radix UI primitives
• Icons: Lucide React & React Icons
• Font: Sometype Mono (Google Fonts)
• State Management: React 19.1.0

📁 Project Structure

├── app/
│   ├── about/          # About page
│   ├── contact/        # Contact page
│   ├── experience/     # Experience page
│   ├── portfolio/      # Portfolio/Projects page
│   ├── layout.jsx      # Root layout
│   ├── page.jsx        # Home page
│   └── globals.css     # Global styles
├── components/
│   ├── ui/             # Reusable UI components
│   ├── Header.jsx      # Mobile navigation header
│   ├── MainNav.jsx     # Desktop navigation
│   ├── PageTransition.jsx  # Page transition effects
│   ├── Stats.jsx       # Statistics component
│   ├── Skills.jsx      # Skills showcase
│   └── ...            # Other components
├── lib/
│   └── utils.js        # Utility functions
└── public/
    └── assets/         # Images and icons

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/hritik2004-cse/Portfolio.git
   cd nextjs-portfolio

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

4. Open your browser Navigate to http://localhost:3000 to see the portfolio.

📜 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

🎨 Customization

Colors

The color scheme is defined in app/globals.css using CSS custom properties:

• Primary: #0d091a (Dark purple)
• Secondary: #140e25
• Accent: #5810ff (Purple)

Typography

Using Sometype Mono font family for a modern, professional look.

Components

All components are modular and reusable. Key components include:

• Navigation: Responsive navigation with mobile sheet overlay
• Page Transitions: Smooth page-to-page animations
• Interactive Elements: Buttons, cards, and hover effects

🚢 Deployment

Deploy on Vercel (Recommended)

1. Push your code to GitHub
2. Visit Vercel
3. Import your repository
4. Deploy with zero configuration

Other Platforms

This Next.js app can be deployed on any platform that supports Node.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

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

📄 License

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

📧 Contact

Hritik Sharma

• Portfolio: [Your Live Portfolio URL]
• LinkedIn: [Your LinkedIn Profile]
• Email: [Your Email]
• GitHub: @hritik2004-cse

---

⭐ If you found this project helpful, please give it a star!