Ateeb Arman - Full-Stack Developer Portfolio

# Ateeb Arman - Full-Stack Developer Portfolio

A modern, aesthetic, and professional portfolio website showcasing full-stack development expertise with a focus on backend systems, scalable architecture, and real-time applications.

## 🎯 Features

✨ **Modern Design**
- Clean, minimal Apple-like aesthetic
- Dark mode and light mode toggle
- Smooth animations with Framer Motion
- Mobile-first and fully responsive

📱 **Sections Included**
- Hero section with CTA buttons
- About me with education and tech philosophy
- Skills grouped by categories with proficiency levels
- Featured projects with detailed highlights
- Achievements and recognition
- Leadership experience
- Contact section with contact form

🚀 **Technical Stack**
- **Frontend:** React 18, Next.js 14
- **Styling:** Tailwind CSS
- **Animations:** Framer Motion
- **Icons:** Lucide React
- **State Management:** Zustand (ready for integration)

## 🛠️ Installation & Setup

### Prerequisites
- Node.js 18.17 or higher
- npm or yarn

### Installation Steps

```bash
# Navigate to project directory
cd portfolio

# Install dependencies
npm install
# or
yarn install

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

The site will be available at `http://localhost:3000`

## 📦 Build & Deployment

### Development
```bash
npm run dev
```

### Production Build
```bash
npm run build
npm start
```

### Linting
```bash
npm run lint
```

## 📂 Project Structure

```
portfolio/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Main page
│   └── page-scroll.css      # Animation utilities
├── components/
│   ├── theme-provider.tsx   # Dark/light mode toggle
│   ├── navbar.tsx           # Navigation bar
│   ├── hero.tsx             # Hero section
│   ├── about.tsx            # About section
│   ├── skills.tsx           # Skills section
│   ├── projects.tsx         # Projects section
│   ├── achievements.tsx     # Achievements section
│   ├── experience.tsx       # Experience section
│   ├── contact.tsx          # Contact section
│   └── footer.tsx           # Footer
├── public/                  # Static assets
├── package.json             # Dependencies
├── tailwind.config.ts       # Tailwind configuration
├── tsconfig.json            # TypeScript configuration
└── next.config.js           # Next.js configuration
```

## 🎨 Customization

### Colors
Modify the gradient colors in `tailwind.config.ts`:
```typescript
colors: {
  primary: {
    600: '#2563eb',
    700: '#1d4ed8',
  },
}
```

### Content
Edit content directly in component files:
- Hero text: `components/hero.tsx`
- About section: `components/about.tsx`
- Skills: `components/skills.tsx`
- Projects: `components/projects.tsx`

### Resume Download
Add your resume PDF to the `public` folder and update the link in `components/hero.tsx`.

## 🔗 External Links
Update social links in:
- `components/contact.tsx` - Contact information
- `components/projects.tsx` - GitHub and demo links
- `components/navbar.tsx` - Navigation links

