From 4ae7b0360e3c1c9c14ff2dd6824e3dc254221fb0 Mon Sep 17 00:00:00 2001
From: hugh5 <hughdrummond11@gmail.com>
Date: Thu, 16 May 2024 22:03:15 +1000
Subject: [PATCH] added html semantic tags

---
 blog.html         |  14 +-
 css/style.css     |  65 +++-
 experience.html   | 508 +++++++++++++++--------------
 index.html        |  14 +-
 js/script.js      |   4 +-
 projects.html     | 810 ++++++++++++++++++++++++----------------------
 testimonials.html |  14 +-
 7 files changed, 768 insertions(+), 661 deletions(-)

diff --git a/blog.html b/blog.html
index 27ef7ec..78cfb52 100644
--- a/blog.html
+++ b/blog.html
@@ -13,17 +13,19 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <a class="menu-item" href=".">Home</a>
+                <a class="menu-item" href="index.html">Home</a>
                 <a class="menu-item" href="experience.html">Experience</a>
                 <a class="menu-item" href="projects.html">Projects</a>
                 <a class="menu-item" href="blog.html">Blog</a>
                 <a class="menu-item" href="testimonials.html">Testimonials</a>
             </nav>
         </header>
-        <button class="theme-button" onclick="toggleTheme()">
-            <img class="theme-icon" alt="Toggle Theme" />
-        </button>
-        <div id="page">
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="Toggle Theme" />
+            </button>
+        </aside>
+        <main>
             <div id="blog">
                 <div class="column">
                     <article>
@@ -233,7 +235,7 @@ <h2>
                     </article>
                 </div>
             </div>
-        </div>
+        </main>
         <footer>
             <div class="row">
                 <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
diff --git a/css/style.css b/css/style.css
index 2d4f684..032ec42 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,12 @@
-
+/* Inter from https://fonts.google.com/specimen/Inter and Rubik One from https://fonts.google.com/specimen/Rubik */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Rubik+One&display=swap');
 
