56 lines
2.6 KiB
TypeScript
56 lines
2.6 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import type { Metadata } from "next";
|
|
import { NavInline } from "../components/nav";
|
|
import HtmlComment from "../components/html-comment";
|
|
import { profile } from "../lib/data";
|
|
|
|
export const metadata: Metadata = { title: "Beranda | Personal Website" };
|
|
|
|
// halaman ini WAJIB inline css saja: semua gaya memakai atribut style
|
|
const s: Record<string, CSSProperties> = {
|
|
page: { maxWidth: "960px", margin: "0 auto", padding: "24px", fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif", color: "#1c2b33", background: "#f3f7f7", borderRadius: "20px", minHeight: "90vh" },
|
|
brand: { margin: 0, fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.25rem", fontWeight: 700, color: "#0f4c5c" },
|
|
hero: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "32px", padding: "32px 0" },
|
|
photo: { width: "280px", maxWidth: "100%", height: "auto", borderRadius: "16px", border: "6px solid #e09f3e" },
|
|
heroText: { flex: "1 1 300px" },
|
|
h1: { margin: "0 0 12px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "2.6rem", lineHeight: 1.15, color: "#0f4c5c" },
|
|
tagline: { margin: "0 0 16px", fontSize: "1.2rem", lineHeight: 1.5 },
|
|
section: { padding: "24px", background: "#ffffff", borderRadius: "12px", borderLeft: "6px solid #0f4c5c" },
|
|
h2: { margin: "0 0 8px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.5rem", color: "#0f4c5c" },
|
|
p: { margin: 0, lineHeight: 1.7, maxWidth: "65ch" },
|
|
footer: { marginTop: "32px", paddingTop: "16px", borderTop: "1px solid #c9d8db", fontSize: "0.9rem", color: "#4a5d66" },
|
|
};
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div style={s.page}>
|
|
<HtmlComment text="inline css: seluruh halaman ini distyle lewat atribut style sesuai aturan index.html" />
|
|
<header>
|
|
<p style={s.brand}>{profile.nickname}</p>
|
|
<NavInline current="/" />
|
|
</header>
|
|
|
|
<main>
|
|
<section style={s.hero}>
|
|
<img src={profile.photo} alt={profile.photoAlt} width="280" height="210" style={s.photo} />
|
|
<div style={s.heroText}>
|
|
<h1 style={s.h1}>Halo, saya {profile.name}</h1>
|
|
<p style={s.tagline}>{profile.tagline}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section style={s.section}>
|
|
<h2 style={s.h2}>Sekilas tentang saya</h2>
|
|
<p style={s.p}>{profile.intro}</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer style={s.footer}>
|
|
<p style={{ margin: 0 }}>
|
|
© {profile.year} {profile.name}. Dibuat di {profile.city}.
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|