Update About and Mobile Support

index.html

@@ -25,30 +25,25 @@ <h1>Jacob Seto</h1>
       <img src="/images/Me.png" alt="Jacob Seto" class="about-image">
       <div class="about-text">
         <p>
-          I am a current undergraduate student at Cornell University studying Computer Science, with a minor in Game
-          Design and
-          Music. I was born in Long Island, New York and the oldest of 4. I currently serve president of my university's
-          game development
-          club
-          called <a href="https://dga-official-website.vercel.app/" target="_blank">DGA</a>, and play cello for the
-          <a href="https://www.cuorchestra.org/" target="_blank">Cornell Symphony Orchestra</a>. I aspire to work in
-          the game industry and eventually own my own
-          indie company. Follow my journey and send me a message, always happy to meet new people!
+          I am an undergraduate student at Cornell University, pursuing a major in Computer Science with a minor in Game
+          Design and Music. Born and raised in Long Island, New York, I am also the eldest of four siblings, which has
+          shaped my sense of responsibility and leadership. I currently serve president of my university's
+          game development club called <a href="https://dga-official-website.vercel.app/" target="_blank">DGA</a>, and
+          play the cello for the <a href="https://www.cuorchestra.org/" target="_blank">Cornell Symphony Orchestra</a>.
+          I aspire to work in the game industry and eventually own my own indie company. Follow my journey and send me a
+          message, always happy to meet new people!
         </p>
-        <p> I have several years of experience in game development and 2 years leading various projects at my
-          university. I have
-          taken on many roles such as programmer, project manager, network designer, and researcher. I have an
-          energetic, sometimes playful personality in group environments. However, I will always respect
-          people's time and boundaries, and will always take my work seriously. I am passionate and a driven
-          perfectionist; I
-          will do whatever it takes to get the most out of each of my projects.</p>
-        <p> On my downtime, I develop my own game projects, all named with the prefix, "Flock",
-          since that was the name of my first video game I ever created. I love playing boardgames, and will sometimes
-          add my own custom content and rule to test unexplored mechanics. I recently got back into
-          Magic the Gathering, and will
-          always be down to draft with a group of friends! My
-          favorite games are Minecraft, Slay the Spire, and Risk of Rain 2; I hope one day to make games of their
-          caliber.
+        <p> With several years of game development experience and two years of leading diverse projects at university,
+          I’ve had the opportunity to wear many hats—programmer, project manager, network designer, and researcher. I
+          bring high energy and enthusiasm when working with others, and tend to lead on ideas and project direction.
+          However, I respect people's time and boundaries, and greatly value the contributions and perspectives of my
+          team. My passion for game development and commitment to delivering high-quality results drive me to maximize
+          the potential of each of my projects.</p>
+        <p> In my downtime, I work on my own game projects, all titled with the prefix "Flock"—a nod to the first video
+          game I ever created. I’m also a big fan of board games, often adding custom content and rules to experiment
+          with new mechanics. Recently, I got back into <i>Magic: The Gathering</i> and always enjoy drafting with
+          friends. Some of my favorite games are <i>Minecraft</i>, <i>Slay the Spire</i>, and <i>Risk of Rain 2</i>; I
+          aspire to create games of their caliber and push the boundaries of the game industry.
         </p>
       </div>
     </div>

style.css

@@ -451,17 +451,6 @@ a {
   width: 500px;
 }
 
-@media (max-width: 800px) {
-
-  .contact-inputs {
-    width: 80vw;
-  }
-
-  .contact-right {
-    display: none;
-  }
-}
-
 .resume {
   display: flex;
   flex-direction: column;
@@ -483,7 +472,115 @@ a {
 .resume iframe {
   margin-top: 15px;
   width: 800px;
-  height: 1100px;
+  height: 1160px;
   border: none;
-  margin-bottom: -200px;
+  margin-bottom: -100px;
+}
+
+@media (max-width: 800px) {
+
+  body {
+    padding: 0.5em;
+    /* Reduce padding to shrink overall body gaps */
+    margin: 0;
+  }
+
+  h1 {
+    font-size: 40px;
+    margin: 0.5em 0;
+    /* Reduce margins around headings */
+  }
+
+  h2 {
+    font-size: 1.5em;
+    margin: 0.5em 0;
+    /* Reduce margins around sub-headings */
+  }
+
+  p {
+    font-size: medium;
+    width: 100%;
+    margin: 0.5em 0;
+    /* Reduce paragraph margins */
+  }
+
+  .navbar ul {
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    /* Remove any unwanted margin in navbar */
+  }
+
+  .about-content {
+    flex-direction: column;
+    margin: 1em 0;
+    /* Reduce margins between about content and other sections */
+  }
+
+  .about-image {
+    width: 80%;
+    margin: 0.5em auto;
+    /* Reduce margin for about image */
+  }
+
+  .about-text {
+    width: 100%;
+    padding-left: 0;
+    margin: 0.5em 0;
+    /* Reduce text margins in about section */
+  }
+
+  .timeline {
+    transform: scale(0.6);
+    margin-top: -1250px;
+    /* Reduce margin to avoid large gaps */
+    transition: transform 0.3s ease;
+  }
+
+  .checkpoint {
+    padding: 0.5em;
+    /* Reduce padding to shrink checkpoint space */
+    transform: translateX(0%);
+  }
+
+  .checkpoint:nth-child(odd),
+  .checkpoint:nth-child(even) {
+    border-left: none;
+    border-right: none;
+  }
+
+  .socialmedia img {
+    width: 40px;
+    height: 40px;
+    margin: 0.5em;
+    /* Reduce margin around social media icons */
+  }
+
+  .contact-inputs {
+    width: 80vw;
+    margin: 0.5em 0;
+    /* Reduce margins between input fields */
+  }
+
+  .contact-right {
+    display: none;
+  }
+
+  .resume h1 {
+    margin-top: -1450px;
+  }
+
+  .resume a {
+    margin-top: -10px;
+    font-size: 25px;
+    margin-bottom: -150px;
+  }
+
+  .resume iframe {
+    transform: scale(0.7);
+  }
+
+  .contact-container {
+    margin-top: -400px;
+  }
 }