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,55 @@
+import type { CSSProperties } from "react";
+import type { Metadata } from "next";
+import { NavInline } from "../components/nav";
+import HtmlComment from "../components/html-comment";
+import { profile } from "../lib/data";
+
+export const metadata: Metadata = { title: "Beranda | Personal Website" };
+
+// halaman ini WAJIB inline css saja: semua gaya memakai atribut style
+const s: Record<string, CSSProperties> = {
+  page: { maxWidth: "960px", margin: "0 auto", padding: "24px", fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif", color: "#1c2b33", background: "#f3f7f7", borderRadius: "20px", minHeight: "90vh" },
+  brand: { margin: 0, fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.25rem", fontWeight: 700, color: "#0f4c5c" },
+  hero: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "32px", padding: "32px 0" },
+  photo: { width: "280px", maxWidth: "100%", height: "auto", borderRadius: "16px", border: "6px solid #e09f3e" },
+  heroText: { flex: "1 1 300px" },
+  h1: { margin: "0 0 12px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "2.6rem", lineHeight: 1.15, color: "#0f4c5c" },
+  tagline: { margin: "0 0 16px", fontSize: "1.2rem", lineHeight: 1.5 },
+  section: { padding: "24px", background: "#ffffff", borderRadius: "12px", borderLeft: "6px solid #0f4c5c" },
+  h2: { margin: "0 0 8px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.5rem", color: "#0f4c5c" },
+  p: { margin: 0, lineHeight: 1.7, maxWidth: "65ch" },
+  footer: { marginTop: "32px", paddingTop: "16px", borderTop: "1px solid #c9d8db", fontSize: "0.9rem", color: "#4a5d66" },
+};
+
+export default function HomePage() {
+  return (
+    <div style={s.page}>
+      <HtmlComment text="inline css: seluruh halaman ini distyle lewat atribut style sesuai aturan index.html" />
+      <header>
+        <p style={s.brand}>{profile.nickname}</p>
+        <NavInline current="/" />
+      </header>
+
+      <main>
+        <section style={s.hero}>
+          <img src={profile.photo} alt={profile.photoAlt} width="280" height="210" style={s.photo} />
+          <div style={s.heroText}>
+            <h1 style={s.h1}>Halo, saya {profile.name}</h1>
+            <p style={s.tagline}>{profile.tagline}</p>
+          </div>
+        </section>
+
+        <section style={s.section}>
+          <h2 style={s.h2}>Sekilas tentang saya</h2>
+          <p style={s.p}>{profile.intro}</p>
+        </section>
+      </main>
+
+      <footer style={s.footer}>
+        <p style={{ margin: 0 }}>
+          &copy; {profile.year} {profile.name}. Dibuat di {profile.city}.
+        </p>
+      </footer>
+    </div>
+  );
+}