1- import { Badge } from "./ui/badge" ;
21import { motion } from "motion/react" ;
32import { ImageWithFallback } from "./figma/ImageWithFallback" ;
43
54interface Position {
6- company : string ;
7- company_url : string ;
8- companyLogo : string ;
5+ organization : {
6+ name : string ,
7+ url : string ,
8+ logo : string
9+ } ,
910 position : string ;
10- date_start : string ;
11- date_end ?: string ;
12- location : string ;
11+ period : {
12+ start : string ,
13+ end ?: string
14+ }
15+ location : {
16+ city : string
17+ country : string
18+ }
1319 description : string ;
14- achievements : string [ ] ;
20+ responsibilities : string [ ] ;
1521 technologies : string [ ] ;
1622}
1723
@@ -23,10 +29,8 @@ interface ExperienceProps {
2329 }
2430}
2531
26-
27- // Function to extract and format start date from duration string
2832function formatTimelineDate ( position : Position ) : { year : number ; month : string } {
29- const start_date_obj = new Date ( position . date_start ) ;
33+ const start_date_obj = new Date ( position . period . start ) ;
3034 const month_index = start_date_obj . getMonth ( ) ;
3135
3236 const month_lists = [
@@ -157,16 +161,13 @@ export function Experience({data}: ExperienceProps) {
157161 viewport = { { once : true } }
158162 transition = { { duration : 0.6 } }
159163 >
160- < Badge variant = "outline" className = "mb-4" > Experience</ Badge >
161164 < h2 className = "mb-6" > { data . subtitle } </ h2 >
162165 < p className = "text-lg text-muted-foreground max-w-3xl mx-auto" >
163166 { data . description }
164167 </ p >
165168 </ motion . div >
166169
167- { /* Timeline Container */ }
168170 < div className = "relative" >
169- { /* Vertical Timeline Line - Hidden on mobile */ }
170171 < div className = "absolute left-8 top-0 bottom-0 w-0.5 bg-border overflow-hidden hidden md:block" >
171172 < motion . div
172173 className = "w-full bg-gradient-to-b from-primary via-primary to-primary/60"
@@ -177,7 +178,6 @@ export function Experience({data}: ExperienceProps) {
177178 />
178179 </ div >
179180
180- { /* Timeline Items */ }
181181 < motion . div
182182 className = "space-y-8"
183183 variants = { containerVariants }
@@ -194,7 +194,6 @@ export function Experience({data}: ExperienceProps) {
194194 variants = { cardVariants }
195195 className = "relative pl-0 md:pl-24"
196196 >
197- { /* Timeline Date - Hidden on mobile */ }
198197 < motion . div
199198 className = "absolute left-0 top-6 flex flex-col items-center text-center min-w-16 hidden md:flex"
200199 variants = { timelineDotVariants }
@@ -207,19 +206,13 @@ export function Experience({data}: ExperienceProps) {
207206 className = "text-sm font-semibold text-foreground bg-background px-2 py-1 rounded" >
208207 { timelineDate . month }
209208 </ div >
210- { /* Connection dot */ }
211- < div
212- className = "w-3 h-3 bg-primary rounded-full border-2 border-background shadow-sm mt-2" />
213209 </ motion . div >
214210
215- { /* Experience Card */ }
216211 < div
217212 className = "bg-white border border-gray-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-all duration-300 relative" >
218- { /* Card Connector Line */ }
219213 < div
220214 className = "absolute left-0 top-9 w-6 h-0.5 bg-border -translate-x-full hidden md:block" > </ div >
221215
222- { /* Location in top right */ }
223216 < motion . div
224217 className = "absolute top-4 right-4"
225218 initial = { { opacity : 0 , x : 20 } }
@@ -228,12 +221,11 @@ export function Experience({data}: ExperienceProps) {
228221 transition = { { duration : 0.4 , delay : 0.3 } }
229222 >
230223 < p className = "text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded-md" >
231- { exp . location }
224+ { exp . location . city } , { exp . location . country }
232225 </ p >
233226 </ motion . div >
234227
235- { /* Header with company logo and title */ }
236- < div className = "flex items-start gap-4 mb-4 pr-20" >
228+ < div className = "flex items-start gap-4 pr-20" >
237229 < motion . div
238230 className = "w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0 border-2 border-gray-200 overflow-hidden bg-white"
239231 initial = { { opacity : 0 , scale : 0.5 , rotate : - 10 } }
@@ -242,8 +234,8 @@ export function Experience({data}: ExperienceProps) {
242234 transition = { { duration : 0.4 , delay : 0.2 } }
243235 >
244236 < ImageWithFallback
245- src = { exp . companyLogo }
246- alt = { `${ exp . company } }
237+ src = { exp . organization . logo }
238+ alt = { `${ exp . organization . name } }
247239 className = "w-full h-full object-cover"
248240 />
249241 </ motion . div >
@@ -253,46 +245,39 @@ export function Experience({data}: ExperienceProps) {
253245 { exp . position }
254246 </ h3 >
255247 < p className = "text-lg text-primary font-medium mb-2" >
256- < a href = { exp . company_url } target = "_blank" >
257- { exp . company }
248+ < a href = { exp . organization . url } target = "_blank" >
249+ { exp . organization . name }
258250 </ a >
259251 </ p >
260252 </ div >
261253 </ div >
262254
263- { /* Description and achievements as bullet points */ }
264255 < motion . div
265256 className = "space-y-3 mb-6"
266257 variants = { bulletsContainerVariants }
267258 initial = "hidden"
268259 whileInView = "visible"
269260 viewport = { { once : true } }
270261 >
271- { /* Main description as first bullet */ }
272262 < motion . div
273263 className = "flex items-start gap-3"
274264 variants = { bulletVariants }
275265 >
276- < div
277- className = "w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0" > </ div >
278- < p className = "text-gray-700 leading-relaxed" > { exp . description } </ p >
279266 </ motion . div >
280267
281- { /* Achievements as additional bullets */ }
282- { exp . achievements . map ( ( achievement , achIndex ) => (
268+ { exp . responsibilities . map ( ( responsibility , responsibility_index ) => (
283269 < motion . div
284- key = { achIndex }
270+ key = { responsibility_index }
285271 className = "flex items-start gap-3"
286272 variants = { bulletVariants }
287273 >
288274 < div
289275 className = "w-2 h-2 bg-primary/70 rounded-full mt-2 flex-shrink-0" > </ div >
290- < p className = "text-gray-700 leading-relaxed" > { achievement } </ p >
276+ < p className = "text-gray-700 leading-relaxed" > { responsibility } </ p >
291277 </ motion . div >
292278 ) ) }
293279 </ motion . div >
294280
295- { /* Technology badges */ }
296281 < motion . div
297282 className = "flex flex-wrap gap-2"
298283 variants = { badgeContainerVariants }
@@ -315,15 +300,6 @@ export function Experience({data}: ExperienceProps) {
315300 ) ;
316301 } ) }
317302 </ motion . div >
318-
319- { /* Timeline End Marker - Hidden on mobile */ }
320- < motion . div
321- className = "absolute left-6 -bottom-2 w-4 h-4 bg-gradient-to-br from-primary/60 to-primary/30 rounded-full border-4 border-background shadow-sm hidden md:block"
322- initial = { { scale : 0 , opacity : 0 } }
323- whileInView = { { scale : 1 , opacity : 1 } }
324- viewport = { { once : true } }
325- transition = { { duration : 0.4 , delay : 1.5 } }
326- />
327303 </ div >
328304 </ div >
329305 </ section >
0 commit comments