diff --git a/app/Hulio/about.html b/app/Hulio/about.html
deleted file mode 100644
index 8223510..0000000
--- a/app/Hulio/about.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>About | [Your Name]</title>
-
-    <!-- external CSS: linked file styles the header, nav, main wrapper (.layout-container), table and lists -->
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Tailwind CSS: CDN script powers the utility classes on the badge below -->
-    <script src="https://cdn.tailwindcss.com"></script>
-
-    <!-- internal CSS: this style block sets the page background and body font (class selector) and the heading colour (id selector) -->
-    <style>
-      .page-about {
-        background-color: #f4f1ea;
-        font-family: Georgia, "Times New Roman", serif;
-      }
-
-      #bio-title {
-        color: #1d4e89;
-      }
-    </style>
-  </head>
-  <body class="page-about">
-    <header class="site-header">
-      <p class="brand">[Your Name]</p>
-      <nav>
-        <a class="nav-link" href="index.html">Home</a>
-        <a class="nav-link" href="about.html" aria-current="page">About</a>
-        <a class="nav-link" href="hobbies.html">Hobbies</a>
-        <a class="nav-link" href="gallery.html">Gallery</a>
-        <a class="nav-link" href="contact.html">Contact</a>
-      </nav>
-    </header>
-
-    <!-- external CSS: .layout-container from styles.css controls the width and padding of this wrapper -->
-    <main class="layout-container">
-      <h1 id="bio-title" class="page-title">About Me</h1>
-
-      <!-- Tailwind CSS: utility classes style this badge (shape, colour, spacing, font) -->
-      <span class="inline-block rounded-full bg-blue-700 px-3 py-1 text-sm font-semibold text-white">Informatics, Semester 1</span>
-
-      <section>
-        <h2 class="section-title">Bio</h2>
-        <p>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].</p>
-      </section>
-
-      <section>
-        <h2 class="section-title">Education</h2>
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>Level</th>
-              <th>School</th>
-              <th>Years</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Bachelor, Informatics</td>
-              <td>[Your University]</td>
-              <td>2026 to present</td>
-            </tr>
-            <tr>
-              <td>Senior high school</td>
-              <td>[Your High School]</td>
-              <td>[Years]</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2 class="section-title">Milestones</h2>
-        <ol class="steps">
-          <li>Started the Informatics program in 2026.</li>
-          <li>Wrote my first HTML page in Web Programming.</li>
-          <li>Built this site with four CSS methods.</li>
-        </ol>
-      </section>
-
-      <section>
-        <h2 class="section-title">Favorite quote</h2>
-        <!-- inline CSS: style="" on this one element only; it takes priority over the internal and external rules -->
-        <blockquote style="margin: 0; padding: 12px 16px; border-left: 4px solid #1d4e89; background-color: #ffffff; font-style: italic; color: #333333;">
-          Talk is cheap. Show me the code.
-          <footer>Linus Torvalds</footer>
-        </blockquote>
-      </section>
-    </main>
-
-    <footer class="site-footer">
-      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
-    </footer>
-  </body>
-</html>
diff --git a/app/Hulio/contact.html b/app/Hulio/contact.html
deleted file mode 100644
index f5ce9f9..0000000
--- a/app/Hulio/contact.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Contact | [Your Name]</title>
-    <!-- internal CSS chosen on purpose: these rules apply to this one page only, so a single style block
-         avoids an extra file (external) and avoids repeating style="" on every element (inline) -->
-    <style>
-      body {
-        margin: 0;
-        font-family: Arial, Helvetica, sans-serif;
-        line-height: 1.6;
-        color: #222222;
-        background-color: #fafafa;
-      }
-
-      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 a {
-        margin-left: 16px;
-        color: #ffffff;
-        text-decoration: none;
-      }
-
-      nav a:hover,
-      nav a[aria-current="page"] {
-        text-decoration: underline;
-      }
-
-      main {
-        max-width: 760px;
-        margin: 0 auto;
-        padding: 24px;
-      }
-
-      h2 {
-        margin: 32px 0 8px;
-        font-size: 1.4rem;
-      }
-
-      footer {
-        padding: 16px 24px;
-        text-align: center;
-        font-size: 0.9rem;
-        color: #555555;
-        border-top: 1px solid #dddddd;
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <p class="brand">[Your Name]</p>
-      <nav>
-        <a href="index.html">Home</a>
-        <a href="about.html">About</a>
-        <a href="hobbies.html">Hobbies</a>
-        <a href="gallery.html">Gallery</a>
-        <a href="contact.html" aria-current="page">Contact</a>
-      </nav>
-    </header>
-
-    <main>
-      <h1>Contact</h1>
-
-      <section>
-        <h2>Get in touch</h2>
-        <p>Email reaches me best. You can also find my code on GitHub.</p>
-        <ul>
-          <li>Email: <a href="mailto:your-email@example.com">your-email@example.com</a></li>
-          <!-- external link: opens a real site outside this project; replace your-username with your GitHub name -->
-          <li>GitHub: <a href="https://github.com/your-username" target="_blank" rel="noopener noreferrer">github.com/your-username</a></li>
-          <li>Instagram: [@your-handle]</li>
-        </ul>
-      </section>
-    </main>
-
-    <footer>
-      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
-    </footer>
-  </body>
-</html>
diff --git a/app/Hulio/gallery.html b/app/Hulio/gallery.html
deleted file mode 100644
index bb37c81..0000000
--- a/app/Hulio/gallery.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Gallery | [Your Name]</title>
-    <!-- this page uses Tailwind CSS only: the CDN script below is the sole style source -->
-    <script src="https://cdn.tailwindcss.com"></script>
-  </head>
-  <body class="bg-gray-50 font-sans leading-relaxed text-gray-900">
-    <header class="flex flex-wrap items-center justify-between bg-blue-800 px-6 py-4">
-      <p class="font-bold text-white">[Your Name]</p>
-      <nav class="flex gap-4">
-        <a class="text-white hover:underline" href="index.html">Home</a>
-        <a class="text-white hover:underline" href="about.html">About</a>
-        <a class="text-white hover:underline" href="hobbies.html">Hobbies</a>
-        <a class="text-white underline" href="gallery.html" aria-current="page">Gallery</a>
-        <a class="text-white hover:underline" href="contact.html">Contact</a>
-      </nav>
-    </header>
-
-    <main class="mx-auto max-w-5xl p-6">
-      <h1 class="mb-4 text-3xl font-bold">Gallery</h1>
-
-      <!-- responsive grid: 1 column on phones, 2 on tablets, 3 on desktops -->
-      <section>
-        <h2 class="mb-4 text-xl font-bold">Photos I took</h2>
-        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-01.png" alt="[Describe photo 1: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 1: [place and date]</figcaption>
-          </figure>
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-02.png" alt="[Describe photo 2: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 2: [place and date]</figcaption>
-          </figure>
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-03.png" alt="[Describe photo 3: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 3: [place and date]</figcaption>
-          </figure>
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-04.png" alt="[Describe photo 4: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 4: [place and date]</figcaption>
-          </figure>
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-05.png" alt="[Describe photo 5: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 5: [place and date]</figcaption>
-          </figure>
-          <figure class="overflow-hidden rounded-lg bg-white shadow">
-            <img class="h-56 w-full object-cover" src="images/gallery-06.png" alt="[Describe photo 6: subject, place, light]">
-            <figcaption class="p-3 text-sm text-gray-600">Photo 6: [place and date]</figcaption>
-          </figure>
-        </div>
-      </section>
-    </main>
-
-    <footer class="border-t border-gray-300 px-6 py-4 text-center text-sm text-gray-600">
-      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
-    </footer>
-  </body>
-</html>
diff --git a/app/Hulio/hobbies.html b/app/Hulio/hobbies.html
deleted file mode 100644
index f17b9ed..0000000
--- a/app/Hulio/hobbies.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Hobbies | [Your Name]</title>
-    <!-- this page uses external CSS only: every style comes from styles.css -->
-    <link rel="stylesheet" href="styles.css">
-  </head>
-  <body>
-    <header class="site-header">
-      <p class="brand">[Your Name]</p>
-      <nav>
-        <a class="nav-link" href="index.html">Home</a>
-        <a class="nav-link" href="about.html">About</a>
-        <a class="nav-link" href="hobbies.html" aria-current="page">Hobbies</a>
-        <a class="nav-link" href="gallery.html">Gallery</a>
-        <a class="nav-link" href="contact.html">Contact</a>
-      </nav>
-    </header>
-
-    <main class="layout-container">
-      <h1 class="page-title">My Hobbies</h1>
-
-      <section class="hobby">
-        <img src="images/hobby-coding.png" alt="Laptop on a desk showing a code editor next to a notebook">
-        <div class="hobby-text">
-          <h2 class="section-title">Coding</h2>
-          <p>I write small programs to practice what I learn in class. A short script that works teaches me more than a page of notes.</p>
-        </div>
-      </section>
-
-      <section class="hobby">
-        <img src="images/hobby-photography.png" alt="Hands holding a camera pointed at a street scene">
-        <div class="hobby-text">
-          <h2 class="section-title">Photography</h2>
-          <p>I photograph places around me and pay attention to light. Most of the pictures on this site come from that habit.</p>
-        </div>
-      </section>
-
-      <section class="hobby">
-        <img src="images/hobby-reading.png" alt="Open book resting on a table beside a cup of tea">
-        <div class="hobby-text">
-          <h2 class="section-title">Reading</h2>
-          <p>I read a few pages every evening. Books on technology and short stories take turns on my shelf.</p>
-        </div>
-      </section>
-    </main>
-
-    <footer class="site-footer">
-      <p>&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
-    </footer>
-  </body>
-</html>
diff --git a/app/Hulio/index.html b/app/Hulio/index.html
deleted file mode 100644
index 763d861..0000000
--- a/app/Hulio/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Home | [Your Name]</title>
-    <!-- this page uses inline CSS only: no style block, no linked stylesheet -->
-  </head>
-  <body style="margin: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1.6; color: #222222; background-color: #fafafa;">
-    <header style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px 24px; background-color: #1d4e89;">
-      <p style="margin: 0; font-weight: bold; color: #ffffff;">[Your Name]</p>
-      <!-- shared navigation: same five links on every page -->
-      <nav>
-        <a href="index.html" aria-current="page" style="margin-left: 16px; color: #ffffff; text-decoration: underline;">Home</a>
-        <a href="about.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">About</a>
-        <a href="hobbies.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Hobbies</a>
-        <a href="gallery.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Gallery</a>
-        <a href="contact.html" style="margin-left: 16px; color: #ffffff; text-decoration: none;">Contact</a>
-      </nav>
-    </header>
-
-    <main style="max-width: 760px; margin: 0 auto; padding: 24px;">
-      <section style="display: flex; flex-wrap: wrap; gap: 24px; align-items: center;">
-        <img src="images/profile.png" alt="Portrait of [Your Name] standing outdoors and facing the camera" style="width: 200px; height: 200px; object-fit: cover; border-radius: 50%;">
-        <div style="flex: 1; min-width: 240px;">
-          <h1 style="margin: 0 0 8px; font-size: 2rem;">Hi, I'm [Your Name]</h1>
-          <p style="margin: 0;">First-semester Informatics student learning to build websites with HTML and CSS.</p>
-        </div>
-      </section>
-
-      <section>
-        <h2 style="margin: 32px 0 8px; font-size: 1.4rem;">What I am learning now</h2>
-        <ul style="padding-left: 24px;">
-          <li>HTML structure and semantic tags</li>
-          <li>Four ways to write CSS and when to use each</li>
-          <li>Clean, consistent code</li>
-        </ul>
-      </section>
-    </main>
-
-    <footer style="padding: 16px 24px; text-align: center; font-size: 0.9rem; color: #555555; border-top: 1px solid #dddddd;">
-      <p style="margin: 0;">&copy; 2026 [Your Name]. Web Programming, Assignment 1.</p>
-    </footer>
-  </body>
-</html>