Adding Images to Timeline

- images will accompany some of the timeline points
- Moved social media buttons to the top

index.html

@@ -38,20 +38,30 @@
   <!--About me-->
   <section id="about" class="about">
     <h1>Jacob Seto</h1>
-    <p>Current undergraduate student at Cornell University. Interested in game design and project management. I'm
-      passionate when it comes to leading teams and organizing workflow. However, I equally enjoy being a team player to
-      achieve the vision of each my projects. Follow my journey and send me a message, always happy to meet new people!
+    <!--Social Media links-->
+    <div class="socialmedia">
+      <a href="https://www.linkedin.com/in/jacob-seto-985b6825b/">
+        <img src="/images/linkedin.png" alt="linkedin">
+      </a>
+      <a href="https://github.com/JacobSeto">
+        <img src="/images/github.png" alt="github">
+      </a>
+    </div>
+    <p>Current undergraduate student at Cornell University. I love game design, project management, and playing my
+      cello! I'm
+      passionate when it comes to leading, however, I equally enjoy being a team player to make the most out of all of
+      my projects. Follow my journey and send me a message, always happy to meet new people!
     </p>
   </section>
 
   <!--Projects-->
   <section id="projects">
     <div class="title">
       <h1>Project Experience</h1>
-      <p>Follow my game dev journey!</p>
+      <p>Follow my game dev journey! Click on the images to learn more about each project.</p>
       <p><span style="color:white;">White</span> → Personal Project, <span style="color:lightgreen;">Green</span> →
         Group
-        Project, <span style="color:lightblue;">Blue</span> → Research</p>
+        Project, <span style="color:cyan;">Blue</span> → Research</p>
 
     </div>
 
@@ -78,6 +88,9 @@ <h2>SERVE</h2>
           <div>
             <label>August, 2024</label>
             <h2>Completely Hammered</h2>
+            <a href="https://dgacornell.itch.io/completely-hammered" target="_blank">
+              <img class="checkpoint-image" src="images/Completely Hammered Cover.png" alt="Completely Hammered Cover">
+            </a>
             <ul>
               <li>Role: Project Lead</li>
               <li>Software/Tools: Unity, Github</li>
@@ -296,19 +309,8 @@ <h2>Get in touch</h2>
         <img src="/images/right_img.png" alt="">
       </div>
     </div>
-
-    <!--Social Media links-->
-
-    <div class="socialmedia">
-      <a href="https://www.linkedin.com/in/jacob-seto-985b6825b/">
-        <img src="/images/linkedin.png" alt="linkedin">
-      </a>
-      <a href="https://github.com/JacobSeto">
-        <img src="/images/github.png" alt="github">
-      </a>
-    </div>
-    <p>© 2024 Jacob Seto. All rights reserved.</p>
   </section>
+  <p>© 2024 Jacob Seto. All rights reserved.</p>
 
 
 </body>

style.css

@@ -23,7 +23,6 @@ body {
 h1 {
   padding-top: 50px;
   color: white;
-  margin-bottom: 20px;
   /* Adjust the spacing between the header and iframe */
   text-align: center;
   font-size: 60px;
@@ -150,9 +149,22 @@ a {
 .checkpoint {
   max-width: 34em;
   position: relative;
-  margin-bottom: -4em;
+  margin-bottom: -7.5em;
+}
+
+.checkpoint img {
+  max-width: 100%;
+  /* Ensure the image does not exceed the width of the container */
+  height: auto;
+  /* Maintain aspect ratio */
+  border-radius: 1em;
+  /* Match the border radius of the checkpoint div */
+  display: block;
+  margin: 0 auto;
+  /* Center the image */
 }
 
+
 .checkpoint h2 {
   position: relative;
   text-align: center;
@@ -189,7 +201,7 @@ a {
 }
 
 .blue-border div {
-  border: 3px solid lightblue;
+  border: 3px solid cyan;
 }
 
 .checkpoint div onmouseenter {
@@ -200,10 +212,6 @@ a {
   background: none;
 }
 
-.checkpoint div :hover {
-  cursor: pointer;
-}
-
 .checkpoint p {
   line-height: 27px;
   color: #ccc;
@@ -300,6 +308,7 @@ a {
   padding: 10px;
   width: 100%;
   bottom: 0;
+  margin-bottom: 25px;
 }
 
 .socialmedia a {