Hulio only: Assignment 1 Personal Website Project

- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak (TSX route segments) - Navigasi bersama (components/Nav.tsx) - About: internal CSS (about/head.tsx) - Hobi: external CSS (hobbies/styles.css), 3 foto pribadi - Gallery: Tailwind CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua file di root, tidak ada file Next.js tambahan
2026-11-04 21:06:47 +07:00
parent 4fab5ea833
commit 16ea71b011
42 changed files with 0 additions and 7113 deletions
@@ -0,0 +1,74 @@
+export default function AboutHead() {
+  return (
+    <>
+      {/* INTERNAL CSS: <style> di <head>. Selektor id #about-page atur latar/background, selektor kelas .about-card atur kotak konten. */}
+      <style>
+        {`
+          #about-page {
+            background: #fafafa;
+            font-family: Arial, Helvetica, sans-serif;
+            line-height: 1.7;
+            color: #1f2937;
+          }
+          .about-header {
+            padding: 26px 0;
+            border-bottom: 1px solid #e5e7eb;
+          }
+          .about-main {
+            max-width: 700px;
+            margin: 32px auto;
+            padding: 0 20px;
+          }
+          .about-card {
+            border: 1px solid #e5e7eb;
+            border-radius: 10px;
+            padding: 18px;
+            background: #ffffff;
+            margin-bottom: 16px;
+          }
+          .about-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 10px 0;
+          }
+          .about-table th,
+          .about-table td {
+            text-align: left;
+            padding: 8px;
+            border-bottom: 1px solid #e5e7eb;
+          }
+          .about-h1 {
+            font-size: 24px;
+            font-weight: 700;
+            margin: 0 0 6px 0;
+          }
+          .about-h2 {
+            font-size: 19px;
+            font-weight: 600;
+            margin: 0 0 8px 0;
+          }
+          .about-p {
+            font-size: 15px;
+            margin: 0 0 10px 0;
+          }
+          .about-list {
+            padding-left: 20px;
+            margin: 0 0 10px 0;
+          }
+          .about-quote {
+            font-style: italic;
+            color: #4b5563;
+            margin: 10px 0;
+          }
+          .about-footer {
+            padding: 20px;
+            border-top: 1px solid #e5e7eb;
+            font-size: 13px;
+            color: #9ca3af;
+            text-align: center;
+          }
+        `}
+      </style>
+    </>
+  );
+}
@@ -0,0 +1,25 @@
+import Nav from "../components/Nav";
+import "../hobbies/styles.css"; /* EKSTERNAL CSS: .layout-container di styles.css atur tata letak wrapper ini */
+
+export default function About() {
+  return (
+    <div id="about-page" className="layout-container">
+      {/* INTERNAL CSS: #about-page + .about-card dll. di about/head.tsx */}
+      {/* EKSTERNAL CSS: .layout-container dari styles.css mengatur wrapper layout halaman ini */}
+      <header className="about-header">
+        <Nav />
+        <h1 className="about-h1">Tentang Saya</h1>
+      </header>
+
+      <main className="about-main">
+        <section className="about-card">
+          <p className="about-p">Nama: Hulio</p>
+          <p className="about-p">Semester: 3</p>
+          <p className="about-p">Kuliah: Informatika</p>
+        </section>
+      </main>
+
+      <footer className="about-footer">&copy; 2026 Hulio</footer>
+    </div>
+  );
+}