diff --git a/404.html b/404.html
new file mode 100644
index 0000000..5b6c3c5
--- /dev/null
+++ b/404.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hmmmmmm</title>
+  </head>
+  <body>
+    <main>What do you think you're doing?</main>
+  </body>
+</html>
diff --git a/common.css b/common.css
index 2d027bc..4c7e64f 100644
--- a/common.css
+++ b/common.css
@@ -51,11 +51,21 @@ a {
   transition: color 200ms;
 }
 
+a.out {
+  text-decoration: revert;
+  text-underline-offset: 1px;
+  transition: text-underline-offset 200ms;
+}
+
 a:hover,
 .header-text-items li:hover > a {
   color: var(--color-text-primary);
 }
 
+a.out:hover {
+  text-underline-offset: 5px;
+}
+
 .header-text-items li svg {
   width: 20px;
   height: 20px;
@@ -115,7 +125,7 @@ a:hover,
 }
 
 .rainbow:hover {
-  filter: contrast(0.6) hue-rotate(360deg);
+  filter: contrast(0.6) brightness(1.2) hue-rotate(360deg);
 }
 
 .italics {
diff --git a/index.html b/index.html
index df917a3..ced3f10 100644
--- a/index.html
+++ b/index.html
@@ -39,10 +39,10 @@
             </svg>
           </a>
           <div class="dropdown projects-dropdown">
-            <a href="projects/#website">This website</a>
-            <a href="projects/#sa">Scratch Addons</a>
-            <a href="projects/#mediascout">MediaScout</a>
-            <a href="projects/#mobile">Scratch mobile</a>
+            <a href="projects/website">This website</a>
+            <a href="projects/sa">Scratch Addons</a>
+            <a href="projects/mediascout">MediaScout</a>
+            <a href="projects/mobile">Scratch mobile</a>
           </div>
         </li>
         <li id="links">
diff --git a/links/index.html b/links/index.html
index 0590a61..ed25784 100644
--- a/links/index.html
+++ b/links/index.html
@@ -39,10 +39,10 @@
             </svg>
           </a>
           <div class="dropdown projects-dropdown">
-            <a href="../projects/#website">This website</a>
-            <a href="../projects/#sa">Scratch Addons</a>
-            <a href="../projects/#mediascout">MediaScout</a>
-            <a href="../projects/#mobile">Scratch mobile</a>
+            <a href="../projects/website">This website</a>
+            <a href="../projects/sa">Scratch Addons</a>
+            <a href="../projects/mediascout">MediaScout</a>
+            <a href="../projects/mobile">Scratch mobile</a>
           </div>
         </li>
         <li id="links">
@@ -62,7 +62,7 @@ <h1>My links</h1>
       <div class="links">
         <div class="link-card">
           <h3 class="link">
-            <a href="https://en.pronouns.page/@Jazza"
+            <a class="out" href="https://en.pronouns.page/@Jazza"
               ><span class="rainbow">Pronouns page</span></a
             >
           </h3>
diff --git a/projects/index.html b/projects/index.html
index 7f26364..0542706 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -39,10 +39,10 @@
             </svg>
           </a>
           <div class="dropdown projects-dropdown">
-            <a href="#website">This website</a>
-            <a href="#sa">Scratch Addons</a>
-            <a href="#mediascout">MediaScout</a>
-            <a href="#mobile">Scratch mobile</a>
+            <a href="website">This website</a>
+            <a href="sa">Scratch Addons</a>
+            <a href="mediascout">MediaScout</a>
+            <a href="mobile">Scratch mobile</a>
           </div>
         </li>
         <li id="links">
@@ -111,5 +111,6 @@ <h3>Scratch mobile</h3>
     </footer>
 
     <script src="../headerMargin.js"></script>
+    <script src="projects.js"></script>
   </body>
 </html>
diff --git a/projects/project.css b/projects/project.css
new file mode 100644
index 0000000..bb3c749
--- /dev/null
+++ b/projects/project.css
@@ -0,0 +1,19 @@
+.project-header {
+  display: flex;
+  justify-content: center;
+}
+
+.info-container {
+  display: flex;
+  justify-content: center;
+}
+
+.info {
+  width: 40rem;
+}
+
+.description,
+.languages-list,
+.plans {
+  color: var(--color-text-secondary);
+}
diff --git a/projects/projects.js b/projects/projects.js
new file mode 100644
index 0000000..62151e5
--- /dev/null
+++ b/projects/projects.js
@@ -0,0 +1,10 @@
+const projects = document.querySelectorAll(".project-card");
+
+projects.forEach((project) => {
+  project.addEventListener("click", () => {
+    const parentId = project.parentElement.id;
+
+    history.pushState(null, null, window.location.href.split("#")[0]);
+    window.location.pathname += parentId;
+  });
+});
diff --git a/projects/sa/index.html b/projects/sa/index.html
new file mode 100644
index 0000000..3f4cc61
--- /dev/null
+++ b/projects/sa/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Jazza's Projects</title>
+
+      <link rel="stylesheet" href="../project.css" />
+      <link rel="stylesheet" href="../../common.css" />
+
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
+        rel="stylesheet"
+      />
+    </head>
+  </head>
+  <body>
+    <header>
+      <ul class="header-text-items">
+        <li id="home">
+          <a href="../../">Home</a>
+        </li>
+        <li id="projects">
+          <a href="../">
+            Projects
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              id="angle-down"
+            >
+              <path
+                d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"
+              ></path>
+            </svg>
+          </a>
+          <div class="dropdown projects-dropdown">
+            <a href="../website">This website</a>
+            <a href="./">Scratch Addons</a>
+            <a href="../mediascout">MediaScout</a>
+            <a href="../mobile">Scratch mobile</a>
+          </div>
+        </li>
+        <li id="links">
+          <a href="../../links">Links</a>
+        </li>
+        <li id="posts">
+          <a href="#">Posts</a>
+        </li>
+      </ul>
+    </header>
+
+    <main>
+      <div class="project-header">
+        <h1>Scratch Addons</h1>
+      </div>
+
+      <div class="info-container">
+        <div class="info">
+          <div class="description-container">
+            <h2 class="description-header">About</h2>
+            <div class="description">
+              Scratch Addons is a browser extension for the
+              <a href="scratch.mit.edu">Scratch</a> website. It's main purpose
+              is to make scratch easier to use for more advanced users, but also
+              adds many QOL features that <strong>really</strong> should be in
+              Scratch.
+            </div>
+          </div>
+
+          <div class="languages-container">
+            <h2 class="languages-header">Languages</h2>
+            <ul class="languages-list">
+              <li>HTML</li>
+              <li>CSS</li>
+              <li>JavaScript</li>
+            </ul>
+          </div>
+
+          <div class="plans-container">
+            <h2 class="plans-header">Plans</h2>
+            <div class="plans">
+              I'm not really important enough to decide this. I have my own
+              addon ideas that are secret, and besides the idea of Tweaks for
+              Scratch Addons 2.0, I'm not involved in that part.
+            </div>
+          </div>
+
+          <div class="links-container">
+            <h2 class="links-header">Links</h2>
+            <div>
+              <a
+                class="out"
+                href="https://github.com/ScratchAddons/ScratchAddons"
+                target="_blank"
+                ><span class="rainbow">Scratch Addons</span></a
+              >
+              <br /><br />
+              <a
+                class="out"
+                href="https://github.com/Jazza-231/ScratchAddons"
+                target="_blank"
+              >
+                <span class="rainbow">My fork</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer>
+      <div class="footer-text">&copy; 2024 Jazza. All rights reserved.</div>
+      <div class="made-with-love">Made with ❤️❤️ in Australia by Jazza.</div>
+    </footer>
+
+    <script src="../../headerMargin.js"></script>
+  </body>
+</html>
diff --git a/projects/style.css b/projects/style.css
index 8e3599a..93f4bf3 100644
--- a/projects/style.css
+++ b/projects/style.css
@@ -24,4 +24,5 @@
   padding: 1rem;
   border: var(--color-surface-mixed-light) 2px solid;
   border-radius: 0.5rem;
+  cursor: pointer;
 }
