diff --git a/README.md b/README.md index e215bc4..8a2eb63 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,23 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# Personal Website - Zagar Nashrullah -## Getting Started +Tugas Assignment 1 mata kuliah Pemrograman Web Lanjut -First, run the development server: +## Halaman +- `/` Home (inline CSS) +- `/about` About (internal, inline, dan external CSS) +- `/hobbies` Hobbies (external CSS) +- `/gallery` Gallery (Tailwind CSS) +- `/contact` Contact (external CSS) +## Cara menjalankan ```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +npm install +npm dev ``` +Lalu buka - Local: http://localhost:3000 +Juga bisa pakek - Network: http://192.168.1.3:3000 -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +## Struktur +- `app/` berisi kode tiap halaman +- `public/images/` berisi foto +- `public/styles.css` berisi external CSS \ No newline at end of file diff --git a/app/about/page.tsx b/app/about/page.tsx new file mode 100644 index 0000000..cc9153f --- /dev/null +++ b/app/about/page.tsx @@ -0,0 +1,100 @@ +import Link from "next/link"; + +export default function About() { + return ( +
+ {/* internal CSS: satu blok style yang mengatur background dan font halaman, judul, dan badge, memakai selector class dan id */} + + + {/* external CSS: file styles.css mengatur navbar, wrapper layout (main), kotak, tabel, dan footer */} + + +
+ +
+ +
+
+

Haloođź‘‹

+

Bio

+

Saya Zagar, mahasiswa Informatika semester 3. Saya suka bermain game,menonton film, dan mendengarkan musik pop rock.

+ {/* badge program studi, tampilannya diatur oleh internal CSS (class badge-prodi) */} + Mahasiswa Informatika +
+ +
+

Pendidikan

+ {/* tabel pendidikan, tampilannya diatur oleh external CSS (class edu-table) */} + + + + + + + + + + + + + + + +
InstitusiProgram StudiSemester
Universitas Katolik Widya Mandala SurabayaInformatika3
+
+ +
+

Kutipan Favorit

+ {/* inline CSS: atribut style langsung pada elemen kutipan */} +
+ HAII HALOOđź‘‹ +
+
+
+ + +
+ ); +} diff --git a/app/contact/page.tsx b/app/contact/page.tsx new file mode 100644 index 0000000..16c0602 --- /dev/null +++ b/app/contact/page.tsx @@ -0,0 +1,59 @@ +import Link from "next/link"; + +export default function Contact() { + return ( +
+ {/* external CSS: dipilih karena styles.css sudah berisi gaya navbar, kotak, dan footer yang sama dengan halaman lain, jadi tampilan seragam dan mudah diubah dari satu file */} + + +
+ +
+ +
+
+

Hubungi Saya

+

Kamu bisa menghubungi saya lewat kontak berikut.

+
+ +
+

Kontak

+ +
+
+ + +
+ ); +} diff --git a/app/gallery/page.tsx b/app/gallery/page.tsx new file mode 100644 index 0000000..c4b1998 --- /dev/null +++ b/app/gallery/page.tsx @@ -0,0 +1,68 @@ +import Link from "next/link"; + +export default function Gallery() { + return ( +
+ {/* Tailwind CSS: seluruh tampilan halaman ini hanya memakai utility class Tailwind */} +
+ +
+ +
+
+

Galeri Foto

+

Beberapa foto dari kegiatan dan momen saya.

+ + {/* grid foto: 1 kolom di layar kecil, 2 kolom di layar sedang ke atas */} +
+
+ Foto Zagar tersenyum di pantai pada malam hari +
Haii ini saya.
+
+ +
+ Suasana ruang kelas saat dosen mengajar di depan papan tulis +
foto kelas.
+
+ +
+ Acara turnamen game di sebuah pusat perbelanjaan dengan layar besar dan kursi penonton +
foto random gallery.
+
+ +
+ Tangkapan layar aplikasi pemutar musik yang sedang memutar sebuah lagu +
Musik yang aku suka
+
+
+
+
+ + +
+ ); +} diff --git a/app/hobbies/page.tsx b/app/hobbies/page.tsx new file mode 100644 index 0000000..06565d4 --- /dev/null +++ b/app/hobbies/page.tsx @@ -0,0 +1,77 @@ +import Link from "next/link"; + +export default function Hobbies() { + return ( +
+ {/* external CSS: seluruh tampilan halaman ini hanya memakai file styles.css */} + + +
+ +
+ +
+
+

Hobi Saya

+

Ini beberapa hal yang biasa saya lakukan di waktu luang.

+ {/* daftar tidak berurutan (ul): ringkasan hobi */} +
    +
  • Bermain game
    • +
  • Menonton film
    • +
  • Mendengarkan musik
    • +
+
+ +
+

Bermain Game

+ Tangkapan layar profil pemain di game mobile yang menampilkan peringkat dan statistik +

Saya suka bermain game Mobile Legends

+
+ +
+

Menonton Film

+ Adegan film seorang pria duduk di pantai berbatu dengan tebing di belakangnya +

Saya juga suka menonton film

+
+ +
+

Mendengarkan Musik

+ Tangkapan layar aplikasi pemutar musik yang sedang memutar sebuah lagu +

Saya juga suka mendengarkan musik, terutama genre pop rock

+
+ +
+

Urutan Hobi Favorit

+ {/* daftar berurutan (ol): peringkat hobi dari yang paling disukai */} +
    +
  1. Mendengarkan musik
    2. +
  2. Menonton film
    3. +
  3. Bermain game
    4. +
+
+
+ + +
+ ); +} diff --git a/app/layout.tsx b/app/layout.tsx index 9852c15..a46d27e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,28 +1,14 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Zagar - Personal Website", + description: "Personal website Zagar Nashrullah", }; export default function RootLayout({ children }: LayoutProps<"/">) { return ( - + {children} ); diff --git a/app/page.tsx b/app/page.tsx index c887311..cce3e8f 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,69 +1,100 @@ -import Image from "next/image"; +"use client"; + +import { useState } from "react"; +import Link from "next/link"; export default function Home() { + // state hover untuk link "Kenali saya lebih jauh" + const [hover, setHover] = useState(false); + return ( -
-
- Next.js logo -
-

