Gallery Images

This folder contains images for the professional gallery section on your portfolio website.

Tab-Based Gallery Structure

The gallery uses a tab-based interface to organize photos by event. Each event has its own tab.

How to Add a New Event Tab

Step 1: Add a Tab Button

In index.html, find the gallery-tabs section and add a new button:

<div class="gallery-tabs">
    <button class="gallery-tab-button active" onclick="openGalleryTab(event, 'intel-vision-2024')">
        Intel Vision 2024
    </button>
    <button class="gallery-tab-button" onclick="openGalleryTab(event, 'your-event-id')">
        Your Event Name
    </button>
    <!-- Add more tabs here -->
</div>

Step 2: Add Tab Content Section

Add a corresponding content section below the tabs:

<!-- Your Event Tab Content -->
<div id="your-event-id" class="gallery-tab-content">
    <div class="gallery-grid">
        <div class="gallery-item">
            <img src="images/gallery/your_event/photo1.jpg" alt="Event Name - Description">
            <div class="gallery-caption">Photo Description</div>
        </div>
        
        <div class="gallery-item">
            <img src="images/gallery/your_event/photo2.jpg" alt="Event Name - Description">
            <div class="gallery-caption">Another Photo</div>
        </div>
        
        <!-- Add more photos -->
    </div>
</div>

How to Add Images to Existing Event

1. Organize your images in subfolders by event:

   images/gallery/
   ├── intel_vision_2024/
   │   ├── booth_setup.jpeg
   │   ├── product_presentation.jpeg
   │   └── lunch.jpg
   ├── ranlp_2023/
   │   └── photos...
   └── apsipa_2022/
       └── photos...
   

2. Add images to the appropriate tab content in index.html:

<div id="intel-vision-2024" class="gallery-tab-content active">
    <div class="gallery-grid">
        <div class="gallery-item">
            <img src="images/gallery/intel_vision_2024/booth_setup.jpeg" alt="Intel Vision 2024 - Booth Setup">
            <div class="gallery-caption">Booth Setup</div>
        </div>
        <!-- Add more images here -->
    </div>
</div>

Features

• Responsive Grid: Automatically adjusts to screen size
• Lightbox Modal: Click any image to view it in full size
• Navigation: Use arrow keys or on-screen buttons to navigate between images
• Keyboard Shortcuts:
  • Escape: Close lightbox
  • ← Left Arrow: Previous image
  • → Right Arrow: Next image

Tips

• Use descriptive captions that include the event name and year
• Keep image file names simple and descriptive (e.g., intel-vision-2024.jpg)
• Maintain consistent image quality across all gallery photos
• Consider adding images chronologically (newest first)