damien/personal-website
1
0
Fork 0
Code Actions Packages Releases Activity

feat: mobile

Browse Source
This commit is contained in:
Damien 2025-02-25 10:28:03 -05:00
parent 35e036ea60
commit 392c7bace1
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Timeline/TimelineItem.tsx
View File

@ -29,14 +29,14 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
// or top or bottom (for horizontal orientation) // or top or bottom (for horizontal orientation)
const isAlternating = index % 2 === 1; const isAlternating = index % 2 === 1;
// Enhanced glow effects for the marker - using deep dark blue with stronger glow // Enhanced glow effects for the marker - using bright blue with stronger glow
const markerGlowEffects = { const markerGlowEffects = {
boxShadow: isHovered boxShadow: isHovered
? '0 0 15px rgba(10, 25, 50, 0.6), 0 0 30px rgba(10, 25, 50, 0.5)' ? '0 0 15px rgba(79, 209, 255, 0.6), 0 0 30px rgba(79, 209, 255, 0.5)'
: '0 0 10px rgba(10, 25, 50, 0.5), 0 0 20px rgba(10, 25, 50, 0.4)', : '0 0 10px rgba(79, 209, 255, 0.5), 0 0 20px rgba(79, 209, 255, 0.4)',
filter: isHovered filter: isHovered
? 'drop-shadow(0 4px 8px rgba(10, 25, 50, 0.6))' ? 'drop-shadow(0 4px 8px rgba(79, 209, 255, 0.6))'
: 'drop-shadow(0 2px 4px rgba(10, 25, 50, 0.5))', : 'drop-shadow(0 2px 4px rgba(79, 209, 255, 0.5))',
transition: 'all 0.3s ease-in-out', transition: 'all 0.3s ease-in-out',
}; };
@ -46,14 +46,14 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
transition: 'all 0.3s ease-in-out', transition: 'all 0.3s ease-in-out',
}; };
// Enhanced button hover effects - using darker blue glow // Enhanced button hover effects - using bright blue glow
const buttonHoverEffects = { const buttonHoverEffects = {
boxShadow: '0 0 10px rgba(10, 25, 50, 0.5), 0 0 20px rgba(10, 25, 50, 0.4)', boxShadow: '0 0 10px rgba(79, 209, 255, 0.5), 0 0 20px rgba(79, 209, 255, 0.4)',
filter: 'drop-shadow(0 2px 4px rgba(10, 25, 50, 0.5))', filter: 'drop-shadow(0 2px 4px rgba(79, 209, 255, 0.5))',
'&:hover': { '&:hover': {
transform: 'translateX(5px)', transform: 'translateX(5px)',
boxShadow: '0 0 15px rgba(10, 25, 50, 0.6), 0 0 30px rgba(10, 25, 50, 0.5)', boxShadow: '0 0 15px rgba(79, 209, 255, 0.6), 0 0 30px rgba(79, 209, 255, 0.5)',
filter: 'drop-shadow(0 4px 8px rgba(10, 25, 50, 0.6))', filter: 'drop-shadow(0 4px 8px rgba(79, 209, 255, 0.6))',
}, },
transition: 'all 0.3s ease-in-out', transition: 'all 0.3s ease-in-out',
}; };
@ -74,7 +74,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
width: 60, width: 60,
height: 60, height: 60,
borderRadius: '4px', // Square with slightly rounded corners borderRadius: '4px', // Square with slightly rounded corners
backgroundColor: '#0a1932', // Deep dark blue backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -92,7 +92,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
sx={{ sx={{
width: 3, width: 3,
height: '100%', height: '100%',
backgroundColor: '#0a1932', // Deep dark blue backgroundColor: '#4fd1ff', // Bright blue like d4m13n.dev
opacity: 0.5, opacity: 0.5,
mt: 1, mt: 1,
mb: 1, mb: 1,
@ -103,7 +103,7 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
sx={{ sx={{
height: 3, height: 3,
width: '100%', width: '100%',
backgroundColor: '#0a1932', // Deep dark blue backgroundColor: '#4fd1ff', // Bright blue like d4m13n.dev
opacity: 0.5, opacity: 0.5,
ml: 1, ml: 1,
mr: 1, mr: 1,
@ -153,12 +153,12 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
endIcon={<ArrowForwardIcon />} endIcon={<ArrowForwardIcon />}
href={item.actionUrl} href={item.actionUrl}
sx={{ sx={{
backgroundColor: '#0a1932', // Deep dark blue backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev
color: 'white', // White text color: 'white', // White text
...buttonHoverEffects, ...buttonHoverEffects,
'&:hover': { '&:hover': {
...buttonHoverEffects['&:hover'], ...buttonHoverEffects['&:hover'],
backgroundColor: '#152a45', // Slightly lighter on hover backgroundColor: 'rgba(79, 209, 255, 0.9)', // Slightly brighter on hover
} }
}} }}
> >