Skip to content

Commit 8882c8f

Browse files
benthecoderbenthecoder
committed
update about page + some images
1 parent dede9ee commit 8882c8f

File tree

6 files changed

+229
-32
lines changed

6 files changed

+229
-32
lines changed

‎app/about/page.tsx‎

Lines changed: 112 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import Timeline from '../../components/Timeline';
23

34
type ImageOnHoverProps = {
45
text: string;
@@ -27,28 +28,120 @@ const ImageOnHover: React.FC<ImageOnHoverProps> = ({
2728
};
2829

2930
const ChronologyPage = () => {
30-
return (
31-
<div>
32-
<div className='space-y-4'>
33-
<h2 className='text-2xl font-bold'>Life Chronology</h2>
31+
const timelineEvents = [
32+
{
33+
year: '2001',
34+
month: 'october',
35+
day: '28',
36+
description: 'born in KL',
37+
imagePath: '/images/kl.jpg',
38+
altText: 'KL'
39+
},
40+
{
41+
year: '2007',
42+
month: 'january',
43+
imagePath: '/images/munyee.jpeg',
44+
description: 'started primary school @ sjkc mun yee'
45+
},
46+
{
47+
year: '2018',
48+
month: 'november',
49+
description: 'graduated from Wesley Methodist School',
50+
imagePath: '/images/wesley.jpeg',
51+
altText: 'Wesley Methodist School KL'
52+
},
53+
{
54+
year: '2019',
55+
month: 'january',
56+
description: 'started college @ INTI Subang'
57+
},
58+
{
59+
year: '2020',
60+
month: 'april',
61+
description: 'COVID lockdown began'
62+
},
63+
{
64+
year: '2021',
65+
month: 'january',
66+
description: 'started online classes at ISU learning Java'
67+
},
68+
{
69+
year: '2021',
70+
month: 'august',
71+
description: 'flew to iowa with friends'
72+
},
73+
{
74+
year: '2022',
75+
month: 'january',
76+
description: 'started doing hackathons online'
77+
},
78+
{
79+
year: '2022',
80+
month: 'may',
81+
description: 'first summer internship at Tesla'
82+
},
83+
{
84+
year: '2023',
85+
month: 'may',
86+
description: 'second summer internship at Tesla'
87+
},
88+
{
89+
year: '2023',
90+
month: 'september',
91+
description: 'met T in ISU'
92+
},
93+
{
94+
year: '2023',
95+
month: 'december',
96+
description: 'graduated from Iowa State University'
97+
},
98+
{
99+
year: '2024',
100+
month: 'january',
101+
description: 'road trip from Iowa to Seattle'
102+
},
103+
{
104+
year: '2024',
105+
month: 'march',
106+
description: 'had surgery for GERD at iheal'
107+
},
108+
{
109+
year: '2024',
110+
month: 'april',
111+
description: 'bought a Fujifilm x100s'
112+
},
113+
{
114+
year: '2024',
115+
month: 'august',
116+
description: 'started masters in data science at University of San Francisco'
117+
},
118+
{
119+
year: '2024',
120+
month: 'december',
121+
description: 'started working at UCSF Health'
122+
},
123+
{
124+
year: '2025',
125+
month: 'june',
126+
description: 'won an award at AAPM 2025'
127+
},
128+
{
129+
year: '2025',
130+
month: 'july',
131+
description: 'my first big boy job in the US'
132+
}
133+
];
34134

35-
<div className='space-y-2'>
36-
<h3 className='text-xl'>2001</h3>
37-
<ul className='list-disc ml-5'>
38-
<li>
39-
born in{' '}
40-
<ImageOnHover text='KL' imagePath='/images/kl.jpg' altText='KL' />
41-
</li>
42-
</ul>
135+
return (
136+
<div className="min-h-screen">
137+
<div className="max-w-2xl mx-auto px-6 py-12">
138+
<div className="mb-12">
139+
<h1 className="text-2xl font-normal text-[#595857] dark:text-[#F3F3F3] mb-2">
140+
chronology
141+
</h1>
43142
</div>
44143

45-
<div className='space-y-2'>
46-
<h3 className='text-xl'>2007</h3>
47-
<ul className='list-disc ml-5'>
48-
<li>started primary school</li>
49-
<li>discovered a new hobby</li>
50-
</ul>
51-
</div>
144+
<Timeline events={timelineEvents} />
52145
</div>
53146
</div>
54147
);

‎app/globals.css‎

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -196,32 +196,37 @@ mark {
196196
}
197197

198198
.hover-container {
199-
display: inline-block; /* Only take up necessary space */
200-
position: relative; /* Context for absolute positioning */
199+
display: inline-block;
200+
position: relative;
201201
}
202202

203203
.image-container {
204-
position: fixed; /* Fixed to the viewport */
205-
top: 50%;
204+
position: absolute;
206205
left: 50%;
207-
transform: translate(-50%, -50%);
208-
width: 90vw;
209-
height: 80vh;
210-
display: none; /* Initially hidden */
206+
transform: translateX(-50%);
207+
bottom: calc(100% + 12px);
208+
display: none;
211209
justify-content: center;
212210
align-items: center;
213-
pointer-events: none; /* Ignore pointer events when not visible */
211+
pointer-events: none;
212+
z-index: 50;
214213
}
215214

216215
.image-hover {
217-
max-width: 100%;
218-
max-height: 100%;
216+
max-width: 500px;
217+
max-height: 350px;
219218
object-fit: contain;
220-
pointer-events: auto; /* Reactivate pointer events for the image */
219+
pointer-events: auto;
220+
border-radius: 0.125rem;
221+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
222+
}
223+
224+
.dark .image-hover {
225+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
221226
}
222227

223228
.hover-container:hover .image-container {
224-
display: flex; /* Show when the container is hovered */
229+
display: flex;
225230
}
226231

227232
@keyframes loading-bar {

‎components/Timeline.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React from 'react';
2+
3+
type TimelineEvent = {
4+
year: string;
5+
month?: string;
6+
day?: string;
7+
description: string;
8+
imagePath?: string;
9+
altText?: string;
10+
};
11+
12+
type TimelineProps = {
13+
events: TimelineEvent[];
14+
};
15+
16+
const Timeline: React.FC<TimelineProps> = ({ events }) => {
17+
// Group events by year
18+
const groupedEvents = events.reduce((acc, event) => {
19+
if (!acc[event.year]) {
20+
acc[event.year] = [];
21+
}
22+
acc[event.year].push(event);
23+
return acc;
24+
}, {} as Record<string, TimelineEvent[]>);
25+
26+
return (
27+
<div className="space-y-10">
28+
{Object.entries(groupedEvents).map(([year, yearEvents]) => (
29+
<div key={year} className="group/year">
30+
<div className="flex gap-6 text-[#595857] dark:text-[#F3F3F3]">
31+
<div className="min-w-[70px] pt-0.5">
32+
<span className="text-sm opacity-50 tracking-wide transition-opacity group-hover/year:opacity-70">
33+
{year}
34+
</span>
35+
</div>
36+
<div className="flex-1 space-y-4 -mt-0.5">
37+
{yearEvents.map((event, index) => {
38+
const dateDetail = event.day && event.month
39+
? `${event.month} ${event.day}`
40+
: event.month
41+
? event.month
42+
: null;
43+
44+
return (
45+
<div key={index} className="flex gap-4 group/event">
46+
{dateDetail ? (
47+
<>
48+
<div className="min-w-[90px] pt-0.5">
49+
<span className="text-sm opacity-30 transition-opacity group-hover/event:opacity-50">
50+
{dateDetail}
51+
</span>
52+
</div>
53+
<div className="flex-1 leading-relaxed">
54+
{event.imagePath ? (
55+
<span className="hover-container">
56+
<span className="relative group">
57+
<span className="underline decoration-dotted cursor-pointer hover:decoration-solid decoration-[#E5E4E6] dark:decoration-[#91989C] underline-offset-4">
58+
{event.description}
59+
</span>
60+
<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">
61+
<img src={event.imagePath} alt={event.altText || event.description} className="image-hover" />
62+
</div>
63+
</span>
64+
</span>
65+
) : (
66+
event.description
67+
)}
68+
</div>
69+
</>
70+
) : (
71+
<div className="flex-1 leading-relaxed">
72+
{event.imagePath ? (
73+
<span className="hover-container">
74+
<span className="relative group">
75+
<span className="underline decoration-dotted cursor-pointer hover:decoration-solid decoration-[#E5E4E6] dark:decoration-[#91989C] underline-offset-4">
76+
{event.description}
77+
</span>
78+
<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">
79+
<img src={event.imagePath} alt={event.altText || event.description} className="image-hover" />
80+
</div>
81+
</span>
82+
</span>
83+
) : (
84+
event.description
85+
)}
86+
</div>
87+
)}
88+
</div>
89+
);
90+
})}
91+
</div>
92+
</div>
93+
</div>
94+
))}
95+
</div>
96+
);
97+
};
98+
99+
export default Timeline;

‎public/images/iowaroom.jpeg‎

380 KB
Loading

‎public/images/munyee.jpeg‎

295 KB
Loading

‎public/images/wesley.jpeg‎

53.5 KB
Loading

0 commit comments

Comments
 (0)