Update style.

Add fun links.

views/main/index.css

@@ -6,58 +6,70 @@ body{
     display: flex;
 }
 
-.card{
+.cardContainer{
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background: white;
-    width: 300px;
-    height: 300px;
-    cursor: pointer;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
     padding: 25px;
-    text-decoration: none;
-    color: black;
-    margin: 25px;
+    overflow-y: auto;
 }
 
-    .card:hover{
-        box-shadow: 0 0 3px black;
+    .card{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: white;
+        width: 300px;
+        height: 300px;
+        cursor: pointer;
+        margin: 10px;
+        padding: 25px;
+        text-decoration: none;
+        color: black;
     }
 
-    .card h2{
-        margin-bottom: auto;
-    }
+        .card:hover{
+            box-shadow: 0 0 3px black;
+        }
 
-    .card img{
-        margin-top: 10px;
-        width: 90%;
-        max-height: 150px;
-        max-width: 150px;
-    }
+        .card h2{
+            text-align: justify;
+        }
 
-    .card p{
-        text-align: justify;
-    }
+        .card img{
+            margin-top: 10px;
+            width: 90%;
+            max-height: 150px;
+            max-width: 150px;
+        }
 
-    .card > *{
-        margin: 10px 0;
-    }
+        .card p{
+            text-align: justify;
+        }
+
+        .card > *{
+            margin: 10px 0;
+        }
 
 .sidebar{
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
-    background: rgb(23, 171, 192);
+    background: #152730;
     height: 100vh;
     width: 25vw;
-    color: white;
+    color: #5FECE0;
+    border-right: 1px solid white
 }
 
     .description{
-        background: #5FECE0;
-        color: black;
+        background: #152730;
+        color: #5FECE0;
         width: 100%;
         padding: 25px;
         box-sizing: border-box;
@@ -67,7 +79,7 @@ body{
 
     .leeLinks a{
         display: flex;
-        color: white;
+        color: #5FECE0;
         margin: 10px;
     }
 
@@ -91,7 +103,7 @@ body{
         align-items: center;
         height: 100px;
         width: 100px;
-        color: white;
+        color: #5FECE0;
         cursor: pointer;
         background: none;
         border: none;
@@ -99,8 +111,8 @@ body{
 
     #menu .active{
         background: rgb(196, 198, 192);
-        color: black;
         cursor: default;
+        color: #152730;
     }
 
 #main{
@@ -110,13 +122,4 @@ body{
     background: rgb(196, 198, 192);
     height: 100vh;
     width: 75vw;
-}
-
-    .cardContainer{
-        display: flex;
-        flex-wrap: wrap;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
-        padding: 25px;
-    }
+}

views/main/index.html

@@ -39,21 +39,22 @@
         </div>
 
         <div id="menu">
-            <button id="aboutButton" class="active">
+            <button id="projectsButton" class="active">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                    <circle cx="12" cy="7" r="4"></circle>
+                    <polyline points="16 18 22 12 16 6"></polyline>
+                    <polyline points="8 6 2 12 8 18"></polyline>
                 </svg>
-                <p>About Me</p>
+
+                <p>My Projects</p>
             </button>
 
-            <button id="projectsButton">
+            <button id="aboutButton">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="16 18 22 12 16 6"></polyline>
-                    <polyline points="8 6 2 12 8 18"></polyline>
+                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                    <circle cx="12" cy="7" r="4"></circle>
                 </svg>
 
-                <p>My Projects</p>
+                <p>About Me</p>
             </button>
 
             <button id="writingButton">
@@ -79,11 +80,7 @@
         </div>
 
         <div id="main">
-            <div id="about">
-                <h1>About Me</h1>
-            </div>
-
-            <div id="projects" class="cardContainer" style="display:none;">
+            <div id="projects" class="cardContainer">
                 <a class="card" href="https://thesubline.com">
                     <h2>The Subline</h2>
                     <img src="/images/subline" alt="The Subline">
@@ -97,6 +94,10 @@
                 </a>
             </div>
 
+            <div id="about" style="display:none;">
+                <h1>About Me</h1>
+            </div>
+
             <div id="writing" class="cardContainer" style="display:none;">
                 <a class="card" href="/writing/touchscreens">
                     <h2>Touchscreens, An Essay</h2>
@@ -104,8 +105,51 @@
                 </a>
             </div>
 
-            <div id="links" style="display:none;">
-                <h1>Cool Links</h1>
+            <div id="links" class="cardContainer" style="display:none;">
+                <a class="card" href="https://cs-online.club/en/servers">
+                    <h2>CS:GO in the browser</h2>
+                    <p>A website to play CS:GO in the browser with other people online.</p>
+                </a>
+
+                <a class="card" href="https://driveandlisten.herokuapp.com/">
+                    <h2>Drive and Listen</h2>
+                    <p>Pretend to be driving your car and listening to the radio. Watch cars driving down the road all over the world while listening to local radio stations.</p>
+                </a>
+
+                <a class="card" href="https://www.ekzhang.com/game-of-life">
+                    <h2>Conway's Game of Life</h2>
+                    <p>Play around and experiment with different situations in Conway's Game of Life</p>
+                </a>
+
+                <a class="card" href="https://librivox.org/">
+                    <h2>LibriVox</h2>
+                    <p>Free public domain audiobooks. Listen to books for free, or volunteer your time to read them for others to listen to</p>
+                </a>
+
+                <a class="card" href="https://rocketcrab.com/">
+                    <h2>rocketcrab.com</h2>
+                    <p>Party games right on your phone</p>
+                </a>
+
+                <a class="card" href="https://thetruesize.com/">
+                    <h2>The True Size of</h2>
+                    <p>The common Mercator projection map that we are used to distorts the real size of countries. This site will let you move and directly compare the real size of different countries to see how big they really are</p>
+                </a>
+
+                <a class="card" href="https://win95.ajf.me/">
+                    <h2>Windows 95</h2>
+                    <p>Use a virtual Windows 95 computer right in your browser</p>
+                </a>
+
+                <a class="card" href="https://pointerpointer.com/">
+                    <h2>Pointer Pointer</h2>
+                    <p>Point to your pointer</p>
+                </a>
+
+                <a class="card" href="https://pudding.cool/2020/12/judge-my-spotify">
+                    <h2>Judge My Spotify</h2>
+                    <p>Let an AI criticize your taste in music</p>
+                </a>
             </div>
         </div>