feat(about): real avatar + Recent releases section linking to /v2 and /v2-5
- 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>
This commit is contained in:
David Montero Crespo
parent
c20a7498fc
commit
ebde9cc8da
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue