Tugas
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user