commit 3abe945beb57047e93b761f27f089bfb09bf9589 Author: Exsors Date: Wed Nov 4 20:58:29 2026 +0700 Initial commit: Assignment 1 Personal Website Project - 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak - Navigasi bersama tiap halaman - About: 4 metode CSS (internal, inline, eksternal, Tailwind) - Hobi: external CSS only, 3 foto pribadi - Gallery: Tailwind only via CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua foto milik sendiri di /images - Tidak ada
, tidak ada script selain Tailwind CDN diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a4cbdb2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,35 @@ +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env +.env +.env.local +.env.*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/README.md b/README.md new file mode 100644 index 0000000..e215bc4 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +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). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +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. diff --git a/app/Hulio/about.html b/app/Hulio/about.html new file mode 100644 index 0000000..8223510 --- /dev/null +++ b/app/Hulio/about.html @@ -0,0 +1,98 @@ + + + + + + About | [Your Name] + + + + + + + + + + + +
+

[Your Name]

+ +
+ + +
+

About Me

+ + + Informatics, Semester 1 + +
+

Bio

+

I am [Your Name], a first-semester student in the Informatics program. This semester I take Web Programming, where I write pages by hand and learn why each CSS method exists. Outside class I [describe your interests here].

+
+ +
+

Education

+ + + + + + + + + + + + + + + + + + + + +
LevelSchoolYears
Bachelor, Informatics[Your University]2026 to present
Senior high school[Your High School][Years]
+
+ +
+

Milestones

+
    +
  1. Started the Informatics program in 2026.
    2. +
  2. Wrote my first HTML page in Web Programming.
    3. +
  3. Built this site with four CSS methods.
    4. +
+
+ +
+

Favorite quote

+ +
+ Talk is cheap. Show me the code. +
Linus Torvalds
+
+
+
+ +
+

© 2026 [Your Name]. Web Programming, Assignment 1.

+
+ + diff --git a/app/Hulio/about/head.tsx b/app/Hulio/about/head.tsx new file mode 100644 index 0000000..ad6ca1a --- /dev/null +++ b/app/Hulio/about/head.tsx @@ -0,0 +1,74 @@ +export default function AboutHead() { + return ( + <> + {/* INTERNAL CSS: + + ); +} diff --git a/app/Hulio/about/page.tsx b/app/Hulio/about/page.tsx new file mode 100644 index 0000000..d5c4053 --- /dev/null +++ b/app/Hulio/about/page.tsx @@ -0,0 +1,25 @@ +import Nav from "../components/Nav"; +import "../hobbies/styles.css"; /* EKSTERNAL CSS: .layout-container di styles.css atur tata letak wrapper ini */ + +export default function About() { + return ( +
+ {/* INTERNAL CSS: #about-page + .about-card dll. di about/head.tsx */} + {/* EKSTERNAL CSS: .layout-container dari styles.css mengatur wrapper layout halaman ini */} +
+
+ +
+
+

Nama: Hulio

+

Semester: 3

+

Kuliah: Informatika

+
+
+ +
© 2026 Hulio
+
+ ); +} diff --git a/app/Hulio/components/Nav.tsx b/app/Hulio/components/Nav.tsx new file mode 100644 index 0000000..e336bc3 --- /dev/null +++ b/app/Hulio/components/Nav.tsx @@ -0,0 +1,29 @@ +import Link from "next/link"; + +const pages = [ + { href: "/Hulio", label: "Beranda" }, + { href: "/Hulio/about", label: "Tentang" }, + { href: "/Hulio/hobbies", label: "Hobi" }, + { href: "/Hulio/gallery", label: "Foto" }, + { href: "/Hulio/contact", label: "Kontak" }, +] as const; + +export default function Nav() { + return ( + + ); +} diff --git a/app/Hulio/contact.html b/app/Hulio/contact.html new file mode 100644 index 0000000..f5ce9f9 --- /dev/null +++ b/app/Hulio/contact.html @@ -0,0 +1,95 @@ + + + + + + Contact | [Your Name] + + + + +
+

[Your Name]

+ +
+ +
+

Contact

+ +
+

Get in touch

+

Email reaches me best. You can also find my code on GitHub.

+ +
+
+ +
+

© 2026 [Your Name]. Web Programming, Assignment 1.

+
+ + diff --git a/app/Hulio/contact/page.tsx b/app/Hulio/contact/page.tsx new file mode 100644 index 0000000..16f97e6 --- /dev/null +++ b/app/Hulio/contact/page.tsx @@ -0,0 +1,40 @@ +import Nav from "../components/Nav"; + +export default function Contact() { + return ( +
+ {/* Kontak: gaya bebas. Pakai inline styling sederhana agar informasi kontak jelas. Tidak ada di mana-mana di situs ini. */} +
+
+ +
+
+

Media sosial

+ +
+ +
+

Email

+

huliofernando19@gmail.com

+
+
+ +
+ © 2026 Hulio +
+
+ ); +} diff --git a/app/Hulio/gallery.html b/app/Hulio/gallery.html new file mode 100644 index 0000000..bb37c81 --- /dev/null +++ b/app/Hulio/gallery.html @@ -0,0 +1,61 @@ + + + + + + Gallery | [Your Name] + + + + +
+

[Your Name]

+ +
+ +
+

Gallery

+ + +
+

Photos I took

+
+
+ [Describe photo 1: subject, place, light] +
Photo 1: [place and date]
+
+
+ [Describe photo 2: subject, place, light] +
Photo 2: [place and date]
+
+
+ [Describe photo 3: subject, place, light] +
Photo 3: [place and date]
+
+
+ [Describe photo 4: subject, place, light] +
Photo 4: [place and date]
+
+
+ [Describe photo 5: subject, place, light] +
Photo 5: [place and date]
+
+
+ [Describe photo 6: subject, place, light] +
Photo 6: [place and date]
+
+
+
+
+ +
+

© 2026 [Your Name]. Web Programming, Assignment 1.

+
+ + diff --git a/app/Hulio/gallery/page.tsx b/app/Hulio/gallery/page.tsx new file mode 100644 index 0000000..3990348 --- /dev/null +++ b/app/Hulio/gallery/page.tsx @@ -0,0 +1,39 @@ +import Script from "next/script"; +import Nav from "../components/Nav"; + +export default function Gallery() { + return ( +
+ {/* TAILWIND CSS ONLY: styling via kelas utility Tailwind (CDN script di bawah). Tidak ada internal/external CSS dan tidak ada style="" di halaman ini. */} +