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,56 @@
+import type { Metadata } from "next";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, contacts } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Kontak | Personal Website" };
+
+export default function ContactPage() {
+  return (
+    <>
+      {/* pilihan css: external. alasannya, halaman ini memakai ulang kelas panel, container, dan nav
+          yang sudah ada di styles.css. inline akan mengulang gaya, tailwind butuh script cdn tambahan
+          padahal halaman ini sederhana dan tidak perlu komponen khusus */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+      <HtmlComment text="contact.html memakai external css karena gayanya sama dengan halaman lain dan cukup satu stylesheet bersama" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <NavExternal current="/contact" />
+      </header>
+
+      <main className="container">
+        <h1>Kontak</h1>
+
+        <section className="panel">
+          <h2>Hubungi saya</h2>
+          <p>Silakan hubungi saya lewat salah satu kanal berikut. Tidak ada formulir, langsung saja kirim pesan.</p>
+          <ul className="contact-list">
+            {contacts.map((item) => (
+              <li key={item.label}>
+                <span className="contact-label">{item.label}</span>
+                <a
+                  href={item.href}
+                  {...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                >
+                  {item.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="panel">
+          <h2>Lokasi</h2>
+          <p>Saya berdomisili di {profile.city} dan kuliah di Universitas Katolik Widya Mandala Surabaya.</p>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </>
+  );
+}