From bbcd07213cb068eddca9af7dfafd2d1e7931896c Mon Sep 17 00:00:00 2001 From: Gray Date: Fri, 6 Nov 2026 21:21:29 +0700 Subject: [PATCH] Tugas Personal Website --- .gitignore | 2 + README.md | 36 ++ app/about/page.tsx | 118 ++++ app/contact/page.tsx | 56 ++ app/gallery/page.tsx | 53 ++ app/hobbies/page.tsx | 59 ++ app/layout.tsx | 17 + app/page.tsx | 55 ++ components/html-comment.tsx | 5 + components/nav.tsx | 80 +++ lib/data.ts | 89 +++ next-env.d.ts | 6 + package-lock.json | 1063 +++++++++++++++++++++++++++++++++++ package.json | 21 + public/images/Galeri1.jpeg | Bin 0 -> 105868 bytes public/images/Galeri2.jpeg | Bin 0 -> 170515 bytes public/images/Galeri3.jpeg | Bin 0 -> 144575 bytes public/images/Galeri4.jpeg | Bin 0 -> 138296 bytes public/images/Galeri5.jpeg | Bin 0 -> 251072 bytes public/images/Galeri6.jpeg | Bin 0 -> 136267 bytes public/images/Hobi1.jpg | Bin 0 -> 65609 bytes public/images/Hobi2.jpeg | Bin 0 -> 105126 bytes public/images/Hobi3.jpeg | Bin 0 -> 176681 bytes public/images/Profil1.jpeg | Bin 0 -> 74368 bytes public/styles.css | 197 +++++++ tsconfig.json | 20 + 26 files changed, 1877 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 app/about/page.tsx create mode 100644 app/contact/page.tsx create mode 100644 app/gallery/page.tsx create mode 100644 app/hobbies/page.tsx create mode 100644 app/layout.tsx create mode 100644 app/page.tsx create mode 100644 components/html-comment.tsx create mode 100644 components/nav.tsx create mode 100644 lib/data.ts create mode 100644 next-env.d.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/images/Galeri1.jpeg create mode 100644 public/images/Galeri2.jpeg create mode 100644 public/images/Galeri3.jpeg create mode 100644 public/images/Galeri4.jpeg create mode 100644 public/images/Galeri5.jpeg create mode 100644 public/images/Galeri6.jpeg create mode 100644 public/images/Hobi1.jpg create mode 100644 public/images/Hobi2.jpeg create mode 100644 public/images/Hobi3.jpeg create mode 100644 public/images/Profil1.jpeg create mode 100644 public/styles.css create mode 100644 tsconfig.json 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 `` 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 + {/* tailwind css: script cdn, dipakai untuk komponen badge di bagian biodata */} +