Tugas Personal Website

2026-11-06 21:21:29 +07:00
commit bbcd07213c
26 changed files with 1877 additions and 0 deletions
@@ -0,0 +1,59 @@
+import type { Metadata } from "next";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, hobbies } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Hobi | Personal Website" };
+
+export default function HobbiesPage() {
+  return (
+    <>
+      {/* halaman ini WAJIB external css saja: semua gaya ada di public/styles.css */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <NavExternal current="/hobbies" />
+      </header>
+
+      <main className="container">
+        <h1>Hobi Saya</h1>
+        <p>Tiga hal yang biasa saya lakukan di waktu luang.</p>
+
+        <HtmlComment text="tiap hobi dibuat sebagai section sendiri agar h2 dan h3 tetap berurutan" />
+        {hobbies.map((hobby) => (
+          <section className="hobby" key={hobby.title}>
+            <img src={hobby.photo} alt={hobby.alt} width="260" height="195" />
+            <div className="hobby-text">
+              <h2>{hobby.title}</h2>
+              <p>{hobby.description}</p>
+              <h3>Yang biasa saya lakukan</h3>
+              <ul>
+                {hobby.details.map((detail) => (
+                  <li key={detail}>{detail}</li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        ))}
+
+        <section className="panel">
+          <h2>Ingin mencoba juga?</h2>
+          <p>
+            Untuk pemula yang mau belajar ngegym silahkan{" "}
+            <a href="https://www.tiktok.com/@daddygeeeeee?is_from_webapp=1&sender_device=pc" target="_blank" rel="noopener noreferrer">
+              tonton dia ini
+            </a>
+            .
+          </p>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </>
+  );
+}