Skip to content

Commit df7d1d2

Browse files
leigedoveleigedove
committed
bio
1 parent ee6ec27 commit df7d1d2

File tree

2 files changed

+132
-39
lines changed

2 files changed

+132
-39
lines changed

‎index.html‎

Lines changed: 77 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,17 @@
8484
.btn.secondary{background:transparent;color:var(--accent-2);border:1px solid var(--accent);box-shadow:none}
8585

8686
/* Speakers */
87-
.speakers{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--grid-gap)}
88-
.speaker{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;background:var(--panel);transition:transform .18s ease, box-shadow .18s ease;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;cursor:pointer}
87+
.speakers{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--grid-gap)}
88+
.speaker{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;background:var(--panel);transition:transform .18s ease, box-shadow .18s ease;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;position:relative}
8989
.speaker:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.15);text-decoration:none}
9090
.speaker strong{display:block;margin-bottom:.5rem;font-size:1.1rem}
91+
.speaker .title{color:var(--muted);font-size:.85rem;font-style:italic;margin-bottom:.5rem}
9192
.speaker .aff{color:var(--accent-2);font-size:.95rem;font-weight:600;background:rgba(250,178,43,.1);padding:.2rem .5rem;border-radius:6px;display:inline-block;margin-bottom:.3rem}
93+
.expand-btn{position:absolute;bottom:1rem;right:1rem;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#1a1200;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:bold;transition:all .2s ease;box-shadow:0 2px 8px rgba(250,178,43,.3)}
94+
.expand-btn:hover{background:var(--accent-2);transform:scale(1.1)}
95+
.speaker-bio{margin-top:1rem;padding:1rem;background:rgba(250,178,43,.05);border:1px solid rgba(250,178,43,.2);border-radius:8px;font-size:.9rem;line-height:1.5;color:var(--fg);display:none;text-align:left}
96+
.speaker-bio.show{display:block;animation:fadeIn .3s ease}
97+
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
9298
.muted{color:var(--muted)}
9399

94100
/* Table */
@@ -246,43 +252,8 @@ <h2>Secure your spot</h2>
246252
<section id="speakers">
247253
<div class="container">
248254
<h2>Confirmed Speakers</h2>
249-
<div class="speakers">
250-
<a href="https://www.linkedin.com/in/pieroaltoe/?originalSubdomain=it" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
251-
<img src="images/piero-altoe.jpg" alt="Dr.Piero Altoe" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
252-
<strong>Dr. Piero Altoe</strong>
253-
<div class="aff">NVIDIA</div>
254-
</a>
255-
<a href="https://profiles.ucl.ac.uk/3406-peter-coveney" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
256-
<img src="images/peter-coveney.jpg" alt="Prof. Peter Coveney" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
257-
<strong>Prof. Peter Coveney</strong>
258-
<div class="aff">UCL</div>
259-
</a>
260-
<a href="https://www.linkedin.com/in/jamesgin/?originalSubdomain=uk" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
261-
<img src="images/james-gin.jpg" alt="James Gin" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
262-
<strong>James Gin</strong>
263-
<div class="aff">Orbital Materials</div>
264-
</a>
265-
<a href="https://kjablonka.com/?utm_source=chatgpt.com" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
266-
<img src="images/kevin-jablonka.jpg" alt="Dr. Kevin Maik Jablonka" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
267-
<strong>Dr. Kevin Maik Jablonka</strong>
268-
<div class="aff">University of Jena</div>
269-
</a>
270-
<a href="https://www.linkedin.com/in/steve-kench-a26a2a2b1/" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
271-
<img src="images/steven-kench.jpg" alt="Dr. Steven Kench" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
272-
<strong>Dr. Steven Kench</strong>
273-
<div class="aff">Polaron</div>
274-
</a>
275-
<a href="https://www.linkedin.com/in/sinjax/?originalSubdomain=uk" target="_blank" rel="noopener" class="speaker" style="text-decoration:none;color:inherit;">
276-
<img src="images/sina-samangooei.jpg" alt="Dr. Sina Samangooei" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);" onerror="this.style.display='none'">
277-
<strong>Dr. Sina Samangooei</strong>
278-
<div class="aff">CuspAI</div>
279-
</a>
280-
<!-- Pending speaker from Google DeepMind -->
281-
<div class="speaker" style="border-style:dashed">
282-
<img src="images/deepmind-speaker.jpg" alt="Google DeepMind Speaker" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);opacity:0.6;" onerror="this.style.display='none'">
283-
<strong>[Tentative] Speaker</strong>
284-
<div class="aff">Google DeepMind</div>
285-
</div>
255+
<div class="speakers" id="speakers-container">
256+
<!-- Speakers will be dynamically loaded from config -->
286257
</div>
287258
</div>
288259
</section>
@@ -476,6 +447,7 @@ <h2>Get in touch</h2>
476447
</div>
477448
</footer>
478449

