Skip to content

Commit 32a889d

Browse files
aymuos15ampcode-com
aymuos15
and
ampcode-com
committed
Add animated reveal for about research link
Amp-Thread-ID: https://ampcode.com/threads/T-019de8e8-c3cf-779f-ba09-a1a89c43ac65 Co-authored-by: Amp <amp@ampcode.com>
1 parent a53840c commit 32a889d

3 files changed

Lines changed: 132 additions & 18 deletions

File tree

‎src/index.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,16 @@ <h1 class="name-link">Soumya Snigdha Kundu</h1>
7171
</section>
7272

7373
<section id="about" class="section">
74-
<div id="about-content">
75-
<p>My MSc was with <a href="https://webspace.eecs.qmul.ac.uk/g.slabaugh/" target="_blank">Greg Slabaugh</a> and Vineet Batta at QMUL. Did my UG with <a href="https://www.srmist.edu.in/faculty/dr-s-dhanalakshmi/" target="_blank">Dhanalakshmi Samiappan</a> and Debashis Nandi (NIT-D) at SRM.</p>
76-
<p>I am always exploring London's food scene or breaking down complex rhyme schemes in rap. In school, I represented my country in futsal and debated nationally.</p>
77-
<p>I regularly mentor students (see In2Stem!) and researchers. Please reach out! There are many who have supported my <span class="research-link">research</span>.</p>
78-
</div>
79-
<div id="collaborators" class="collaborators">
80-
<p>In no particular order, Everyone at CAI4CAI: <a href="https://cai4cai.ml/author/lorena-garcia-foncillas-macias/" target="_blank">Lorena Macias</a>, <a href="https://cai4cai.ml/author/aaron-kujawa/" target="_blank">Aaron Kujawa</a>, <a href="https://cai4cai.ml/author/theo-barfoot/" target="_blank">Theo Barfoot</a>, <a href="https://cai4cai.ml/author/marina-ivory/" target="_blank">Marina Ivory</a>, <a href="https://cai4cai.ml/author/navodini-wijethilake/" target="_blank">Navodini Wijethilake</a>, <a href="https://cai4cai.ml/author/meng-wei/" target="_blank">Meng Wei</a>, <a href="https://cai4cai.ml/author/oluwatosin-alabi/" target="_blank">Oluwatosin Alabi</a> and <a href="https://cai4cai.ml/author/martin-huber/" target="_blank">Martin Huber</a>. Along with: <a href="https://www.linkedin.com/in/pooja-ganesh-alpha/" target="_blank">Pooja Ganesh</a> (SEL), <a href="https://hertie.ai/independent-research-groups/team/members/florian-kofler" target="_blank">Florian Kofler</a> (TUM), <a href="https://www.linkedin.com/in/rakshit-naidu-8b3431166/" target="_blank">Rakshit Naidu</a> (GaTech), <a href="https://uk.linkedin.com/in/aarsh-chaube-568b901b2" target="_blank">Aarsh Chaube</a> (Edinburgh), <a href="https://www.linkedin.com/in/mona-furukawa-1043b916a/" target="_blank">Mona Furukawa</a> (Oxford), <a href="https://uk.linkedin.com/in/yang-li-5b94b2175" target="_blank">Yang Li</a> (KCL), and <a href="https://uk.linkedin.com/in/ruoyang-liu-57a321163" target="_blank">Ruoyang Liu</a> (KCL).</p>
81-
<button class="back-btn" id="back-btn">&larr; back</button>
74+
<div class="about-stage">
75+
<div id="about-content" class="about-panel">
76+
<p>My MSc was with <a href="https://webspace.eecs.qmul.ac.uk/g.slabaugh/" target="_blank">Greg Slabaugh</a> and Vineet Batta at QMUL. Did my UG with <a href="https://www.srmist.edu.in/faculty/dr-s-dhanalakshmi/" target="_blank">Dhanalakshmi Samiappan</a> and Debashis Nandi (NIT-D) at SRM.</p>
77+
<p>I am always exploring London's food scene or breaking down complex rhyme schemes in rap. In school, I represented my country in futsal and debated nationally.</p>
78+
<p>I regularly mentor students (see In2Stem!) and researchers. Please reach out! There are many who have supported my <span class="research-link">research</span>.</p>
79+
</div>
80+
<div id="collaborators" class="collaborators about-panel">
81+
<p>In no particular order, Everyone at CAI4CAI: <a href="https://cai4cai.ml/author/lorena-garcia-foncillas-macias/" target="_blank">Lorena Macias</a>, <a href="https://cai4cai.ml/author/aaron-kujawa/" target="_blank">Aaron Kujawa</a>, <a href="https://cai4cai.ml/author/theo-barfoot/" target="_blank">Theo Barfoot</a>, <a href="https://cai4cai.ml/author/marina-ivory/" target="_blank">Marina Ivory</a>, <a href="https://cai4cai.ml/author/navodini-wijethilake/" target="_blank">Navodini Wijethilake</a>, <a href="https://cai4cai.ml/author/meng-wei/" target="_blank">Meng Wei</a>, <a href="https://cai4cai.ml/author/oluwatosin-alabi/" target="_blank">Oluwatosin Alabi</a> and <a href="https://cai4cai.ml/author/martin-huber/" target="_blank">Martin Huber</a>. Along with: <a href="https://www.linkedin.com/in/pooja-ganesh-alpha/" target="_blank">Pooja Ganesh</a> (SEL), <a href="https://hertie.ai/independent-research-groups/team/members/florian-kofler" target="_blank">Florian Kofler</a> (TUM), <a href="https://www.linkedin.com/in/rakshit-naidu-8b3431166/" target="_blank">Rakshit Naidu</a> (GaTech), <a href="https://uk.linkedin.com/in/aarsh-chaube-568b901b2" target="_blank">Aarsh Chaube</a> (Edinburgh), <a href="https://www.linkedin.com/in/mona-furukawa-1043b916a/" target="_blank">Mona Furukawa</a> (Oxford), <a href="https://uk.linkedin.com/in/yang-li-5b94b2175" target="_blank">Yang Li</a> (KCL), and <a href="https://uk.linkedin.com/in/ruoyang-liu-57a321163" target="_blank">Ruoyang Liu</a> (KCL).</p>
82+
<button class="back-btn" id="back-btn">&larr; back</button>
83+
</div>
8284
</div>
8385
</section>
8486

‎src/js/updates.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,14 @@ renderUpdates('all', false);
7979

8080
const nameLink = document.querySelector('.name-link');
8181
const pronunciation = document.getElementById('pronunciation');
82+
const aboutSection = document.getElementById('about');
83+
const aboutContent = document.getElementById('about-content');
84+
const collaborators = document.getElementById('collaborators');
85+
const researchLink = document.querySelector('.research-link');
86+
const backButton = document.getElementById('back-btn');
87+
88+
collaborators.inert = true;
89+
collaborators.setAttribute('aria-hidden', 'true');
8290

8391
// Tab click handlers
8492
let tabSwitching = false;
@@ -114,12 +122,21 @@ nameLink.addEventListener('click', () => {
114122
});
115123

116124
// Research link - toggle collaborators
117-
document.querySelector('.research-link').addEventListener('click', () => {
118-
document.getElementById('about-content').classList.add('hidden');
119-
document.getElementById('collaborators').classList.add('visible');
125+
researchLink.addEventListener('click', () => {
126+
aboutSection.classList.add('showing-collaborators');
127+
aboutContent.classList.add('hidden');
128+
aboutContent.setAttribute('aria-hidden', 'true');
129+
collaborators.classList.add('visible');
130+
collaborators.inert = false;
131+
collaborators.setAttribute('aria-hidden', 'false');
132+
colorizeLinks();
120133
});
121134

122-
document.getElementById('back-btn').addEventListener('click', () => {
123-
document.getElementById('collaborators').classList.remove('visible');
124-
document.getElementById('about-content').classList.remove('hidden');
135+
backButton.addEventListener('click', () => {
136+
aboutSection.classList.remove('showing-collaborators');
137+
collaborators.classList.remove('visible');
138+
collaborators.inert = true;
139+
collaborators.setAttribute('aria-hidden', 'true');
140+
aboutContent.classList.remove('hidden');
141+
aboutContent.setAttribute('aria-hidden', 'false');
125142
});

‎src/styles/components/about.css‎

Lines changed: 99 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,82 @@
11
/* About Section */
2+
#about {
3+
position: relative;
4+
isolation: isolate;
5+
}
6+
7+
#about.section.active,
8+
#about.section.leaving {
9+
display: block;
10+
}
11+
12+
.about-stage {
13+
display: grid;
14+
position: relative;
15+
}
16+
17+
.about-stage::before {
18+
content: '';
19+
position: absolute;
20+
inset: -1.5rem -1rem;
21+
z-index: 0;
22+
border-radius: 1.75rem;
23+
background:
24+
radial-gradient(circle at 12% 18%, rgb(232 160 191 / 18%), transparent 34%),
25+
radial-gradient(circle at 88% 26%, rgb(168 216 234 / 18%), transparent 36%),
26+
radial-gradient(circle at 52% 78%, rgb(181 217 156 / 16%), transparent 40%);
27+
opacity: 0;
28+
transform: scale(0.97);
29+
filter: blur(12px);
30+
transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
31+
pointer-events: none;
32+
}
33+
34+
#about.showing-collaborators .about-stage::before {
35+
opacity: 1;
36+
transform: scale(1);
37+
}
38+
39+
.about-panel {
40+
grid-area: 1 / 1;
41+
position: relative;
42+
z-index: 1;
43+
transition:
44+
opacity 0.4s ease,
45+
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
46+
filter 0.4s ease;
47+
will-change: opacity, transform, filter;
48+
}
49+
50+
#about-content {
51+
opacity: 1;
52+
transform: translateY(0) scale(1);
53+
filter: blur(0);
54+
}
55+
256
#about-content.hidden {
3-
display: none;
57+
opacity: 0;
58+
transform: translateY(-1.2rem) scale(0.985);
59+
filter: blur(10px);
60+
pointer-events: none;
461
}
562

