commit bbcd07213cb068eddca9af7dfafd2d1e7931896c
Author: Gray <rmoniaga007@gmail.com>
Date:   Fri Nov 6 21:21:29 2026 +0700

    Tugas Personal Website

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b90a368
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.next
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c78c80f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,36 @@
+# Personal Website (Next.js)
+
+Situs personal 5 halaman untuk Assignment 1 Pemrograman Web, dibuat dengan Next.js (App Router) + TypeScript.
+
+## Menjalankan
+
+```bash
+npm install
+npm run dev
+```
+
+Buka http://localhost:3000
+
+## Yang perlu kamu ganti
+
+1. Teks pribadi: `lib/data.ts` (nama, tagline, pendidikan, hobi, kontak, dll).
+2. Foto: timpa file di `public/images/` dengan fotomu sendiri (nama file sama, format .jpg).
+   Perbarui teks `alt` di `lib/data.ts` agar sesuai isi fotomu.
+
+## Peta halaman dan metode CSS
+
+| Route        | File                    | Metode CSS                                   |
+| ------------ | ----------------------- | -------------------------------------------- |
+| `/`          | `app/page.tsx`           | Inline saja                                  |
+| `/about`     | `app/about/page.tsx`     | Internal + inline + external + Tailwind      |
+| `/hobbies`   | `app/hobbies/page.tsx`   | External saja (`public/styles.css`)          |
+| `/gallery`   | `app/gallery/page.tsx`   | Tailwind (CDN) saja                          |
+| `/contact`   | `app/contact/page.tsx`   | External (alasan ada di komentar halaman)    |
+
+## Catatan penyesuaian ke Next.js
+
+- Navigasi memakai `<a>` biasa, bukan `next/link`, supaya tiap halaman dimuat penuh seperti situs multipage dan CSS antarhalaman tidak bocor.
+- Tidak ada CSS global di `layout.tsx`.
+- Komentar HTML asli dirender lewat komponen `HtmlComment` (terlihat di DevTools > Elements).
+- Next.js tetap memuat JavaScript bawaannya untuk menjalankan aplikasi. Script tambahan hanya Tailwind CDN.
+- Tailwind CDN juga dimuat di `/about` karena halaman itu wajib memakai keempat metode CSS.
diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..8bf861e
--- /dev/null
+++ b/app/about/page.tsx
@@ -0,0 +1,118 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, education, skills, quote } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Tentang Saya | Personal Website" };
+
+// css internal: satu blok <style> (di-hoist react ke <head>) dengan selector id dan class
+const internalCss = `
+  #about-page {
+    min-height: 100vh;
+    background: #eaf3f4;
+    font-family: Georgia, "Times New Roman", serif;
+  }
+  .quote {
+    margin: 0;
+    padding: 16px 20px;
+    border-left: 4px solid #9aa9ad;
+    color: #55666b;
+    font-style: italic;
+  }
+`;
+
+export default function AboutPage() {
+  return (
+    <div id="about-page">
+      {/* external css: file public/styles.css dimuat lewat link, dipakai untuk nav dan wrapper main */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+      {/* internal css: blok style untuk latar halaman dan font (selector #about-page dan .quote) */}
+      <style href="about-internal" precedence="default">{internalCss}</style>
+      {/* tailwind css: script cdn, dipakai untuk komponen badge di bagian biodata */}
+      <Script src="https://cdn.tailwindcss.com" />
+
+      <HtmlComment text="about.html memakai 4 metode css sekaligus, tiap metode diberi label komentar di elemennya" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <HtmlComment text="external css: kelas site-nav di styles.css mengatur layout navigasi" />
+        <NavExternal current="/about" />
+      </header>
+
+      <HtmlComment text="external css: kelas container di styles.css mengatur lebar dan padding wrapper main" />
+      <main className="container">
+        <section className="panel">
+          <h1>Tentang Saya</h1>
+          <p>
+            Saya {profile.name}, biasa dipanggil {profile.nickname}. Saya tinggal di {profile.city} dan sedang
+            menempuh pendidikan di Program Studi Informatika.
+          </p>
+          <HtmlComment text="tailwind css: kelas utilitas membentuk badge berbentuk pil" />
+          <p>
+            <span className="inline-block rounded-full bg-teal-800 px-3 py-1 text-sm font-semibold text-white">
+              Informatika
+            </span>{" "}
+            <span className="inline-block rounded-full bg-amber-500 px-3 py-1 text-sm font-semibold text-white">
+              Semester 3
+            </span>{" "}
+            <span className="inline-block rounded-full bg-slate-600 px-3 py-1 text-sm font-semibold text-white">
+              {profile.city}
+            </span>
+          </p>
+        </section>
+
+        <section className="panel">
+          <h2>Pendidikan</h2>
+          <HtmlComment text="ol dipakai karena riwayat pendidikan berurutan dari yang paling awal" />
+          <ol>
+            {education.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ol>
+        </section>
+
+        <section className="panel">
+          <h2>Keahlian</h2>
+          <table className="data-table">
+            <caption className="sr-only">Daftar keahlian saya</caption>
+            <thead>
+              <tr>
+                <th scope="col">Keahlian</th>
+                <th scope="col">Level</th>
+                <th scope="col">Catatan</th>
+              </tr>
+            </thead>
+            <tbody>
+              {skills.map((row) => (
+                <tr key={row.skill}>
+                  <td>{row.skill}</td>
+                  <td>{row.level}</td>
+                  <td>{row.note}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </section>
+
+        <section className="panel">
+          <h2>Kutipan favorit</h2>
+          <HtmlComment text="inline css: atribut style pada blockquote menimpa warna dan border dari css internal (.quote)" />
+          <blockquote
+            className="quote"
+            style={{ color: "#0f4c5c", borderLeft: "6px solid #e09f3e", background: "#fff7e6", fontSize: "1.2rem" }}
+          >
+            <p>&ldquo;{quote.text}&rdquo;</p>
+            <footer>&mdash; {quote.author}</footer>
+          </blockquote>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </div>
+  );
+}
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
new file mode 100644
index 0000000..fae2258
--- /dev/null
+++ b/app/contact/page.tsx
@@ -0,0 +1,56 @@
+import type { Metadata } from "next";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, contacts } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Kontak | Personal Website" };
+
+export default function ContactPage() {
+  return (
+    <>
+      {/* pilihan css: external. alasannya, halaman ini memakai ulang kelas panel, container, dan nav
+          yang sudah ada di styles.css. inline akan mengulang gaya, tailwind butuh script cdn tambahan
+          padahal halaman ini sederhana dan tidak perlu komponen khusus */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+      <HtmlComment text="contact.html memakai external css karena gayanya sama dengan halaman lain dan cukup satu stylesheet bersama" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <NavExternal current="/contact" />
+      </header>
+
+      <main className="container">
+        <h1>Kontak</h1>
+
+        <section className="panel">
+          <h2>Hubungi saya</h2>
+          <p>Silakan hubungi saya lewat salah satu kanal berikut. Tidak ada formulir, langsung saja kirim pesan.</p>
+          <ul className="contact-list">
+            {contacts.map((item) => (
+              <li key={item.label}>
+                <span className="contact-label">{item.label}</span>
+                <a
+                  href={item.href}
+                  {...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                >
+                  {item.text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="panel">
+          <h2>Lokasi</h2>
+          <p>Saya berdomisili di {profile.city} dan kuliah di Universitas Katolik Widya Mandala Surabaya.</p>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </>
+  );
+}
diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx
new file mode 100644
index 0000000..7149426
--- /dev/null
+++ b/app/gallery/page.tsx
@@ -0,0 +1,53 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import { NavTailwind } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, gallery } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Galeri | Personal Website" };
+
+export default function GalleryPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 font-sans text-slate-800">
+      {/* halaman ini WAJIB tailwind css saja: script cdn dimuat di sini, semua gaya berupa kelas utilitas */}
+      <Script src="https://cdn.tailwindcss.com" />
+
+      <header className="mx-auto max-w-5xl px-6 pt-4">
+        <p className="m-0 font-serif text-xl font-bold text-teal-800">{profile.nickname}</p>
+        <NavTailwind current="/gallery" />
+      </header>
+
+      <main className="mx-auto max-w-5xl px-6 pb-6">
+        <section>
+          <h1 className="mb-2 mt-6 font-serif text-4xl font-bold leading-tight text-teal-800">Galeri Foto</h1>
+          <p className="mb-6 max-w-prose leading-relaxed">Beberapa potret dari keseharian saya.</p>
+        </section>
+
+        <section>
+          <h2 className="mb-4 font-serif text-2xl font-bold text-teal-800">Koleksi terbaru</h2>
+          <HtmlComment text="grid responsif: 1 kolom di ponsel, 2 di tablet, 3 di layar lebar" />
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+            {gallery.map((photo) => (
+              <figure key={photo.src} className="m-0 overflow-hidden rounded-xl bg-white shadow">
+                <img
+                  src={photo.src}
+                  alt={photo.alt}
+                  width="400"
+                  height="300"
+                  className="aspect-[4/3] w-full object-cover"
+                />
+                <figcaption className="px-4 py-3 text-sm font-semibold text-slate-700">{photo.caption}</figcaption>
+              </figure>
+            ))}
+          </div>
+        </section>
+      </main>
+
+      <footer className="mx-auto max-w-5xl border-t border-slate-300 px-6 pb-8 pt-4 text-sm text-slate-600">
+        <p className="m-0">
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </div>
+  );
+}
diff --git a/app/hobbies/page.tsx b/app/hobbies/page.tsx
new file mode 100644
index 0000000..cb983e5
--- /dev/null
+++ b/app/hobbies/page.tsx
@@ -0,0 +1,59 @@
+import type { Metadata } from "next";
+import { NavExternal } from "../../components/nav";
+import HtmlComment from "../../components/html-comment";
+import { profile, hobbies } from "../../lib/data";
+
+export const metadata: Metadata = { title: "Hobi | Personal Website" };
+
+export default function HobbiesPage() {
+  return (
+    <>
+      {/* halaman ini WAJIB external css saja: semua gaya ada di public/styles.css */}
+      <link rel="stylesheet" href="/styles.css" precedence="default" />
+
+      <header className="site-header">
+        <p className="brand">{profile.nickname}</p>
+        <NavExternal current="/hobbies" />
+      </header>
+
+      <main className="container">
+        <h1>Hobi Saya</h1>
+        <p>Tiga hal yang biasa saya lakukan di waktu luang.</p>
+
+        <HtmlComment text="tiap hobi dibuat sebagai section sendiri agar h2 dan h3 tetap berurutan" />
+        {hobbies.map((hobby) => (
+          <section className="hobby" key={hobby.title}>
+            <img src={hobby.photo} alt={hobby.alt} width="260" height="195" />
+            <div className="hobby-text">
+              <h2>{hobby.title}</h2>
+              <p>{hobby.description}</p>
+              <h3>Yang biasa saya lakukan</h3>
+              <ul>
+                {hobby.details.map((detail) => (
+                  <li key={detail}>{detail}</li>
+                ))}
+              </ul>
+            </div>
+          </section>
+        ))}
+
+        <section className="panel">
+          <h2>Ingin mencoba juga?</h2>
+          <p>
+            Untuk pemula yang mau belajar ngegym silahkan{" "}
+            <a href="https://www.tiktok.com/@daddygeeeeee?is_from_webapp=1&sender_device=pc" target="_blank" rel="noopener noreferrer">
+              tonton dia ini
+            </a>
+            .
+          </p>
+        </section>
+      </main>
+
+      <footer className="site-footer">
+        <p>
+          &copy; {profile.year} {profile.name}
+        </p>
+      </footer>
+    </>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..d341e94
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,17 @@
+// root layout sengaja polos: tidak ada css global di sini
+// setiap halaman membawa metode css-nya sendiri sesuai ketentuan tugas
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "Personal Website",
+  description: "Situs personal multipage untuk tugas Pemrograman Web",
+};
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="id">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..29a5fd8
--- /dev/null
+++ b/app/page.tsx
@@ -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>
+  );
+}
diff --git a/components/html-comment.tsx b/components/html-comment.tsx
new file mode 100644
index 0000000..0ed605f
--- /dev/null
+++ b/components/html-comment.tsx
@@ -0,0 +1,5 @@
+// next.js tidak punya sintaks komentar html di jsx
+// komponen ini menulis komentar html asli ke hasil render (lihat di devtools > elements)
+export default function HtmlComment({ text }: { text: string }) {
+  return <span hidden dangerouslySetInnerHTML={{ __html: `<!-- ${text} -->` }} />;
+}
diff --git a/components/nav.tsx b/components/nav.tsx
new file mode 100644
index 0000000..930bfa9
--- /dev/null
+++ b/components/nav.tsx
@@ -0,0 +1,80 @@
+import type { CSSProperties } from "react";
+import { links } from "../lib/data";
+
+type NavProps = { current: string };
+
+// catatan: memakai <a> biasa (bukan next/link) agar setiap halaman dimuat penuh
+// seperti situs multipage html, sehingga css tiap halaman tidak saling bocor
+
+// nav versi 1: inline css (dipakai index)
+const inlineNav: Record<string, CSSProperties> = {
+  list: { display: "flex", flexWrap: "wrap", gap: "8px", listStyle: "none", margin: 0, padding: 0 },
+  link: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#0f4c5c", background: "#e3eef0" },
+  active: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#ffffff", background: "#0f4c5c" },
+};
+
+export function NavInline({ current }: NavProps) {
+  return (
+    <nav aria-label="Navigasi utama" style={{ padding: "16px 0" }}>
+      <ul style={inlineNav.list}>
+        {links.map((item) => (
+          <li key={item.href}>
+            <a
+              href={item.href}
+              style={current === item.href ? inlineNav.active : inlineNav.link}
+              aria-current={current === item.href ? "page" : undefined}
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+// nav versi 2: external css (about, hobbies, contact) - kelas ada di public/styles.css
+export function NavExternal({ current }: NavProps) {
+  return (
+    <nav className="site-nav" aria-label="Navigasi utama">
+      <ul>
+        {links.map((item) => (
+          <li key={item.href}>
+            <a
+              href={item.href}
+              className={current === item.href ? "active" : undefined}
+              aria-current={current === item.href ? "page" : undefined}
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+// nav versi 3: tailwind css (gallery)
+export function NavTailwind({ current }: NavProps) {
+  return (
+    <nav aria-label="Navigasi utama" className="py-4">
+      <ul className="flex flex-wrap gap-2 list-none m-0 p-0">
+        {links.map((item) => (
+          <li key={item.href}>
+            <a
+              href={item.href}
+              aria-current={current === item.href ? "page" : undefined}
+              className={
+                current === item.href
+                  ? "inline-block rounded-full bg-teal-800 px-4 py-2 font-semibold text-white no-underline"
+                  : "inline-block rounded-full bg-teal-50 px-4 py-2 font-semibold text-teal-800 no-underline hover:bg-teal-100"
+              }
+            >
+              {item.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/lib/data.ts b/lib/data.ts
new file mode 100644
index 0000000..8313201
--- /dev/null
+++ b/lib/data.ts
@@ -0,0 +1,89 @@
+export const profile = {
+  name: "Gray Keiji Matthew Moniaga",
+  nickname: "Gray",
+  tagline: "Hidup Seperti Larry.",
+  intro:
+    "Halo! Saya mahasiswa semester 3 Informatika di Universitas Katolik Widya Mandala Surabaya.",
+  photo: "/images/Profil1.jpeg",
+  photoAlt: "Foto diri saya menghadap kamera",
+  city: "Surabaya",
+  year: 2026,
+};
+
+export const links = [
+  { href: "/", label: "Beranda" },
+  { href: "/about", label: "Tentang" },
+  { href: "/hobbies", label: "Hobi" },
+  { href: "/gallery", label: "Galeri" },
+  { href: "/contact", label: "Kontak" },
+];
+
+export const education = [
+  "SD Tridharma, Manado (2010 - 2016)",
+  "SMP Tridharma, Manado (2016 - 2019)",
+  "SMA Katolik Rex Mundi, Manado (2019 - 2022)",
+];
+
+export const skills = [
+  { skill: "HTML", level: "Pemula", note: "Sedang belajar tag semantik" },
+  { skill: "CSS", level: "Pemula", note: "Inline, internal, external, Tailwind" },
+  { skill: "Next.js", level: "Dasar", note: "Dipakai untuk membangun situs ini" },
+  { skill: "Komunikasi", level: "Menengah", note: "Terbiasa presentasi di kelas" },
+];
+
+export const quote = {
+  text: "Satu-satunya cara untuk melakukan pekerjaan hebat adalah mencintai apa yang kamu lakukan.",
+  author: "Steve Jobs",
+};
+
+export const hobbies = [
+  {
+    title: "Voli",
+    photo: "/images/Hobi1.jpg",
+    alt: "saya mengambil foto dari google karena foto foto saya sudah hilang",
+    description:
+      "Saya suka bermain voli karena menurut saya cocok dengan saya",
+    details: [
+      "Pemanasan sebelum bermain",
+      "belajar form gerakan dengan benar",
+      "dan yang terpenting makan dulu sebelum bermain",
+    ],
+  },
+  {
+    title: "GYM",
+    photo: "/images/Hobi2.jpeg",
+    alt: "Saya Mirror Selfie",
+    description:
+      "Ngegym agar tubuh lebih bugar.",
+    details: [
+      "Belajar form gerakan yang benar",
+      "Menjaga pola makan",
+      "Mengatur waktu tidur",
+    ],
+  },
+  {
+    title: "Makan Bakso",
+    photo: "/images/Hobi3.jpeg",
+    alt: "Semangkuk bakso yang ada di manado",
+    description:
+      "Salah satu tempat bakso yang recomended di manado",
+    details: [
+      "Meracik bakso ini agar lebih enak",
+      "Tambah 1 porsi karena kurang kalau cuma 1",
+    ],
+  },
+];
+
+export const gallery = [
+  { src: "/images/Galeri1.jpeg", alt: "Suasana kampus pada pagi hari", caption: "Pagi di kampus" },
+  { src: "/images/Galeri2.jpeg", alt: "Langit sore di kantin kampus", caption: "Langit sore surabaya" },
+  { src: "/images/Galeri3.jpeg", alt: "Lagi di tempat rental ps", caption: "Bermain PS" },
+  { src: "/images/Galeri4.jpeg", alt: "suasana surabaya bagian barat", caption: "Truk tiduran" },
+  { src: "/images/Galeri5.jpeg", alt: "motor terlantar", caption: "Harga tertinggi angkut" },
+  { src: "/images/Galeri6.jpeg", alt: "Olahraga sore", caption: "Kaka adik lagi main bareng" },
+];
+
+export const contacts = [
+  { label: "Email", text: "rmoniaga007@gmail.com", href: "mailto:nama@email.com", external: false },
+  { label: "Instagram", text: "graymoniaga", href: "https://www.instagram.com/", external: true },
+];
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c215bdb
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1063 @@
+{
+  "name": "personal-website",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "personal-website",
+      "version": "1.0.0",
+      "dependencies": {
+        "next": "^15.1.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "20.17.6",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "^19.0.0",
+        "typescript": "5.8.2"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.35.5.tgz",
+      "integrity": "sha512-QRUlFQ0WxvdWyqqG/WtI3iupfD5rBzmCHXSdPsY91sAtVtTo7Q4cb6zOccZ3gqEqkr0f1As1ehLqmEpDsRf+lg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.5.tgz",
+      "integrity": "sha512-+BR255RhDlpygUpOc/Jdt1nT6DQ3XG/ERo5wbcdOf5Q320dKtPCKPLR1LJs9VGXRaMa8l1uUa0tkCNOXiAxZUw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Y/z91nEZ4uIBX5X3nfTovjU9lHNKFYbL2lpHCLVNmXQK03VIZvXBBt0KxbPGp2SdGSF+2mQU4e+hQaWOt86iAw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.3.4.tgz",
+      "integrity": "sha512-5R89nBYiRdUlSWJxPhO+GVtaXzXSxKnRu/xqMn3KTA3L9EB9Oy/P+Nn2f2vlhPuUdy/Zusb2DarbyTpGCfEDuw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.4.tgz",
+      "integrity": "sha512-iR2OKH80yi0U+dUplyh3/xdpFvps6YkCwsXenIJxqxR1v9o+xtKTGbS9H7cps+2Vxjc8B1j96p75NmTGjIhtpQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.4.tgz",
+      "integrity": "sha512-LmRtTsOHuvM2+wlO2Db37dx5MiZhB0FvSunciw48YjdOkZz9KAiRbm8ujeMOA1INqmei5NapFxYEK1D1ZSidmw==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.4.tgz",
+      "integrity": "sha512-Y3dgX/6lE2QhQb+Gxy0WZxfg9MEm/JBjamZpS2IklP7xIQoKN4hzAm7KcMVGtaVDt3neE9OKBC7vAfonA/Lr1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.4.tgz",
+      "integrity": "sha512-Le6boB8Tai0Nis+gIxIpKx68UDVVIqdR8Tin5Yf1z2LJJQLDJvCDRqRu+jC2qCoD+eIomonmOwB4smBRxfVpYQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.4.tgz",
+      "integrity": "sha512-aHkkIEHPRdQEegJN20MLmGtxYD9R2wQr3Cwpddnu5+YKMt6Uzax7S9h5gpZTo8wyrGuZSlfQ63OevL5mTyOC7Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.4.tgz",
+      "integrity": "sha512-ra/mB6MikESDUO7Yg+Mi95bFBb9GsObURuhnOv3OqknjGe9sZrG8tCe9q0xSIGrtLgvgw0gKnFWcK4blSgQOuQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.4.tgz",
+      "integrity": "sha512-GJ//SSXbnwSDes02umB3nDJLFcQzw8a18V8fyhqr6tV515tOEMdImjjxj1AoafMRz56F3PHgftnj1QEKSU1zkw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.4.tgz",
+      "integrity": "sha512-hvulFwtjUcagsis6BBxHwGFwWoNZjgYmULGVrZcyfNbjA8hKILbRxGg15/7w5HDyXHXUos/j6baAWqnCyQ2DWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.4.tgz",
+      "integrity": "sha512-6zXKeE/p39I1AmA3cJG35eyBGNqNddLnUXjhwBnsGjFPWqf5VKkDBEqaEkPDoTEtkxwi2vv8Tcr2mDyP4So7Fg==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.5.tgz",
+      "integrity": "sha512-LEaXK2WdXVK5ykcw0buWyPMsmLLL2vpHLD6yrNSW+JGEL3BZPA4tpKN6iaMc4AxTTAoaX/sU1rOL51lcIz48ZQ==",
+      "cpu": [
+        "arm"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.5.tgz",
+      "integrity": "sha512-LYVx5JTsOM2CBzmxreh+nl64/3H6Xb09iSLknqH47z2T2DFFxDeFLP5y4dJwe6H7uGQlHPyEEtIqyo3DYsRwdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.5.tgz",
+      "integrity": "sha512-QVxAAq8evVRI9ia2vqgwrmWucn5Dfv+JdWzj75pD8omHLPSP7f8p20O8jxzjCcuCEQEOtYOZUmX1hkiZ0kdevA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.5.tgz",
+      "integrity": "sha512-LtdreXguaavKODPIfzJ4kffx7UNt1omwtK0rch4EBbbSTXPnxWmYSayXdLJw0fJzQ97kHt1gL/yh4tvU+nCyRQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.5.tgz",
+      "integrity": "sha512-UZasTOFiYzotTsGOCu42BfUzP6Tu6Do/947iRm1RsLKvlllxwGcn4RN27LibGWceix4Y+Pmw3jsnTcCQIgWjqA==",
+      "cpu": [
+        "s390x"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.5.tgz",
+      "integrity": "sha512-SxFtLTeJInhAA9Q836kux2vZNeOBQEx658qvbboZScr0wIARym3IcGmW7KpVD5sbVg0Ojy+udFQdayYIZyoNog==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.5.tgz",
+      "integrity": "sha512-9HbMclmI1zlNkFRs3z9/eBtDjfD0sGlrX1z6b1qwmiFY5ElDLh4BC0LPBdVp7z1DXFiKlIcznf+ZlsuZzLxQqg==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.5.tgz",
+      "integrity": "sha512-4KOphqB035HrVdqLZfCgMzzERrQkkzOwRhl4OAkRO1YCldbaFjySXMaK534Mo0V+LndnlJk+sbUyLeU0ULyD1A==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.35.5.tgz",
+      "integrity": "sha512-Ptsga1su4tQx+LLF1ECS9U6nz5kmrXKo6XVbtR48Ke3ZRxxgaWBu7IDtEe1quo8hiupwm6WFqxVlXaSf7IINGQ==",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.5.tgz",
+      "integrity": "sha512-hfhF/FmoQyTUkA0bIKFOtw536BQSeBMe6BF6QyWlrPxT754+TFLaZ7sKKTfvvM0yJgKgaYTwnFCIZ/GuDw5SUA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.5.tgz",
+      "integrity": "sha512-X4t7g+7ZA5DKblCBEXGjUqqemj4vczING/5viFwAL8h4N3qYeyjwdCvRLHi4EdOUI+2Z7UFlp1VM+p/AuEtm6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.5.tgz",
+      "integrity": "sha512-5Zm82LoBc43nhwNybZlG7Y1KO//Zhsn306fQl29ZOuStHLGTo3BWL83q3cznX0poxSAMuYL1On/BHBxkBeKr6A==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.5.tgz",
+      "integrity": "sha512-x76eH0vEiHlcMQu8Y8IenntaACtddpT6W0wmXtWrnKcnKI7ME5DdgqhAD6SEWOEl1v2zDvkZDhFA9KnURwpfqg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.29.tgz",
+      "integrity": "sha512-9SrTiTsgORa+KfhlXXAGC1eSs847E+d2MQTPUX+n7R5XA8g/B6ZitfL6GoYHNMLwG3Hzs1wjDH0/ME5WrGMqBQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.29.tgz",
+      "integrity": "sha512-vozRDuM23T0faRR0O3oN1eRqjEqUue4Eljhkb9f7urQgzmyzve7j3atzTv3Z1AnjQ9IeVY0X3aS1/an56TOiTg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.29.tgz",
+      "integrity": "sha512-FzrcEzMZVcp/SqFXCW5SXyPil10bB9l5wpTBapEs9ZMqke3W+hyC5mNAdAa1divn+4SZ7LD5BtK67XvK7SucWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.29.tgz",
+      "integrity": "sha512-FWbWE5P313Yy5062vgY9UspNz/t6Ve/s35X9v6YU7ilsbhqKGabPBPIWcMEPhyomeRdwfv19NAITkU2FFIhGwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.29.tgz",
+      "integrity": "sha512-xjTHrVisb9GeDSNFOwJI+4UJrKdwlpjz95q8sEvQh46yUp3+JikNcf26pode/HlHktSdJwcHx3iVMCjfPcnU+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.29.tgz",
+      "integrity": "sha512-5WqW7kHscT02wyF8TlbYv9+zx3KhnQeZwk+FkTCr1r7TuvMrqqOZ3RDkdDKl3O0M0Er3VuQEzoEIrj8VX5fjaw==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.29.tgz",
+      "integrity": "sha512-I0QJ1Be9vtdq5FABhNcSbkELllA91WnhG+m4BjJHCn1bXAIL8AuDABIKIJ7Bz84T/sIkZP6TvOEWJcKckrX3yQ==",
+      "cpu": [
+        "x64"
+      ],
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.29.tgz",
+      "integrity": "sha512-q4fQFWtR7nH7ZDhU8RIvwNW0S/nHImaZkoOSw7rOXFgoP51HTesm8/8P/w3ACjc9GxqytXj0LZZesykK3arFBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.29.tgz",
+      "integrity": "sha512-putWQ+CTEJunAPIPDPfb06Kc4emhYpdM5FoCDHSkC/ym7Dy2xOBMPgBjBbRkw2Hp5/550ACYxCmUtV4k4ui3Iw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.17.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.6.tgz",
+      "integrity": "sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001823",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001823.tgz",
+      "integrity": "sha512-TQ5s/djDjNk1axreUW+4rULH+BmdCMLiJkhaXnO5wqivG7tITkSUj4ItIdzqdZHKaXcHAV8dhH3JxOM7/7bwqw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.20",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
+      "integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.5.29",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.5.29.tgz",
+      "integrity": "sha512-93AMszTCdi9Az7fD5VzcWy46SHCdQF45+i53K0LpDc4dDXCwB9P1SxP1wBYZKW6dF3HJnz41jyEni1vmgCluiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.5.29",
+        "@swc/helpers": "0.5.15",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.5.29",
+        "@next/swc-darwin-x64": "15.5.29",
+        "@next/swc-linux-arm64-gnu": "15.5.29",
+        "@next/swc-linux-arm64-musl": "15.5.29",
+        "@next/swc-linux-x64-gnu": "15.5.29",
+        "@next/swc-linux-x64-musl": "15.5.29",
+        "@next/swc-win32-arm64-msvc": "15.5.29",
+        "@next/swc-win32-x64-msvc": "15.5.29",
+        "sharp": "^0.34.3 || ^0.35.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.1.tgz",
+      "integrity": "sha512-QNhWdt7nrgVWWQG58QuGsAR3jv3Hbe4mb4vz7w2csnHavciZJgda1CPNaldF6eVxv90ud3jUXpKlHL69gO38yw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.1.tgz",
+      "integrity": "sha512-Y0bARz53lhEC1NMCASs0/j+faB/zqt3R8hpvg1e8+61ZVJ4UL0UdC4cBbXfZMcIuhrfgeILTLe+ZeBCavQPtKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": "^19.3.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.8.6",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.6.tgz",
+      "integrity": "sha512-9lpSSU4Mly3mrtruwLs1eLK6+gzbzqeBFwRNjIjE+9LuDpWdYctrQlQ3ej1Ilgi7gknpsTRnPoLP8DpCHqHIJw==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.35.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.35.5.tgz",
+      "integrity": "sha512-Ywn4OnzGukp7CDMrp08RQ50YKmuwG47brZgIVPTvBaaAfQlRlygrRqSrxdCiL9M+LlzLBiJ68IR1QqvzHyjC7g==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.5",
+        "@img/sharp-darwin-x64": "0.35.5",
+        "@img/sharp-freebsd-wasm32": "0.35.5",
+        "@img/sharp-libvips-darwin-arm64": "1.3.4",
+        "@img/sharp-libvips-darwin-x64": "1.3.4",
+        "@img/sharp-libvips-linux-arm": "1.3.4",
+        "@img/sharp-libvips-linux-arm64": "1.3.4",
+        "@img/sharp-libvips-linux-ppc64": "1.3.4",
+        "@img/sharp-libvips-linux-riscv64": "1.3.4",
+        "@img/sharp-libvips-linux-s390x": "1.3.4",
+        "@img/sharp-libvips-linux-x64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.4",
+        "@img/sharp-linux-arm": "0.35.5",
+        "@img/sharp-linux-arm64": "0.35.5",
+        "@img/sharp-linux-ppc64": "0.35.5",
+        "@img/sharp-linux-riscv64": "0.35.5",
+        "@img/sharp-linux-s390x": "0.35.5",
+        "@img/sharp-linux-x64": "0.35.5",
+        "@img/sharp-linuxmusl-arm64": "0.35.5",
+        "@img/sharp-linuxmusl-x64": "0.35.5",
+        "@img/sharp-webcontainers-wasm32": "0.35.5",
+        "@img/sharp-win32-arm64": "0.35.5",
+        "@img/sharp-win32-ia32": "0.35.5",
+        "@img/sharp-win32-x64": "0.35.5"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.9.1.tgz",
+      "integrity": "sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8076f7e
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "personal-website",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "20.17.6",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "5.8.2"
+  }
+}
diff --git a/public/images/Galeri1.jpeg b/public/images/Galeri1.jpeg
new file mode 100644
index 0000000..219ba08
Binary files /dev/null and b/public/images/Galeri1.jpeg differ
diff --git a/public/images/Galeri2.jpeg b/public/images/Galeri2.jpeg
new file mode 100644
index 0000000..e9578c1
Binary files /dev/null and b/public/images/Galeri2.jpeg differ
diff --git a/public/images/Galeri3.jpeg b/public/images/Galeri3.jpeg
new file mode 100644
index 0000000..5ad3f97
Binary files /dev/null and b/public/images/Galeri3.jpeg differ
diff --git a/public/images/Galeri4.jpeg b/public/images/Galeri4.jpeg
new file mode 100644
index 0000000..f8aea2a
Binary files /dev/null and b/public/images/Galeri4.jpeg differ
diff --git a/public/images/Galeri5.jpeg b/public/images/Galeri5.jpeg
new file mode 100644
index 0000000..d4698c6
Binary files /dev/null and b/public/images/Galeri5.jpeg differ
diff --git a/public/images/Galeri6.jpeg b/public/images/Galeri6.jpeg
new file mode 100644
index 0000000..51d697c
Binary files /dev/null and b/public/images/Galeri6.jpeg differ
diff --git a/public/images/Hobi1.jpg b/public/images/Hobi1.jpg
new file mode 100644
index 0000000..ea7a8f6
Binary files /dev/null and b/public/images/Hobi1.jpg differ
diff --git a/public/images/Hobi2.jpeg b/public/images/Hobi2.jpeg
new file mode 100644
index 0000000..3bb0df8
Binary files /dev/null and b/public/images/Hobi2.jpeg differ
diff --git a/public/images/Hobi3.jpeg b/public/images/Hobi3.jpeg
new file mode 100644
index 0000000..e4b1e3d
Binary files /dev/null and b/public/images/Hobi3.jpeg differ
diff --git a/public/images/Profil1.jpeg b/public/images/Profil1.jpeg
new file mode 100644
index 0000000..c76f297
Binary files /dev/null and b/public/images/Profil1.jpeg differ
diff --git a/public/styles.css b/public/styles.css
new file mode 100644
index 0000000..5fff037
--- /dev/null
+++ b/public/styles.css
@@ -0,0 +1,197 @@
+/* stylesheet eksternal: dipakai oleh hobbies, about (nav + wrapper), dan contact */
+/* semua selector memakai kelas supaya tetap menang atas reset tailwind di about */
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1c2b33;
+  background: #f3f7f7;
+}
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 24px 24px;
+}
+
+.site-header {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 16px 24px 0;
+}
+
+.brand {
+  margin: 0;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #0f4c5c;
+}
+
+/* navigasi */
+.site-nav {
+  padding: 16px 0;
+}
+
+.site-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.site-nav a {
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 999px;
+  text-decoration: none;
+  font-weight: 600;
+  color: #0f4c5c;
+  background: #e3eef0;
+}
+
+.site-nav a:hover {
+  background: #cfe2e6;
+}
+
+.site-nav a.active {
+  color: #ffffff;
+  background: #0f4c5c;
+}
+
+/* tipografi */
+.container h1 {
+  margin: 24px 0 12px;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 2.4rem;
+  line-height: 1.15;
+  color: #0f4c5c;
+}
+
+.container h2 {
+  margin: 0 0 8px;
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 1.5rem;
+  color: #0f4c5c;
+}
+
+.container h3 {
+  margin: 16px 0 6px;
+  font-size: 1.05rem;
+  color: #1c2b33;
+}
+
+.container p {
+  margin: 0 0 12px;
+  line-height: 1.7;
+  max-width: 65ch;
+}
+
+.container ul,
+.container ol {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  line-height: 1.7;
+}
+
+.container ul {
+  list-style: disc;
+}
+
+.container ol {
+  list-style: decimal;
+}
+
+.container a {
+  color: #0f4c5c;
+  font-weight: 600;
+}
+
+/* blok konten */
+.panel {
+  margin-bottom: 24px;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+  border-left: 6px solid #0f4c5c;
+}
+
+/* hobbies */
+.hobby {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  align-items: flex-start;
+  margin-bottom: 24px;
+  padding: 24px;
+  background: #ffffff;
+  border-radius: 12px;
+  border-left: 6px solid #e09f3e;
+}
+
+.hobby img {
+  width: 260px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
+}
+
+.hobby-text {
+  flex: 1 1 280px;
+}
+
+/* tabel */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.container .data-table th,
+.container .data-table td {
+  padding: 10px 12px;
+  border: 1px solid #c9d8db;
+  text-align: left;
+}
+
+.container .data-table th {
+  background: #0f4c5c;
+  color: #ffffff;
+}
+
+/* kontak */
+.contact-list {
+  list-style: none;
+  padding: 0;
+}
+
+.container .contact-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.contact-list li {
+  padding: 12px 0;
+  border-bottom: 1px solid #e3eef0;
+}
+
+.contact-label {
+  display: inline-block;
+  min-width: 110px;
+  font-weight: 700;
+}
+
+/* footer */
+.site-footer {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 16px 24px 32px;
+  border-top: 1px solid #c9d8db;
+  font-size: 0.9rem;
+  color: #4a5d66;
+}
+
+.site-footer p {
+  margin: 0;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..423f708
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}