diff --git a/projects/website/index.html b/projects/website/index.html
new file mode 100644
index 0000000..bc232ea
--- /dev/null
+++ b/projects/website/index.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Jazza's Projects</title>
+
+      <link rel="stylesheet" href="../project.css" />
+      <link rel="stylesheet" href="../../common.css" />
+
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"
+        rel="stylesheet"
+      />
+    </head>
+  </head>
+  <body>
+    <header>
+      <ul class="header-text-items">
+        <li id="home">
+          <a href="../../">Home</a>
+        </li>
+        <li id="projects">
+          <a href="../">
+            Projects
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              id="angle-down"
+            >
+              <path
+                d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"
+              ></path>
+            </svg>
+          </a>
+          <div class="dropdown projects-dropdown">
+            <a href="./">This website</a>
+            <a href="../sa">Scratch Addons</a>
+            <a href="../mediascout">MediaScout</a>
+            <a href="../mobile">Scratch mobile</a>
+          </div>
+        </li>
+        <li id="links">
+          <a href="../../links">Links</a>
+        </li>
+        <li id="posts">
+          <a href="#">Posts</a>
+        </li>
+      </ul>
+    </header>
+
+    <main>
+      <div class="project-header">
+        <h1>This website</h1>
+      </div>
+
+      <div class="info-container">
+        <div class="info">
+          <div class="description-container">
+            <h2 class="description-header">About</h2>
+            <div class="description">
+              This is my personal development website, telling you about me and
+              what I do. I also have a professional website which I will not
+              link to, as it is both unfinished and contains personal
+              information.
+            </div>
+          </div>
+
+          <div class="languages-container">
+            <h2 class="languages-header">Languages</h2>
+            <ul class="languages-list">
+              <li>HTML</li>
+              <li>CSS</li>
+              <li>JavaScript</li>
+            </ul>
+          </div>
+
+          <div class="plans-container">
+            <h2 class="plans-header">Plans</h2>
+            <div class="plans">
+              Development of this website is ongoing, and knowing me it will
+              never be fully finished. It needs fleshing out, but I also want to
+              make it prettier and cleaner. I am also thinking about using
+              something like svelte for more convenient development.
+            </div>
+          </div>
+
+          <div class="links-container">
+            <h2 class="links-header">Links</h2>
+            <div class="links-list">
+              <a
+                class="out"
+                href="https://github.com/Jazza-231/jazza"
+                target="_blank"
+              >
+                <span class="rainbow">GitHub</span>
+              </a>
+              <br /><br />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <footer>
+      <div class="footer-text">&copy; 2024 Jazza. All rights reserved.</div>
+      <div class="made-with-love">Made with ❤️❤️ in Australia by Jazza.</div>
+    </footer>
+
+    <script src="../../headerMargin.js"></script>
+  </body>
+</html>
