Tugas

2026-11-05 11:55:36 +07:00
commit aed738af00
29 changed files with 1853 additions and 0 deletions
@@ -0,0 +1,68 @@
+import Link from "next/link";
+import { navLinks } from "../../_data/nav-links";
+
+export default function GalleryPage() {
+  return (
+    <>
+      <header className="bg-indigo-900 text-white pt-6 text-center">
+        <h1 className="text-3xl font-bold mb-1">Gallery</h1>
+        <p>Potret momen-momen yang saya simpan.</p>
+        <nav>
+          <ul className="flex flex-wrap justify-center gap-1 mt-4 list-none p-0">
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  className={
+                    link.href === "/gallery"
+                      ? "block px-4 py-3 rounded-t-md bg-indigo-600"
+                      : "block px-4 py-3 rounded-t-md hover:bg-indigo-600"
+                  }
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-4 py-6">
+        <section>
+          <h2 className="text-2xl font-semibold text-indigo-900 mb-4">Koleksi Foto</h2>
+          {/* grid responsif: 1 kolom di ponsel, 2 di tablet, 3 di layar lebar */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-1.jpg" alt="Saya bersama teman-teman di kampus, berfoto dengan seragam merah" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Bersama teman-teman di kampus.</figcaption>
+          </figure>
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-2.jpg" alt="Maskot kucing dan karakter pemegang kue ulang tahun pada poster raksasa di tribun" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Poster raksasa di tribun pertandingan basket.</figcaption>
+          </figure>
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-3.jpg" alt="Suasana arena basket dengan poster burung elang raksasa di tribun" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Suasana arena pertandingan basket.</figcaption>
+          </figure>
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-4.jpg" alt="Ringkasan rute bersepeda sore 30,53 km di Surabaya dari aplikasi Strava" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Rute bersepeda sore sejauh 30,53 km.</figcaption>
+          </figure>
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-5.jpg" alt="Layar hasil pertandingan Clash Squad yang dimenangkan tim saya" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Kemenangan di game Clash Squad.</figcaption>
+          </figure>
+          <figure className="bg-white rounded-lg shadow overflow-hidden">
+            <img src="/images/galeri-6.jpg" alt="Rangkaian Arduino Smart Parking System dengan layar LCD bertuliskan Welcome dan Slot Left 4, dua sensor inframerah, dan motor servo" className="w-full h-56 object-cover" />
+            <figcaption className="p-3 text-sm text-slate-600">Proyek Arduino Smart Parking System.</figcaption>
+          </figure>
+          </div>
+        </section>
+      </main>
+
+      <footer className="text-center py-5 text-sm text-slate-500">
+        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
+      </footer>
+    </>
+  );
+}