119 lines
4.3 KiB
TypeScript
119 lines
4.3 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Script from "next/script";
|
|
import { NavExternal } from "../../components/nav";
|
|
import HtmlComment from "../../components/html-comment";
|
|
import { profile, education, skills, quote } from "../../lib/data";
|
|
|
|
export const metadata: Metadata = { title: "Tentang Saya | Personal Website" };
|
|
|
|
// css internal: satu blok <style> (di-hoist react ke <head>) dengan selector id dan class
|
|
const internalCss = `
|
|
#about-page {
|
|
min-height: 100vh;
|
|
background: #eaf3f4;
|
|
font-family: Georgia, "Times New Roman", serif;
|
|
}
|
|
.quote {
|
|
margin: 0;
|
|
padding: 16px 20px;
|
|
border-left: 4px solid #9aa9ad;
|
|
color: #55666b;
|
|
font-style: italic;
|
|
}
|
|
`;
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div id="about-page">
|
|
{/* external css: file public/styles.css dimuat lewat link, dipakai untuk nav dan wrapper main */}
|
|
<link rel="stylesheet" href="/styles.css" precedence="default" />
|
|
{/* internal css: blok style untuk latar halaman dan font (selector #about-page dan .quote) */}
|
|
<style href="about-internal" precedence="default">{internalCss}</style>
|
|
{/* tailwind css: script cdn, dipakai untuk komponen badge di bagian biodata */}
|
|
<Script src="https://cdn.tailwindcss.com" />
|
|
|
|
<HtmlComment text="about.html memakai 4 metode css sekaligus, tiap metode diberi label komentar di elemennya" />
|
|
|
|
<header className="site-header">
|
|
<p className="brand">{profile.nickname}</p>
|
|
<HtmlComment text="external css: kelas site-nav di styles.css mengatur layout navigasi" />
|
|
<NavExternal current="/about" />
|
|
</header>
|
|
|
|
<HtmlComment text="external css: kelas container di styles.css mengatur lebar dan padding wrapper main" />
|
|
<main className="container">
|
|
<section className="panel">
|
|
<h1>Tentang Saya</h1>
|
|
<p>
|
|
Saya {profile.name}, biasa dipanggil {profile.nickname}. Saya tinggal di {profile.city} dan sedang
|
|
menempuh pendidikan di Program Studi Informatika.
|
|
</p>
|
|
<HtmlComment text="tailwind css: kelas utilitas membentuk badge berbentuk pil" />
|
|
<p>
|
|
<span className="inline-block rounded-full bg-teal-800 px-3 py-1 text-sm font-semibold text-white">
|
|
Informatika
|
|
</span>{" "}
|
|
<span className="inline-block rounded-full bg-amber-500 px-3 py-1 text-sm font-semibold text-white">
|
|
Semester 3
|
|
</span>{" "}
|
|
<span className="inline-block rounded-full bg-slate-600 px-3 py-1 text-sm font-semibold text-white">
|
|
{profile.city}
|
|
</span>
|
|
</p>
|
|
</section>
|
|
|
|
<section className="panel">
|
|
<h2>Pendidikan</h2>
|
|
<HtmlComment text="ol dipakai karena riwayat pendidikan berurutan dari yang paling awal" />
|
|
<ol>
|
|
{education.map((item) => (
|
|
<li key={item}>{item}</li>
|
|
))}
|
|
</ol>
|
|
</section>
|
|
|
|
<section className="panel">
|
|
<h2>Keahlian</h2>
|
|
<table className="data-table">
|
|
<caption className="sr-only">Daftar keahlian saya</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Keahlian</th>
|
|
<th scope="col">Level</th>
|
|
<th scope="col">Catatan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{skills.map((row) => (
|
|
<tr key={row.skill}>
|
|
<td>{row.skill}</td>
|
|
<td>{row.level}</td>
|
|
<td>{row.note}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
|
|
<section className="panel">
|
|
<h2>Kutipan favorit</h2>
|
|
<HtmlComment text="inline css: atribut style pada blockquote menimpa warna dan border dari css internal (.quote)" />
|
|
<blockquote
|
|
className="quote"
|
|
style={{ color: "#0f4c5c", borderLeft: "6px solid #e09f3e", background: "#fff7e6", fontSize: "1.2rem" }}
|
|
>
|
|
<p>“{quote.text}”</p>
|
|
<footer>— {quote.author}</footer>
|
|
</blockquote>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="site-footer">
|
|
<p>
|
|
© {profile.year} {profile.name}
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|