v1

assets/css/custom.css

@@ -1,4 +1,3 @@
-
 /*
     Custom Styles for Personal Portfolio
 */
@@ -116,3 +115,25 @@ footer {
     display: none;
     min-width: 250px;
 }
+
+.gallery-card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.gallery-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.gallery-card .card-img-top {
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+}
+
+.gallery-card .card-body {
+    background-color: var(--surface-color);
+}

index.php

@@ -40,6 +40,7 @@
                     <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                     <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                     <li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
                     <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                 </ul>
             </div>
@@ -101,6 +102,67 @@
             </div>
         </section>
 
+        <?php
+        require_once __DIR__ . '/includes/pexels.php';
+
+        function get_mushroom_images($count = 6) {
+            $query = 'mushroom';
+            $url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&per_page=' . $count . '&page=1';
+            $data = pexels_get($url);
+            $images = [];
+
+            if ($data && !empty($data['photos'])) {
+                foreach ($data['photos'] as $photo) {
+                    $src_url = $photo['src']['large'] ?? $photo['src']['original'];
+                    $filename = 'pexels-mushroom-' . $photo['id'] . '.jpg';
+                    $local_path = __DIR__ . '/assets/images/' . $filename;
+                    $web_path = 'assets/images/' . $filename;
+
+                    if (!file_exists($local_path)) {
+                        download_to($src_url, $local_path);
+                    }
+                    
+                    if (file_exists($local_path)) {
+                        $images[] = [
+                            'src' => $web_path,
+                            'alt' => $photo['alt'] ?? 'Mushroom image',
+                            'photographer' => $photo['photographer'] ?? 'Unknown',
+                            'photographer_url' => $photo['photographer_url'] ?? '#',
+                        ];
+                    }
+                }
+            }
+            return $images;
+        }
+
+        $mushroom_images = get_mushroom_images(6);
+        ?>
+        <section id="gallery" class="section bg-light">
+            <div class="container">
+                <h2 class="section-title">Mushroom Gallery</h2>
+                <div class="row g-4">
+                    <?php if (!empty($mushroom_images)): ?>
+                        <?php foreach ($mushroom_images as $image): ?>
+                            <div class="col-md-6 col-lg-4">
+                                <div class="card gallery-card h-100">
+                                    <img src="<?php echo htmlspecialchars($image['src']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($image['alt']); ?>">
+                                    <div class="card-body">
+                                        <p class="card-text small text-muted">
+                                            Photo by <a href="<?php echo htmlspecialchars($image['photographer_url']); ?>" target="_blank" rel="noopener noreferrer"><?php echo htmlspecialchars($image['photographer']); ?></a>
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        <?php endforeach; ?>
+                    <?php else: ?>
+                        <div class="col">
+                            <p class="text-center">Could not load mushroom images. Please try again later.</p>
+                        </div>
+                    <?php endif; ?>
+                </div>
+            </div>
+        </section>
+
         <section id="contact" class="section">
             <div class="container">
                 <h2 class="section-title">Get In Touch</h2>