diff --git a/blog.html b/blog.html
index e72ac24..8b30a9a 100644
--- a/blog.html
+++ b/blog.html
@@ -14,7 +14,7 @@
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
                 <a class="menu-item" href="index.html">Home</a>
-                <a class="menu-item" href="experience.html">Experience</a>
+                <a class="menu-item" href="resume.html">Resume</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>
diff --git a/css/style.css b/css/style.css
index f3a4f36..b384596 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,33 +7,48 @@
     /* Light/Dark mode implementated using CSS variables and a data attribute */
     /* Dark theme */
     &[data-theme="dark"] {
-        --accent-color: #9B70ff;
+        --accent-color: #33CA7F;
         --background-color: #141414;
         --secondary-background-color: #525252;
         --secondary-background-color-rgb: 82, 82, 82;
         --tertiary-background-color: #272727;
         --primary-text-color: #fff;
         --secondary-text-color: #ccc;
+
+        .theme-icon {
+            content: url("../images/dark-theme.png");
+            filter: brightness(0) saturate(90%) invert(64%) sepia(58%)
+                    saturate(490%) hue-rotate(98deg) brightness(92%) contrast(91%);
+        }
+
+        .logo {
+            filter: brightness(0) saturate(90%) invert(64%) sepia(58%)
+                    saturate(490%) hue-rotate(98deg) brightness(92%) contrast(91%);
+        }
+
     }
 
     /* Light theme */
     &[data-theme="light"] {
-        --accent-color: #ff9900;
-        --background-color: #ececec;
+        --accent-color: #9B70ff;
+        --background-color: #E0E0E0;
         --secondary-background-color: #fff;
         --secondary-background-color-rgb: 255, 255, 255;
-        --tertiary-background-color: #f5f5f5;
+        --tertiary-background-color: #EBEBEB;
         --primary-text-color: #000;
         --secondary-text-color: #666;
 
         /* Invert image colours for light theme */
         .theme-icon {
-            filter: invert(1);
+            content: url("../images/light-theme.png");
+            filter: brightness(0) invert(55%) sepia(27%)
+                    saturate(7075%) hue-rotate(227deg) brightness(99%) contrast(104%);
         }
 
         .logo {
-            filter: invert(1);
-            }
+            filter: brightness(0) invert(55%) sepia(27%)
+                    saturate(7075%) hue-rotate(227deg) brightness(99%) contrast(104%);
+        }
         
         .social-icon {
             filter: invert(1);
@@ -55,7 +70,7 @@ html, body {
     padding: 0;
     background-color: var(--background-color);
     overflow-wrap: anywhere;
-    transition: background-color 0.5s, color 0.5s; /* Smooth transition effect */
+    transition: all 1s; /* Smooth transition effect */
 }
 
 body {
@@ -87,7 +102,7 @@ nav {
     -webkit-backdrop-filter: blur(20px); /* Safari */
     backdrop-filter: blur(20px);
 
-    width: 700px;
+    width: 600px;
     position: fixed; /* Fixed position to keep the menu at the top of the page */
     border-radius: 25px;
     top: 20px;
@@ -148,7 +163,7 @@ footer {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 10px 0px;
+    padding: 10px 0;
     background-color: var(--secondary-background-color);
 }
 
@@ -255,6 +270,7 @@ h2 {
     font-family: 'Inter', sans-serif;
     font-weight: bold;
     font-size: 32px;
+    color: var(--primary-text-color);
     text-transform: uppercase;
     margin-bottom: 10px;
     margin-left: 40px;
@@ -324,12 +340,12 @@ ul {
     display: flex;
     align-items: start;
     justify-content: center;
-    padding: 0px 40px;
+    padding: 0 40px;
     margin-bottom: 40px;
 
     /* Responsive padding */
     @media (max-width: 800px) {
-        padding: 0px 20px;
+        padding: 0 20px;
     }
 }
 
@@ -346,7 +362,7 @@ section {
     flex: 2;
     display: flex;
     flex-direction: column;
-    word-wrap: hidden;
+    color: var(--accent-color);
 
     /* Staggered padding style for each h1 element on larger screens */
     @media (min-width: 801px) {
@@ -366,7 +382,7 @@ section {
 
 .helloimage {
     border-radius: 50%;
-    border: 2px solid var(--accent-color);
+    border: 4px solid var(--accent-color);
     width: 200px;
     height: 200px;
     object-fit: cover; /* Cover the entire container */
@@ -374,29 +390,35 @@ section {
 }
 
 /* Experience Page */
-#experience {
+#resume {
     max-width: 1000px;
+    width: 100%;
+
+    .logo {
+        flex: none;
+        width: 60px;
+        height: 60px;
+    }
 }
 
 .grid-container {
     display: grid;
+    box-sizing: border-box;
     width: 100%;
     /* Responsive grid with a minimum width of 90px and a maximum width of 1fr */
     /* Automatically fill the grid with as many columns as possible */
-    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     gap: 40px 60px;
     padding: 20px;
 
-    .logo {
-        width: 60px;
-        height: 60px;
+    & p {
+        text-align: center;
+        font-weight: 600;
     }
 }
 
-.logo {
-    object-fit: cover;
-    display: block;
-    padding-bottom: 10px;
+.wider {
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 }
 
 /* Projects Page */
@@ -404,22 +426,23 @@ section {
     max-width: 1000px;
 
     .logo {
-        width: 30px;
-        height: 30px;
+        width: 32px;
+        height: 32px;
+        padding-bottom: 10px;
     }
 
-    h2 {
+    & h2 {
         margin-top: 10px;
         margin-bottom: 10px;
     }
 
-    a {
+    & a {
         text-decoration: none;
         color: var(--primary-text-color);
         border-radius: 8px;
     }
 
-    a:hover {
+    & a:hover {
         background-color: var(--tertiary-background-color); /* Change background colour on hover */
     }
 
@@ -445,7 +468,7 @@ section {
     }
 
     /* Gap between each project starting from the second project */
-    section:nth-child(n+2) {
+    & section:nth-child(n+2) {
         margin-top: 80px;
     }
 }
@@ -491,8 +514,8 @@ section {
         &:hover {
             background-color: var(--accent-color);
         }
-        
-        img {
+
+        & img {
             width: 100%;
         }
     }
@@ -517,15 +540,14 @@ section {
         padding: 20px 0;
 
         .dot {
-            width: 10px;
-            height: 10px;
+            width: 12px;
+            height: 12px;
             border-radius: 50%;
-            background-color: var(--secondary-background-color);
-            transition: all 200ms ease-in-out;
+            background-color: var(--primary-text-color);
         }
         
         .active {
-            background-color: var(--primary-text-color);
+            background-color: var(--accent-color);
         }
 
         .dot:hover {
@@ -630,7 +652,7 @@ section {
     max-width: 1000px;
 
     /* Gap between each article starting from the second article */
-    article:nth-of-type(n+2) {
+    & article:nth-of-type(n+2) {
         margin-top: 80px;
     }
 
diff --git a/experience.html b/experience.html
deleted file mode 100644
index 94acf5d..0000000
--- a/experience.html
+++ /dev/null
@@ -1,337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Hugh's Portfolio | Experience</title>
-        <link rel="stylesheet" href="css/style.css" />
-        <link rel="icon" type="image/x-icon" href="favicon.ico" />
-        <script src="js/jquery.min.js"></script>
-        <script src="js/script.js"></script>
-    </head>
-    <body>
-        <header>
-            <nav>
-                <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <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>
-        <aside>
-            <button class="theme-button" onclick="toggleTheme()">
-                <img class="theme-icon" alt="Toggle Theme" />
-            </button>
-        </aside>
-        <main>
-            <div id="experience">
-                <div class="column">
-                    <!-- Education Section -->
-                    <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>
-                    <!-- Experience Section -->
-                    <section>
-                        <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>
-                    </section>
-                    <!-- Skills 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/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>
-                        <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>
-                    </section>
-                </div>
-            </div>
-        </main>
-        <footer>
-            <div class="row">
-                <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
-                <a href="mailto: hugh5.dev@gmail.com">
-                    <div class="column">
-                        <img
-                            class="social-icon"
-                            src="images/email.png"
-                            alt="Email"
-                        />
-                        Email
-                    </div>
-                </a>
-                <a href="https://github.com/hugh5" target="_blank">
-                    <div class="column">
-                        <img
-                            class="social-icon"
-                            src="images/github.png"
-                            alt="GitHub"
-                        />
-                        GitHub
-                    </div>
-                </a>
-                <a href="https://linkedin.com/in/hugh-drummond7" target="_blank"
-                    ><div class="column">
-                        <img
-                            class="social-icon"
-                            src="images/linkedin.png"
-                            alt="LinkedIn"
-                        />
-                        LinkedIn
-                    </div>
-                </a>
-            </div>
-        </footer>
-    </body>
-</html>
diff --git a/images/coding.png b/images/coding.png
new file mode 100644
index 0000000..a268e23
Binary files /dev/null and b/images/coding.png differ
diff --git a/images/compiler.png b/images/compiler.png
new file mode 100644
index 0000000..3467868
Binary files /dev/null and b/images/compiler.png differ
diff --git a/images/database.png b/images/database.png
new file mode 100644
index 0000000..119ab8e
Binary files /dev/null and b/images/database.png differ
diff --git a/images/graph.png b/images/graph.png
new file mode 100644
index 0000000..c770814
Binary files /dev/null and b/images/graph.png differ
diff --git a/images/leetcode.png b/images/leetcode.png
new file mode 100644
index 0000000..acd1939
Binary files /dev/null and b/images/leetcode.png differ
diff --git a/images/operating-system.png b/images/operating-system.png
new file mode 100644
index 0000000..b2bc4a8
Binary files /dev/null and b/images/operating-system.png differ
diff --git a/images/request.png b/images/request.png
new file mode 100644
index 0000000..82d82fa
Binary files /dev/null and b/images/request.png differ
diff --git a/images/tcp.png b/images/tcp.png
new file mode 100644
index 0000000..3d188bb
Binary files /dev/null and b/images/tcp.png differ
diff --git a/index.html b/index.html
index f2c44cf..d1ea199 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="dark">
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,16 +13,14 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <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>
+                <a class="menu-item" href="/">Home</a>
+                <a class="menu-item" href="/resume">Resume</a>
+                <a class="menu-item" href="/projects">Projects</a>
             </nav>
         </header>
         <aside>
             <button class="theme-button" onclick="toggleTheme()">
-                <img class="theme-icon" alt="Toggle Theme" />
+                <img class="theme-icon" alt="" />
             </button>
         </aside>
         <main>
@@ -42,7 +40,7 @@ <h1>I'm</h1>
                             <h1>Hugh</h1>
                         </div>
                     </div>
-                    <h3>Introdction</h3>
+                    <h2>Introdction</h2>
                     <p>
                         I'm a passionate Mobile App Developer with a drive for
                         creativity and innovation. Here, you'll find a curated
@@ -56,7 +54,7 @@ <h3>Introdction</h3>
                         of technical proficiency, strategic thinking, and a keen
                         eye for detail to every project I undertake.
                     </p>
-                    <h3>Career Objectives</h3>
+                    <h2>Career Objectives</h2>
                     <p>
                         I aim to drive innovation, deliver excellence, and solve
                         complex problems by collaborating effectively,
@@ -113,6 +111,16 @@ <h3>Career Objectives</h3>
                         LinkedIn
                     </div>
                 </a>
+                <a href="https://leetcode.com/u/hugh5/" target="_blank">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/leetcode.png"
+                            alt="Leetcode"
+                        />
+                        Leetcode
+                    </div>
+                </a>
             </div>
         </footer>
     </body>
diff --git a/js/script.js b/js/script.js
index 6f97a24..96bfb0a 100644
--- a/js/script.js
+++ b/js/script.js
@@ -5,7 +5,7 @@ function setLightMode() {
     // Set the theme attribute to light
     $(":root").attr("data-theme", "light");
     // Change the theme icon to the light theme icon
-    $(".theme-icon").attr("src", "images/light-theme.png");
+    // $(".theme-icon").attr("src", "images/light-theme.png");
     // Save the theme to local storage
     window.localStorage.setItem("data-theme", "light");
 }
@@ -17,7 +17,7 @@ function setDarkMode() {
     // Set the theme attribute to dark
     $(":root").attr("data-theme", "dark");
     // Change the theme icon to the dark theme icon
-    $(".theme-icon").attr("src", "images/dark-theme.png");
+    // $(".theme-icon").attr("src", "images/dark-theme.png");
     // Save the theme to local storage
     window.localStorage.setItem("data-theme", "dark");
 }
@@ -48,6 +48,30 @@ function loadThemeToggle() {
     }
 }
 
+function preloadTheme() {
+    let dataTheme = window.localStorage.getItem("data-theme");
+    if (dataTheme === null) {
+        if (window.matchMedia) {
+            // Check if the dark-mode Media-Query matches
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                dataTheme = "dark";
+            } else {
+                dataTheme = "light";
+            }
+        } else {
+            dataTheme = "light";
+        }
+        window.localStorage.setItem("data-theme", dataTheme);
+    }
+    if (dataTheme === "dark") {
+        // Set the theme attribute to dark
+        $(":root").attr("data-theme", "dark");
+    } else {
+        // Set the theme attribute to light
+        $(":root").attr("data-theme", "light");
+    }
+}
+
 /**
  * Performs the following actions when the page is loaded:
  * 1. Highlight the current page in the nav menu
@@ -55,16 +79,15 @@ function loadThemeToggle() {
  */
 function loadNav() {
     // Determine the current page
-    var path = window.location.pathname;
-    var page = path.split("/").pop();
-    if (page == "" || page == ".") {
-        page = "index.html";
-    }
+    let path = window.location.pathname;
+    path = path.replace(".html", "");
+    let page = path.split("/").pop();
+    page = page.replace("index", "");
 
     // Highlight the active nav item based on the current page
     $("nav > .menu-item").each(function () {
-        var href = $(this).attr("href");
-        if (page == href) {
+        const href = $(this).attr("href");
+        if ("/" + page === href) {
             $(this).addClass("active");
         }
     });
@@ -93,12 +116,12 @@ function loadScrollBehavior() {
     });
 
     // On scroll, hide/show the navbar and theme toggle
-    var lastScroll = 0;
-    $(window).scroll(function (event) {
+    let lastScroll = 0;
+    $(window).scroll(function (_) {
         // Current scroll position
-        var current = $(this).scrollTop();
+        const current = $(this).scrollTop();
         // Maximum scroll position
-        var scrollMax = window.document.body.scrollHeight - window.innerHeight;
+        const scrollMax = window.document.body.scrollHeight - window.innerHeight;
         // If the current scroll position is near the top or
         // the scroll direction is up and not past the bottom, show the navbar
         // Otherwise, if the scroll direction is down, hide the navbar
@@ -129,22 +152,16 @@ function updateSlider(projectname) {
         // Hide all other images (opacity 0)
         if (i === counter[projectname]) {
             // Grab the image at the current counter index and animate it to show
-            $(`#${projectname} > :nth-child(${i + 1})`).animate(
-                {
-                    opacity: 1,
-                    zIndex: 1,
-                },
-                500
-            );
+            $(`#${projectname} > :nth-child(${i + 1})`).css({
+                zIndex: 1,
+                opacity: 1,
+            });
         } else {
             // Hide all other images
-            $(`#${projectname} > :nth-child(${i + 1})`).animate(
-                {
-                    opacity: 0,
-                    zIndex: 0,
-                },
-                250
-            );
+            $(`#${projectname} > :nth-child(${i + 1})`).css({
+                zIndex: 0,
+                opacity: 0,
+            });
         }
         // Generate the html for the dots below the image
         dots += `<span class="dot ${
@@ -208,7 +225,8 @@ function loadImageSliders() {
  */
 function loadTestimonials() {
     // Add click event listeners to the cards
-    $("#testimonials .card").each(function () {
+    const cards = $("#testimonials .card");
+    cards.each(function () {
         // On click, show the testimonial for the clicked card
         // Hide the testimonial for the other cards
         $(this).on("click", function () {
@@ -222,7 +240,7 @@ function loadTestimonials() {
             $(`p[testimonial_id="${id}"]`).slideDown(300);
         });
     });
-    $("#testimonials .card").first().addClass("active");
+    cards.first().addClass("active");
     $("p.testimonial").first().show();
 }
 
@@ -234,14 +252,15 @@ let counter = {};
 // Holds the maximum index for each project
 let counts = {};
 
+preloadTheme();
 // Runs once the DOM is ready
 $(function () {
-    loadThemeToggle();
     loadNav();
+    loadThemeToggle();
     loadScrollBehavior();
 
     // Initialize the index to 0 for each project
-    const numProjects = $('[id^="project"').not("#projects").length;
+    const numProjects = $('[id^="project"]').not("#projects").length;
     for (let i = 1; i <= numProjects; i++) {
         counter[`project${i}`] = 0;
     }
diff --git a/projects.html b/projects.html
index ea0ddc2..48d2e59 100644
--- a/projects.html
+++ b/projects.html
@@ -13,16 +13,14 @@
         <header>
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
-                <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>
+                <a class="menu-item" href="/">Home</a>
+                <a class="menu-item" href="/resume">Resume</a>
+                <a class="menu-item" href="/projects">Projects</a>
             </nav>
         </header>
         <aside>
             <button class="theme-button" onclick="toggleTheme()">
-                <img class="theme-icon" alt="Toggle Theme" />
+                <img class="theme-icon" alt="" />
             </button>
         </aside>
         <main>
@@ -559,6 +557,16 @@ <h5>Desktop App</h5>
                         LinkedIn
                     </div>
                 </a>
+                <a href="https://leetcode.com/u/hugh5/" target="_blank">
+                    <div class="column">
+                        <img
+                                class="social-icon"
+                                src="images/leetcode.png"
+                                alt="Leetcode"
+                        />
+                        Leetcode
+                    </div>
+                </a>
             </div>
         </footer>
     </body>
diff --git a/resume.html b/resume.html
new file mode 100644
index 0000000..eb7a76a
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Hugh's Portfolio | Resume</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel="icon" type="image/x-icon" href="favicon.ico" />
+        <script src="js/jquery.min.js"></script>
+        <script src="js/script.js"></script>
+    </head>
+    <body>
+        <header>
+            <nav>
+                <img class="menu-image" src="images/menu.png" alt="Menu" />
+                <a class="menu-item" href="/">Home</a>
+                <a class="menu-item" href="/resume">Resume</a>
+                <a class="menu-item" href="/projects">Projects</a>
+            </nav>
+        </header>
+        <aside>
+            <button class="theme-button" onclick="toggleTheme()">
+                <img class="theme-icon" alt="" />
+            </button>
+        </aside>
+        <main>
+            <div id="resume">
+                <!-- Education Section -->
+                <section>
+                    <h2>Education</h2>
+                    <div class="row">
+                        <h4>
+                            The University of Queensland<span>
+                                — Bachelor of Computer Science</span
+                            >
+                        </h4>
+                        <h5>Jan 2021 — Jun 2024</h5>
+                    </div>
+                    <p>
+                        I have recently graduated with 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>
+                <!-- Experience Section -->
+                <section>
+                    <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>
+                </section>
+                <!-- Skills 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"
+                            />
+                            <p>Java</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/python.png"
+                                alt="Python"
+                            />
+                            <p>Python</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/javascript.png"
+                                alt="JavaScript"
+                            />
+                            <p>JavaScript</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/cpp.png"
+                                alt="C/C++"
+                            />
+                            <p>C/C++</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/html-5.png"
+                                alt="HTML"
+                            />
+                            <p>HTML</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/css-3.png"
+                                alt="CSS"
+                            />
+                            <p>CSS</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/sql.png"
+                                alt="SQL"
+                            />
+                            <p>SQL</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/swift.png"
+                                    alt="Swift"
+                            />
+                            <p>Swift</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/bash.png"
+                                alt="Bash"
+                            />
+                            <p>Bash</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/haskell.png"
+                                alt="Haskell"
+                            />
+                            <p>Haskell</p>
+                        </div>
+                    </div>
+                    <h4>Frameworks and Tools</h4>
+                    <div class="grid-container">
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/flutter.png"
+                                alt="Flutter"
+                            />
+                            <p>Flutter</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/firebase.png"
+                                alt="Firebase"
+                            />
+                            <p>Firebase</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/node.png"
+                                alt="Node.js"
+                            />
+                            <p>Node.js</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/react.png"
+                                alt="React"
+                            />
+                            <p>React</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/jquery.png"
+                                alt="jQuery"
+                            />
+                            <p>jQuery</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/angular.png"
+                                alt="Angular"
+                            />
+                            <p>Angular</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/mongodb.png"
+                                alt="MongoDB"
+                            />
+                            <p>MongoDB</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/postgreSQL.png"
+                                alt="PostgreSQL"
+                            />
+                            <p>PostgreSQL</p>
+                        </div>
+
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/git.png"
+                                alt="Git"
+                            />
+                            <p>Git</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/docker.png"
+                                alt="Docker"
+                            />
+                            <p>Docker</p>
+                        </div>
+                    </div>
+                    <h4>Relevant Coursework</h4>
+                    <div class="grid-container wider">
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/graph.png"
+                                alt="Algorithms"
+                            />
+                            <p>Algorithms, Data Structures & Abstract Data Types</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                class="logo"
+                                src="images/coding.png"
+                                alt="Programming"
+                            />
+                            <p>OOP and Functional Programming</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/database.png"
+                                    alt="Database"
+                            />
+                            <p>Relational Database Systems</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/request.png"
+                                    alt="Software Architecture"
+                            />
+                            <p>Software Architecture</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/operating-system.png"
+                                    alt="Operating Systems"
+                            />
+                            <p>Operating Systems</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/compiler.png"
+                                    alt="Compiler"
+                            />
+                            <p>Compilers & Interpreters</p>
+                        </div>
+                        <div class="column">
+                            <img
+                                    class="logo"
+                                    src="images/tcp.png"
+                                    alt="Networking"
+                            />
+                            <p>Networks</p>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </main>
+        <footer>
+            <div class="row">
+                <p>&copy; 2024 Hugh's Portfolio. All rights reserved.</p>
+                <a href="mailto: hugh5.dev@gmail.com">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/email.png"
+                            alt="Email"
+                        />
+                        Email
+                    </div>
+                </a>
+                <a href="https://github.com/hugh5" target="_blank">
+                    <div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/github.png"
+                            alt="GitHub"
+                        />
+                        GitHub
+                    </div>
+                </a>
+                <a href="https://linkedin.com/in/hugh-drummond7" target="_blank"
+                    ><div class="column">
+                        <img
+                            class="social-icon"
+                            src="images/linkedin.png"
+                            alt="LinkedIn"
+                        />
+                        LinkedIn
+                    </div>
+                </a>
+                <a href="https://leetcode.com/u/hugh5/" target="_blank">
+                    <div class="column">
+                        <img
+                                class="social-icon"
+                                src="images/leetcode.png"
+                                alt="Leetcode"
+                        />
+                        Leetcode
+                    </div>
+                </a>
+            </div>
+        </footer>
+    </body>
+</html>
diff --git a/testimonials.html b/testimonials.html
index 1833056..1c4bc35 100644
--- a/testimonials.html
+++ b/testimonials.html
@@ -14,7 +14,7 @@
             <nav>
                 <img class="menu-image" src="images/menu.png" alt="Menu" />
                 <a class="menu-item" href="index.html">Home</a>
-                <a class="menu-item" href="experience.html">Experience</a>
+                <a class="menu-item" href="resume.html">Resume</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>