b2e6844781f3d3c05760abbf5c93fb27e5022f85
Personal Website (Next.js)
Situs personal 5 halaman untuk Assignment 1 Pemrograman Web, dibuat dengan Next.js (App Router) + TypeScript.
Menjalankan
npm install
npm run dev
Yang perlu kamu ganti
- Teks pribadi:
lib/data.ts(nama, tagline, pendidikan, hobi, kontak, dll). - Foto: timpa file di
public/images/dengan fotomu sendiri (nama file sama, format .jpg). Perbarui teksaltdilib/data.tsagar 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, bukannext/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
/aboutkarena halaman itu wajib memakai keempat metode CSS.
Languages
TypeScript
86.9%
CSS
13.1%