Added projects

index.html

@@ -11,7 +11,7 @@
         <p id="logo">[Notoric]</p>
         <div id="nav">
             <a href="#aboutme">About</a>
-            <a href="https://the-button.notoric.net">Projects</a>
+            <a href="#projects">Projects</a>
             <a href="contact.html">Contact</a>
         </div>
         <div id="links">
@@ -42,6 +42,21 @@
                 <p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p>
             </div>
         </div>
+        <div id="projects">
+            <h1>Projects</h1>
+            <div class="project card">
+                <div class="text-content">
+                    <h2>The Button</h2>
+                    <div class="project-tags">
+                        <p class="HTML">HTML</p>
+                        <p class="CSS">CSS</p>
+                        <p class="JS">JS</p>
+                    </div>
+                    <p class="project-description">The Button is a game created by Elendow on Steam. I have recreated this game in a single day using a basic web development stack. The user is presented with a button which contains a number. When the user clicks the button, the button with either reset back to zero or increase it's counter by one. The counter also represents the percantage chance of the button resetting to zero on the next press.</p>
+                </div>
+                <a href="https://the-button.notoric.net" target="_blank"><img src="/assets/the-button.png"></a>
+            </div>
+        </div>
     </main>
     <script src="/scripts/homepage.js"></script>
 </body>

styles/global.css

@@ -9,7 +9,7 @@ body {
     background-color: #111;
     color: #eee;
     margin: 0;
-    font-family: "Fira Mono", monospace;
+    font-family: "Barlow", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 16px;
@@ -176,6 +176,7 @@ em {
 }
 
 #homepage .card {
+    font-family: "Fira Mono", monospace;
     flex-direction: row;
     padding-block: 80px;
     gap: 70px;
@@ -290,7 +291,7 @@ em {
     margin: auto;
     position: relative;
     font-family: "Barlow", sans-serif;
-    font-size: 18px;
+    margin-bottom: 100px;
 }
 
 #aboutme h1 {
@@ -302,6 +303,10 @@ em {
     z-index: 2;
 }
 
+#aboutme p {
+    font-size: 18px;
+}
+
 #box-with-title p {
     position: relative;
     z-index: 2;
@@ -311,6 +316,89 @@ em {
     font-family: "Fira Mono", monospace;
 }
 
+#projects {
+    margin: auto;
+    width: fit-content;
+}
+
+#projects h1 {
+    padding-left: 75px;
+}
+
+.project {
+    display: flex;
+    flex-direction: row;
+    padding: 2em;
+    width: fit-content;
+    margin: auto;
+    gap: 20px;
+    align-content: center;
+    justify-content: center;
+}
+
+.project:nth-child(odd) {
+    flex-direction: row-reverse;
+}
+
+.project .text-content {
+    display: flex;
+    flex-direction: column;
+    align-self: start;
+}
+
+.project h2 {
+    margin-bottom: 0;
+}
+
+.project img {
+    width: 400px;
+    height: 300px;
+    border-radius: 3em;
+    border: 0.2em solid #222;
+    cursor: pointer;
+}
+
+.project-tags {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    margin: 0;
+    padding-block: 10px;
+    font-family: "Fira Mono", monospace;
+    font-weight: 500;
+}
+
+.HTML {
+    background-color: #E34F26 !important;
+}
+
+.CSS {
+    background-color: #1572B6 !important;
+}
+
+.JS {
+    background-color: #F7DF1E !important;
+    color: #000;
+    text-shadow: #eee 0px 0px 2px !important;
+}
+
+.project-tags p {
+    margin: 0;
+    font-size: 0.8em;
+    width: 40px;
+    border-radius: 1em;
+    background-color: #222;
+    padding: 0.2em;
+    text-align: center;
+    text-shadow: #111 0px 0px 2px;
+}
+
+.project-description {
+    max-width: 400px;
+    font-size: 1.1em;
+    margin: 0;
+}
+
 @media screen and (max-width: 1100px) {
 
     #logo {
@@ -428,6 +516,10 @@ em {
     #name {
         font-size: 3em;
     }
+
+    .project {
+        flex-direction: column;
+    }
 }
 
 @media (pointer: fine) and (hover: hover) and (max-width: 1100px) {