Personal Website Assignment

2026-11-06 12:34:00 +07:00
parent 7604223f74
commit 1472589b5c
14 changed files with 562 additions and 109 deletions
@@ -0,0 +1,100 @@
+import Link from "next/link";
+
+export default function About() {
+  return (
+    <div className="about-page page">
+      {/* internal CSS: satu blok style yang mengatur background dan font halaman, judul, dan badge, memakai selector class dan id */}
+      <style>{`
+        .about-page {
+          background-color: #f5f5f5;
+          color: #222222;
+          font-family: Arial, sans-serif;
+        }
+
+        #judul-bio {
+          font-size: 28px;
+          font-weight: bold;
+          margin: 0 0 8px;
+        }
+
+        .about-page h2 {
+          font-size: 20px;
+          font-weight: bold;
+          margin: 0 0 12px;
+        }
+
+        .badge-prodi {
+          display: inline-block;
+          background-color: #1f3a5f;
+          color: #ffffff;
+          padding: 2px 10px;
+          font-size: 14px;
+        }
+      `}</style>
+
+      {/* external CSS: file styles.css mengatur navbar, wrapper layout (main), kotak, tabel, dan footer */}
+      <link rel="stylesheet" href="/styles.css" />
+
+      <header>
+        <nav className="nav-bar">
+          <Link href="/">Home</Link>
+          <Link href="/about">About</Link>
+          <Link href="/hobbies">Hobbies</Link>
+          <Link href="/gallery">Gallery</Link>
+          <Link href="/contact">Contact</Link>
+        </nav>
+      </header>
+
+      <main className="main-wrapper">
+        <section className="box">
+          <h1 id="judul-bio">Haloo👋</h1>
+          <h2>Bio</h2>
+          <p>Saya Zagar, mahasiswa Informatika semester 3. Saya suka bermain game,menonton film, dan mendengarkan musik pop rock.</p>
+          {/* badge program studi, tampilannya diatur oleh internal CSS (class badge-prodi) */}
+          <span className="badge-prodi">Mahasiswa Informatika</span>
+        </section>
+
+        <section className="box">
+          <h2>Pendidikan</h2>
+          {/* tabel pendidikan, tampilannya diatur oleh external CSS (class edu-table) */}
+          <table className="edu-table">
+            <thead>
+              <tr>
+                <th>Institusi</th>
+                <th>Program Studi</th>
+                <th>Semester</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Universitas Katolik Widya Mandala Surabaya</td>
+                <td>Informatika</td>
+                <td>3</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section className="box">
+          <h2>Kutipan Favorit</h2>
+          {/* inline CSS: atribut style langsung pada elemen kutipan */}
+          <blockquote
+            style={{
+              margin: 0,
+              paddingLeft: "12px",
+              borderLeft: "4px solid #1f3a5f",
+              fontStyle: "italic",
+              color: "#444444",
+            }}
+          >
+            HAII HALOO👋
+          </blockquote>
+        </section>
+      </main>
+
+      <footer className="footer-bar">
+        <p>&copy; 2026 Zagar</p>
+      </footer>
+    </div>
+  );
+}