feat(aboutme): update photos and blurb

frontend/src/App.tsx

@@ -5,6 +5,9 @@ import React, {
   useEffect,
   useRef,
 } from "react";
+import cruiseImg from "./images/cruise.jpg";
+import discGolfImg from "./images/disc_golf_ace.jpg";
+import odinImg from "./images/odin.jpg";
 import {
   BrowserRouter as Router,
   Routes,
@@ -418,32 +421,36 @@ function LandingPage() {
 function About() {
   return (
     <div className="py-10">
-      <div className="flex justify-center items-end space-x-4">
-        <img
-          src="/images/photo1.jpg"
-          alt="Photo 1"
-          className="w-24 h-24 rounded-full"
-        />
-        <img
-          src="/images/photo2.jpg"
-          alt="Photo 2"
-          className="w-24 h-24 rounded-full transform translate-y-4"
-        />
-        <img
-          src="/images/photo3.jpg"
-          alt="Photo 3"
-          className="w-24 h-24 rounded-full"
-        />
+      <div className="flex justify-center items-end space-x-4 flex-wrap">
+        {[cruiseImg, discGolfImg, odinImg].map((src, i) => (
+          <img
+            key={i}
+            src={src}
+            alt={["Cruise", "Disc golf ace", "Odin"][i]}
+            className="
+          rounded-full 
+          aspect-square 
+          object-cover
+          w-1/3 max-w-[120px]     /* small screens: 33% of container, up to 120px */
+          sm:w-1/4 sm:max-w-[150px] /* ≥640px: 25% up to 150px */
+          md:w-1/6 md:max-w-[200px] /* ≥768px: ~16% up to 200px */
+          lg:w-1/8 lg:max-w-[250px] /* ≥1024px: 12.5% up to 250px */
+        "
+          />
+        ))}
       </div>
       <div className="text-center mt-8 px-4">
         <h2 className="text-3xl font-bold mb-4">About Me</h2>
         <p className="text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto">
-          I am a software engineer at Whisker who designs and implements
-          whatever is highest priority. I work with every team in the
-          engineering organization to coordinate mission-critical projects
-          across backend, mobile, and firmware. I’m comfortable in many tech
-          stacks and learn new ones quickly—never afraid to jump in the deep end
-          and adapt on the fly.
+          I’m Alex, a full-stack engineer at Whisker, working on backend one
+          minute, mobile tweaks the next, and firmware the day after. Learning
+          new tech is something I'm passionate about, and I’m all about
+          spreading that knowledge fast. Off-duty you’ll catch me reading a
+          bunch, writing (ironically, on my blog, which you are currently
+          viewing), exploring the outdoors with my dogs (and my girlfriend,
+          trust me she’s real!), or rolling dice as a D&amp;D sorcerer. Here
+          you’ll find book thoughts, code experiments, and random shower
+          thoughts. Thanks for stopping by!
         </p>
       </div>
       <div className="mt-8 flex flex-col items-center space-y-2">