450+
<script src="speakers-config.js"></script>
479451
<script>
480452
// Set current year
481453
document.getElementById('year').textContent = new Date().getFullYear();
@@ -487,6 +459,72 @@ <h2>Get in touch</h2>
487459
const open = m.classList.toggle('open');
488460
btn.setAttribute('aria-expanded', String(open));
489461
});
462+
463+
// Load speakers from config and render them
464+
function loadSpeakers() {
465+
const speakersContainer = document.getElementById('speakers-container');
466+
467+
Object.keys(speakersConfig).forEach(speakerId => {
468+
const speaker = speakersConfig[speakerId];
469+
470+
const speakerDiv = document.createElement('div');
471+
speakerDiv.className = 'speaker';
472+
if (speakerId === 'deepmind-speaker') {
473+
speakerDiv.style.borderStyle = 'dashed';
474+
}
475+
476+
speakerDiv.innerHTML = `
477+
<button class="expand-btn" id="btn-${speakerId}" onclick="event.stopPropagation(); toggleBio('${speakerId}')">+</button>
478+
<img src="${speaker.image}" alt="${speaker.name}" style="width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent);margin-bottom:1rem;box-shadow:0 4px 16px rgba(250,178,43,.3);${speakerId === 'deepmind-speaker' ? 'opacity:0.6;' : ''}" onerror="this.style.display='none'">
479+
<strong>${speaker.name}</strong>
480+
<div class="title">${speaker.title}</div>
481+
<div class="aff">${speaker.affiliation}</div>
482+
<div class="speaker-bio" id="bio-${speakerId}" onclick="event.stopPropagation();">
483+
${speaker.bio}
484+
</div>
485+
`;
486+
487+
// Add click handler for the entire card (except expand button and bio)
488+
if (speaker.linkedin !== '#') {
489+
speakerDiv.style.cursor = 'pointer';
490+
speakerDiv.addEventListener('click', (event) => {
491+
// Don't navigate if clicking on expand button or bio
492+
if (event.target.closest('.expand-btn') || event.target.closest('.speaker-bio')) {
493+
return;
494+
}
495+
window.open(speaker.linkedin, '_blank', 'noopener');
496+
});
497+
}
498+
499+
speakersContainer.appendChild(speakerDiv);
500+
});
501+
}
502+
503+
// Speaker bio toggle functionality
504+
function toggleBio(speakerId) {
505+
const bioElement = document.getElementById(`bio-${speakerId}`);
506+
const btnElement = document.getElementById(`btn-${speakerId}`);
507+
508+
if (bioElement.classList.contains('show')) {
509+
bioElement.classList.remove('show');
510+
btnElement.textContent = '+';
511+
} else {
512+
// Hide all other bios first
513+
document.querySelectorAll('.speaker-bio.show').forEach(bio => {
514+
bio.classList.remove('show');
515+
});
516+
document.querySelectorAll('.expand-btn').forEach(btn => {
517+
btn.textContent = '+';
518+
});
519+
520+
// Show this bio
521+
bioElement.classList.add('show');
522+
btnElement.textContent = '−';
523+
}
524+
}
525+
526+
// Load speakers when page loads
527+
document.addEventListener('DOMContentLoaded', loadSpeakers);
490528
</script>
491529
</body>
492530
</html>

