swap image & revise 'about' writeup

src/pages/about.astro

@@ -11,9 +11,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     style="margin-top: 20px; display: flex; justify-content: center; gap: 10px; max-width: 100%; flex-wrap: wrap; margin-bottom"
   >
     <img
-      src="/andrew-full-lean.jpg"
-      alt="A channel in the UPL Discord reads '8 people in UPL'."
-      style="max-width: 450px; width: auto;"
+      src="/andrew-madhacks.jpg"
+      alt="An image of Andrew outside. He wears a blue shirt, a gray flannel, and a lanyard with his name."
+      class="responsive-image"
     />
   </div>
 
@@ -60,53 +60,55 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   <p>
     This site was built off of <a href="https://astro.build/" target="_blank"
       >Astro</a
-    >, which is a really neat framework for building content-heavy websites like
-    this one. <a
+    >, which is a really neat framework for designing content-heavy websites
+    like this one. <a
       href="https://github.com/AndrewDTR/website/blob/main/src/pages/about.astro"
       target="_blank">This page</a
     >
     is being written in HTML for flexibility, but it just as easily could have been
-    done in markdown. Astro makes it insanely easy to just design the components
-    that you'd like, and then implement them in layouts that you can call as templates
+    done in markdown. Astro makes it insanely easy to design the components that
+    you'd like, and then implement them in layouts that you can implement as templates
     for pages. This creates an elegant layered architecture, where -- at least in
     my case -- I have a <a
       href="https://github.com/AndrewDTR/website/blob/main/src/layouts/BaseLayout.astro"
       target="_blank">base layout</a
     >
     that contains a blank page with a header and footer, with a slot in the center
-    for inserting whatever content I'd like. Then, I can define a <a
+    for inserting whatever content I'd like. Then, I can define other structures
+    that use it -- say, a <a
       href="https://github.com/AndrewDTR/website/blob/main/src/layouts/Blog.astro"
-      target="_blank">layout for blogs</a
+      target="_blank">layout for my blogs</a
     >
     that will take some frontmatter variables from any markdown post I make and show
-    them.
+    them above the post.
   </p>
   <p>
-    I've been really happy with Astro. Its plugin integrations have allowed me
-    to implement <a href="https://github.com/rehypejs/rehype" target="_blank"
+    I've been really happy with Astro. Its plugin support has allowed me to
+    implement <a href="https://github.com/rehypejs/rehype" target="_blank"
       >rehype</a
-    > features, change the vanilla HTML code blocks for much nicer syntax-highlighted
-    ones, generate og images dynamically based on page titles/descriptions, and create
-    an RSS feed from my content (complete with an <a
+    > features, swap out the vanilla HTML code blocks for much nicer syntax-highlighted
+    ones, generate og meta images dynamically based on page titles/descriptions,
+    and create an RSS feed from my content (complete with an <a
       href="https://www.w3.org/Style/XSL/WhatIsXSL.html"
-      target="_blank">RSS stylesheet</a
+      target="_blank">XSL stylesheet</a
     >. Did you know that's something browsers support?! I didn't.).
   </p>
   <p>
     You may not have noticed it if you're on mobile (the site will attempt to
     disable it if it detects mobile browser agents or a mobile screen size), but
     hovering over a link that directs to an external webpage (one not on this
-    site) will make it appear in a tooltip that follows your mouse. This feature
-    was directly inspired by MIT's website design (which was made by
+    site) will display a tooltip with the link that follows your mouse. This
+    feature was directly inspired by MIT's website design (which was made by
     Upstatement). There's a treasure trove of really well designed features
-    across their admissions blog -- I attempted to replicate their
+    across their primary website and admissions blog -- I attempted to replicate
+    their
     <a
       href="https://gwern.net/sidenote#miscellaneous:~:text=MIT%20Admissions%20uses%20a%20footnote%2Dsidenote%20hybrid%3A"
       target="_blank">sidenotes</a
     >
     design at one point, but I wasn't prepared for how intensive the calculations
     are for drawing them on screen dynamically without disturbing the content. I'll
-    try to get around to that at some point, because I like the idea of sidenotes
+    try to get back around to that at some point, because I like the idea of sidenotes
     more than footnotes. (P.S: That gwern link has a fantastic, almost scarily in-depth
     page on sidenotes in web design. I'd highly recommend checking it out if that
     kind of stuff interests you.)
@@ -115,10 +117,10 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     The source for this website is <a
       href="https://github.com/AndrewDTR/website"
       target="_blank">available on my GitHub</a
-    >, and you're able to view what I did in the most recent commit with the
-    link in the footer. If you're wondering, <a
+    >, and you're able to view the changes made in the most recent revision with
+    the commit link in the footer. If you're wondering, <a
       href="https://github.com/AndrewDTR/website/blob/e848da9a97124a891b659fce1a2a0fcffb2cf736/src/components/Footer.astro#L2-L7"
-      target="_blank">that's done at build time</a
+      target="_blank">that's done server-side at build time</a
     > by parsing the output of <code>git rev-parse --short HEAD</code> (which is
     ran by Node.js' <code>child_process</code>). That feature was inspired by Xe
     Iaso, whose work I've seen on Hacker News.
@@ -127,20 +129,19 @@ import BaseLayout from "../layouts/BaseLayout.astro";
   <p>
     While I <i>do</i> have a VPS that I put my dynamic projects on, this site is
     built with GitHub Actions due to its static nature. I just have to make a change,
-    commit and push it, and GitHub will automatically re-build the site and deploy
+    commit, and push it, and GitHub will automatically re-build the site and deploy
     it automatically for me.
   </p>
 
   <p>
     I've certainly wanted to write more posts on this website -- and once I'm
     able to get my schedule under control, I definitely think I will. It's super
-    fun knowing that there are actual people reading the things I'm writing, and
-    as long as I have interesting things to talk about, I don't see that
-    changing.
+    fun knowing that there are <i>actual people</i> reading the things I'm writing,
+    and as long as I have interesting things to talk about, I don't see any reason
+    to stop.
   </p>
 
-  <!-- right aligned -->
-  <p style="text-align: right;">Andrew</p>
+  <p style="text-align: right; margin-top: 40px;">Andrew</p>
 </BaseLayout>
 
 <style>
@@ -160,4 +161,15 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     cursor: help;
     text-decoration: underline dotted;
   }
+
+  .responsive-image {
+    width: 450px;
+    max-width: 100%;
+  }
+
+  @media (max-width: 700px) {
+    .responsive-image {
+      width: 100%;
+    }
+  }
 </style>