Tugas

2026-11-05 11:55:36 +07:00
commit aed738af00
29 changed files with 1853 additions and 0 deletions
@@ -0,0 +1,118 @@
+import Link from "next/link";
+import { navLinks } from "../../_data/nav-links";
+
+export default function AboutPage() {
+  return (
+    <>
+      <header className="site-header">
+        <h1 className="page-title">About Me</h1>
+        <p className="tagline">Sedikit cerita tentang siapa saya.</p>
+        <nav className="site-nav">
+          <ul>
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <Link href={link.href} className={link.href === "/about" ? "active" : undefined}>
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+
+      <main className="about-wrapper">
+        <section id="bio">
+          <h2 className="section-title">Bio</h2>
+          <p>
+            Nama saya Yovan Budianto Tanujaya, biasa dipanggil Yovan. Saya lahir
+            di Surabaya dan sekarang tinggal di Surabaya. Saya sedang belajar
+            Informatika dan tertarik pada pengembangan web.
+          </p>
+          <p>
+            <span className="inline-block bg-indigo-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
+              Mahasiswa Informatika
+            </span>{" "}
+            <span className="inline-block bg-emerald-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
+              Web Beginner
+            </span>
+          </p>
+        </section>
+
+        <section id="education">
+          <h2 className="section-title">Pendidikan</h2>
+          {/* ol dipakai karena urutan jenjang pendidikan itu penting (kronologis) */}
+          <ol className="list-decimal pl-6">
+            <li>SDK Santo Yusup Karangpilang (2013 - 2019)</li>
+            <li>SMPK Angelus Custos 2 (2019 - 2022)</li>
+            <li>SMA Santo Yusup Karangpilang (2022 - 2025)</li>
+            <li>S1 Informatika, Universitas Katolik Widya Mandala Surabaya (2025 - sekarang)</li>
+          </ol>
+        </section>
+
+        <section id="skills">
+          <h2 className="section-title">Skill</h2>
+          <h3 className="text-lg font-semibold mb-2">Skill yang sedang saya pelajari</h3>
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="bg-orange-100">
+                <th className="border border-stone-400 px-3 py-2 text-left">Skill</th>
+                <th className="border border-stone-400 px-3 py-2 text-left">Level</th>
+                <th className="border border-stone-400 px-3 py-2 text-left">Catatan</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="border border-stone-400 px-3 py-2">HTML</td>
+                <td className="border border-stone-400 px-3 py-2">Pemula</td>
+                <td className="border border-stone-400 px-3 py-2">
+                  Sedang dipelajari di mata kuliah Pemrograman Web
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-stone-400 px-3 py-2">CSS</td>
+                <td className="border border-stone-400 px-3 py-2">Pemula</td>
+                <td className="border border-stone-400 px-3 py-2">
+                  Inline, internal, eksternal, dan Tailwind
+                </td>
+              </tr>
+              <tr>
+                <td className="border border-stone-400 px-3 py-2">PYTHON</td>
+                <td className="border border-stone-400 px-3 py-2">Pemula</td>
+                <td className="border border-stone-400 px-3 py-2">Class OOP</td>
+              </tr>
+            </tbody>
+          </table>
+          <h3 className="text-lg font-semibold mt-4 mb-2">Sifat yang menggambarkan saya</h3>
+          {/* ul dipakai karena poin-poin ini tidak punya urutan */}
+          <ul className="list-disc pl-6">
+            <li>Rasa ingin tahu yang tinggi</li>
+            <li>Suka bekerja dalam tim</li>
+            <li>Sabar</li>
+          </ul>
+        </section>
+
+        <section id="quote">
+          <h2 className="section-title">Kutipan Favorit</h2>
+          {/* inline CSS: prop style pada blockquote ini menjadi atribut style="" di HTML; inline punya prioritas tertinggi sehingga menimpa aturan lain */}
+          <blockquote
+            style={{
+              borderLeft: "6px solid #ea580c",
+              backgroundColor: "#ffedd5",
+              margin: 0,
+              padding: "12px 20px",
+              fontStyle: "italic",
+              color: "#7c2d12",
+            }}
+          >
+            &quot;Hiduplah seperti ini hari terahkir mu.&quot;
+            <footer>Jerinx</footer>
+          </blockquote>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
+      </footer>
+    </>
+  );
+}