## 📝 Resume Content Sourced From
All content is extracted from the provided resume (Ateeb Arman's resume):
- Education: IIIT Sri City, B.Tech CSE (2022-2026)
- 3 Major Projects: RecoSense, DriveSphere, WaveConnect
- Technical Skills: 11 skill categories
- 600+ DSA problems solved
- Leadership experience and achievements

## 🚀 Deployment Options

### Vercel (Recommended)
```bash
npm i -g vercel
vercel
```

### Netlify
1. Build: `npm run build`
2. Connect repository to Netlify
3. Set build command: `npm run build`
4. Set publish directory: `.next`

### GitHub Pages
Configure `next.config.js` and use GitHub Actions

### Traditional Hosting
Build and upload the `.next` folder to your server.

## ⚡ Performance Optimizations

- Server-side rendering with Next.js
- Image optimization
- CSS-in-JS with Tailwind (no runtime overhead)
- Lazy loading of components
- Smooth scroll behavior

## 🎯 SEO

The site includes:
- Meta tags in `app/layout.tsx`
- Semantic HTML structure
- Alt text for images
- Accessible color contrast
- Mobile-friendly design

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🤝 Contributing

This is a personal portfolio. For custom versions, feel free to fork and modify!

## 📄 License

This portfolio template is open source. Feel free to use it for your own portfolio.

## 💡 Tips for Maximum Impact

1. **Replace placeholder links** - GitHub, LinkedIn, LeetCode URLs
2. **Add resume PDF** - Place in `public/resume.pdf`
3. **Update project demo links** - Add live demo URLs
4. **Customize colors** - Match your personal brand
5. **Add project images** - Screenshots for visual impact
6. **Optimize performance** - Monitor Core Web Vitals

## 🎓 Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com)
- [Framer Motion](https://www.framer.com/motion/)
- [React Documentation](https://react.dev)

---

**Built with ❤️ by Ateeb Arman**

# Ateeb Arman - Full-Stack Developer Portfolio

A modern, aesthetic, and professional portfolio website showcasing full-stack development expertise with a focus on backend systems, scalable architecture, and real-time applications.

## 🎯 Features

✨ **Modern Design**
- Clean, minimal Apple-like aesthetic
- Dark mode and light mode toggle
- Smooth animations with Framer Motion
- Mobile-first and fully responsive

📱 **Sections Included**
- Hero section with CTA buttons
- About me with education and tech philosophy
- Skills grouped by categories with proficiency levels
- Featured projects with detailed highlights
- Achievements and recognition
- Leadership experience
- Contact section with contact form

🚀 **Technical Stack**
- **Frontend:** React 18, Next.js 14
- **Styling:** Tailwind CSS
- **Animations:** Framer Motion
- **Icons:** Lucide React
- **State Management:** Zustand (ready for integration)

## 🛠️ Installation & Setup

### Prerequisites
- Node.js 18.17 or higher
- npm or yarn

### Installation Steps

```bash
# Navigate to project directory
cd portfolio

# Install dependencies
npm install
# or
yarn install

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

The site will be available at `http://localhost:3000`

## 📦 Build & Deployment

### Development
```bash
npm run dev
```

### Production Build
```bash
npm run build
npm start
```

### Linting
```bash
npm run lint
```

## 📂 Project Structure

```
portfolio/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Main page
│   └── page-scroll.css      # Animation utilities
├── components/
│   ├── theme-provider.tsx   # Dark/light mode toggle
│   ├── navbar.tsx           # Navigation bar
│   ├── hero.tsx             # Hero section
│   ├── about.tsx            # About section
│   ├── skills.tsx           # Skills section
│   ├── projects.tsx         # Projects section
│   ├── achievements.tsx     # Achievements section
│   ├── experience.tsx       # Experience section
│   ├── contact.tsx          # Contact section
│   └── footer.tsx           # Footer
├── public/                  # Static assets
├── package.json             # Dependencies
├── tailwind.config.ts       # Tailwind configuration
├── tsconfig.json            # TypeScript configuration
└── next.config.js           # Next.js configuration
```

## 🎨 Customization

### Colors
Modify the gradient colors in `tailwind.config.ts`:
```typescript
colors: {
  primary: {
    600: '#2563eb',
    700: '#1d4ed8',
  },
}
```

### Content
Edit content directly in component files:
- Hero text: `components/hero.tsx`
- About section: `components/about.tsx`
- Skills: `components/skills.tsx`
- Projects: `components/projects.tsx`

### Resume Download
Add your resume PDF to the `public` folder and update the link in `components/hero.tsx`.

## 🔗 External Links
Update social links in:
- `components/contact.tsx` - Contact information
- `components/projects.tsx` - GitHub and demo links
- `components/navbar.tsx` - Navigation links

## 📝 Resume Content Sourced From
All content is extracted from the provided resume (Ateeb Arman's resume):
- Education: IIIT Sri City, B.Tech CSE (2022-2026)
- 3 Major Projects: RecoSense, DriveSphere, WaveConnect
- Technical Skills: 11 skill categories
- 600+ DSA problems solved
- Leadership experience and achievements

## 🚀 Deployment Options

### Vercel (Recommended)
```bash
npm i -g vercel
vercel
```

### Netlify
1. Build: `npm run build`
2. Connect repository to Netlify
3. Set build command: `npm run build`
4. Set publish directory: `.next`

### GitHub Pages
Configure `next.config.js` and use GitHub Actions

### Traditional Hosting
Build and upload the `.next` folder to your server.

## ⚡ Performance Optimizations

- Server-side rendering with Next.js
- Image optimization
- CSS-in-JS with Tailwind (no runtime overhead)
- Lazy loading of components
- Smooth scroll behavior

## 🎯 SEO

The site includes:
- Meta tags in `app/layout.tsx`
- Semantic HTML structure
- Alt text for images
- Accessible color contrast
- Mobile-friendly design

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🤝 Contributing

This is a personal portfolio. For custom versions, feel free to fork and modify!

## 📄 License

This portfolio template is open source. Feel free to use it for your own portfolio.

## 💡 Tips for Maximum Impact

1. **Replace placeholder links** - GitHub, LinkedIn, LeetCode URLs
2. **Add resume PDF** - Place in `public/resume.pdf`
3. **Update project demo links** - Add live demo URLs
4. **Customize colors** - Match your personal brand
5. **Add project images** - Screenshots for visual impact
6. **Optimize performance** - Monitor Core Web Vitals

## 🎓 Learn More

- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS](https://tailwindcss.com)
- [Framer Motion](https://www.framer.com/motion/)
- [React Documentation](https://react.dev)

---

**Built with ❤️ by Ateeb Arman**

Ateeb Arman - Full-Stack Developer Portfolio

A modern, aesthetic, and professional portfolio website showcasing full-stack development expertise with a focus on backend systems, scalable architecture, and real-time applications.

🎯 Features

✨ Modern Design

Clean, minimal Apple-like aesthetic
Dark mode and light mode toggle
Smooth animations with Framer Motion
Mobile-first and fully responsive

📱 Sections Included

Hero section with CTA buttons
About me with education and tech philosophy
Skills grouped by categories with proficiency levels
Featured projects with detailed highlights
Achievements and recognition
Leadership experience
Contact section with contact form

🚀 Technical Stack

Frontend: React 18, Next.js 14
Styling: Tailwind CSS
Animations: Framer Motion
Icons: Lucide React
State Management: Zustand (ready for integration)

🛠️ Installation & Setup

Prerequisites

Node.js 18.17 or higher
npm or yarn

Installation Steps

# Navigate to project directory
cd portfolio

# Install dependencies
npm install
# or
yarn install

# Run development server
npm run dev
# or
yarn dev

The site will be available at http://localhost:3000

📦 Build & Deployment

Development

npm run dev

Production Build

npm run build
npm start

Linting

npm run lint

📂 Project Structure

portfolio/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Main page
│   └── page-scroll.css      # Animation utilities
├── components/
│   ├── theme-provider.tsx   # Dark/light mode toggle
│   ├── navbar.tsx           # Navigation bar
│   ├── hero.tsx             # Hero section
│   ├── about.tsx            # About section
│   ├── skills.tsx           # Skills section
│   ├── projects.tsx         # Projects section
│   ├── achievements.tsx     # Achievements section
│   ├── experience.tsx       # Experience section
│   ├── contact.tsx          # Contact section
│   └── footer.tsx           # Footer
├── public/                  # Static assets
├── package.json             # Dependencies
├── tailwind.config.ts       # Tailwind configuration
├── tsconfig.json            # TypeScript configuration
└── next.config.js           # Next.js configuration

🎨 Customization

Colors

Modify the gradient colors in tailwind.config.ts:

colors: {
  primary: {
    600: '#2563eb',
    700: '#1d4ed8',
  },
}

Content

Edit content directly in component files:

Hero text: components/hero.tsx
About section: components/about.tsx
Skills: components/skills.tsx
Projects: components/projects.tsx

Resume Download

Add your resume PDF to the public folder and update the link in components/hero.tsx.

🔗 External Links

Update social links in:

components/contact.tsx - Contact information
components/projects.tsx - GitHub and demo links
components/navbar.tsx - Navigation links

📝 Resume Content Sourced From

All content is extracted from the provided resume (Ateeb Arman's resume):

Education: IIIT Sri City, B.Tech CSE (2022-2026)
3 Major Projects: RecoSense, DriveSphere, WaveConnect
Technical Skills: 11 skill categories
600+ DSA problems solved
Leadership experience and achievements

🚀 Deployment Options

Vercel (Recommended)

npm i -g vercel
vercel

Netlify

Build: npm run build
Connect repository to Netlify
Set build command: npm run build
Set publish directory: .next

GitHub Pages

Configure next.config.js and use GitHub Actions

Traditional Hosting

Build and upload the .next folder to your server.

⚡ Performance Optimizations

Server-side rendering with Next.js
Image optimization
CSS-in-JS with Tailwind (no runtime overhead)
Lazy loading of components
Smooth scroll behavior

🎯 SEO

The site includes:

Meta tags in app/layout.tsx
Semantic HTML structure
Alt text for images
Accessible color contrast
Mobile-friendly design

📱 Browser Support

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

🤝 Contributing

This is a personal portfolio. For custom versions, feel free to fork and modify!

📄 License

This portfolio template is open source. Feel free to use it for your own portfolio.

💡 Tips for Maximum Impact

Replace placeholder links - GitHub, LinkedIn, LeetCode URLs
Add resume PDF - Place in public/resume.pdf
Update project demo links - Add live demo URLs
Customize colors - Match your personal brand
Add project images - Screenshots for visual impact
Optimize performance - Monitor Core Web Vitals

🎓 Learn More

Built with ❤️ by Ateeb Arman

Name		Name	Last commit message	Last commit date
app		app
components		components
lib		lib
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
ateeb-arman.pdf		ateeb-arman.pdf
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Navigation Menu

Repository navigation

About

Repository files navigation

Ateeb Arman - Full-Stack Developer Portfolio

🎯 Features

🛠️ Installation & Setup

Prerequisites

Installation Steps

📦 Build & Deployment

Development

Production Build

Linting

📂 Project Structure

🎨 Customization

Colors

Content

Resume Download

🔗 External Links

📝 Resume Content Sourced From

🚀 Deployment Options

Vercel (Recommended)

Netlify

GitHub Pages

Traditional Hosting

⚡ Performance Optimizations

🎯 SEO

📱 Browser Support

🤝 Contributing

📄 License

💡 Tips for Maximum Impact

🎓 Learn More

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Ateeb Arman - Full-Stack Developer Portfolio

🎯 Features

🛠️ Installation & Setup

Prerequisites

Installation Steps

📦 Build & Deployment

Development

Production Build

Linting

📂 Project Structure

🎨 Customization

Colors

Content

Resume Download

🔗 External Links

📝 Resume Content Sourced From

🚀 Deployment Options

Vercel (Recommended)

Netlify

GitHub Pages

Traditional Hosting

⚡ Performance Optimizations

🎯 SEO

📱 Browser Support

🤝 Contributing

📄 License

💡 Tips for Maximum Impact

🎓 Learn More

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages