Skip to content

Commit 77d2432

Browse files
AshirBorahAshirBorah
committed
Add research icons and alumni marquee
1 parent e50994c commit 77d2432

3 files changed

Lines changed: 188 additions & 45 deletions

File tree

‎css/styles.css‎

Lines changed: 71 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -339,13 +339,31 @@ section {
339339
}
340340

341341
.research-card {
342+
display: grid;
343+
gap: calc(var(--space-unit) * 2);
342344
padding: calc(var(--space-unit) * 4);
343345
background: var(--gray-50);
344346
border: 1px solid var(--gray-200);
345347
border-radius: 8px;
346348
transition: all 0.3s var(--ease-out-expo);
347349
}
348350

351+
.research-icon {
352+
width: 48px;
353+
height: 48px;
354+
border-radius: 14px;
355+
display: grid;
356+
place-items: center;
357+
background: linear-gradient(140deg, rgba(22, 163, 74, 0.14), rgba(20, 184, 166, 0.12));
358+
color: var(--gray-900);
359+
border: 1px solid rgba(22, 163, 74, 0.2);
360+
}
361+
362+
.research-icon svg {
363+
width: 26px;
364+
height: 26px;
365+
}
366+
349367
.research-card:hover {
350368
border-color: var(--gray-400);
351369
transform: translateY(-2px);
@@ -758,10 +776,42 @@ section {
758776
background: var(--gray-50);
759777
}
760778

761-
.alumni-grid {
762-
display: grid;
763-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
779+
.alumni-marquee {
780+
position: relative;
781+
overflow: hidden;
782+
padding: calc(var(--space-unit) * 1) 0;
783+
}
784+
785+
.alumni-marquee::before,
786+
.alumni-marquee::after {
787+
content: '';
788+
position: absolute;
789+
top: 0;
790+
bottom: 0;
791+
width: 80px;
792+
z-index: 2;
793+
pointer-events: none;
794+
}
795+
796+
.alumni-marquee::before {
797+
left: 0;
798+
background: linear-gradient(to right, var(--gray-50), rgba(250, 250, 250, 0));
799+
}
800+
801+
.alumni-marquee::after {
802+
right: 0;
803+
background: linear-gradient(to left, var(--gray-50), rgba(250, 250, 250, 0));
804+
}
805+
806+
.alumni-track {
807+
display: flex;
764808
gap: calc(var(--space-unit) * 2);
809+
width: max-content;
810+
animation: alumni-marquee var(--marquee-duration, 28s) linear infinite;
811+
}
812+
813+
.alumni-marquee:hover .alumni-track {
814+
animation-play-state: paused;
765815
}
766816

767817
.alumni-item {
@@ -770,6 +820,7 @@ section {
770820
border: 1px solid var(--gray-200);
771821
border-radius: 6px;
772822
transition: all 0.2s ease;
823+
min-width: 260px;
773824
}
774825

775826
.alumni-item:hover {
@@ -794,6 +845,11 @@ section {
794845
color: var(--gray-600);
795846
}
796847

848+
@keyframes alumni-marquee {
849+
from { transform: translateX(0); }
850+
to { transform: translateX(-50%); }
851+
}
852+
797853
/* Contact Section */
798854
#contact {
799855
background: var(--white);
@@ -910,6 +966,12 @@ footer {
910966
transform: none;
911967
transition: none;
912968
}
969+
970+
.alumni-track {
971+
animation: none;
972+
flex-wrap: wrap;
973+
width: 100%;
974+
}
913975
}
914976

915977
/* Responsive - Tablet */
@@ -1016,8 +1078,12 @@ footer {
10161078
}
10171079

10181080
.carousel-track,
1019-
.protocols-grid,
1020-
.alumni-grid {
1081+
.protocols-grid {
10211082
grid-template-columns: 1fr;
10221083
}
1084+
1085+
.alumni-marquee::before,
1086+
.alumni-marquee::after {
1087+
width: 40px;
1088+
}
10231089
}

‎index.html‎

Lines changed: 82 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -58,18 +58,58 @@ <h1><span>Gilbert Lab</span></h1>
5858
<div class="research-grid fade-in" id="research-grid">
5959
<!-- Content loaded from content/research.md or hardcoded below -->
6060
<div class="research-card">
61+
<div class="research-icon" aria-hidden="true">
62+
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
63+
<path d="M16 6c8 6 8 30 0 36"/>
64+
<path d="M32 6c-8 6-8 30 0 36"/>
65+
<path d="M19 14h10"/>
66+
<path d="M19 22h10"/>
67+
<path d="M19 30h10"/>
68+
</svg>
69+
</div>
6170
<h3>Epigenome Engineering</h3>
6271
<p>CRISPRi, CRISPRa, and CRISPRoff for programmable control of gene expression without cutting DNA.</p>
6372
</div>
6473
<div class="research-card">
74+
<div class="research-icon" aria-hidden="true">
75+
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
76+
<circle cx="12" cy="12" r="4"/>
77+
<circle cx="36" cy="12" r="4"/>
78+
<circle cx="24" cy="28" r="4"/>
79+
<circle cx="12" cy="36" r="4"/>
80+
<circle cx="36" cy="36" r="4"/>
81+
<path d="M16 12h16"/>
82+
<path d="M24 16v8"/>
83+
<path d="M14 34l6-4"/>
84+
<path d="M34 34l-6-4"/>
85+
</svg>
86+
</div>
6587
<h3>Functional Genomics</h3>
6688
<p>Genome-scale screens to map genetic interactions and identify synthetic lethal targets in cancer.</p>
6789
</div>
6890
<div class="research-card">
91+
<div class="research-icon" aria-hidden="true">
92+
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
93+
<path d="M24 6l14 6v9c0 10-6 16-14 21-8-5-14-11-14-21v-9l14-6z"/>
94+
<path d="M20 22l4 6 6-10"/>
95+
</svg>
96+
</div>
6997
<h3>Drug Resistance</h3>
7098
<p>Modeling therapy response in prostate cancer, AML, glioblastoma, and lung cancer.</p>
7199
</div>
72100
<div class="research-card">
101+
<div class="research-icon" aria-hidden="true">
102+
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
103+
<circle cx="12" cy="24" r="4"/>
104+
<circle cx="24" cy="12" r="4"/>
105+
<circle cx="36" cy="24" r="4"/>
106+
<circle cx="24" cy="36" r="4"/>
107+
<path d="M15 21l6-6"/>
108+
<path d="M27 15l6 6"/>
109+
<path d="M33 27l-6 6"/>
110+
<path d="M21 33l-6-6"/>
111+
</svg>
112+
</div>
73113
<h3>Combinatorial Perturbations</h3>
74114
<p>Engineered Cas12a for multiplexed chromatin editing and higher-order genetic interactions.</p>
75115
</div>
@@ -407,46 +447,48 @@ <h3>GitHub Repository</h3>
407447
<h2>Where Are They Now</h2>
408448
</div>
409449

410-
<div class="alumni-grid fade-in" id="alumni-grid">
411-
<div class="alumni-item">
412-
<div class="alumni-name">Amanda Mok</div>
413-
<div class="alumni-years">2019-2023</div>
414-
<div class="alumni-current">Editas Medicine</div>
415-
</div>
416-
<div class="alumni-item">
417-
<div class="alumni-name">Tom O'Loughlin</div>
418-
<div class="alumni-years">2019-2022</div>
419-
<div class="alumni-current">Assistant Professor, Mount Sinai</div>
420-
</div>
421-
<div class="alumni-item">
422-
<div class="alumni-name">Sara Misiukiewicz</div>
423-
<div class="alumni-years">2020-2022</div>
424-
<div class="alumni-current">Graduate Student, UCSF</div>
425-
</div>
426-
<div class="alumni-item">
427-
<div class="alumni-name">Greg Pommier</div>
428-
<div class="alumni-years">2020-2022</div>
429-
<div class="alumni-current">Medical Student, Johns Hopkins</div>
430-
</div>
431-
<div class="alumni-item">
432-
<div class="alumni-name">Shaheen Kabir</div>
433-
<div class="alumni-years">2018-2021</div>
434-
<div class="alumni-current">Graphite Bio</div>
435-
</div>
436-
<div class="alumni-item">
437-
<div class="alumni-name">Lilly Scheibe</div>
438-
<div class="alumni-years">2019-2021</div>
439-
<div class="alumni-current">Harvard Medical School</div>
440-
</div>
441-
<div class="alumni-item">
442-
<div class="alumni-name">Chris Yogodzinski</div>
443-
<div class="alumni-years">2018-2020</div>
444-
<div class="alumni-current">Graduate Student, UNC</div>
445-
</div>
446-
<div class="alumni-item">
447-
<div class="alumni-name">Alex Ge</div>
448-
<div class="alumni-years">2017-2019</div>
449-
<div class="alumni-current">Medical Student, UCSF</div>
450+
<div class="alumni-marquee fade-in" data-marquee>
451+
<div class="alumni-track" data-marquee-track>
452+
<div class="alumni-item">
453+
<div class="alumni-name">Amanda Mok</div>
454+
<div class="alumni-years">2019-2023</div>
455+
<div class="alumni-current">Editas Medicine</div>
456+
</div>
457+
<div class="alumni-item">
458+
<div class="alumni-name">Tom O'Loughlin</div>
459+
<div class="alumni-years">2019-2022</div>
460+
<div class="alumni-current">Assistant Professor, Mount Sinai</div>
461+
</div>
462+
<div class="alumni-item">
463+
<div class="alumni-name">Sara Misiukiewicz</div>
464+
<div class="alumni-years">2020-2022</div>
465+
<div class="alumni-current">Graduate Student, UCSF</div>
466+
</div>
467+
<div class="alumni-item">
468+
<div class="alumni-name">Greg Pommier</div>
469+
<div class="alumni-years">2020-2022</div>
470+
<div class="alumni-current">Medical Student, Johns Hopkins</div>
471+
</div>
472+
<div class="alumni-item">
473+
<div class="alumni-name">Shaheen Kabir</div>
474+
<div class="alumni-years">2018-2021</div>
475+
<div class="alumni-current">Graphite Bio</div>
476+
</div>
477+
<div class="alumni-item">
478+
<div class="alumni-name">Lilly Scheibe</div>
479+
<div class="alumni-years">2019-2021</div>
480+
<div class="alumni-current">Harvard Medical School</div>
481+
</div>
482+
<div class="alumni-item">
483+
<div class="alumni-name">Chris Yogodzinski</div>
484+
<div class="alumni-years">2018-2020</div>
485+
<div class="alumni-current">Graduate Student, UNC</div>
486+
</div>
487+
<div class="alumni-item">
488+
<div class="alumni-name">Alex Ge</div>
489+
<div class="alumni-years">2017-2019</div>
490+
<div class="alumni-current">Medical Student, UCSF</div>
491+
</div>
450492
</div>
451493
</div>
452494
</div>

‎js/main.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,40 @@ function initEventsCarousel() {
491491
updateDots();
492492
}
493493

494+
// ============================================
495+
// ALUMNI MARQUEE
496+
// ============================================
497+
function initAlumniMarquee() {
498+
const marquee = document.querySelector('[data-marquee]');
499+
if (!marquee) return;
500+
501+
const track = marquee.querySelector('[data-marquee-track]');
502+
if (!track) return;
503+
504+
const items = Array.from(track.children);
505+
if (items.length === 0) return;
506+
507+
const prefersReducedMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
508+
if (prefersReducedMotion) return;
509+
510+
// Duplicate items for seamless loop
511+
items.forEach((item) => {
512+
const clone = item.cloneNode(true);
513+
clone.setAttribute('aria-hidden', 'true');
514+
track.appendChild(clone);
515+
});
516+
517+
function setDuration() {
518+
const halfWidth = track.scrollWidth / 2;
519+
const speed = 40; // px per second
520+
const duration = Math.max(20, halfWidth / speed);
521+
track.style.setProperty('--marquee-duration', `${duration}s`);
522+
}
523+
524+
requestAnimationFrame(setDuration);
525+
window.addEventListener('resize', setDuration);
526+
}
527+
494528
// ============================================
495529
// INIT
496530
// ============================================
@@ -500,4 +534,5 @@ document.addEventListener('DOMContentLoaded', () => {
500534
initScrollAnimations();
501535
initSmoothScroll();
502536
initEventsCarousel();
537+
initAlumniMarquee();
503538
});

0 commit comments

Comments
 (0)