Umer Labs

A website to show all the demo-able projects I have created.

🌟 Overview

A beautiful single-page portfolio website featuring:

• Modern UI Design – Glass morphism, gradients, and smooth animations
• Interactive Project Cards – Click any card to view detailed project information in a modal
• Image Carousels – Browse through project screenshots with elegant transitions
• Search Functionality – Instantly filter projects by title or technology
• Dark/Light Mode – Seamless theme switching with system preference detection
• Fully Responsive – Looks great on mobile, tablet, and desktop

🚀 Live Demo

Visit the live site: umertariq1.github.io/UmerLabs

📸 Features

• Dynamic Content – All projects load from a single data/projects.yaml file
• Beautiful Cards – Each project displays in a modern card with image preview
• Full Details Modal – Click any project to see complete information and larger images
• Smart Search – Type to filter projects instantly
• Smooth Animations – Delightful micro-interactions throughout the site
• Modern Tech Stack – Built with TailwindCSS, Swiper.js, AOS animations, and js-yaml

🛠️ How to Use

1. Clone or Download

git clone https://github.com/UmerTariq1/UmerLabs.git
cd UmerLabs

2. Add Your Projects

Edit data/projects.yaml and add your project details:

- name: "Your Project Name"
  description: "Brief description of your project"
  tags:
    - "React"
    - "Node.js"
    - "MongoDB"
  images:
    - "assets/images/yourproject/screenshot1.png"
    - "assets/images/yourproject/screenshot2.png"
  links:
    - label: "Demo"
      url: "https://your-demo-url.com"
    - label: "GitHub"
      url: "https://github.com/username/repo"

3. Add Screenshots

Place your project screenshots in assets/images/yourproject/ folder.

4. Open & Enjoy

Simply open index.html in your browser. No build process required!

📁 Project Structure

UmerLabs/
├── index.html          # Main HTML file
├── style.css           # Custom styles
├── script.js           # JavaScript functionality
├── data/
│   └── projects.yaml   # Your projects data
└── assets/
    ├── images/         # Project screenshots
    └── icons/          # UI icons

🎨 Customization

• Colors: Modify the gradient colors in index.html (Tailwind config) and style.css
• Projects: Edit data/projects.yaml to add/remove/update projects
• Fonts: Change the Google Fonts import in index.html
• Animations: Adjust AOS settings in script.js

🌐 Deploy to GitHub Pages

1. Push your code to a GitHub repository
2. Go to Settings → Pages
3. Select Deploy from a branch → Choose main and / (root)
4. Your site will be live at https://yourusername.github.io/repository-name/

💡 Tips

• Optimize images for web (recommended: 800-1200px width, under 500KB each)
• Use descriptive project titles and concise descriptions
• Add 2-4 screenshots per project for best results
• Keep the data/projects.yaml file properly formatted with correct YAML syntax

🔧 Technologies Used

• TailwindCSS – Utility-first CSS framework
• Swiper.js – Modern image carousel
• AOS.js – Scroll animations
• js-yaml – YAML parser for browser
• Vanilla JavaScript – No framework overhead

📝 License

Free to use and modify for your portfolio!

---

Made with ❤️ by Umer Butt