Skip to content

ateebarman/Portfolio

BranchesTags

Repository files navigation

# 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

  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

Built with ❤️ by Ateeb Arman

About

Clean, responsive developer portfolio built with Next.js (App Router) and TypeScript. Styled using Tailwind CSS with dark/light theme support. Includes API routes for contact, resume, and admin messaging, with MongoDB persistence via mongodb.ts. Component-driven, production-ready, and easily deployable to Vercel or Render.

portfolio-qo50.onrender.com/

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages