This is a modern, fully responsive, and visually engaging one-page personal portfolio template — perfect for developers, designers, freelancers, and creatives who want to showcase their work in a professional and dynamic way on any device.

It comes with a Dark/Light mode toggle to provide a stylish experience that adapts to user preferences.

• Built with Next.js for modern performance and scalability
• SEO optimized for better visibility on search engines
• Fully responsive layout that works on all devices
• Clean and modern one-page design
• Dark and Light mode toggle for better user experience
• Smooth scrolling and intuitive navigation
• Easy to customize with reusable components
• Well-organized and commented code structure
• Fast loading speed with optimized assets
• Ideal for developers, designers, and freelancers

• Node.js version 16 or higher
• npm or yarn (for package management)
• A modern code editor like Visual Studio Code
• Git (optional, for version control or repository updates)
• Basic knowledge of React and Next.js
• A modern browser (Chrome, Firefox, Edge, etc.) for testing
• Terminal / Command Line to run development commands
• A hosting platform like Vercel, Netlify, or any service supporting Node.js

## ✨ Features

- ⚡ **Next.js 15** – Fast server-side rendering with SEO support
- 🎨 **Tailwind CSS** – Utility-first, responsive styling with dark mode
- 🎥 **Framer Motion** – Smooth and engaging animations
- 🌗 **Dark Mode** – Seamless theme toggle
- 🧩 **Modular Data** – Easy updates for projects, testimonials, etc.
- 📱 **Responsive Design** – Works on all devices
- 🚀 **Vercel-Ready** – One-click deployment
- 📊 **Interactive Sections** – Projects, Timeline, Testimonials, Counters

## 🛠️ Getting Started

### 📋 Prerequisites

- **Node.js** 16+
- **npm/yarn/pnpm**
- **Git**

### 📦 Installation

```bash

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Run dev server
npm run dev
# or
yarn dev
# or
pnpm dev
```

Visit `http://localhost:3000` to view the portfolio.

---

## ⚙️ Customization Guide

All content is managed in `constant/data.tsx`. Styles are in `app/global.css`.

### 👤 Update Personal Info

```ts
export const socialLinks = [
  { href: "https://facebook.com/your-profile", icon: },
  { href: "https://linkedin.com/in/your-profile", icon: },
  { href: "https://instagram.com/your-profile", icon: },
  { href: "https://github.com/your-profile", icon: },
];
```

### 👤 Update Hero Section Data

```ts
export const heroData = {
  headline: "Searching For A Trusted Devoloper?",
  nameLine: "Your Name",
  cvButton: "Download My CV",
  typewriter: {
    firstWord: "I'm",
    roles: ["A Software Engineer", "A SAP MM Consultant"],
  },
};
```

### 👤 Update About Section Data

```ts
export const aboutData = {
  name: "Your Name",
  titleHighlight: "Full Stack",
  titlePlain: "Developer",
  intro: "Hey,..",
  description: `Motivated and detail-oriented Software Engineer...`,
  ctaText: "Get In Touch",
  ctaLink: "#contact",
};
```

### 💼 Add Projects

```ts
export const projects = [
  {
    title: "My New Project",
    description: "A brief description of your project.",
    link: "https://project-link.com",
    imageSrc: "/images/my-project.jpg",
  },
];
```

_📌 Place images in `public/images/`_

### 🕒 Modify Timeline

```ts
export const TimelineData = [
  {
    title: "2026",
    description: "Launched a new portfolio template.",
    images: ["/images/timeline-1.jpg", "/images/timeline-2.jpg"],
  },
];
```

### 🗣️ Edit Testimonials

```ts
export const testimonials = [
  {
    quote: "Your amazing feedback here.",
    name: "Your Name",
    designation: "Your Title",
    src: "/images/your-photo.jpg",
  },
];
```

### 📈 Customize Counters

```ts
export const counterSection = [
  { value: 100, label: "Projects" },
  { value: 200, label: "Clients" },
  { value: 500, label: "Hours Worked" },
  { value: 150, label: "Completed Websites" },
];
```

### 🎨 Change Colors

In `global.css`, edit:

```css
:root {
  --primary: 220 70% 50%; /* Light Mode */
}
.dark {
  --primary: 200 60% 40%; /* Dark Mode */
}
```

To use custom gradient:

```css
.my-element {
  background-image: var(--custom-gradient);
}
```

---

## 🎥 Modifying Animations

The template uses Framer Motion for dynamic visuals.

### Example: Hero Explosion

```tsx
  initial={{ x: 0, y: 0, opacity: 1 }}
  animate={{ x: 50, y: -30, opacity: 0 }}
  transition={{ duration: 1, ease: "easeOut" }}
  className="absolute h-1 w-1 rounded-full bg-gradient-to-b from-indigo-500 to-purple-500"
/>
```

- Adjust `x, y` for direction
- Tweak `duration` for speed
- Change colors/sizes via `className`

### Disable Animation:

- Replace `` tags with `