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 : 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 = () => {

The Creator

-
DMC
+ David Montero Crespo

David Montero Crespo

@@ -333,6 +341,36 @@ export const AboutPage: React.FC = () => {
+ {/* Releases */} +
+
+

Recent releases

+
+ + Latest +

Velxio 2.5

+

Arduino meets SPICE in your browser

+

+ 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. +

+ Read the launch notes → + + +

Velxio 2.0

+

Multi-board canvas, ESP32, Raspberry Pi 3

+

+ 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. +

+ Read the launch notes → + +
+
+
+ {/* Personal story quote */}