663
.collaborators {
7-
display: none;
64+
opacity: 0;
65+
transform: translateY(1.5rem) scale(0.97);
66+
filter: blur(14px);
67+
pointer-events: none;
868
}
969

1070
.collaborators.visible {
11-
display: block;
71+
opacity: 1;
72+
transform: translateY(0) scale(1);
73+
filter: blur(0);
74+
pointer-events: auto;
1275
}
1376

1477
.research-link {
1578
cursor: pointer;
79+
position: relative;
1680
text-decoration: underline;
1781
text-decoration-color: var(--link);
1882
text-underline-offset: 3px;
@@ -24,18 +88,49 @@
2488
color: var(--link);
2589
}
2690

91+
.research-link::after {
92+
content: '';
93+
position: absolute;
94+
left: 0;
95+
bottom: -0.18rem;
96+
width: 100%;
97+
height: 1px;
98+
background: currentcolor;
99+
transform: scaleX(0);
100+
transform-origin: left;
101+
opacity: 0.8;
102+
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
103+
}
104+
105+
.research-link:hover::after,
106+
#about.showing-collaborators .research-link::after {
107+
transform: scaleX(1);
108+
}
109+
27110
.back-btn {
28111
background: none;
29112
border: none;
30113
color: var(--text-secondary);
114+
display: inline-flex;
115+
align-items: center;
116+
gap: 0.45rem;
31117
font-family: var(--font-mono);
32118
font-size: 0.9rem;
33119
cursor: pointer;
34120
padding: 0;
35121
margin-top: 1rem;
36-
transition: color 0.2s ease;
122+
transform: translateX(0);
123+
transition: color 0.2s ease, transform 0.25s ease;
37124
}
38125

39126
.back-btn:hover {
40127
color: var(--text);
128+
transform: translateX(-0.3rem);
129+
}
130+
131+
@media (max-width: 768px) {
132+
.about-stage::before {
133+
inset: -1rem -0.5rem;
134+
border-radius: 1.25rem;
135+
}
41136
}

0 commit comments

Comments
 (0)
⚡