<!-- Page Title -->
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-brand-dark mb-4">Current Members</h1>
<p class="text-lg text-slate-500">Meet the team driving our open science initiatives.</p>
</div>
<!-- ==========================================================================
1. PI SECTION: Prof. Matthew Todd
========================================================================== -->
<div class="flex flex-col lg:flex-row gap-12 items-start mb-24 border-b border-slate-100 pb-16">
<!-- PI Card -->
<div class="w-full lg:w-1/3 flex-shrink-0">
<div class="bg-white p-6 rounded-xl shadow-md border border-slate-100">
<div class="aspect-[3/4] overflow-hidden rounded-lg mb-6">
<img src="./pics/people/Meds_for_all.jpg" alt="Prof. Todd" class="w-full h-full object-cover hover:scale-105 transition duration-500">
</div>
<h3 class="text-2xl font-bold text-brand-dark mb-1">Prof. Matthew Todd</h3>
<p class="text-brand-primary font-bold text-sm uppercase tracking-wider mb-6">Principal Investigator</p>
<div class="flex flex-wrap gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/matthew-todd-81633313/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-2xl"></i></a>
<a href="https://twitter.com/MatToddChem" class="hover:text-brand-primary transition"><i class="fab fa-twitter text-2xl"></i></a>
<a href="https://intermolecular.wordpress.com/" class="hover:text-brand-primary transition"><i class="fab fa-wordpress text-2xl"></i></a>
<a href="https://en.wikipedia.org/wiki/Matthew_Todd_(chemist)" class="hover:text-brand-primary transition"><i class="fab fa-wikipedia-w text-2xl"></i></a>
<a href="https://github.com/mattodd" class="hover:text-brand-primary transition"><i class="fab fa-github text-2xl"></i></a>
<a href="mailto:matthew.todd@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-2xl"></i></a>
</div>
</div>
</div>
<!-- PI Bio -->
<div class="w-full lg:w-2/3 prose prose-lg prose-slate text-slate-600 max-w-none">
<p>
Mat Todd was born in Manchester, England. He was educated at Cambridge University where he obtained an MA in Natural Sciences in 1995 and a PhD in organic chemistry (with Chris Abell) in 1999. He was then a Wellcome Trust postdoc at The University of California, Berkeley (99-00), a College Fellow back at New Hall (now Murray Edwards) College, Cambridge University (00-01), a Lecturer in Chemistry at Queen Mary, University of London (01-05) and between 2005 and 2018 was at the School of Chemistry, The University of Sydney where he moved from Lecturer to Associate Professor. He is now Professor and Chair of Drug Discovery at University College London (2018-present).
</p>
<p>
He has a significant interest in open science, and how it may be used to accelerate research, with particular emphasis on open source discovery of new medicines. He founded and currently leads several open science consortia such as <a href="http://opensourcemalaria.org/" class="text-brand-primary hover:underline font-bold">Open Source Malaria (OSM)</a> and is a founder of a broader <a href="http://www.opensourcepharma.net/" class="text-brand-primary hover:underline font-bold">Open Source Pharma</a> movement. He leads the Structural Genomics Consortium (SGC) at UCL and leads the SGC's Open Chemistry Networks initiative as part of Target 2035.
</p>
<p>
With Tim Willson of UNC Chapel Hill he led the medicinal chemistry core of the open <a href="https://readdi-ac.org/" class="text-brand-primary hover:underline font-bold">READDI-AViDD antiviral discovery project</a>. In 2011 he was awarded a New South Wales Scientist of the Year award in the Emerging Research category for his work in open science and in 2012 the OSM consortium was awarded one of three Wellcome Trust/Google/PLoS Accelerating Science Awards. For his open source research, Mat was selected for the Medicine Maker's Power List in <a href="https://themedicinemaker.com/power-list/2017/" class="text-brand-primary hover:underline font-bold">2017</a> and 2018. He is on the Editorial Boards of PLoS One, ChemistryOpen and Nature Scientific Reports. He has been a sabbatical visitor at Stanford, UCSF, the Broad Institute and <a href="https://www.pmb.ox.ac.uk/fellows-staff/profiles/dr-matthew-todd" class="text-brand-primary hover:underline font-bold">Pembroke College, Oxford</a>. He lives in Greenwich, London, with his wife and two children. He is related to <a href="https://en.wikipedia.org/wiki/Trevor_Horn" class="text-brand-primary hover:underline font-bold">Trevor Horn</a> and, apparently, <a href="https://en.wikipedia.org/wiki/Samuel_Crompton" class="text-brand-primary hover:underline font-bold">Samuel Crompton</a>.
</p>
<div class="not-prose mt-8 bg-slate-50 border-l-4 border-brand-primary p-6 rounded-r-lg">
<p class="font-serif italic text-brand-dark text-lg m-0">
Lab Motto: "To make the right molecule in the right place at the right time." <br>
<span class="text-sm text-slate-400 not-italic font-sans mt-2 block">(Students are currently trying to work out what this means.)</span>
</p>
</div>
</div>
</div>
<!-- ==========================================================================
2. RESEARCH SUPPORT
========================================================================== -->
<div class="mb-24">
<h2 class="text-3xl font-bold text-brand-dark mb-10 flex items-center gap-4">
<span class="w-2 h-8 bg-brand-primary rounded-full"></span>
Research Support
</h2>
<!-- Grid: Mobile 1 col, Tablet 2 cols, Desktop 4 cols -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Fiona Marquet -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Fiona2.jpg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-xl font-bold text-brand-dark mb-1">Fiona Marquet</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Executive Assistant</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/fiona-marquet-0b1ba62/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:f.marquet@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ==========================================================================
3. POSTDOCTORAL RESEARCH ASSOCIATES
========================================================================== -->
<div class="mb-24">
<h2 class="text-3xl font-bold text-brand-dark mb-10 flex items-center gap-4">
<span class="w-2 h-8 bg-brand-primary rounded-full"></span>
Postdoctoral Research Associates
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Dr Danielle Hanke -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/DanielleHanke.jpg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-xl font-bold text-brand-dark mb-1">Dr Danielle Hanke</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Postdoc (UCL)</p>
<div class="flex justify-center gap-4 text-slate-300">
<!-- Greyed out icons indicate no link provided -->
<i class="fab fa-linkedin text-lg"></i>
<i class="fab fa-twitter text-lg"></i>
<i class="fab fa-github text-lg"></i>
<i class="fas fa-envelope text-lg"></i>
</div>
</div>
</div>
<!-- Dr Yinuo Wang -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Yinuo3.jpg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Yinuo Wang</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Postdoc (UCL-GSK)</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/yinuo-wang-849277171/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="https://twitter.com/yinuo_w" class="hover:text-brand-primary transition"><i class="fab fa-twitter text-lg"></i></a>
<a href="https://github.com/yinuowang0812" class="hover:text-brand-primary transition"><i class="fab fa-github text-lg"></i></a>
<a href="mailto:yinuo.wang.20@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ==========================================================================
4. SGC PROTEIN SCIENCE TEAM
========================================================================== -->
<div class="mb-24">
<h2 class="text-3xl font-bold text-brand-dark mb-10 flex items-center gap-4">
<span class="w-2 h-8 bg-brand-primary rounded-full"></span>
SGC Protein Science Team
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Dr Nicola Burgess-Brown -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Nicola.jpeg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Dr Nicola Burgess-Brown</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Visiting Scientist</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/nicola-burgess-brown-6488487/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:n.burgess-brown@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Dr Jelena (Habjanič) Thies -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Jelena2.jpeg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Dr Jelena Thies</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Postdoc (UCL)</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/jelenathies/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:j.habjanic@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Jodie Taylor -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300 bg-slate-50"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Jodie Taylor</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Research Assistant</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/jodie-taylor-457359180/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:jodie.taylor@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Shayla Venkaya -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300 bg-slate-50"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Shayla Venkaya</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">Research Assistant</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/shayla-venkaya-357a84106/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:s.venkaya@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ==========================================================================
5. PHD STUDENTS
========================================================================== -->
<div class="mb-24">
<h2 class="text-3xl font-bold text-brand-dark mb-10 flex items-center gap-4">
<span class="w-2 h-8 bg-brand-primary rounded-full"></span>
PhD Students
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Yuhang Wang -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Yuhang_Wang3.jpg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Yuhang Wang</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">PhD Student</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/wiesel-henson-0202/" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="https://twitter.com/ericwan59398945" class="hover:text-brand-primary transition"><i class="fab fa-twitter text-lg"></i></a>
<a href="https://github.com/Yuhang-CADD" class="hover:text-brand-primary transition"><i class="fab fa-github text-lg"></i></a>
<a href="mailto:yuhang.wang.19@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Kangping Liu -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/KangpingLiu.JPG" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Kangping Liu</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">PhD Student</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://github.com/KangpingL" class="hover:text-brand-primary transition"><i class="fab fa-github text-lg"></i></a>
<a href="mailto:kangping.liu.21@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Mohsen Alamoudi -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Mohsen_Alamoudi2.jpg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Mohsen Alamoudi</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">PhD Student</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://www.linkedin.com/in/mohsenalamoudi" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="https://twitter.com/Mo777sen" class="hover:text-brand-primary transition"><i class="fab fa-twitter text-lg"></i></a>
<a href="mailto:mohsen.alamoudi.22@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
<!-- Ruochong Xu -->
<div class="group bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-xl hover:border-brand-primary transition-all duration-300">
<div class="aspect-square overflow-hidden bg-slate-100 relative">
<img src="./pics/people/Edward2.jpeg" class="w-full h-full object-cover group-hover:scale-105 transition duration-500" onerror="this.style.display='none'; this.nextElementSibling.classList.remove('hidden')">
<div class="hidden absolute inset-0 flex items-center justify-center text-slate-300"><i class="fas fa-user text-6xl"></i></div>
</div>
<div class="p-6 text-center">
<h4 class="text-lg font-bold text-brand-dark mb-1">Ruochong Xu</h4>
<p class="text-xs font-bold text-brand-primary mb-4 uppercase tracking-widest">PhD Student</p>
<div class="flex justify-center gap-4 text-slate-400">
<a href="https://uk.linkedin.com/in/ruochong-xu-725a33334?original_referer=https%3A%2F%2Fwww.google.com%2F" class="hover:text-brand-primary transition"><i class="fab fa-linkedin text-lg"></i></a>
<a href="mailto:ruochong.xu.24@ucl.ac.uk" class="hover:text-brand-primary transition"><i class="fas fa-envelope text-lg"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ==========================================================================
6. MRES STUDENTS
========================================================================== -->