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>
+    </>
+  );
+}
@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import Script from "next/script";
+
+// external CSS: styles.css dimuat sebagai <link rel="stylesheet">; mengatur navbar (.site-nav) dan wadah layout <main> (.about-wrapper)
+import "../styles.css";
+
+export const metadata: Metadata = {
+  title: "About - Yovan",
+};
+
+// internal CSS: satu blok <style> di <head>; mengatur background + font body,
+// memakai selector class (.section-title) dan id (#education)
+const internalCss = `
+  body {
+    background-color: #fdf6ec;
+    font-family: Georgia, "Times New Roman", serif;
+    color: #292524;
+    line-height: 1.6;
+  }
+
+  .section-title {
+    color: #7c2d12;
+    font-size: 1.5rem;
+    font-weight: bold;
+    border-bottom: 2px solid #fdba74;
+    padding-bottom: 4px;
+    margin: 0 0 12px;
+  }
+
+  #education {
+    background-color: #ffffff;
+    padding: 16px 20px;
+    border-radius: 8px;
+  }
+`;
+
+export default function AboutLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="id">
+      <head>
+        <style>{internalCss}</style>
+      </head>
+      <body>
+        {/* tailwind CSS: skrip CDN, dipakai untuk badge, tabel skill, dan daftar di halaman ini */}
+        <Script src="https://cdn.tailwindcss.com" strategy="beforeInteractive" />
+        {children}
+      </body>
+    </html>
+  );
+}