From ebde9cc8da9ec7cfbe17dca479d7ff2470a3b6ee Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Fri, 8 May 2026 11:20:38 -0300
Subject: [PATCH] feat(about): real avatar + Recent releases section linking to
 /v2 and /v2-5
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the "DMC" initials placeholder with the GitHub avatar
  (https://avatars.githubusercontent.com/u/47928504?v=4). The CSS for
  .about-creator-avatar already had the rounded frame; just swapped to
  object-fit: cover so the <img> fills the circle correctly, plus a
  subtle ring + drop shadow.
- Add a "Recent releases" section between the Creator block and the
  personal-story quote, with two cards:
    - Velxio 2.5 (Latest) → /v2-5  (ngspice-WASM analog co-simulation)
    - Velxio 2.0          → /v2
  Each card has a tagline + 2-3 line blurb. The 2.5 card gets a blue
  border + "Latest" tag so it reads as the current launch. About now
  surfaces both release pages, which previously were only linked from
  the Circuit/Electronics/SPICE simulator pages.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/AboutPage.css | 92 +++++++++++++++++++++++++++++---
 frontend/src/pages/AboutPage.tsx | 40 +++++++++++++-
 2 files changed, 124 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/AboutPage.css b/frontend/src/pages/AboutPage.css
index 6794ff74..3a2c6c92 100644
--- a/frontend/src/pages/AboutPage.css
+++ b/frontend/src/pages/AboutPage.css
@@ -169,14 +169,14 @@
   width: 120px;
   height: 120px;
   border-radius: 50%;
+  /* Background only shows while the image is loading. */
   background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 36px;
-  font-weight: 700;
-  color: #fff;
-  letter-spacing: 1px;
+  /* When rendered as <img>: fill the circle, no distortion. */
+  object-fit: cover;
+  display: block;
+  /* Subtle ring + shadow so it reads as an avatar even on dark sections. */
+  border: 2px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
 .about-creator-name {
@@ -490,3 +490,81 @@ a.about-press-badge:hover {
     justify-content: center;
   }
 }
+
+/* ── Releases section ────────────────────────────── */
+.about-releases {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+  margin-top: 8px;
+}
+
+.about-release-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 24px 26px;
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+  position: relative;
+}
+
+.about-release-card:hover {
+  border-color: #3a3a3a;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+.about-release-card-latest {
+  border-color: #0071e3;
+  background: linear-gradient(135deg, rgba(0, 113, 227, 0.06), #1a1a1a 60%);
+}
+
+.about-release-card-latest:hover {
+  border-color: #2a90ff;
+}
+
+.about-release-tag {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: #fff;
+  background: #0071e3;
+  padding: 3px 8px;
+  border-radius: 4px;
+}
+
+.about-release-card h3 {
+  font-size: 22px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0;
+}
+
+.about-release-tagline {
+  font-size: 14px;
+  color: #aaa;
+  margin: 0;
+}
+
+.about-release-blurb {
+  font-size: 14px;
+  color: #888;
+  line-height: 1.55;
+  margin: 0;
+}
+
+.about-release-link {
+  font-size: 13px;
+  font-weight: 500;
+  color: #4ea1ff;
+  margin-top: 4px;
+}
diff --git a/frontend/src/pages/AboutPage.tsx b/frontend/src/pages/AboutPage.tsx
index cedab358..f1c699f7 100644
--- a/frontend/src/pages/AboutPage.tsx
+++ b/frontend/src/pages/AboutPage.tsx
@@ -247,7 +247,15 @@ export const AboutPage: React.FC = () => {
           <h2 className="about-heading">The Creator</h2>
           <div className="about-creator">
             <div className="about-creator-photo">
-              <div className="about-creator-avatar">DMC</div>
+              <img
+                className="about-creator-avatar"
+                src="https://avatars.githubusercontent.com/u/47928504?v=4"
+                alt="David Montero Crespo"
+                width={120}
+                height={120}
+                loading="lazy"
+                referrerPolicy="no-referrer"
+              />
             </div>
             <div className="about-creator-info">
               <h3 className="about-creator-name">David Montero Crespo</h3>
@@ -333,6 +341,36 @@ export const AboutPage: React.FC = () => {
         </div>
       </section>
 
+      {/* Releases */}
+      <section className="about-section">
+        <div className="about-container">
+          <h2 className="about-heading">Recent releases</h2>
+          <div className="about-releases">
+            <Link to="/v2-5" className="about-release-card about-release-card-latest">
+              <span className="about-release-tag">Latest</span>
+              <h3>Velxio 2.5</h3>
+              <p className="about-release-tagline">Arduino meets SPICE in your browser</p>
+              <p className="about-release-blurb">
+                Real-time analog circuit simulation via ngspice-WASM, wired to Arduino, ESP32 and
+                Raspberry Pi Pico. 100+ SPICE-accurate components, live ammeters and voltmeters,
+                40 new analog/hybrid examples — co-simulated with your firmware.
+              </p>
+              <span className="about-release-link">Read the launch notes →</span>
+            </Link>
+            <Link to="/v2" className="about-release-card">
+              <h3>Velxio 2.0</h3>
+              <p className="about-release-tagline">Multi-board canvas, ESP32, Raspberry Pi 3</p>
+              <p className="about-release-blurb">
+                Full QEMU-driven ESP32 emulation with WiFi/BLE, Raspberry Pi 3B Linux, MicroPython
+                support across Pico/ESP32, custom WASM chips, and a redesigned canvas with
+                multi-board co-simulation.
+              </p>
+              <span className="about-release-link">Read the launch notes →</span>
+            </Link>
+          </div>
+        </div>
+      </section>
+
       {/* Personal story quote */}
       <section className="about-section">
         <div className="about-container">