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,118 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, education, skills, quote } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Tentang Saya | Personal Website" };
+
+// css internal: satu blok <style> (di-hoist react ke <head>) dengan selector id dan class
+const internalCss = `
+  #about-page {
+    min-height: 100vh;
+    background: #eaf3f4;
+    font-family: Georgia, "Times New Roman", serif;
+  }
+  .quote {
+    margin: 0;
+    padding: 16px 20px;
+    border-left: 4px solid #9aa9ad;
+    color: #55666b;
+    font-style: italic;
+  }
+`;
+
+export default function AboutPage() {
+  return (
+    <div id="about-page">
+      {/* external css: file public/styles.css dimuat lewat link, dipakai untuk nav dan wrapper main */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+      {/* internal css: blok style untuk latar halaman dan font (selector #about-page dan .quote) */}
+      <style href="about-internal" precedence="default">{internalCss}</style>
+      {/* tailwind css: script cdn, dipakai untuk komponen badge di bagian biodata */}
+      <Script src="https://cdn.tailwindcss.com" />
+
+      <HtmlComment text="about.html memakai 4 metode css sekaligus, tiap metode diberi label komentar di elemennya" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <HtmlComment text="external css: kelas site-nav di styles.css mengatur layout navigasi" />
+        <NavExternal current="/about" />
+      </header>
+
+      <HtmlComment text="external css: kelas container di styles.css mengatur lebar dan padding wrapper main" />
+      <main className="container">
+        <section className="panel">
+          <h1>Tentang Saya</h1>
+          <p>
+            Saya {profile.name}, biasa dipanggil {profile.nickname}. Saya tinggal di {profile.city} dan sedang
+            menempuh pendidikan di Program Studi Informatika.
+          </p>
+          <HtmlComment text="tailwind css: kelas utilitas membentuk badge berbentuk pil" />
+          <p>
+            <span className="inline-block rounded-full bg-teal-800 px-3 py-1 text-sm font-semibold text-white">
+              Informatika
+            </span>{" "}
+            <span className="inline-block rounded-full bg-amber-500 px-3 py-1 text-sm font-semibold text-white">
+              Semester 3
+            </span>{" "}
+            <span className="inline-block rounded-full bg-slate-600 px-3 py-1 text-sm font-semibold text-white">
+              {profile.city}
+            </span>
+          </p>
+        </section>
+
+        <section className="panel">
+          <h2>Pendidikan</h2>
+          <HtmlComment text="ol dipakai karena riwayat pendidikan berurutan dari yang paling awal" />
+          <ol>
+            {education.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ol>
+        </section>
+
+        <section className="panel">
+          <h2>Keahlian</h2>
+          <table className="data-table">
+            <caption className="sr-only">Daftar keahlian saya</caption>
+            <thead>
+              <tr>
+                <th scope="col">Keahlian</th>
+                <th scope="col">Level</th>
+                <th scope="col">Catatan</th>
+              </tr>
+            </thead>
+            <tbody>
+              {skills.map((row) => (
+                <tr key={row.skill}>
+                  <td>{row.skill}</td>
+                  <td>{row.level}</td>
+                  <td>{row.note}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+
+        <section className="panel">
+          <h2>Kutipan favorit</h2>
+          <HtmlComment text="inline css: atribut style pada blockquote menimpa warna dan border dari css internal (.quote)" />
+          <blockquote
+            className="quote"
+            style={{ color: "#0f4c5c", borderLeft: "6px solid #e09f3e", background: "#fff7e6", fontSize: "1.2rem" }}
+          >
+            <p>&ldquo;{quote.text}&rdquo;</p>
+            <footer>&mdash; {quote.author}</footer>
+          </blockquote>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </div>
+  );
+}