72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import { navLinks } from "../../_data/nav-links";
|
|
|
|
export default function HobbiesPage() {
|
|
return (
|
|
<>
|
|
<header className="site-header">
|
|
<h1 className="page-title">Hobbies</h1>
|
|
<p className="tagline">Hal-hal yang saya lakukan di waktu luang.</p>
|
|
<nav className="site-nav">
|
|
<ul>
|
|
{navLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className={link.href === "/hobbies" ? "active" : undefined}>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main className="page-wrapper">
|
|
<section className="card">
|
|
<h2>Tiga Hobi Utama</h2>
|
|
<div className="hobby-grid">
|
|
<article className="hobby-card">
|
|
<img src="/images/hobi-bersepeda.jpg" alt="Sepeda balap saya terparkir, dengan ringkasan rute Strava bersepeda sore" />
|
|
<h3>Bersepeda</h3>
|
|
<p>
|
|
Saya suka bersepeda sore keliling Surabaya. Dua rute terakhir saya
|
|
menempuh 30,53 km dan 37,79 km.
|
|
</p>
|
|
</article>
|
|
<article className="hobby-card">
|
|
<img src="/images/hobi-menggambar.jpg" alt="Gambar digital karakter berhoodie biru memegang cat semprot buatan saya" />
|
|
<h3>Menggambar</h3>
|
|
<p>Saya suka menggambar karakter kartun dengan aplikasi digital.</p>
|
|
</article>
|
|
<article className="hobby-card">
|
|
<img src="/images/hobi-olahraga.jpg" alt="Tim futsal berbaris merangkul bahu di lapangan dengan suporter di tribun" />
|
|
<h3>Olahraga</h3>
|
|
<p>Saya suka bermain futsal dan bermain setiap minggu.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="card">
|
|
<h2>Lebih Dekat dengan Hobi Saya</h2>
|
|
<h3>Perlengkapan yang saya pakai</h3>
|
|
<ul>
|
|
<li>Sepeda</li>
|
|
<li>Sepatu futsal</li>
|
|
<li>Ibis Piant X</li>
|
|
</ul>
|
|
<h3>Cara saya memulai hobi baru</h3>
|
|
{/* ol dipakai karena langkah-langkahnya berurutan */}
|
|
<ol>
|
|
<li>Mencari tahu dasar-dasarnya lewat video dan buku.</li>
|
|
<li>Mencoba dengan perlengkapan sederhana.</li>
|
|
<li>Berlatih rutin setiap minggu.</li>
|
|
</ol>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="site-footer">
|
|
<p>© 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|