Exsors
16ea71b011
- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak (TSX route segments) - Navigasi bersama (components/Nav.tsx) - About: internal CSS (about/head.tsx) - Hobi: external CSS (hobbies/styles.css), 3 foto pribadi - Gallery: Tailwind CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua file di root, tidak ada file Next.js tambahan
33 lines
1.3 KiB
TypeScript
33 lines
1.3 KiB
TypeScript
import Nav from "../components/Nav";
|
|
import "./styles.css"; /* EKSTERNAL CSS ONLY: semua styling dari styles.css lewat kelas, tidak ada style="" di halaman ini */
|
|
|
|
export default function Hobbies() {
|
|
return (
|
|
<div className="layout-container">
|
|
{/* EKSTERNAL CSS: .layout-container, .hobby-card, dll. dari styles.css mengatur tampilan */}
|
|
<header className="hobbies-header">
|
|
<Nav />
|
|
</header>
|
|
|
|
<main className="hobbies-main">
|
|
<section className="hobby-card">
|
|
{/* Foto pribadi: screenshot akun game saya sendiri. */}
|
|
<img src="/images/photo-hobby-read.jpg" alt="Screenshot akun game saya, foto pribadi" width="300" height="200" />
|
|
</section>
|
|
|
|
<section className="hobby-card">
|
|
{/* Foto pribadi: screenshot kode game saya sendiri. */}
|
|
<img src="/images/photo-hobby-bike.jpg" alt="Screenshot kode game saya, foto pribadi" width="300" height="200" />
|
|
</section>
|
|
|
|
<section className="hobby-card">
|
|
{/* Foto pribadi: peta game pixel art hasil tangkapan layar saya sendiri. */}
|
|
<img src="/images/photo-hobby-code.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" width="300" height="200" />
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="hobbies-footer">© 2026 Hulio</footer>
|
|
</div>
|
|
);
|
|
}
|