update project images

www/index.html

@@ -101,6 +101,10 @@
                               This is a project I worked on for my AP Computer Programming course in highschool. I wrote an Android app in Java which turns any Android smartphone into a security camera. It syncs with a server (also written in Java) over an encrypted TCP connection to store recordings and motion events. The cameras can also be viewed live by another phone over an encrypted UDP connection. This differs from many readily-available solutions as the server is on your local network, ensuring the likely very personal footage can only be viewed by you. Additionally, the recordings still happen even if the network drops out, unlike with traditional IP cameras.
                         </p>
                     </details>
+                    <div class="double-screenshot">
+                        <a target="_blank" href="/img/security-camera-stream.jpg"><img src="/img/security-camera-stream-thumb.webp" alt="two phones, one streaming video to another over the network"></a><a target="_blank" href="/img/security-camera-screenshot.png"><img src="/img/security-camera-screenshot-thumb.webp" alt="screenshot of the app while it's recording video"></a>
+                    </div>
+                    <small>click image to view in full resolution</small>
                 </div>
 
                 <div class="project sub-section">
@@ -112,6 +116,11 @@
                             &emsp;&emsp;This is a personal project I worked on in middle school where I wanted to remotely control my Roomba from my laptop with a video feed. I connected an Arduino to the Roomba's diagnostic port, paired with a Raspberry pi running an Apache2 web server with PHP and a motion video server. The pi hosts a website over Wi-Fi which allows any modern web browser to view the video feed and send serial commands to the Arduino. The Arduino then sends its own commands outlined in iRobot's SCI specification to carry out control of the Roomba. The Arduino also receives and parses data from the Roomba for safety features such as cliff detection.
                         </p>
                     </details>
+                    <div class="double-screenshot">
+
+                        <a target="_blank" href="/img/roomba.jpg"><img src="/img/roomba-thumb.webp" alt="a normal Roomba with a webcam, Raspberry pi, Arduino, and a voltage regulator mounted on it"></a><a target="_blank" href="/img/roomba-control.jpg"><img src="/img/roomba-control-thumb.webp" alt="webpage for controlling the Roomba and viewing the live feed"></a>
+                    </div>
+                    <small>click image to view in full resolution</small>
                 </div>
 
             </div>

www/style.css

@@ -184,6 +184,7 @@ h3 {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    align-items: center;
 }
 
 .double-screenshot img {