37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
# 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.
|