From aed738af007906c5da504c549a998af4351843c4 Mon Sep 17 00:00:00 2001 From: Yovan Date: Thu, 5 Nov 2026 11:55:36 +0700 Subject: [PATCH] Tugas --- .gitignore | 4 + README.md | 26 + app/(about)/about/page.tsx | 118 ++++ app/(about)/layout.tsx | 51 ++ app/(contact)/contact/page.tsx | 59 ++ app/(contact)/layout.tsx | 21 + app/(gallery)/gallery/page.tsx | 68 ++ app/(gallery)/layout.tsx | 19 + app/(hobbies)/hobbies/page.tsx | 71 ++ app/(hobbies)/layout.tsx | 17 + app/(home)/layout.tsx | 25 + app/(home)/page.tsx | 111 +++ app/_data/nav-links.ts | 8 + app/styles.css | 141 ++++ next-env.d.ts | 6 + next.config.mjs | 4 + package-lock.json | 1063 +++++++++++++++++++++++++++++ package.json | 21 + public/images/foto-profil.jpg | Bin 0 -> 76635 bytes public/images/galeri-1.jpg | Bin 0 -> 138031 bytes public/images/galeri-2.jpg | Bin 0 -> 85373 bytes public/images/galeri-3.jpg | Bin 0 -> 120001 bytes public/images/galeri-4.jpg | Bin 0 -> 52293 bytes public/images/galeri-5.jpg | Bin 0 -> 46314 bytes public/images/galeri-6.jpg | Bin 0 -> 81995 bytes public/images/hobi-bersepeda.jpg | Bin 0 -> 91604 bytes public/images/hobi-menggambar.jpg | Bin 0 -> 27375 bytes public/images/hobi-olahraga.jpg | Bin 0 -> 72062 bytes tsconfig.json | 20 + 29 files changed, 1853 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app/(about)/about/page.tsx create mode 100644 app/(about)/layout.tsx create mode 100644 app/(contact)/contact/page.tsx create mode 100644 app/(contact)/layout.tsx create mode 100644 app/(gallery)/gallery/page.tsx create mode 100644 app/(gallery)/layout.tsx create mode 100644 app/(hobbies)/hobbies/page.tsx create mode 100644 app/(hobbies)/layout.tsx create mode 100644 app/(home)/layout.tsx create mode 100644 app/(home)/page.tsx create mode 100644 app/_data/nav-links.ts create mode 100644 app/styles.css create mode 100644 next-env.d.ts create mode 100644 next.config.mjs create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/images/foto-profil.jpg create mode 100644 public/images/galeri-1.jpg create mode 100644 public/images/galeri-2.jpg create mode 100644 public/images/galeri-3.jpg create mode 100644 public/images/galeri-4.jpg create mode 100644 public/images/galeri-5.jpg create mode 100644 public/images/galeri-6.jpg create mode 100644 public/images/hobi-bersepeda.jpg create mode 100644 public/images/hobi-menggambar.jpg create mode 100644 public/images/hobi-olahraga.jpg create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f780e9d --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +.next +out +*.tsbuildinfo diff --git a/README.md b/README.md new file mode 100644 index 0000000..c4ecb83 --- /dev/null +++ b/README.md @@ -0,0 +1,26 @@ +# Personal Website (Next.js) - Assignment 1 Pemrograman Web + +Jalankan: + + npm install + npm run dev # buka http://localhost:3000 + +## Peta halaman dan metode CSS + +| Route | File | Metode CSS | +|-------------|----------------------------------------|---------------------------------------------| +| / | app/(home)/page.tsx | inline only (prop `style`) | +| /about | app/(about)/about/page.tsx + layout | 4 metode (lihat komentar di layout & page) | +| /hobbies | app/(hobbies)/hobbies/page.tsx | external only (app/styles.css) | +| /gallery | app/(gallery)/gallery/page.tsx | Tailwind CDN only | +| /contact | app/(contact)/contact/page.tsx | external (alasan ada di komentar layout) | + +Tiap halaman punya root layout sendiri (route group) supaya ``/``/``-nya +terpisah seperti file HTML biasa. Pindah antar halaman = muat ulang penuh, jadi CSS +tiap halaman tidak bocor ke halaman lain. + +## Yang harus Anda ganti + +- Semua teks `Yovan Budianto Tanujaya`, `Surabaya`, `Yovan`, dst. +- Foto di `public/images/` (sekarang placeholder). Pakai nama file yang sama + dan sesuaikan teks `alt`. diff --git a/app/(about)/about/page.tsx b/app/(about)/about/page.tsx new file mode 100644 index 0000000..119d074 --- /dev/null +++ b/app/(about)/about/page.tsx @@ -0,0 +1,118 @@ +import Link from "next/link"; +import { navLinks } from "../../_data/nav-links"; + +export default function AboutPage() { + return ( + <> +
+

About Me

+

Sedikit cerita tentang siapa saya.

+ +
+ +
+
+

Bio

+

+ Nama saya Yovan Budianto Tanujaya, biasa dipanggil Yovan. Saya lahir + di Surabaya dan sekarang tinggal di Surabaya. Saya sedang belajar + Informatika dan tertarik pada pengembangan web. +

+

+ + Mahasiswa Informatika + {" "} + + Web Beginner + +

+
+ +
+

Pendidikan

+ {/* ol dipakai karena urutan jenjang pendidikan itu penting (kronologis) */} +
    +
  1. SDK Santo Yusup Karangpilang (2013 - 2019)
    2. +
  2. SMPK Angelus Custos 2 (2019 - 2022)
    3. +
  3. SMA Santo Yusup Karangpilang (2022 - 2025)
    4. +
  4. S1 Informatika, Universitas Katolik Widya Mandala Surabaya (2025 - sekarang)
    5. +
+
+ +
+

Skill

+

Skill yang sedang saya pelajari

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SkillLevelCatatan
HTMLPemula + Sedang dipelajari di mata kuliah Pemrograman Web +
CSSPemula + Inline, internal, eksternal, dan Tailwind +
PYTHONPemulaClass OOP
+

Sifat yang menggambarkan saya

+ {/* ul dipakai karena poin-poin ini tidak punya urutan */} +
    +
  • Rasa ingin tahu yang tinggi
    • +
  • Suka bekerja dalam tim
    • +
  • Sabar
    • +
+
+ +
+

Kutipan Favorit

+ {/* inline CSS: prop style pada blockquote ini menjadi atribut style="" di HTML; inline punya prioritas tertinggi sehingga menimpa aturan lain */} +
+ "Hiduplah seperti ini hari terahkir mu." +
Jerinx
+
+
+
+ + + + ); +} diff --git a/app/(about)/layout.tsx b/app/(about)/layout.tsx new file mode 100644 index 0000000..b5221b4 --- /dev/null +++ b/app/(about)/layout.tsx @@ -0,0 +1,51 @@ +import type { Metadata } from "next"; +import type { ReactNode } from "react"; +import Script from "next/script"; + +// external CSS: styles.css dimuat sebagai ; mengatur navbar (.site-nav) dan wadah layout
(.about-wrapper) +import "../styles.css"; + +export const metadata: Metadata = { + title: "About - Yovan", +}; + +// internal CSS: satu blok + + + {/* tailwind CSS: skrip CDN, dipakai untuk badge, tabel skill, dan daftar di halaman ini */} +