Tugas

2026-11-05 11:55:36 +07:00
commit aed738af00
29 changed files with 1853 additions and 0 deletions
@@ -0,0 +1,71 @@
+import Link from "next/link";
+import { navLinks } from "../../_data/nav-links";
+
+export default function HobbiesPage() {
+  return (
+    <>
+      <header className="site-header">
+        <h1 className="page-title">Hobbies</h1>
+        <p className="tagline">Hal-hal yang saya lakukan di waktu luang.</p>
+        <nav className="site-nav">
+          <ul>
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={link.href === "/hobbies" ? "active" : undefined}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+
+      <main className="page-wrapper">
+        <section className="card">
+          <h2>Tiga Hobi Utama</h2>
+          <div className="hobby-grid">
+            <article className="hobby-card">
+              <img src="/images/hobi-bersepeda.jpg" alt="Sepeda balap saya terparkir, dengan ringkasan rute Strava bersepeda sore" />
+              <h3>Bersepeda</h3>
+              <p>
+                Saya suka bersepeda sore keliling Surabaya. Dua rute terakhir saya
+                menempuh 30,53 km dan 37,79 km.
+              </p>
+            </article>
+            <article className="hobby-card">
+              <img src="/images/hobi-menggambar.jpg" alt="Gambar digital karakter berhoodie biru memegang cat semprot buatan saya" />
+              <h3>Menggambar</h3>
+              <p>Saya suka menggambar karakter kartun dengan aplikasi digital.</p>
+            </article>
+            <article className="hobby-card">
+              <img src="/images/hobi-olahraga.jpg" alt="Tim futsal berbaris merangkul bahu di lapangan dengan suporter di tribun" />
+              <h3>Olahraga</h3>
+              <p>Saya suka bermain futsal dan bermain setiap minggu.</p>
+            </article>
+          </div>
+        </section>
+
+        <section className="card">
+          <h2>Lebih Dekat dengan Hobi Saya</h2>
+          <h3>Perlengkapan yang saya pakai</h3>
+          <ul>
+            <li>Sepeda</li>
+            <li>Sepatu futsal</li>
+            <li>Ibis Piant X</li>
+          </ul>
+          <h3>Cara saya memulai hobi baru</h3>
+          {/* ol dipakai karena langkah-langkahnya berurutan */}
+          <ol>
+            <li>Mencari tahu dasar-dasarnya lewat video dan buku.</li>
+            <li>Mencoba dengan perlengkapan sederhana.</li>
+            <li>Berlatih rutin setiap minggu.</li>
+          </ol>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
+      </footer>
+    </>
+  );
+}
@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+// external CSS only: semua gaya halaman ini ada di styles.css
+import "../styles.css";
+
+export const metadata: Metadata = {
+  title: "Hobbies - Yovan",
+};
+
+export default function HobbiesLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="id">
+      <body className="page-body">{children}</body>
+    </html>
+  );
+}