Skip to content

Commit 79efc8c

Browse files
benthecoderbenthecoder
committed
update about page
1 parent 123bd10 commit 79efc8c

19 files changed

+295
-68
lines changed

‎app/about/page.tsx‎

Lines changed: 140 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,14 @@ const ImageOnHover: React.FC<ImageOnHoverProps> = ({
1313
altText,
1414
}) => {
1515
return (
16-
<div className='hover-container'>
17-
{' '}
18-
<span className='relative group'>
19-
<span className='underline decoration-dotted cursor-pointer hover:decoration-solid'>
20-
{text}
21-
</span>
22-
<div className='absolute hidden group-hover:block -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 z-10 image-container'>
23-
<img src={imagePath} alt={altText} className='image-hover' />
24-
</div>
16+
<span className='relative group inline-block'>
17+
<span className='underline decoration-dotted cursor-pointer hover:decoration-solid'>
18+
{text}
2519
</span>
26-
</div>
20+
<div className='absolute hidden group-hover:flex left-1/2 -translate-x-1/2 bottom-full pb-2 z-50 pointer-events-none'>
21+
<img src={imagePath} alt={altText} className='image-hover' />
22+
</div>
23+
</span>
2724
);
2825
};
2926

@@ -34,21 +31,34 @@ const ChronologyPage = () => {
3431
month: 'october',
3532
day: '28',
3633
description: 'born in KL',
37-
imagePath: '/images/kl.jpg',
38-
altText: 'KL'
34+
imageLinks: [
35+
{ text: 'KL', imagePath: '/images/kl.jpg', altText: 'KL' }
36+
]
37+
},
38+
{
39+
year: '2011',
40+
month: 'november',
41+
description: 'got obsessed with ping pong',
42+
imageLinks: [
43+
{ text: 'ping pong', imagePath: '/images/pingpong.jpeg', altText: 'sjkc mun yee' }
44+
]
3945
},
4046
{
41-
year: '2007',
47+
year: '2013',
4248
month: 'january',
43-
imagePath: '/images/munyee.jpeg',
44-
description: 'started primary school @ sjkc mun yee'
49+
description: 'graduated from sjkc mun yee',
50+
imageLinks: [
51+
{ text: 'graduated', imagePath: '/images/primarygrad.jpeg', altText: 'graduate' },
52+
{ text: 'sjkc mun yee', imagePath: '/images/munyee.jpeg', altText: 'sjkc mun yee' }
53+
]
4554
},
4655
{
4756
year: '2018',
4857
month: 'november',
49-
description: 'graduated from Wesley Methodist School',
50-
imagePath: '/images/wesley.jpeg',
51-
altText: 'Wesley Methodist School KL'
58+
description: 'graduated from wmskl(i)',
59+
imageLinks: [
60+
{ text: 'wmskl(i)', imagePath: '/images/wesley.jpeg', altText: 'Wesley Methodist School KL' }
61+
]
5262
},
5363
{
5464
year: '2019',
@@ -58,12 +68,12 @@ const ChronologyPage = () => {
5868
{
5969
year: '2020',
6070
month: 'april',
61-
description: 'COVID lockdown began'
71+
description: 'covid lockdown'
6272
},
6373
{
6474
year: '2021',
6575
month: 'january',
66-
description: 'started online classes at ISU learning Java'
76+
description: 'started online classes with isu'
6777
},
6878
{
6979
year: '2021',
@@ -78,17 +88,66 @@ const ChronologyPage = () => {
7888
{
7989
year: '2022',
8090
month: 'may',
81-
description: 'first summer internship at Tesla'
91+
day: '19',
92+
description: 'bought a bike',
93+
imageLinks: [
94+
{ text: 'bike', imagePath: '/images/mybike.jpg', altText: 'my bike' }
95+
]
96+
},
97+
{
98+
year: '2022',
99+
month: 'may',
100+
day: '23',
101+
description: 'joined Tesla',
102+
imageLinks: [
103+
{ text: 'Tesla', imagePath: '/images/tesla2022.jpg', altText: 'Tesla 2022' }
104+
]
105+
},
106+
{
107+
year: '2022',
108+
month: 'june',
109+
day: '13',
110+
description: 'got high',
111+
imageLinks: [
112+
{ text: 'high', imagePath: '/images/gothigh.jpg', altText: 'got high' }
113+
]
114+
},
115+
{
116+
year: '2023',
117+
month: 'april',
118+
day: '14',
119+
description: 'first poster presentation',
120+
imageLinks: [
121+
{ text: 'poster presentation', imagePath: '/images/weppr.jpeg', altText: 'University of Wisconsin statistics research presentation' }
122+
]
82123
},
83124
{
84125
year: '2023',
85126
month: 'may',
86127
description: 'second summer internship at Tesla'
87128
},
129+
{
130+
year: '2023',
131+
month: 'august',
132+
day: '29',
133+
description: 'met T'
134+
},
88135
{
89136
year: '2023',
90137
month: 'september',
91-
description: 'met T in ISU'
138+
description: 'visited the 6ix',
139+
imageLinks: [
140+
{ text: '6ix', imagePath: '/images/torontopic.jpeg', altText: 'toronto' }
141+
]
142+
},
143+
{
144+
year: '2023',
145+
month: 'november',
146+
day: '13',
147+
description: 'first football game',
148+
imageLinks: [
149+
{ text: 'football game', imagePath: '/images/isugame.jpeg', altText: 'ISU football game' }
150+
]
92151
},
93152
{
94153
year: '2023',
@@ -98,37 +157,87 @@ const ChronologyPage = () => {
98157
{
99158
year: '2024',
100159
month: 'january',
101-
description: 'road trip from Iowa to Seattle'
160+
description: 'saw the wave art at seattle museum',
161+
imageLinks: [
162+
{ text: 'wave art', imagePath: '/images/waveseattle.jpeg', altText: 'wave art' }
163+
]
102164
},
103165
{
104166
year: '2024',
105167
month: 'march',
106-
description: 'had surgery for GERD at iheal'
168+
description: 'had surgery for GERD at iheal',
169+
imageLinks: [
170+
{ text: 'surgery', imagePath: '/images/surgery.jpeg', altText: 'iheal' }
171+
]
107172
},
108173
{
109174
year: '2024',
110175
month: 'april',
111-
description: 'bought a Fujifilm x100s'
176+
description: 'bought a third hand Fujifilm x100s',
177+
imageLinks: [
178+
{ text: 'Fujifilm x100s', imagePath: '/images/x100s.jpeg', altText: 'Fujifilm x100s' }
179+
]
112180
},
113181
{
114182
year: '2024',
115183
month: 'august',
116-
description: 'started masters in data science at University of San Francisco'
184+
description: 'moved to sf for masters @ usf',
185+
imageLinks: [
186+
{ text: 'sf', imagePath: '/images/transamerica.jpeg', altText: 'USF' }
187+
]
117188
},
118189
{
119190
year: '2024',
120191
month: 'december',
121-
description: 'started working at UCSF Health'
192+
description: 'started researching @ ucsf',
193+
imageLinks: [
194+
{ text: 'ucsf', imagePath: '/images/ucsf.jpeg', altText: 'UCSF Health' }
195+
]
122196
},
123197
{
124198
year: '2025',
125-
month: 'june',
126-
description: 'won an award at AAPM 2025'
199+
month: 'march',
200+
day: '12',
201+
description: 'joined contrary research fellowship',
202+
},
203+
{
204+
year: '2025',
205+
month: 'march',
206+
day: '15',
207+
description: 'organized a hackathon for chinatown',
208+
},
209+
{
210+
year: '2025',
211+
month: 'april',
212+
day: '16',
213+
description: 'volunteered at golden gate park',
214+
imageLinks: [
215+
{ text: 'golden gate park', imagePath: '/images/volunteerggp.jpeg', altText: 'volunteering at golden gate park' }
216+
]
217+
},
218+
{
219+
year: '2025',
220+
month: 'may',
221+
day: '16',
222+
description: 'grad from usf',
223+
imageLinks: [
224+
{ text: 'grad', imagePath: '/images/grad.jpeg', altText: 'AAPM 2025' }
225+
]
226+
},
227+
{
228+
year: '2025',
229+
month: 'july',
230+
day: '27',
231+
description: 'presented @ aapm 2025',
232+
imageLinks: [
233+
{ text: 'aapm 2025', imagePath: '/images/aapm.jpeg', altText: 'AAPM 2025' }
234+
]
127235
},
128236
{
129237
year: '2025',
130238
month: 'july',
131-
description: 'my first big boy job in the US'
239+
day: '30',
240+
description: 'first day @ oe'
132241
}
133242
];
134243

@@ -137,7 +246,7 @@ const ChronologyPage = () => {
137246
<div className="max-w-2xl mx-auto px-6 py-12">
138247
<div className="mb-12">
139248
<h1 className="text-2xl font-normal text-[#595857] dark:text-[#F3F3F3] mb-2">
140-
chronology
249+
my life made up of small, meaningful moments
141250
</h1>
142251
</div>
143252

‎app/globals.css‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -213,22 +213,30 @@ mark {
213213
}
214214

215215
.image-hover {
216-
max-width: 500px;
217-
max-height: 350px;
216+
max-width: min(1200px, 90vw);
217+
max-height: min(800px, 80vh);
218218
object-fit: contain;
219-
pointer-events: auto;
219+
pointer-events: none;
220220
border-radius: 0.125rem;
221221
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
222+
animation: fadeInImage 200ms ease-out;
223+
transform-origin: center;
222224
}
223225

224226
.dark .image-hover {
225227
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
226228
}
227229

228-
.hover-container:hover .image-container {
230+
.group:hover .image-container {
229231
display: flex;
230232
}
231233

234+
@media (hover: hover) {
235+
.group {
236+
transition: none;
237+
}
238+
}
239+
232240
@keyframes loading-bar {
233241
0% {
234242
transform: translateX(-100%);
@@ -244,3 +252,14 @@ mark {
244252
.animate-loading-bar {
245253
animation: loading-bar 1.5s ease-in-out infinite;
246254
}
255+
256+
@keyframes fadeInImage {
257+
from {
258+
opacity: 0;
259+
transform: scale(0.96);
260+
}
261+
to {
262+
opacity: 1;
263+
transform: scale(1);
264+
}
265+
}

0 commit comments

Comments
 (0)