Remove HTML template files, keep TSX pages only
- Deleted app/Hulio/*.html (about, contact, gallery, hobbies, index) - All 5 pages now use TSX route segments only
This commit is contained in:
Exsors
@@ -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>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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;">© 2026 [Your Name]. Web Programming, Assignment 1.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user