-
+/* General Styles */
 :root {
     
     --background-color: #808080;
 
+    /* Light/Dark mode implementated using CSS variables and a data attribute */
     /* Dark theme */
     body[data-theme="dark"] {
         --accent-color: #9B70ff;
@@ -29,6 +30,8 @@
         --secondary-text-color: #666;
         transition: background-color 0.5s;
         
+
+        /* Invert image colors for light theme */
         .theme-icon {
             filter: invert(1);
         }
@@ -65,10 +68,11 @@ body {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     line-height: 1.5;
-    min-height: 100vh;
+    min-height: 100vh; /* Full height of the viewport */
     color: var(--primary-text-color);
 }
 
+/* Navigation Menu */
 header {
     display: flex;
     justify-content: center;
@@ -81,15 +85,19 @@ nav {
     justify-content: space-between;
     align-items: center;
     padding: 3px 40px;
+
+    /* Opaque background with blur effect */
     background-color: rgba(var(--secondary-background-color-rgb), 0.5);
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
+
     width: 700px;
-    position: fixed;
+    position: fixed; /* Fixed position to keep the menu at the top of the page */
     border-radius: 25px;
     top: 20px;
     z-index: 1000;
 
+    /* Responsive design */
     @media (max-width: 800px) {
         width: auto;
         align-items: flex-start;
@@ -110,6 +118,7 @@ nav {
             opacity: 1;
         }
         
+        /* Show the menu image on smaller screens */
         @media (max-width: 800px) {
             display: block;
         }
@@ -132,11 +141,11 @@ nav {
 
     > .menu-item:hover, > .menu-item.active {
         color: var(--primary-text-color);
-        border-bottom: 3px solid var(--accent-color);
-        /* box-shadow: 0 3px 0 var(--accent-color); */
+        border-bottom: 3px solid var(--accent-color); /* Underline effect for the active menu item */
     }
 }
 
+/* Footer */
 footer {
     justify-self: flex-end;
     width: 100%;
@@ -177,40 +186,47 @@ footer a {
     height: 30px;
 }
 
+/* Dark/Light Theme Button */
 .theme-button {
     position: fixed;
     top: 20px;
-
-    @media (min-width: 801px) and (max-width: 960px) {
-        top: 80px;
-    }
-
     right: 20px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: none;
+
+    /* Opaque background with blur effect */
     background-color: rgba(var(--secondary-background-color-rgb), 0.5);
     backdrop-filter: blur(20px);
+
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     z-index: 1000;
 
+    /* Place below navigation menu on certain screen sizes */
+    @media (min-width: 801px) and (max-width: 960px) {
+        top: 80px;
+    }
+
     >.theme-icon {
         width: 32px;
         height: 32px;
     }
 }
 
+/* Additional General Styling */
 .row {
+    /* Flexbox row with center alignment */
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     width: 100%;
 
+    /* Turn into column on smaller screens */
     @media (max-width: 800px) {
         flex-direction: column;
     }
@@ -221,6 +237,7 @@ footer a {
 }
 
 .column {
+    /* Flexbox column with center alignment */
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -263,6 +280,7 @@ h4 {
     align-self: flex-start;
 
     > span {
+        /* Accented text */
         font-weight: 400;
         color: var(--secondary-text-color);
     }
@@ -286,6 +304,7 @@ h5 {
 }
 
 p > span {
+    /* Accented text */
     font-weight: 600;
     color: var(--accent-color);
 }
@@ -298,7 +317,8 @@ ul {
     align-self: flex-start;
 }
 
-#page {
+/* General Page */
+#page, main {
     flex: 1;
     display: flex;
     align-items: start;
@@ -311,6 +331,11 @@ ul {
     }
 }
 
+section {
+    width: 100%;
+}
+
+/* Home Page */
 #home {
     max-width: 800px;
 }
@@ -321,6 +346,7 @@ ul {
     flex-direction: column;
     word-wrap: hidden;
 
+    /* Staggered padding for each h1 element */
     @media (min-width: 801px) {
         h1:nth-child(1) {
             padding-left: 0;
@@ -344,6 +370,7 @@ ul {
     display: block;
 }
 
+/* Experience Page */
 #experience {
     max-width: 1000px;
 }
@@ -351,6 +378,7 @@ ul {
 .grid-container {
     display: grid;
     width: 100%;
+    /* Responsive grid with a minimum width of 90px and a maximum width of 1fr */
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: 40px 60px;
     padding: 20px;
@@ -367,6 +395,7 @@ ul {
     padding-bottom: 10px;
 }
 
+/* Projects Page */
 #projects {
     max-width: 1000px;
 
@@ -410,7 +439,8 @@ ul {
         }
     }
 
-    >.column> :nth-child(3n+4) {
+    /* Gap between each project starting from the second project */
+    section:nth-child(n+2) {
         margin-top: 80px;
     }
 }
@@ -435,6 +465,7 @@ ul {
         border-radius: var(--radius);
     }
 
+    /* Place all content on top of each other */
     .content:first-child {
         position: relative;
     }
@@ -443,6 +474,7 @@ ul {
         position: absolute;
     }
 
+    /* Place arrows on top of the content */
     .arrow {
         width: 40px;
         height: 40px;
@@ -460,6 +492,7 @@ ul {
         }
     }
 
+    /* Position arrows */
     .left-arrow {
         left: -50px;
     }
@@ -468,6 +501,7 @@ ul {
         right: -50px;
     }
 
+    /* Place dots at the bottom of the container */
     .dots {
         display: flex;
         justify-content: center;
@@ -496,17 +530,20 @@ ul {
     }
 }
 
+/* Testimonials Page */
 #testimonials {
     width: 1000px;
 }
 
 .split-grid {
     display: grid;
+    /* Two columns with a gap of 40px */
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     width: 100%;
     padding: 20px 0;
 
+    /* One column on smaller screens */
     @media (max-width: 800px) {
         grid-template-columns: 1fr;
     }
@@ -514,6 +551,7 @@ ul {
 
 .linear-grid {
     display: grid;
+    /* One column with a gap of 40px */
     grid-template-columns: 1fr;
     gap: 40px;
     width: 100%;
@@ -579,6 +617,7 @@ ul {
     background-color: var(--tertiary-background-color);
 }
 
+/* Blog Page */
 #blog {
     max-width: 1000px;
 
diff --git a/experience.html b/experience.html
index 47ef089..6dda55d 100644
--- a/experience.html
+++ b/experience.html
@@ -13,266 +13,288 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <a class="menu-item" href=".">Home</a>
+                <a class="menu-item" href="index.html">Home</a>
                 <a class="menu-item" href="experience.html">Experience</a>
                 <a class="menu-item" href="projects.html">Projects</a>
                 <a class="menu-item" href="blog.html">Blog</a>
                 <a class="menu-item" href="testimonials.html">Testimonials</a>
             </nav>
         </header>
-        <button class="theme-button" onclick="toggleTheme()">
-            <img class="theme-icon" alt="Toggle Theme" />
-        </button>
-        <div id="page">
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="Toggle Theme" />
+            </button>
+        </aside>
+        <main>
             <div id="experience">
                 <div class="column">
-                    <h2>Education</h2>
-                    <div class="row">
-                        <h4>
-                            The University of Queensland<span>
-                                — Bachelor of Computer Science</span
-                            >
-                        </h4>
-                        <h5>2021 — Present</h5>
-                    </div>
-                    <p>
-                        I am currently in my third year pursuing a
-                        <span>Bachelor of Computer Science</span>, majoring in
-                        <span>Programming Languages</span>, at The University of
-                        Queensland.
-                    </p>
-                    <p>
-                        I've gained a comprehensive understanding of
-                        <span>algorithms</span>, <span>data structures</span>,
-                        <span>software architecture</span>,
-                        <span>operating systems</span>, and
-                        <span>database systems</span>.
-                    </p>
-                    <p>
-                        Additionally, my coursework covered topics such as
-                        <span>object-oriented programming</span>,
-                        <span>functional programming</span>,
-                        <span>compilers and interpreters</span>,
-                        <span>operating systems</span> and
-                        <span>networking</span>.
-                    </p>
-                    <h2>Experience</h2>
-                    <div class="row">
-                        <h4>
-                            Software Engineer Intern<span> — FPT Software</span>
-                        </h4>
-
-                        <h5>Jan 2023 — Feb 2023</h5>
-                    </div>
-                    <ul>
-                        <li>
-                            Designed and tested RESTful APIs for a business
-                            directory application using Node.js.
-                        </li>
-                        <li>
-                            Implemented a database schema using MongoDB and
-                            integrated it with the application using Node.js.
-                        </li>
-                        <li>
-                            Improved the application's search functionality by
-                            implementing a search feature using ElasticSearch.
-                        </li>
-                        <li>
-                            Participated in daily stand-up meetings, code
-                            reviews, and sprint planning sessions.
-                        </li>
-                        <li>
-                            Implemented unit tests and participated in
-                            integration testing to ensure code quality and
-                            reliability.
-                        </li>
-                    </ul>
-                    <div class="row">
-                        <h4>
-                            Academic Tutor<span>
-                                — The University of Queensland</span
-                            >
-                        </h4>
-
-                        <h5>Jul 2023 — Present</h5>
-                    </div>
-                    <ul>
-                        <li>Tutor Algorithms & Data Structure course.</li>
-                        <li>
-                            Assisted students in understanding complex concepts
-                            and solving problems related to programming
-                            languages, algorithms, and data structures.
-                        </li>
-                        <li>
-                            Conducted tutorial sessions, graded assignments, and
-                            provided feedback to students to help them improve
-                            their understanding and performance.
-                        </li>
-                    </ul>
-                    <h2>Skills</h2>
-                    <h4>Programming Languages</h4>
-                    <div class="grid-container">
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/java.png"
-                                alt="Java"
-                            />
-                            Java
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/python.png"
-                                alt="Python"
-                            />
-                            Python
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/javascript.png"
-                                alt="JavaScript"
-                            />
-                            JavaScript
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/swift.png"
-                                alt="Swift"
-                            />
-                            Swift
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/cpp.png"
-                                alt="C/C++"
-                            />
-                            C/C++
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/html-5.png"
-                                alt="HTML"
-                            />
-                            HTML
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/css-3.png"
-                                alt="CSS"
-                            />
-                            CSS
+                    <section>
+                        <h2>Education</h2>
+                        <div class="row">
+                            <h4>
+                                The University of Queensland<span>
+                                    — Bachelor of Computer Science</span
+                                >
+                            </h4>
+                            <h5>2021 — Present</h5>
                         </div>
+                        <p>
+                            I am currently in my third year pursuing a
+                            <span>Bachelor of Computer Science</span>, majoring
+                            in <span>Programming Languages</span>, at The
+                            University of Queensland.
+                        </p>
+                        <p>
+                            I've gained a comprehensive understanding of
+                            <span>algorithms</span>,
+                            <span>data structures</span>,
+                            <span>software architecture</span>,
+                            <span>operating systems</span>, and
+                            <span>database systems</span>.
+                        </p>
+                        <p>
+                            Additionally, my coursework covered topics such as
+                            <span>object-oriented programming</span>,
+                            <span>functional programming</span>,
+                            <span>compilers and interpreters</span>,
+                            <span>operating systems</span> and
+                            <span>networking</span>.
+                        </p>
+                    </section>
+                    <section>
+                        <h2>Experience</h2>
+                        <div class="row">
+                            <h4>
+                                Software Engineer Intern<span>
+                                    — FPT Software</span
+                                >
+                            </h4>
 
-                        <div class="column">
-                            <img class="logo" src="images/sql.png" alt="SQL" />
-                            SQL
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/bash.png"
-                                alt="Bash"
-                            />
-                            Bash
+                            <h5>Jan 2023 — Feb 2023</h5>
                         </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/haskell.png"
-                                alt="Haskell"
-                            />
-                            Haskell
-                        </div>
-                    </div>
-                    <h4>Frameworks and Tools</h4>
-                    <div class="grid-container">
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/flutter.png"
-                                alt="Flutter"
-                            />
-                            Flutter
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/firebase.png"
-                                alt="Firebase"
-                            />
-                            Firebase
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/node.png"
-                                alt="Node.js"
-                            />
-                            Node.js
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/react.png"
-                                alt="React"
-                            />
-                            React
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/jquery.png"
-                                alt="jQuery"
-                            />
-                            jQuery
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/angular.png"
-                                alt="Angular"
-                            />
-                            Angular
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/mongodb.png"
-                                alt="MongoDB"
-                            />
-                            MongoDB
-                        </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/postgreSQL.png"
-                                alt="PostgreSQL"
-                            />
-                            PostgreSQL
+                        <ul>
+                            <li>
+                                Designed and tested RESTful APIs for a business
+                                directory application using Node.js.
+                            </li>
+                            <li>
+                                Implemented a database schema using MongoDB and
+                                integrated it with the application using
+                                Node.js.
+                            </li>
+                            <li>
+                                Improved the application's search functionality
+                                by implementing a search feature using
+                                ElasticSearch.
+                            </li>
+                            <li>
+                                Participated in daily stand-up meetings, code
+                                reviews, and sprint planning sessions.
+                            </li>
+                            <li>
+                                Implemented unit tests and participated in
+                                integration testing to ensure code quality and
+                                reliability.
+                            </li>
+                        </ul>
+                        <div class="row">
+                            <h4>
+                                Academic Tutor<span>
+                                    — The University of Queensland</span
+                                >
+                            </h4>
+
+                            <h5>Jul 2023 — Present</h5>
                         </div>
+                        <ul>
+                            <li>Tutor Algorithms & Data Structure course.</li>
+                            <li>
+                                Assisted students in understanding complex
+                                concepts and solving problems related to
+                                programming languages, algorithms, and data
+                                structures.
+                            </li>
+                            <li>
+                                Conducted tutorial sessions, graded assignments,
+                                and provided feedback to students to help them
+                                improve their understanding and performance.
+                            </li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h2>Skills</h2>
+                        <h4>Programming Languages</h4>
+                        <div class="grid-container">
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/java.png"
+                                    alt="Java"
+                                />
+                                Java
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/python.png"
+                                    alt="Python"
+                                />
+                                Python
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/javascript.png"
+                                    alt="JavaScript"
+                                />
+                                JavaScript
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/swift.png"
+                                    alt="Swift"
+                                />
+                                Swift
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/cpp.png"
+                                    alt="C/C++"
+                                />
+                                C/C++
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/html-5.png"
+                                    alt="HTML"
+                                />
+                                HTML
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/css-3.png"
+                                    alt="CSS"
+                                />
+                                CSS
+                            </div>
 
-                        <div class="column">
-                            <img class="logo" src="images/git.png" alt="Git" />
-                            Git
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/sql.png"
+                                    alt="SQL"
+                                />
+                                SQL
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/bash.png"
+                                    alt="Bash"
+                                />
+                                Bash
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/haskell.png"
+                                    alt="Haskell"
+                                />
+                                Haskell
+                            </div>
                         </div>
-                        <div class="column">
-                            <img
-                                class="logo"
-                                src="images/docker.png"
-                                alt="Docker"
-                            />
-                            Docker
+                        <h4>Frameworks and Tools</h4>
+                        <div class="grid-container">
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/flutter.png"
+                                    alt="Flutter"
+                                />
+                                Flutter
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/firebase.png"
+                                    alt="Firebase"
+                                />
+                                Firebase
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/node.png"
+                                    alt="Node.js"
+                                />
+                                Node.js
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/react.png"
+                                    alt="React"
+                                />
+                                React
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/jquery.png"
+                                    alt="jQuery"
+                                />
+                                jQuery
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/angular.png"
+                                    alt="Angular"
+                                />
+                                Angular
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/mongodb.png"
+                                    alt="MongoDB"
+                                />
+                                MongoDB
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/postgreSQL.png"
+                                    alt="PostgreSQL"
+                                />
+                                PostgreSQL
+                            </div>
+
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/git.png"
+                                    alt="Git"
+                                />
+                                Git
+                            </div>
+                            <div class="column">
+                                <img
+                                    class="logo"
+                                    src="images/docker.png"
+                                    alt="Docker"
+                                />
+                                Docker
+                            </div>
                         </div>
-                    </div>
+                    </section>
                 </div>
             </div>
-        </div>
+        </main>
         <footer>
             <div class="row">
                 <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
diff --git a/index.html b/index.html
index 3e77569..f2c44cf 100644
--- a/index.html
+++ b/index.html
@@ -13,17 +13,19 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <a class="menu-item" href=".">Home</a>
+                <a class="menu-item" href="index.html">Home</a>
                 <a class="menu-item" href="experience.html">Experience</a>
                 <a class="menu-item" href="projects.html">Projects</a>
                 <a class="menu-item" href="blog.html">Blog</a>
                 <a class="menu-item" href="testimonials.html">Testimonials</a>
             </nav>
         </header>
-        <button class="theme-button" onclick="toggleTheme()">
-            <img class="theme-icon" alt="Toggle Theme" />
-        </button>
-        <div id="page">
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="Toggle Theme" />
+            </button>
+        </aside>
+        <main>
             <div id="home">
                 <div class="column">
                     <div class="row">
@@ -77,7 +79,7 @@ <h3>Career Objectives</h3>
                     </p>
                 </div>
             </div>
-        </div>
+        </main>
         <footer>
             <div class="row">
                 <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
diff --git a/js/script.js b/js/script.js
index 2b12be7..955f98e 100644
--- a/js/script.js
+++ b/js/script.js
@@ -57,8 +57,8 @@ function loadNav() {
     // Determine the current page
     var path = window.location.pathname;
     var page = path.split("/").pop();
-    if (page == "" || page == "index.html") {
-        page = ".";
+    if (page == "" || page == ".") {
+        page = "index.html";
     }
 
     // Highlight the active nav item based on the current page
diff --git a/projects.html b/projects.html
index a8bd12b..5c2cded 100644
--- a/projects.html
+++ b/projects.html
@@ -13,470 +13,510 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <a class="menu-item" href=".">Home</a>
+                <a class="menu-item" href="index.html">Home</a>
                 <a class="menu-item" href="experience.html">Experience</a>
                 <a class="menu-item" href="projects.html">Projects</a>
                 <a class="menu-item" href="blog.html">Blog</a>
                 <a class="menu-item" href="testimonials.html">Testimonials</a>
             </nav>
         </header>
-        <button class="theme-button" onclick="toggleTheme()">
-            <img class="theme-icon" alt="Toggle Theme" />
-        </button>
-        <div id="page">
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="Toggle Theme" />
+            </button>
+        </aside>
+        <main>
             <div id="projects">
                 <div class="column">
-                    <div class="row">
-                        <h2>UQ Social Timetable</h2>
-                        <h5>Mobile App</h5>
-                    </div>
-                    <div class="row">
-                        <ul>
-                            <li>
-                                Developed a mobile application for students to
-                                view their own timetable in conjunction with
-                                their friends' timetables.
-                            </li>
-                            <li>
-                                Published application on the App Store and
-                                Google Play Store. Over 3000 users and 500 daily
-                                active users.
-                            </li>
-                            <li>
-                                Designed a user-friendly interface to display
-                                timetable information and allow students to
-                                manage their schedule. Initially written in
-                                Swift and later translated to Flutter for cross
-                                platform compatibility.
-                            </li>
-                            <li>
-                                Leveraged Firebase's NoSQL cloud database to
-                                implement a comprehensive social networking
-                                feature set, allowing users to send, accept, and
-                                decline friend requests.
-                            </li>
-                            <li>
-                                Facilitated real time messaging between users
-                                and timetable sharing capabilities leveraging
-                                Firebase's cloud database
-                            </li>
-                            <li>
-                                Utilised OneSignal to facilitate push
-                                notifications for group chat messages and friend
-                                requests.
-                            </li>
-                        </ul>
-                        <div id="project1" class="container">
-                            <img
-                                class="content"
-                                src="./images/timetable1.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/timetable2.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/timetable3.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/timetable4.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/timetable5.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/timetable6.png"
-                            />
-                            <div class="arrow left-arrow">
-                                <img src="images/prev.png" />
-                            </div>
-                            <div class="arrow right-arrow">
-                                <img src="images/next.png" />
-                            </div>
-                            <div class="dots"></div>
+                    <section>
+                        <div class="row">
+                            <h2>UQ Social Timetable</h2>
+                            <h5>Mobile App</h5>
                         </div>
-                    </div>
-                    <div class="row">
-                        <div class="tech-stack">
-                            <div class="column">
+                        <div class="row">
+                            <ul>
+                                <li>
+                                    Developed a mobile application for students
+                                    to view their own timetable in conjunction
+                                    with their friends' timetables.
+                                </li>
+                                <li>
+                                    Published application on the App Store and
+                                    Google Play Store. Over 3000 users and 500
+                                    daily active users.
+                                </li>
+                                <li>
+                                    Designed a user-friendly interface to
+                                    display timetable information and allow
+                                    students to manage their schedule. Initially
+                                    written in Swift and later translated to
+                                    Flutter for cross platform compatibility.
+                                </li>
+                                <li>
+                                    Leveraged Firebase's NoSQL cloud database to
+                                    implement a comprehensive social networking
+                                    feature set, allowing users to send, accept,
+                                    and decline friend requests.
+                                </li>
+                                <li>
+                                    Facilitated real time messaging between
+                                    users and timetable sharing capabilities
+                                    leveraging Firebase's cloud database
+                                </li>
+                                <li>
+                                    Utilised OneSignal to facilitate push
+                                    notifications for group chat messages and
+                                    friend requests.
+                                </li>
+                            </ul>
+                            <div id="project1" class="container">
                                 <img
-                                    class="logo"
-                                    src="images/flutter.png"
-                                    alt="Fluter"
+                                    class="content"
+                                    src="./images/timetable1.png"
                                 />
-                                Flutter
-                            </div>
-                            <div class="column">
                                 <img
-                                    class="logo"
-                                    src="images/firebase.png"
-                                    alt="Firebase"
+                                    class="content"
+                                    src="./images/timetable2.png"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/timetable3.png"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/timetable4.png"
                                 />
-                                Firebase
-                            </div>
-                            <div class="column">
                                 <img
-                                    class="logo"
-                                    src="images/swift.png"
-                                    alt="Swift"
+                                    class="content"
+                                    src="./images/timetable5.png"
                                 />
-                                Swift
+                                <img
+                                    class="content"
+                                    src="./images/timetable6.png"
+                                />
+                                <div class="arrow left-arrow">
+                                    <img src="images/prev.png" />
+                                </div>
+                                <div class="arrow right-arrow">
+                                    <img src="images/next.png" />
+                                </div>
+                                <div class="dots"></div>
                             </div>
-                            <div class="filler"></div>
-                            <a
-                                href="https://github.com/hugh5/social-timetable"
-                                target="_blank"
-                            >
+                        </div>
+                        <div class="row">
+                            <div class="tech-stack">
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/github.png"
-                                        alt="Github"
+                                        src="images/flutter.png"
+                                        alt="Fluter"
                                     />
-                                    GitHub
+                                    Flutter
                                 </div>
-                            </a>
-                            <a
-                                href="https://apps.apple.com/au/app/uq-social-timetable/id1673356306"
-                                target="_blank"
-                            >
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/appstore.png"
-                                        alt="App Store"
+                                        src="images/firebase.png"
+                                        alt="Firebase"
                                     />
-                                    App Store
+                                    Firebase
                                 </div>
-                            </a>
-                            <a
-                                href="https://play.google.com/store/apps/details?id=com.hughdrummond.social_timetable"
-                                target="_blank"
-                            >
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/playstore.png"
-                                        alt="Play Store"
+                                        src="images/swift.png"
+                                        alt="Swift"
                                     />
-                                    Play Store
+                                    Swift
                                 </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <h2>Maze Generation and Pathfinding Visualiser</h2>
-                        <h5>Web App</h5>
-                    </div>
-                    <div class="row">
-                        <div id="project2" class="container">
-                            <img
-                                class="content"
-                                src="./images/pathfinding1.gif"
-                            />
-                            <img
-                                class="content"
-                                src="./images/pathfinding2.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/pathfinding3.png"
-                            />
-                            <img
-                                class="content"
-                                src="./images/pathfinding4.png"
-                            />
-                            <div class="arrow left-arrow">
-                                <img src="images/prev.png" />
-                            </div>
-                            <div class="arrow right-arrow">
-                                <img src="images/next.png" />
+                                <div class="filler"></div>
+                                <a
+                                    href="https://github.com/hugh5/social-timetable"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/github.png"
+                                            alt="Github"
+                                        />
+                                        GitHub
+                                    </div>
+                                </a>
+                                <a
+                                    href="https://apps.apple.com/au/app/uq-social-timetable/id1673356306"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/appstore.png"
+                                            alt="App Store"
+                                        />
+                                        App Store
+                                    </div>
+                                </a>
+                                <a
+                                    href="https://play.google.com/store/apps/details?id=com.hughdrummond.social_timetable"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/playstore.png"
+                                            alt="Play Store"
+                                        />
+                                        Play Store
+                                    </div>
+                                </a>
                             </div>
-                            <div class="dots"></div>
                         </div>
-                        <ul>
-                            <li>
-                                Developed a web application to visualise maze
-                                generation and pathfinding algorithms.
-                            </li>
-                            <li>
-                                Implemented maze generation algorithms such as
-                                Recursive Backtracking, Recursive Division,
-                                Prim's Algorithm, and Kruskal's Algorithm.
-                            </li>
-                            <li>
-                                Implemented pathfinding algorithms such as
-                                Greedy-Best-First Search, A* Search, Breadth
-                                First Search and Depth First Search.
-                            </li>
-                            <li>
-                                Designed a user-friendly interface to allow
-                                users to select the size of the maze, the
-                                algorithm to generate the maze, and the
-                                algorithm to find the path.
-                            </li>
-                            <li>
-                                Utilised React and canvas graphics using p5JS to
-                                create the web application.
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="row">
-                        <div class="tech-stack">
-                            <div class="column">
+                    </section>
+                    <section>
+                        <div class="row">
+                            <h2>Maze Generation and Pathfinding Visualiser</h2>
+                            <h5>Web App</h5>
+                        </div>
+                        <div class="row">
+                            <div id="project2" class="container">
                                 <img
-                                    class="logo"
-                                    src="images/react.png"
-                                    alt="React"
+                                    class="content"
+                                    src="./images/pathfinding1.gif"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/pathfinding2.png"
                                 />
-                                React
-                            </div>
-                            <div class="column">
                                 <img
-                                    class="logo"
-                                    src="images/javascript.png"
-                                    alt="JavaScript"
+                                    class="content"
+                                    src="./images/pathfinding3.png"
                                 />
-                                JavaScript
+                                <img
+                                    class="content"
+                                    src="./images/pathfinding4.png"
+                                />
+                                <div class="arrow left-arrow">
+                                    <img src="images/prev.png" />
+                                </div>
+                                <div class="arrow right-arrow">
+                                    <img src="images/next.png" />
+                                </div>
+                                <div class="dots"></div>
                             </div>
-                            <div class="filler"></div>
-                            <a
-                                href="https://github.com/hugh5/pathfinding-visualiser"
-                                target="_blank"
-                            >
+                            <ul>
+                                <li>
+                                    Developed a web application to visualise
+                                    maze generation and pathfinding algorithms.
+                                </li>
+                                <li>
+                                    Implemented maze generation algorithms such
+                                    as Recursive Backtracking, Recursive
+                                    Division, Prim's Algorithm, and Kruskal's
+                                    Algorithm.
+                                </li>
+                                <li>
+                                    Implemented pathfinding algorithms such as
+                                    Greedy-Best-First Search, A* Search, Breadth
+                                    First Search and Depth First Search.
+                                </li>
+                                <li>
+                                    Designed a user-friendly interface to allow
+                                    users to select the size of the maze, the
+                                    algorithm to generate the maze, and the
+                                    algorithm to find the path.
+                                </li>
+                                <li>
+                                    Utilised React and canvas graphics using
+                                    p5JS to create the web application.
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="row">
+                            <div class="tech-stack">
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/github.png"
-                                        alt="Github"
+                                        src="images/react.png"
+                                        alt="React"
                                     />
-                                    GitHub
+                                    React
                                 </div>
-                            </a>
-                            <a
-                                href="https://hugh5.github.io/pathfinding-visualiser/"
-                                target="_blank"
-                            >
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/website.png"
-                                        alt="Web App"
+                                        src="images/javascript.png"
+                                        alt="JavaScript"
                                     />
-                                    Web App
+                                    JavaScript
                                 </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <h2>Sorting Algorithm Visualiser</h2>
-                        <h5>Desktop App</h5>
-                    </div>
-                    <div class="row">
-                        <ul>
-                            <li>
-                                Developed a desktop application to visualise
-                                sorting algorithms.
-                            </li>
-                            <li>
-                                Implemented sorting algorithms such as Bubble
-                                Sort, Selection Sort, Insertion Sort, Merge
-                                Sort, Quick Sort, and Heap Sort.
-                            </li>
-                            <li>
-                                Designed a user-friendly interface to allow
-                                users to select the size of the array, the
-                                algorithm to sort the array, and the speed of
-                                the visualisation.
-                            </li>
-                            <li>
-                                Utilised Java Swing to create the desktop
-                                application.
-                            </li>
-                        </ul>
-                        <div id="project3" class="container">
-                            <img class="content" src="./images/sorting1.gif" />
-                            <img class="content" src="./images/sorting2.png" />
-                            <img class="content" src="./images/sorting3.png" />
-                            <img class="content" src="./images/sorting4.png" />
-                            <div class="arrow left-arrow">
-                                <img src="images/prev.png" />
+                                <div class="filler"></div>
+                                <a
+                                    href="https://github.com/hugh5/pathfinding-visualiser"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/github.png"
+                                            alt="Github"
+                                        />
+                                        GitHub
+                                    </div>
+                                </a>
+                                <a
+                                    href="https://hugh5.github.io/pathfinding-visualiser/"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/website.png"
+                                            alt="Web App"
+                                        />
+                                        Web App
+                                    </div>
+                                </a>
                             </div>
-                            <div class="arrow right-arrow">
-                                <img src="images/next.png" />
-                            </div>
-                            <div class="dots"></div>
                         </div>
-                    </div>
-                    <div class="row">
-                        <div class="tech-stack">
-                            <div class="column">
+                    </section>
+                    <section>
+                        <div class="row">
+                            <h2>Sorting Algorithm Visualiser</h2>
+                            <h5>Desktop App</h5>
+                        </div>
+                        <div class="row">
+                            <ul>
+                                <li>
+                                    Developed a desktop application to visualise
+                                    sorting algorithms.
+                                </li>
+                                <li>
+                                    Implemented sorting algorithms such as
+                                    Bubble Sort, Selection Sort, Insertion Sort,
+                                    Merge Sort, Quick Sort, and Heap Sort.
+                                </li>
+                                <li>
+                                    Designed a user-friendly interface to allow
+                                    users to select the size of the array, the
+                                    algorithm to sort the array, and the speed
+                                    of the visualisation.
+                                </li>
+                                <li>
+                                    Utilised Java Swing to create the desktop
+                                    application.
+                                </li>
+                            </ul>
+                            <div id="project3" class="container">
+                                <img
+                                    class="content"
+                                    src="./images/sorting1.gif"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/sorting2.png"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/sorting3.png"
+                                />
                                 <img
-                                    class="logo"
-                                    src="images/java.png"
-                                    alt="Java"
+                                    class="content"
+                                    src="./images/sorting4.png"
                                 />
-                                Java
+                                <div class="arrow left-arrow">
+                                    <img src="images/prev.png" />
+                                </div>
+                                <div class="arrow right-arrow">
+                                    <img src="images/next.png" />
+                                </div>
+                                <div class="dots"></div>
                             </div>
-                            <div class="filler"></div>
-                            <a
-                                href="https://github.com/hugh5/sorting-visualiser"
-                                target="_blank"
-                            >
+                        </div>
+                        <div class="row">
+                            <div class="tech-stack">
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/github.png"
-                                        alt="Github"
+                                        src="images/java.png"
+                                        alt="Java"
                                     />
-                                    GitHub
+                                    Java
                                 </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <h2>Nerual Network Solving XOR Visualised</h2>
-                        <h5>Desktop App</h5>
-                    </div>
-                    <div class="row">
-                        <div id="project4" class="container">
-                            <img
-                                class="content"
-                                src="./images/neuralnetwork1.jpg"
-                            />
-                            <img
-                                class="content"
-                                src="./images/neuralnetwork2.jpg"
-                            />
-                            <img
-                                class="content"
-                                src="./images/neuralnetwork3.jpg"
-                            />
-                            <img
-                                class="content"
-                                src="./images/neuralnetwork4.jpg"
-                            />
-                            <div class="arrow left-arrow">
-                                <img src="images/prev.png" />
-                            </div>
-                            <div class="arrow right-arrow">
-                                <img src="images/next.png" />
+                                <div class="filler"></div>
+                                <a
+                                    href="https://github.com/hugh5/sorting-visualiser"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/github.png"
+                                            alt="Github"
+                                        />
+                                        GitHub
+                                    </div>
+                                </a>
                             </div>
-                            <div class="dots"></div>
                         </div>
-                        <ul>
-                            <li>
-                                Developed neural network framework capable of an
-                                arbitrary number of layers and nodes.
-                            </li>
-                            <li>
-                                Visualised the XOR problem using the neural
-                                network framework and SDL2 graphics.
-                            </li>
-                            <li>
-                                The grayscale pixels represent the output values
-                                of the neural network with black representing 0
-                                and white representing 1.
-                            </li>
-                            <li>
-                                An input of (0, 0) should output 0, (0, 1), (1,
-                                0) should output 1, and (1, 1) should output 0.
-                                So in the visualisation, the top left and bottom
-                                right corners should be black, and the top right
-                                and bottom left corners should be white.
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="row">
-                        <div class="tech-stack">
-                            <div class="column">
+                    </section>
+                    <section>
+                        <div class="row">
+                            <h2>Nerual Network Solving XOR Visualised</h2>
+                            <h5>Desktop App</h5>
+                        </div>
+                        <div class="row">
+                            <div id="project4" class="container">
                                 <img
-                                    class="logo"
-                                    src="images/cpp.png"
-                                    alt="C++"
+                                    class="content"
+                                    src="./images/neuralnetwork1.jpg"
                                 />
-                                C++
+                                <img
+                                    class="content"
+                                    src="./images/neuralnetwork2.jpg"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/neuralnetwork3.jpg"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/neuralnetwork4.jpg"
+                                />
+                                <div class="arrow left-arrow">
+                                    <img src="images/prev.png" />
+                                </div>
+                                <div class="arrow right-arrow">
+                                    <img src="images/next.png" />
+                                </div>
+                                <div class="dots"></div>
                             </div>
-                            <div class="filler"></div>
-                            <a
-                                href="https://github.com/hugh5/neural-network"
-                                target="_blank"
-                            >
+                            <ul>
+                                <li>
+                                    Developed neural network framework capable
+                                    of an arbitrary number of layers and nodes.
+                                </li>
+                                <li>
+                                    Visualised the XOR problem using the neural
+                                    network framework and SDL2 graphics.
+                                </li>
+                                <li>
+                                    The grayscale pixels represent the output
+                                    values of the neural network with black
+                                    representing 0 and white representing 1.
+                                </li>
+                                <li>
+                                    An input of (0, 0) should output 0, (0, 1),
+                                    (1, 0) should output 1, and (1, 1) should
+                                    output 0. So in the visualisation, the top
+                                    left and bottom right corners should be
+                                    black, and the top right and bottom left
+                                    corners should be white.
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="row">
+                            <div class="tech-stack">
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/github.png"
-                                        alt="Github"
+                                        src="images/cpp.png"
+                                        alt="C++"
                                     />
-                                    GitHub
+                                    C++
                                 </div>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <h2>Snake Game</h2>
-                        <h5>Desktop App</h5>
-                    </div>
-                    <div class="row">
-                        <ul>
-                            <li>
-                                A simple window-based Snake game implemented in
-                                C using SDL library.
-                            </li>
-                            <li>
-                                The game features a snake that moves around the
-                                screen eating food to grow.
-                            </li>
-                            <li>
-                                The game ends when the snake collides with the
-                                walls or itself.
-                            </li>
-                            <li>
-                                Written in C using the SDL library for graphics.
-                            </li>
-                        </ul>
-                        <div id="project5" class="container">
-                            <img class="content" src="./images/snake1.gif" />
-                            <img class="content" src="./images/snake2.jpg" />
-                            <img class="content" src="./images/snake3.jpg" />
-                            <div class="arrow left-arrow">
-                                <img src="images/prev.png" />
+                                <div class="filler"></div>
+                                <a
+                                    href="https://github.com/hugh5/neural-network"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/github.png"
+                                            alt="Github"
+                                        />
+                                        GitHub
+                                    </div>
+                                </a>
                             </div>
-                            <div class="arrow right-arrow">
-                                <img src="images/next.png" />
-                            </div>
-                            <div class="dots"></div>
                         </div>
-                    </div>
-                    <div class="row">
-                        <div class="tech-stack">
-                            <div class="column">
-                                <img class="logo" src="images/c.png" alt="C" />
-                                C
+                    </section>
+                    <section>
+                        <div class="row">
+                            <h2>Snake Game</h2>
+                            <h5>Desktop App</h5>
+                        </div>
+                        <div class="row">
+                            <ul>
+                                <li>
+                                    A simple window-based Snake game implemented
+                                    in C using SDL library.
+                                </li>
+                                <li>
+                                    The game features a snake that moves around
+                                    the screen eating food to grow.
+                                </li>
+                                <li>
+                                    The game ends when the snake collides with
+                                    the walls or itself.
+                                </li>
+                                <li>
+                                    Written in C using the SDL library for
+                                    graphics.
+                                </li>
+                            </ul>
+                            <div id="project5" class="container">
+                                <img
+                                    class="content"
+                                    src="./images/snake1.gif"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/snake2.jpg"
+                                />
+                                <img
+                                    class="content"
+                                    src="./images/snake3.jpg"
+                                />
+                                <div class="arrow left-arrow">
+                                    <img src="images/prev.png" />
+                                </div>
+                                <div class="arrow right-arrow">
+                                    <img src="images/next.png" />
+                                </div>
+                                <div class="dots"></div>
                             </div>
-                            <div class="filler"></div>
-                            <a
-                                href="https://github.com/hugh5/snake"
-                                target="_blank"
-                            >
+                        </div>
+                        <div class="row">
+                            <div class="tech-stack">
                                 <div class="column">
                                     <img
                                         class="logo"
-                                        src="images/github.png"
-                                        alt="Github"
+                                        src="images/c.png"
+                                        alt="C"
                                     />
-                                    GitHub
+                                    C
                                 </div>
-                            </a>
+                                <div class="filler"></div>
+                                <a
+                                    href="https://github.com/hugh5/snake"
+                                    target="_blank"
+                                >
+                                    <div class="column">
+                                        <img
+                                            class="logo"
+                                            src="images/github.png"
+                                            alt="Github"
+                                        />
+                                        GitHub
+                                    </div>
+                                </a>
+                            </div>
                         </div>
-                    </div>
+                    </section>
                 </div>
             </div>
-        </div>
+        </main>
         <footer>
             <div class="row">
                 <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
diff --git a/testimonials.html b/testimonials.html
index 74ac3fc..c79bdd7 100644
--- a/testimonials.html
+++ b/testimonials.html
@@ -13,17 +13,19 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <a class="menu-item" href=".">Home</a>
+                <a class="menu-item" href="index.html">Home</a>
                 <a class="menu-item" href="experience.html">Experience</a>
                 <a class="menu-item" href="projects.html">Projects</a>
                 <a class="menu-item" href="blog.html">Blog</a>
                 <a class="menu-item" href="testimonials.html">Testimonials</a>
             </nav>
         </header>
-        <button class="theme-button" onclick="toggleTheme()">
-            <img class="theme-icon" alt="Toggle Theme" />
-        </button>
-        <div id="page">
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="Toggle Theme" />
+            </button>
+        </aside>
+        <main>
             <div id="testimonials">
                 <div class="split-grid">
                     <div class="linear-grid">
@@ -100,7 +102,7 @@ <h4>Software Engineer - Netflix</h4>
                     </div>
                 </div>
             </div>
-        </div>
+        </main>
         <footer>
             <div class="row">
                 <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>