feat: social media icons and a lil bit of trolling

DereC4 · Apr 21, 2024 · 048bd99 · 048bd99
1 parent 6f5a715
commit 048bd99
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/docs/changelog.html b/docs/changelog.html
@@ -79,9 +79,14 @@ <h2>Made this page</h2>
             <h2>About Me</h2>
             <p>Just a simple student trying to make his way in the universe.</p>
           </div>
-          <a href="#" class="fa fa-linkedin"></a>
-          <a href="#" class="fa fa-pinterest"></a>
-          <a href="#" class="fa fa-reddit"></a>
+          <div class="social-icons-container">
+            <a href="https://www.linkedin.com/in/derekyujirchen/" class="fa fa-linkedin"></a>
+            <a href="https://en.wikipedia.org/wiki/Mark_Zuckerberg" class="fa fa-facebook"></a>
+            <a href="https://www.youtube.com/@DereC519/featured" class="fa fa-youtube"></a>
+            <a href="https://photricity.com/flw/ajax/" class="fa fa-reddit"></a>
+            <a href="https://github.com/DereC4" class="fa fa-github"></a>
+            <a href="https://www.instagram.com/ramen__is__good/" class="fa fa-instagram"></a>
+          </div>
         </div>
       </div>
     </div>

diff --git a/docs/main.css b/docs/main.css
@@ -248,25 +248,49 @@ h1 {
     margin: 0 auto; /* Center the container horizontally */
   }
 
+.social-icons-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    grid-gap: 10px;
+    justify-content: center;
+}
+
 .fa:hover {
-    opacity: 0.9;
+    opacity: 0.8;
 }
 
 .fa-linkedin {
     background: #007bb5;
     color: white;
 }
 
-.fa-pinterest {
-    background: #cb2027;
+
+.fa-facebook {
+    background: #1575e4;
     color: white;
 }
 
+.fa-github {
+    background: #333; /* GitHub black */
+    color: #fff; /* White text */
+  }
+
+
 .fa-reddit {
     background: #ff5700;
     color: white;
 }
 
+.fa-youtube {
+    background: #b81111;
+    color: white;
+}
+
+.fa-instagram {
+    background: #e4405f; /* Instagram pink */
+    color: #fff; /* White text */
+  }
+
 .fa {
     padding: 20px;
     font-size: 40px;
@@ -307,6 +331,14 @@ h1 {
         --h1-size: 18px;
         --footer-size: 15px;
     }
+
+    .social-icons-container {
+        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+      }
+
+      .fa {
+        font-size: 24px;
+      }
 }
 
 /* Desktop */