- To get started, edit the{" "} - - page.tsx - {" "} - file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- +
+ +
+ +
+
+ Foto Zagar tersenyum di pantai pada malam hari +

Zagar Nashrullah

+

Mahasiswa Informatika

+

HAAAAIII!!!

+ setHover(true)} + onMouseLeave={() => setHover(false)} + style={{ + display: "inline-block", + padding: "8px 20px", + border: "1px solid #1f3a5f", + borderRadius: "8px", + color: hover ? "#ffffff" : "#1f3a5f", + backgroundColor: hover ? "#1f3a5f" : "transparent", + textDecoration: "none", + }} > - Vercel logomark - Deploy Now - - - Documentation - -
+ Kenali saya lebih jauh + +
+ +
); -} +} \ No newline at end of file diff --git a/public/images/fotokegiatanharian.jpg b/public/images/fotokegiatanharian.jpg new file mode 100644 index 0000000..f09a0f6 Binary files /dev/null and b/public/images/fotokegiatanharian.jpg differ diff --git a/public/images/fotoprofile.jpg b/public/images/fotoprofile.jpg new file mode 100644 index 0000000..6ad234e Binary files /dev/null and b/public/images/fotoprofile.jpg differ diff --git a/public/images/fotorandom.jpg b/public/images/fotorandom.jpg new file mode 100644 index 0000000..6127f5c Binary files /dev/null and b/public/images/fotorandom.jpg differ diff --git a/public/images/hobibermaingame.jpg b/public/images/hobibermaingame.jpg new file mode 100644 index 0000000..6d10b15 Binary files /dev/null and b/public/images/hobibermaingame.jpg differ diff --git a/public/images/hobimendengarkanmusik.jpg b/public/images/hobimendengarkanmusik.jpg new file mode 100644 index 0000000..7150e5a Binary files /dev/null and b/public/images/hobimendengarkanmusik.jpg differ diff --git a/public/images/hobimenontonfilm.jpg b/public/images/hobimenontonfilm.jpg new file mode 100644 index 0000000..1536af3 Binary files /dev/null and b/public/images/hobimenontonfilm.jpg differ diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 0000000..0b8b12c --- /dev/null +++ b/public/styles.css @@ -0,0 +1,145 @@ +.page { + display: flex; + flex-direction: column; + min-height: 100vh; + background-color: #f5f5f5; + color: #222222; + font-family: Arial, sans-serif; + line-height: 1.5; +} + +.page p { + margin: 0 0 12px; +} + +.nav-bar { + background-color: #1f3a5f; + padding: 12px 20px; +} + +.nav-bar a { + color: #ffffff; + margin-right: 20px; + text-decoration: none; +} + +.nav-bar a:hover { + text-decoration: underline; +} + +.main-wrapper { + flex: 1; + width: 100%; + max-width: 760px; + margin: 0 auto; + padding: 24px 16px; + box-sizing: border-box; +} + +.box { + background-color: #ffffff; + border: 1px solid #cccccc; + padding: 20px; + margin-bottom: 20px; +} + +.edu-table { + width: 100%; + border-collapse: collapse; +} + +.edu-table th, +.edu-table td { + border: 1px solid #999999; + padding: 8px; + text-align: left; +} + +.edu-table th { + background-color: #e6e6e6; + font-weight: bold; +} + +.footer-bar { + text-align: center; + padding: 16px; + border-top: 1px solid #cccccc; + color: #555555; + font-size: 14px; +} + +.footer-bar p { + margin: 0; +} + +/* ---------- halaman hobbies ---------- */ + +.hobby-title { + font-size: 28px; + font-weight: bold; + margin: 0 0 8px; +} + +.hobby-subtitle { + font-size: 20px; + font-weight: bold; + margin: 0 0 12px; +} + +.hobby-img { + display: block; + width: 100%; + height: 260px; + object-fit: cover; + border: 1px solid #cccccc; + margin-bottom: 12px; +} + +.hobby-list { + margin: 8px 0 0; + padding-left: 24px; + list-style-type: disc; +} + +ol.hobby-list { + list-style-type: decimal; +} + +/* ---------- halaman contact ---------- */ + +.contact-title { + font-size: 28px; + font-weight: bold; + margin: 0 0 8px; +} + +.contact-subtitle { + font-size: 20px; + font-weight: bold; + margin: 0 0 12px; +} + +.contact-list { + list-style: none; + margin: 0; + padding: 0; +} + +.contact-list li { + padding: 8px 0; + border-bottom: 1px solid #dddddd; +} + +.contact-list li:last-child { + border-bottom: none; +} + +.contact-label { + display: inline-block; + width: 100px; + color: #555555; +} + +.contact-link { + color: #1a56a0; +}