- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak - Navigasi bersama tiap halaman - About: 4 metode CSS (internal, inline, eksternal, Tailwind) - Hobi: external CSS only, 3 foto pribadi - Gallery: Tailwind only via CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua foto milik sendiri di /images - Tidak ada <form>, tidak ada script selain Tailwind CDN
26 lines
901 B
TypeScript
26 lines
901 B
TypeScript
import Nav from "../components/Nav";
|
|
import "../hobbies/styles.css"; /* EKSTERNAL CSS: .layout-container di styles.css atur tata letak wrapper ini */
|
|
|
|
export default function About() {
|
|
return (
|
|
<div id="about-page" className="layout-container">
|
|
{/* INTERNAL CSS: #about-page + .about-card dll. di about/head.tsx */}
|
|
{/* EKSTERNAL CSS: .layout-container dari styles.css mengatur wrapper layout halaman ini */}
|
|
<header className="about-header">
|
|
<Nav />
|
|
<h1 className="about-h1">Tentang Saya</h1>
|
|
</header>
|
|
|
|
<main className="about-main">
|
|
<section className="about-card">
|
|
<p className="about-p">Nama: Hulio</p>
|
|
<p className="about-p">Semester: 3</p>
|
|
<p className="about-p">Kuliah: Informatika</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="about-footer">© 2026 Hulio</footer>
|
|
</div>
|
|
);
|
|
}
|