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