Modern Personal Portfolio

A premium, high-performance personal portfolio website built with Next.js 16, TypeScript, and Tailwind CSS. This project features smooth animations, a custom cursor, and a polished user interface to showcase projects and skills effectively.

🚀 Features

• Modern Tech Stack: Built with the latest Next.js 16 App Router and React 19.
• Smooth Animations: Powered by Framer Motion for seamless transitions and scroll effects.
• Smooth Scrolling: Integrated Lenis for a premium scroll experience.
• Custom UI Elements: unique custom cursor and interactive components.
• Responsive Design: Fully responsive layouts using Tailwind CSS.
• Project Showcase: specific sections for displaying projects with hover effects.
• Contact Form: Integrated contact section.

🛠️ Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Smooth Scroll: Lenis
• Effects: Canvas Confetti

📂 Project Structure

├── app/                  # Next.js App Router pages and layouts
├── components/           # Reusable UI components
│   ├── Hero.tsx          # Landing section
│   ├── About.tsx         # About me section
│   ├── Skills.tsx        # Technical skills grid
│   ├── Projects.tsx      # Project showcase cards
│   ├── Contact.tsx       # Contact form and footer
│   ├── Navbar.tsx        # Navigation bar
│   ├── CustomCursor.tsx  # Interactive cursor component
│   └── SmoothScroll.tsx  # Lenis scroll wrapper
├── public/               # Static assets (images, fonts)
└── lib/                  # Utility functions

🏁 Getting Started

Follow these steps to set up the project locally.

Prerequisites

Make sure you have Node.js installed on your machine.

Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev

4. Open locally: Open http://localhost:3000 in your browser to see the result.

🎨 Customization

• Content: Update the content in individual components under components/ (e.g., About.tsx, Projects.tsx).
• Styling: Modify tailwind.config.ts or app/globals.css to change the theme and global styles.

📄 License

Distributed under the MIT License. See LICENSE for more information.