Hulio only: Assignment 1 Personal Website Project

- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak (TSX route segments)
- Navigasi bersama (components/Nav.tsx)
- About: internal CSS (about/head.tsx)
- Hobi: external CSS (hobbies/styles.css), 3 foto pribadi
- Gallery: Tailwind CDN, 3 foto pribadi
- Kontak: tanpa form, link sosial media + email
- Semua file di root, tidak ada file Next.js tambahan

gallery/page.tsx

@@ -0,0 +1,39 @@
+import Script from "next/script";
+import Nav from "../components/Nav";
+
+export default function Gallery() {
+  return (
+    <div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937" }}>
+      {/* TAILWIND CSS ONLY: styling via kelas utility Tailwind (CDN script di bawah). Tidak ada internal/external CSS dan tidak ada style="" di halaman ini. */}
+      <Script src="https://cdn.tailwindcss.com" />
+
+      <header className="py-6 border-b border-gray-200">
+        <Nav />
+        <h1 className="text-2xl font-bold text-gray-900">Galeri Foto</h1>
+        <p className="text-gray-600">Kumpulan foto pribadi dengan keterangan.</p>
+      </header>
+
+      <main className="max-w-5xl mx-auto px-4 py-8">
+        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* Foto pribadi: ganti src dengan foto Anda sendiri di /images. Setiap gambar punya alt deskriptif. */}
+          <figure className="bg-white border rounded-lg p-3 shadow-sm">
+            <img src="/images/photo-gallery-1.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
+            <figcaption className="mt-2 text-sm text-gray-700">Peta game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
+          </figure>
+          <figure className="bg-white border rounded-lg p-3 shadow-sm">
+            <img src="/images/photo-gallery-2.jpg" alt="Tampilan game pixel art dengan karakter dan trofi, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
+            <figcaption className="mt-2 text-sm text-gray-700">Tampilan game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
+          </figure>
+          <figure className="bg-white border rounded-lg p-3 shadow-sm">
+            <img src="/images/photo-gallery-3.jpg" alt="Task Manager layar laptop, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
+            <figcaption className="mt-2 text-sm text-gray-700">Task Manager, hasil tangkapan layar saya sendiri.</figcaption>
+          </figure>
+        </section>
+      </main>
+
+      <footer className="py-6 border-t border-gray-200 text-center text-xs text-gray-500">
+        &copy; 2026 Hulio
+      </footer>
+    </div>
+  );
+}