119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
import Link from "next/link";
|
|
import { navLinks } from "../../_data/nav-links";
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<>
|
|
<header className="site-header">
|
|
<h1 className="page-title">About Me</h1>
|
|
<p className="tagline">Sedikit cerita tentang siapa saya.</p>
|
|
<nav className="site-nav">
|
|
<ul>
|
|
{navLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link href={link.href} className={link.href === "/about" ? "active" : undefined}>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main className="about-wrapper">
|
|
<section id="bio">
|
|
<h2 className="section-title">Bio</h2>
|
|
<p>
|
|
Nama saya Yovan Budianto Tanujaya, biasa dipanggil Yovan. Saya lahir
|
|
di Surabaya dan sekarang tinggal di Surabaya. Saya sedang belajar
|
|
Informatika dan tertarik pada pengembangan web.
|
|
</p>
|
|
<p>
|
|
<span className="inline-block bg-indigo-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
|
|
Mahasiswa Informatika
|
|
</span>{" "}
|
|
<span className="inline-block bg-emerald-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
|
|
Web Beginner
|
|
</span>
|
|
</p>
|
|
</section>
|
|
|
|
<section id="education">
|
|
<h2 className="section-title">Pendidikan</h2>
|
|
{/* ol dipakai karena urutan jenjang pendidikan itu penting (kronologis) */}
|
|
<ol className="list-decimal pl-6">
|
|
<li>SDK Santo Yusup Karangpilang (2013 - 2019)</li>
|
|
<li>SMPK Angelus Custos 2 (2019 - 2022)</li>
|
|
<li>SMA Santo Yusup Karangpilang (2022 - 2025)</li>
|
|
<li>S1 Informatika, Universitas Katolik Widya Mandala Surabaya (2025 - sekarang)</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section id="skills">
|
|
<h2 className="section-title">Skill</h2>
|
|
<h3 className="text-lg font-semibold mb-2">Skill yang sedang saya pelajari</h3>
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="bg-orange-100">
|
|
<th className="border border-stone-400 px-3 py-2 text-left">Skill</th>
|
|
<th className="border border-stone-400 px-3 py-2 text-left">Level</th>
|
|
<th className="border border-stone-400 px-3 py-2 text-left">Catatan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td className="border border-stone-400 px-3 py-2">HTML</td>
|
|
<td className="border border-stone-400 px-3 py-2">Pemula</td>
|
|
<td className="border border-stone-400 px-3 py-2">
|
|
Sedang dipelajari di mata kuliah Pemrograman Web
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="border border-stone-400 px-3 py-2">CSS</td>
|
|
<td className="border border-stone-400 px-3 py-2">Pemula</td>
|
|
<td className="border border-stone-400 px-3 py-2">
|
|
Inline, internal, eksternal, dan Tailwind
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="border border-stone-400 px-3 py-2">PYTHON</td>
|
|
<td className="border border-stone-400 px-3 py-2">Pemula</td>
|
|
<td className="border border-stone-400 px-3 py-2">Class OOP</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h3 className="text-lg font-semibold mt-4 mb-2">Sifat yang menggambarkan saya</h3>
|
|
{/* ul dipakai karena poin-poin ini tidak punya urutan */}
|
|
<ul className="list-disc pl-6">
|
|
<li>Rasa ingin tahu yang tinggi</li>
|
|
<li>Suka bekerja dalam tim</li>
|
|
<li>Sabar</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section id="quote">
|
|
<h2 className="section-title">Kutipan Favorit</h2>
|
|
{/* inline CSS: prop style pada blockquote ini menjadi atribut style="" di HTML; inline punya prioritas tertinggi sehingga menimpa aturan lain */}
|
|
<blockquote
|
|
style={{
|
|
borderLeft: "6px solid #ea580c",
|
|
backgroundColor: "#ffedd5",
|
|
margin: 0,
|
|
padding: "12px 20px",
|
|
fontStyle: "italic",
|
|
color: "#7c2d12",
|
|
}}
|
|
>
|
|
"Hiduplah seperti ini hari terahkir mu."
|
|
<footer>Jerinx</footer>
|
|
</blockquote>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="site-footer">
|
|
<p>© 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|