<!-- PICTURES SECTION -->
        <section id="pictures" class="section">
            <h2>Pix & Doodles</h2>
            <div style="text-align: right; margin-bottom: 1rem;">
                <button onclick="refreshPictures()" class="refresh-button">
                    <span>🎲 Randomize</span>
                </button>
            </div>
            <div class="photo-grid" id="photoGrid">
                {{ $allPictures := slice }}
                {{ range $path, $entries := hugo.Data.pictures }}
                    {{ range $entries }}
                        {{ $allPictures = $allPictures | append . }}
                    {{ end }}
                {{ end }}

                <!-- Store all pictures data in a JSON array -->
                {{ $picturesData := jsonify $allPictures }}
                <script>
                    window.allPicturesData = {{ $picturesData | safeJS }};
                </script>
            </div>
        </section>
