Skip to content

Commit 50bb952

Browse files
attarchiattarchi
committed
feat: implement horizontal alignment for project and journey cards
- Add consistent card heights with flexbox layout - Set fixed two-line height for titles (role/project names) - Make descriptions flexible to fill available space - Position badges/achievements at bottom of cards - Apply to both Featured Projects and Professional Journey sections
1 parent b46e452 commit 50bb952

2 files changed

Lines changed: 14 additions & 13 deletions

File tree

‎src/components/sections/ProfessionalJourney.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -366,7 +366,7 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
366366
<motion.div
367367
key={milestone.id}
368368
layoutId={`milestone-${milestone.id}`}
369-
className="relative bg-[#ffffff] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] p-4 shadow-md hover:shadow-lg transition-shadow duration-300 rounded-lg"
369+
className="relative bg-[#ffffff] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] p-4 shadow-md hover:shadow-lg transition-shadow duration-300 rounded-lg flex flex-col h-full"
370370
data-testid="milestone-card"
371371
custom={slideDirection}
372372
variants={slideshowItemVariants}
@@ -389,15 +389,15 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
389389
}`}
390390
data-testid="timeline-dot"
391391
/>
392-
<div className="space-y-2">
392+
<div className="flex flex-col h-full">
393393
<div
394394
className="font-mono text-sm text-[#656d76] dark:text-[#8b949e]"
395395
data-testid="milestone-date"
396396
>
397397
{milestone.date}
398398
</div>
399399
<h3
400-
className="font-sans text-lg font-semibold text-[#24292f] dark:text-[#f0f6fc]"
400+
className="font-sans text-lg font-semibold text-[#24292f] dark:text-[#f0f6fc] leading-tight h-12 flex items-start"
401401
data-testid="milestone-role"
402402
>
403403
{milestone.role}
@@ -409,13 +409,13 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
409409
{milestone.company}
410410
</div>
411411
<p
412-
className="font-sans text-sm text-[#656d76] dark:text-[#8b949e]"
412+
className="font-sans text-sm text-[#656d76] dark:text-[#8b949e] flex-grow mt-4"
413413
data-testid="milestone-description"
414414
>
415415
{milestone.description}
416416
</p>
417417
<motion.div
418-
className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#f6f8fa] dark:bg-[#21262d] text-[#24292f] dark:text-[#f0f6fc]"
418+
className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#f6f8fa] dark:bg-[#21262d] text-[#24292f] dark:text-[#f0f6fc] mt-4"
419419
data-testid="achievement-badge"
420420
initial={{ opacity: 0, scale: 0.8 }}
421421
animate={{ opacity: 1, scale: 1 }}
@@ -443,7 +443,7 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
443443
return (
444444
<motion.div
445445
key={milestone.id}
446-
className="relative bg-[#ffffff] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] p-4 shadow-md hover:shadow-lg transition-shadow duration-300 rounded-lg"
446+
className="relative bg-[#ffffff] dark:bg-[#21262d] border border-[#d0d7de] dark:border-[#30363d] p-4 shadow-md hover:shadow-lg transition-shadow duration-300 rounded-lg flex flex-col h-full"
447447
data-testid="milestone-card"
448448
variants={slideVariants}
449449
initial="hidden"
@@ -462,15 +462,15 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
462462
}`}
463463
data-testid="timeline-dot"
464464
/>
465-
<div className="space-y-2">
465+
<div className="flex flex-col h-full">
466466
<div
467467
className="font-mono text-sm text-[#656d76] dark:text-[#8b949e]"
468468
data-testid="milestone-date"
469469
>
470470
{milestone.date}
471471
</div>
472472
<h3
473-
className="font-sans text-lg font-semibold text-[#24292f] dark:text-[#f0f6fc]"
473+
className="font-sans text-lg font-semibold text-[#24292f] dark:text-[#f0f6fc] leading-tight h-12 flex items-start"
474474
data-testid="milestone-role"
475475
>
476476
{milestone.role}
@@ -482,13 +482,13 @@ export function ProfessionalJourney({ milestones = [] }: ProfessionalJourneyProp
482482
{milestone.company}
483483
</div>
484484
<p
485-
className="font-sans text-sm text-[#656d76] dark:text-[#8b949e]"
485+
className="font-sans text-sm text-[#656d76] dark:text-[#8b949e] flex-grow mt-4"
486486
data-testid="milestone-description"
487487
>
488488
{milestone.description}
489489
</p>
490490
<motion.div
491-
className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#f6f8fa] dark:bg-[#21262d] text-[#24292f] dark:text-[#f0f6fc]"
491+
className="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-[#f6f8fa] dark:bg-[#21262d] text-[#24292f] dark:text-[#f0f6fc] mt-4"
492492
data-testid="achievement-badge"
493493
variants={scaleVariants}
494494
initial="hidden"

‎src/components/ui/ProjectCard.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,17 @@ export function ProjectCard({
2424
'p-6',
2525
'hover:shadow-lg transition-all duration-300',
2626
'hover:bg-surface-light dark:hover:bg-surface-dark',
27+
'flex flex-col h-full',
2728
className
2829
)}
2930
{...props}
3031
>
31-
<div className="space-y-4">
32-
<h3 className="font-mono text-xl font-semibold text-text">
32+
<div className="flex flex-col h-full">
33+
<h3 className="font-mono text-xl font-semibold text-text leading-tight h-12 flex items-start">
3334
{title}
3435
</h3>
3536

36-
<p className="font-sans text-base text-muted">
37+
<p className="font-sans text-base text-muted flex-grow mt-4">
3738
{description}
3839
</p>
3940

0 commit comments

Comments
 (0)