add animations

Author: jojohnathon

src/App.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { styleOptions } from './styleOptions';
+  import { fly } from "svelte/transition";
+  import { styleOptions } from "./styleOptions";
 </script>
 
 <svelte:head>
@@ -13,12 +14,12 @@
     property="og:description"
     content="Portfolio of Johnathon Zheng, UC Berkeley Applied Mathematics student."
   />
-  <meta property="og:image" content="https://johnatho.nz/preview.png" /> 
+  <meta property="og:image" content="https://johnatho.nz/preview.png" />
   <meta property="og:url" content="https://johnatho.nz" />
   <meta property="og:type" content="website" />
 </svelte:head>
 
-<main class="page">
+<main class="page" transition:fly={{ y: -50, duration: 600 }}>
   <h1>Johnathon Zheng</h1>
 
   <div class="image-container">
@@ -42,12 +43,15 @@
   </ul>
 
   <p>
-    I'm currently studying Applied Mathematics at the University of California, Berkeley. I earned my
-    Associate of Science degrees in Computer Science and Mathematics from Skyline College in Spring 2025.
+    I'm currently studying Applied Mathematics at the University of California,
+    Berkeley. I earned my Associate of Science degrees in Computer Science and
+    Mathematics from Skyline College in Spring 2025.
   </p>
   <p>
-    My interests include programming, system administration and computer vision. Projects I've worked on are
-    available on <a href="https://github.com/jojohnathon">Github</a>.
+    My interests include programming, system administration and computer vision.
+    Projects I've worked on are available on <a
+      href="https://github.com/jojohnathon">Github</a
+    >.
   </p>
 
   <section class="style-options" aria-labelledby="style-options-heading">
@@ -87,19 +91,27 @@
     font-weight: 700;
     letter-spacing: -0.04em;
     margin: 0;
+    animation: slideUp 0.4s ease 0s backwards;
   }
 
   .image-container {
     display: flex;
     height: 50%;
     gap: 0.625rem;
+    animation: slideUp 0.4s ease 0.05s backwards;
   }
 
   .image-container img {
     max-width: 50%;
     height: auto;
     border-radius: 1rem;
     object-fit: cover;
+    transition: transform 0.3s ease;
+    cursor: pointer;
+  }
+
+  .image-container img:hover {
+    transform: scale(1.05) rotate(1deg);
   }
 
   .contact-list {
@@ -109,16 +121,99 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    animation: slideUp 0.4s ease 0.1s backwards;
+  }
+
+  .contact-list li {
+    animation: slideUp 0.4s ease backwards;
+  }
+
+  .contact-list li:nth-child(1) {
+    animation-delay: 0.15s;
+  }
+  .contact-list li:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  .contact-list li:nth-child(3) {
+    animation-delay: 0.25s;
+  }
+
+  p {
+    animation: slideUp 0.4s ease backwards;
+  }
+
+  p:nth-of-type(1) {
+    animation-delay: 0.3s;
+  }
+  p:nth-of-type(2) {
+    animation-delay: 0.35s;
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .contact-list a {
     color: #2563eb;
     font-weight: 600;
     text-decoration: none;
+    position: relative;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    transition: color 0.3s ease;
+  }
+
+  .contact-list a::after {
+    content: "";
+    position: absolute;
+    bottom: 0.1rem;
+    left: 0.5rem;
+    width: 0;
+    height: 2px;
+    background: #2563eb;
+    transition: width 0.3s ease;
   }
 
   .contact-list a:hover {
-    text-decoration: underline;
+    color: #1d47a1;
+  }
+
+  .contact-list a:hover::after {
+    width: calc(100% - 1rem);
+  }
+
+  p a {
+    color: #2563eb;
+    font-weight: 600;
+    text-decoration: none;
+    position: relative;
+    transition: color 0.3s ease;
+  }
+
+  p a::after {
+    content: "";
+    position: absolute;
+    bottom: 0.05rem;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: #2563eb;
+    transition: width 0.3s ease;
+  }
+
+  p a:hover {
+    color: #1d47a1;
+  }
+
+  p a:hover::after {
+    width: 100%;
   }
 
   p {
@@ -162,7 +257,8 @@
     padding: 0.75rem;
     background: rgba(15, 23, 42, 0.08);
     border-radius: 0.75rem;
-    font-family: 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+    font-family: "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono",
+      monospace;
     font-size: 0.9rem;
     white-space: pre-wrap;
   }