Tugas

2026-11-05 11:55:36 +07:00
commit aed738af00
29 changed files with 1853 additions and 0 deletions
@@ -0,0 +1,25 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Home - Yovan",
+};
+
+// inline CSS only: layout ini tidak mengimpor file .css dan tidak memuat <style>
+export default function HomeLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="id">
+      <body
+        style={{
+          margin: 0,
+          fontFamily: "'Segoe UI', Arial, sans-serif",
+          backgroundColor: "#f1f5f9",
+          color: "#1e293b",
+          lineHeight: 1.6,
+        }}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,111 @@
+import Link from "next/link";
+import { navLinks } from "../_data/nav-links";
+
+export default function HomePage() {
+  return (
+    <>
+      <header
+        style={{
+          backgroundColor: "#312e81",
+          color: "#ffffff",
+          padding: "24px 16px 0",
+          textAlign: "center",
+        }}
+      >
+        <h1 style={{ margin: "0 0 4px", fontSize: "2rem" }}>Halo, saya Yovan</h1>
+        <p style={{ margin: 0 }}>
+          Mahasiswa Informatika yang suka membangun hal-hal kecil di web.
+        </p>
+        <nav>
+          <ul
+            style={{
+              listStyle: "none",
+              margin: "16px 0 0",
+              padding: 0,
+              display: "flex",
+              justifyContent: "center",
+              flexWrap: "wrap",
+              gap: 4,
+            }}
+          >
+            {navLinks.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  style={{
+                    display: "block",
+                    padding: "12px 16px",
+                    color: "#ffffff",
+                    textDecoration: "none",
+                    borderRadius: "6px 6px 0 0",
+                    // tab aktif (Home) diberi warna latar
+                    backgroundColor: link.href === "/" ? "#4f46e5" : undefined,
+                  }}
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </header>
+
+      <main style={{ maxWidth: 900, margin: "24px auto", padding: "0 16px" }}>
+        <section
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            gap: 24,
+            backgroundColor: "#ffffff",
+            borderRadius: 10,
+            padding: 24,
+            boxShadow: "0 1px 4px rgba(15, 23, 42, 0.12)",
+          }}
+        >
+          <img
+            src="/images/foto-profil.jpg"
+            alt="Foto Yovan dari belakang memakai jersey bernomor 4 di lapangan"
+            width={220}
+            height={220}
+            style={{
+              width: 220,
+              height: 220,
+              objectFit: "cover",
+              borderRadius: "50%",
+              border: "4px solid #4f46e5",
+            }}
+          />
+          <div style={{ flex: 1, minWidth: 240 }}>
+            <h2 style={{ marginTop: 0, color: "#312e81", fontSize: "1.5rem" }}>
+              Selamat datang di situs pribadi saya
+            </h2>
+            <p>
+              Saya Yovan, mahasiswa semester 3 Program Studi Informatika di
+              Universitas Katolik Widya Mandala Surabaya. Situs ini saya buat sebagai
+              Perkenalan Pribadi saya.
+            </p>
+            <p>
+              Silakan jelajahi halaman <strong>About</strong> untuk mengenal saya lebih
+              jauh, <strong>Hobbies</strong> dan <strong>Gallery</strong> untuk sisi
+              santai saya, serta <strong>Contact</strong> jika ingin menghubungi saya.
+            </p>
+          </div>
+        </section>
+      </main>
+
+      <footer
+        style={{
+          textAlign: "center",
+          padding: "20px 16px",
+          color: "#64748b",
+          fontSize: "0.9rem",
+        }}
+      >
+        <p style={{ margin: 0 }}>
+          &copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS
+        </p>
+      </footer>
+    </>
+  );
+}