Hulio only: Assignment 1 Personal Website Project

- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak (TSX route segments)
- Navigasi bersama (components/Nav.tsx)
- About: internal CSS (about/head.tsx)
- Hobi: external CSS (hobbies/styles.css), 3 foto pribadi
- Gallery: Tailwind CDN, 3 foto pribadi
- Kontak: tanpa form, link sosial media + email
- Semua file di root, tidak ada file Next.js tambahan

styles.css

@@ -0,0 +1,107 @@
+/* external stylesheet: linked from about.html and hobbies.html */
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.6;
+  color: #222222;
+  background-color: #fafafa;
+}
+
+.site-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  background-color: #1d4e89;
+}
+
+.brand {
+  margin: 0;
+  font-weight: bold;
+  color: #ffffff;
+}
+
+.nav-link {
+  margin-left: 16px;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.nav-link:hover,
+.nav-link[aria-current="page"] {
+  text-decoration: underline;
+}
+
+/* layout container: wraps the main content on pages that link this file */
+.layout-container {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.page-title {
+  margin: 0 0 16px;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+.section-title {
+  margin: 32px 0 8px;
+  font-size: 1.4rem;
+  font-weight: bold;
+}
+
+.bullets {
+  padding-left: 24px;
+  list-style: disc;
+}
+
+.steps {
+  padding-left: 24px;
+  list-style: decimal;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
+  border: 1px solid #c9c9c9;
+  text-align: left;
+}
+
+.data-table th {
+  background-color: #e3ebf5;
+}
+
+.hobby {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.hobby img {
+  width: 240px;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.hobby-text {
+  flex: 1;
+  min-width: 220px;
+}
+
+.site-footer {
+  padding: 16px 24px;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #555555;
+  border-top: 1px solid #dddddd;
+}