112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import Link from "next/link";
|
|
import { navLinks } from "../_data/nav-links";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<header
|
|
style={{
|
|
backgroundColor: "#312e81",
|
|
color: "#ffffff",
|
|
padding: "24px 16px 0",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<h1 style={{ margin: "0 0 4px", fontSize: "2rem" }}>Halo, saya Yovan</h1>
|
|
<p style={{ margin: 0 }}>
|
|
Mahasiswa Informatika yang suka membangun hal-hal kecil di web.
|
|
</p>
|
|
<nav>
|
|
<ul
|
|
style={{
|
|
listStyle: "none",
|
|
margin: "16px 0 0",
|
|
padding: 0,
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
flexWrap: "wrap",
|
|
gap: 4,
|
|
}}
|
|
>
|
|
{navLinks.map((link) => (
|
|
<li key={link.href}>
|
|
<Link
|
|
href={link.href}
|
|
style={{
|
|
display: "block",
|
|
padding: "12px 16px",
|
|
color: "#ffffff",
|
|
textDecoration: "none",
|
|
borderRadius: "6px 6px 0 0",
|
|
// tab aktif (Home) diberi warna latar
|
|
backgroundColor: link.href === "/" ? "#4f46e5" : undefined,
|
|
}}
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main style={{ maxWidth: 900, margin: "24px auto", padding: "0 16px" }}>
|
|
<section
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: 24,
|
|
backgroundColor: "#ffffff",
|
|
borderRadius: 10,
|
|
padding: 24,
|
|
boxShadow: "0 1px 4px rgba(15, 23, 42, 0.12)",
|
|
}}
|
|
>
|
|
<img
|
|
src="/images/foto-profil.jpg"
|
|
alt="Foto Yovan dari belakang memakai jersey bernomor 4 di lapangan"
|
|
width={220}
|
|
height={220}
|
|
style={{
|
|
width: 220,
|
|
height: 220,
|
|
objectFit: "cover",
|
|
borderRadius: "50%",
|
|
border: "4px solid #4f46e5",
|
|
}}
|
|
/>
|
|
<div style={{ flex: 1, minWidth: 240 }}>
|
|
<h2 style={{ marginTop: 0, color: "#312e81", fontSize: "1.5rem" }}>
|
|
Selamat datang di situs pribadi saya
|
|
</h2>
|
|
<p>
|
|
Saya Yovan, mahasiswa semester 3 Program Studi Informatika di
|
|
Universitas Katolik Widya Mandala Surabaya. Situs ini saya buat sebagai
|
|
Perkenalan Pribadi saya.
|
|
</p>
|
|
<p>
|
|
Silakan jelajahi halaman <strong>About</strong> untuk mengenal saya lebih
|
|
jauh, <strong>Hobbies</strong> dan <strong>Gallery</strong> untuk sisi
|
|
santai saya, serta <strong>Contact</strong> jika ingin menghubungi saya.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer
|
|
style={{
|
|
textAlign: "center",
|
|
padding: "20px 16px",
|
|
color: "#64748b",
|
|
fontSize: "0.9rem",
|
|
}}
|
|
>
|
|
<p style={{ margin: 0 }}>
|
|
© 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS
|
|
</p>
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|