HackYourAssignment · jivvyjams · May 12, 2026 · May 12, 2026 · May 12, 2026 · May 13, 2026
diff --git a/task-1/assets/cool.png b/task-1/assets/cool.png
diff --git a/task-1/assets/dark-theme.svg b/task-1/assets/dark-theme.svg
diff --git a/task-1/assets/favicon.ico b/task-1/assets/favicon.ico
diff --git a/task-1/assets/galaxy.jpg b/task-1/assets/galaxy.jpg
diff --git a/task-1/assets/light-theme.svg b/task-1/assets/light-theme.svg
diff --git a/task-1/axe-screenshot.png b/task-1/axe-screenshot.png
diff --git a/task-1/index.html b/task-1/index.html
@@ -3,9 +3,104 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Week 2 assignment</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link rel="icon" type="image/png" href="assets/favicon.ico" />
+    <title>Jawad Al Bdiwi | Portfolio Page</title>
   </head>
   <body>
-
+    <main class="site-grid">
+      <header>
+        <img
+          class="profile"
+          src="assets/cool.png"
+          alt="grinning smiley face with sunglasses giving thumbs up"
+          width="200"
+        />
+        <div class="title">
+          <h1>Jawad Al Bdiwi</h1>
+          <p>Hello and welcome to my portolio page!</p>
+        </div>
+        <button class="theme-toggle" id="theme-toggle">
+          <img src="assets/dark-theme.svg" alt="theme toggle icon" />
+        </button>
+      </header>
+
+      <section class="about">
+        <h2>About Me</h2>
+        <p>
+          I am an aspriring full-stack developer, currently enrolled in the Hack
+          Your Future program.
+        </p>
+        <p>
+          Before that, I was working as a project coordinator at an inburgering
+          school.
+        </p>
+      </section>
+
+      <aside class="interests" aria-label="interests">
+        <h3>Interests:</h3>
+        <ul>
+          <li>Running</li>
+          <li>Music production</li>
+          <li>Gaming</li>
+          <li>Linux</li>
+          <li>Digital privacy</li>
+        </ul>
+      </aside>
+
+      <aside class="tech" aria-label="tech">
+        <h3>Tech Stack:</h3>
+        <ul>
+          <li>JavaScript</li>
+          <li>HTML</li>
+          <li>CSS</li>
+          <li>Bash</li>
+          <li>Git</li>
+        </ul>
+      </aside>
+
+      <section class="contact">
+        <h2>Get in Touch</h2>
+        <form id="contact-form">
+          <div class="name">
+            <label for="name">Name *:</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              placeholder="John Smith"
+              required
+            />
+          </div>
+          <div class="email">
+            <label for="email">E-mail *:</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              placeholder="example@domain.com"
+              required
+            />
+          </div>
+          <div class="message">
+            <label for="message">Message *:</label>
+            <textarea
+              id="message"
+              name="message"
+              rows="4"
+              placeholder="Enter your message here..."
+              required
+            ></textarea>
+          </div>
+          <button type="submit" class="submit-button" id="submit-button">
+            Submit
+          </button>
+        </form>
+      </section>
+
+      <footer>HackYourFuture Front-end track week 2 assignment</footer>
+    </main>
+
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/task-1/mobile-screenshot.png b/task-1/mobile-screenshot.png
diff --git a/task-1/script.js b/task-1/script.js
@@ -0,0 +1,22 @@
+const toggleTheme = document.querySelector("#theme-toggle");
+const contactForm = document.querySelector("#contact-form");
+const formMessage = document.querySelector("#form-message");
+
+toggleTheme.addEventListener("click", () => {
+  document.documentElement.classList.toggle("dark-mode");
+  updateToggleIcon();
+});
+
+function updateToggleIcon() {
+  const isDarkMode = document.documentElement.classList.contains("dark-mode");
+  const icon = toggleTheme.querySelector("img");
+  icon.src = isDarkMode ? "assets/light-theme.svg" : "assets/dark-theme.svg";
+}
+
+contactForm.addEventListener("submit", function (event) {
+  event.preventDefault(); // Prevent page reload
+  console.log("Form submitted!");
+  contactForm.reset();
+  formMessage.textContent =
+    "Thanks for reaching out! I'll get back to you soon.";
+});