first homepage structure

src/routes/+page.css

@@ -6,7 +6,7 @@ body {
   padding: 0;
   font-family: 'Roboto', sans-serif;
   background-color: #333;
-  color: green
+  color: rgb(0, 255, 0)
 }
 
 /* Set container styles */
@@ -17,12 +17,18 @@ body {
   height: 100%;
 }
 
-/* Set ASCII art styles */
-.ascii-art {
-  height: 40%;
-  font-size: 20px;
-  font-family: monospace;
-  font-style: bold;
+.image-wrapper {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  perspective: 800px;
+}
+
+.card-front, .card-back {
+  position: absolute;
+  width: 100%;
+  backface-visibility: hidden;
+  transition: transform 0.5s;
 }
 
 /* Set links styles */
@@ -32,15 +38,53 @@ body {
   align-items: center;
   width: 100%;
   margin-top: 1rem;
+  height: 3rem;
 }
 
-.links a {
-  margin: 0 1rem;
+.picture {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.card-front {
+  transform: rotateY(0);
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}
+
+.image-wrapper:hover .card-front {
+  transform: rotateY(-180deg);
+}
+
+.image-wrapper:hover .card-back {
+  transform: rotateY(0);
+}
+
+.home-link,
+  .for-the-based-link {
+    font-size: 2rem;
+    margin: 0 0.5rem;
+    color: rgb(0, 255, 0);
+    text-decoration: underline;
+    transition: all 0.2s ease-in-out;
+    font-family: 'Fira Code', monospace;
+    font-style: italic;
+  }
+
+  .home-link:hover,
+  .for-the-based-link:hover {
+    color: green;
+    text-decoration: none;
+    font-size: 2.5rem;
   }
 
 /* Set social media styles */
 .social-media {
   margin-top: 1rem;
+  color: white;
 }
 
 .row {
@@ -52,6 +96,43 @@ body {
 
 .row a {
   margin-right: 1rem;
-  color: #333;
+  color: rgb(0, 255, 0);
   text-decoration: none;
+  font-size: 24px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.row a:hover {
+  transform: scale(1.3); /* make icon 20% bigger on hover */
+}
+
+.footer {
+  height: 1rem;
+  background-color: #000;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.125rem;
+}
+
+.line {
+  padding: 10px;
+}
+
+.line-content {
+  color: #333;
+  font-size: 0.01rem;
+  z-index: -1;
+  transition: transform 0.2s ease-in-out;
+}
+
+.line:hover + .line-content {
+  transform: scale(100);
+  color: gray;
 }

src/routes/+page.svelte

@@ -1,40 +1,39 @@
 
 <div class="container">
-    <div class="ascii-art">
-    <pre>
-    <code>
- ___________________
-|                   |
-|   ____     ____   |
-|  |    |   |    |  |
-|  |____|   |____|  |
-|            __     |
-|           |__|    |
-|                   |
-|___________________|
-    </code>
-    </pre>
-
-
+  <div class="image-wrapper">
+    <div class="card-front">
+      <img src="/icon_800x800_transparent.png" alt="My Picture" class="picture">
+    </div>
+    <div class="card-back">
+      <img src="/root_logo.png" alt="My Picture" class="picture">
+    </div>
   </div>
   <div class="links">
-    <a href="home/">Home</a>
-    <a href="the-based/">For The Based(TM)</a>
+    <a href="home/" class="home-link">Home</a>
+    <a href="based/" class="for-the-based-link">For The Based&trade;</a>
     </div>
+    <div class="line">
       <hr>
+    </div>
+    <div class="line-content">
+      <p>Idk how this dott got here but im leaving it.</p>
+    </div>
     <div class="social-media">
     <div class="row">
-        <a href="https://github.com"><i class="fab fa-github"></i></a>
-        <a href="https://www.youtube.com"><i class="fab fa-youtube"></i></a>
-        <a href="https://discord.com"><i class="fab fa-discord"></i></a>
+        <a href="https://github.com/J-onasJones"><i class="fab fa-github"></i></a>
+        <a href="https://www.youtube.com/@JonasJones"><i class="fab fa-youtube"></i></a>
+        <a href="https://discord.gg/V2EsuUVmWh"><i class="fab fa-discord"></i></a>
     </div>
     <div class="row">
-        <a href="https://www.reddit.com"><i class="fab fa-reddit"></i></a>
-        <a href="https://twitter.com"><i class="fab fa-twitter"></i></a>
-        <a href="https://www.instagram.com"><i class="fab fa-instagram"></i></a>
+        <a href="https://www.reddit.com/u/Jonas_Jones_"><i class="fab fa-reddit"></i></a>
+        <a href="https://twitter.com/Jonas_Jones_"><i class="fab fa-twitter"></i></a>
+        <a href="https://www.instagram.com/_jonas_jones_"><i class="fab fa-instagram"></i></a>
     </div>
   </div>
 </div>
+<div class="footer">
+  <p>Website by Jonas_Jones @ jonasjones.me. 2021 - 2023</p>
+</div>
   
   <script>
     // Add script here if needed