101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
export default function About() {
|
|
return (
|
|
<div className="about-page page">
|
|
{/* internal CSS: satu blok style yang mengatur background dan font halaman, judul, dan badge, memakai selector class dan id */}
|
|
<style>{`
|
|
.about-page {
|
|
background-color: #f5f5f5;
|
|
color: #222222;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
#judul-bio {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.about-page h2 {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.badge-prodi {
|
|
display: inline-block;
|
|
background-color: #1f3a5f;
|
|
color: #ffffff;
|
|
padding: 2px 10px;
|
|
font-size: 14px;
|
|
}
|
|
`}</style>
|
|
|
|
{/* external CSS: file styles.css mengatur navbar, wrapper layout (main), kotak, tabel, dan footer */}
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
|
|
<header>
|
|
<nav className="nav-bar">
|
|
<Link href="/">Home</Link>
|
|
<Link href="/about">About</Link>
|
|
<Link href="/hobbies">Hobbies</Link>
|
|
<Link href="/gallery">Gallery</Link>
|
|
<Link href="/contact">Contact</Link>
|
|
</nav>
|
|
</header>
|
|
|
|
<main className="main-wrapper">
|
|
<section className="box">
|
|
<h1 id="judul-bio">Haloo👋</h1>
|
|
<h2>Bio</h2>
|
|
<p>Saya Zagar, mahasiswa Informatika semester 3. Saya suka bermain game, menonton film, dan mendengarkan musik pop rock.</p>
|
|
{/* badge program studi, tampilannya diatur oleh internal CSS (class badge-prodi) */}
|
|
<span className="badge-prodi">Mahasiswa Informatika</span>
|
|
</section>
|
|
|
|
<section className="box">
|
|
<h2>Pendidikan</h2>
|
|
{/* tabel pendidikan, tampilannya diatur oleh external CSS (class edu-table) */}
|
|
<table className="edu-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Institusi</th>
|
|
<th>Program Studi</th>
|
|
<th>Semester</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Universitas Katolik Widya Mandala Surabaya</td>
|
|
<td>Informatika</td>
|
|
<td>3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section className="box">
|
|
<h2>Kutipan Favorit</h2>
|
|
{/* inline CSS: atribut style langsung pada elemen kutipan */}
|
|
<blockquote
|
|
style={{
|
|
margin: 0,
|
|
paddingLeft: "12px",
|
|
borderLeft: "4px solid #1f3a5f",
|
|
fontStyle: "italic",
|
|
color: "#444444",
|
|
}}
|
|
>
|
|
“Just keep swimming.” — Dory🐠
|
|
</blockquote>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="footer-bar">
|
|
<p>© 2026 Zagar</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|