‎speakers-config.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// Speakers configuration with bio and title information
2+
const speakersConfig = {
3+
"piero-altoe": {
4+
name: "Dr. Piero Altoe",
5+
affiliation: "NVIDIA",
6+
title: "Revolutionizing AI-Driven Material Discovery Using NVIDIA ALCHEMI",
7+
image: "images/piero-altoe.jpg",
8+
linkedin: "https://www.linkedin.com/in/pieroaltoe/?originalSubdomain=it",
9+
bio: "Piero Altoè is Senior Developer Relations Manager for Computational Chemistry and Materials Science at NVIDIA. He earned his PhD in Chemistry from the University of Bologna in 2007, specializing in multiscale simulation methods. After more than a decade in academic research, he transitioned into high-performance computing, where he played a leading role in advancing GPU adoption across Europe. Piero later returned to his chemistry roots, focusing on accelerating molecular dynamics, quantum chemistry, and machine-learning interatomic potentials."
10+
},
11+
"peter-coveney": {
12+
name: "Prof. Peter Coveney",
13+
affiliation: "UCL",
14+
title: "The Wall Confronting Large Language Models",
15+
image: "images/peter-coveney.jpg",
16+
linkedin: "https://profiles.ucl.ac.uk/3406-peter-coveney",
17+
bio: "Peter Coveney is a Professor of Physical Chemistry at UCL. He is a Fellow of the Royal Academy of Engineering and Member of Academia Europaea. Coveney is active in a broad area of interdisciplinary research including condensed matter physics and chemistry, materials science, as well as human digital twins in healthcare and quantum computing applications. Dr Coveney has published well over 500 scientific papers and is the author of Virtual You (2023). His latest book, Molecular Dynamics: Probability and Uncertainty (with Shunzhou Wan) was published on 15 May 2025."
18+
},
19+
"james-gin": {
20+
name: "James Gin-Pollock",
21+
affiliation: "Orbital Materials",
22+
title: "Generate • Simulate • Reason: Chaining Foundation Models to Discover Materials",
23+
image: "images/james-gin.jpg",
24+
linkedin: "https://www.linkedin.com/in/jamesgin/?originalSubdomain=uk",
25+
bio:"James leads the computational research team at Orbital Materials, a Series A funded and NVIDIA-backed startup which is developing new materials and technologies for the energy transition. Orbital's notable projects include a dual-use data centre chiller which captures ambient CO2 using waste heat, developed as a strategic partner of AWS, a two-phase GPU cooling system powered by a novel non-PFAS dielectric fluid, and the open-source machine learning interatomic potential Orb. His background is in physics and machine learning, and as an entrepreneur has founded several AI companies, one of which was acquired by Shutterstock."
26+
},
27+
"kevin-jablonka": {
28+
name: "Dr. Kevin Maik Jablonka",
29+
affiliation: "University of Jena",
30+
title: "Title coming soon",
31+
image: "images/kevin-jablonka.jpg",
32+
linkedin: "https://kjablonka.com/?utm_source=chatgpt.com",
33+
},
34+
"steven-kench": {
35+
name: "Dr. Steven Kench",
36+
affiliation: "Polaron",
37+
title: "Title coming soon",
38+
image: "images/steven-kench.jpg",
39+
linkedin: "https://www.linkedin.com/in/steve-kench-a26a2a2b1/",
40+
},
41+
"sina-samangooei": {
42+
name: "Dr. Sina Samangooei",
43+
affiliation: "CuspAI",
44+
title: "Title coming soon",
45+
image: "images/sina-samangooei.jpg",
46+
linkedin: "https://www.linkedin.com/in/sinjax/?originalSubdomain=uk",
47+
},
48+
"deepmind-speaker": {
49+
name: "[Tentative] Speaker",
50+
affiliation: "Google DeepMind",
51+
title: "Title coming soon",
52+
image: "images/deepmind-speaker.jpg",
53+
linkedin: "#",
54+
}
55+
};

0 commit comments

Comments
 (0)