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

hobbies/page.tsx

@@ -0,0 +1,32 @@
+import Nav from "../components/Nav";
+import "./styles.css"; /* EKSTERNAL CSS ONLY: semua styling dari styles.css lewat kelas, tidak ada style="" di halaman ini */
+
+export default function Hobbies() {
+  return (
+    <div className="layout-container">
+      {/* EKSTERNAL CSS: .layout-container, .hobby-card, dll. dari styles.css mengatur tampilan */}
+      <header className="hobbies-header">
+        <Nav />
+      </header>
+
+      <main className="hobbies-main">
+        <section className="hobby-card">
+          {/* Foto pribadi: screenshot akun game saya sendiri. */}
+          <img src="/images/photo-hobby-read.jpg" alt="Screenshot akun game saya, foto pribadi" width="300" height="200" />
+        </section>
+
+        <section className="hobby-card">
+          {/* Foto pribadi: screenshot kode game saya sendiri. */}
+          <img src="/images/photo-hobby-bike.jpg" alt="Screenshot kode game saya, foto pribadi" width="300" height="200" />
+        </section>
+
+        <section className="hobby-card">
+          {/* Foto pribadi: peta game pixel art hasil tangkapan layar saya sendiri. */}
+          <img src="/images/photo-hobby-code.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" width="300" height="200" />
+        </section>
+      </main>
+
+      <footer className="hobbies-footer">&copy; 2026 Hulio</footer>
+    </div>
+  );
+}

hobbies/styles.css

@@ -0,0 +1,48 @@
+/* EKSTERNAL STYLESHEET untuk halaman hobi (External CSS ONLY).
+   Semua styling via kelas di file ini, tidak ada <style> atau style="" di halaman. */
+.layout-container {
+  max-width: 720px;
+  margin: 34px auto;
+  padding: 0 20px;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.7;
+  color: #1f2937;
+}
+.hobbies-header {
+  padding: 26px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+.hobbies-main {
+  margin-top: 24px;
+}
+.hobbies-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 14px;
+  margin-top: 14px;
+}
+.hobby-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  padding: 14px;
+  background: #ffffff;
+}
+.hobby-card img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  border-radius: 8px;
+  display: block;
+  margin-bottom: 8px;
+}
+.hobbies-footer {
+  padding: 20px 0;
+  border-top: 1px solid #e5e7eb;
+  font-size: 13px;
+  color: #9ca3af;
+  text-align: center;
+}
+.hobbies-list {
+  padding-left: 20px;
+  margin: 10px 0;
+}