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

feat

Browse Source
This commit is contained in:
Damien 2025-02-25 10:14:21 -05:00
parent 139bc201b8
commit 35e036ea60
3 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/ProjectCard.tsx
View File

@ -223,16 +223,16 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
label={tech} label={tech}
size="small" size="small"
sx={{ sx={{
backgroundColor: 'rgba(255, 0, 0, 0.7)', // Red background backgroundColor: 'rgba(128, 0, 255, 0.7)', // Purple background
color: textColor, color: textColor,
height: 24, height: 24,
fontSize: '0.75rem', fontSize: '0.75rem',
boxShadow: '0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3)', // Red glow boxShadow: '0 0 10px rgba(128, 0, 255, 0.25), 0 0 20px rgba(128, 0, 255, 0.15)', // Purple glow (half intensity)
filter: 'drop-shadow(0 2px 4px rgba(255, 0, 0, 0.4))', filter: 'drop-shadow(0 2px 4px rgba(128, 0, 255, 0.2))',
'&:hover': { '&:hover': {
backgroundColor: 'rgba(255, 0, 0, 0.8)', // Slightly darker red on hover backgroundColor: 'rgba(128, 0, 255, 0.8)', // Slightly darker purple on hover
boxShadow: '0 0 15px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4)', // Enhanced red glow boxShadow: '0 0 15px rgba(128, 0, 255, 0.3), 0 0 30px rgba(128, 0, 255, 0.2)', // Enhanced purple glow (half intensity)
filter: 'drop-shadow(0 4px 8px rgba(255, 0, 0, 0.5))', filter: 'drop-shadow(0 4px 8px rgba(128, 0, 255, 0.25))',
}, },
transition: 'all 0.3s ease-in-out', transition: 'all 0.3s ease-in-out',
}} }}

22
src/components/Timeline/MasonryItem.tsx
View File

@ -8,18 +8,18 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
animationDelay = 0 animationDelay = 0
}) => { }) => {
// Define colors and effects // Define colors and effects
const redBackground = 'rgba(244, 67, 54, 0.4)'; // Red background similar to exclamation mark const purpleBackground = 'rgba(128, 0, 255, 0.4)'; // Purple background
const titleColor = '#f44336'; // Material UI red (same as exclamation mark) const titleColor = '#8000ff'; // Purple color
const titleGlow = '0 0 10px rgba(244, 67, 54, 0.35), 0 0 20px rgba(244, 67, 54, 0.25)'; // Same glow as exclamation mark const titleGlow = '0 0 10px rgba(128, 0, 255, 0.175), 0 0 20px rgba(128, 0, 255, 0.125)'; // Purple glow (half intensity)
// Enhanced shadow effects with red glow like the exclamation mark // Enhanced shadow effects with purple glow (half intensity)
const shadowEffects = { const shadowEffects = {
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2), 0 0 10px rgba(244, 67, 54, 0.35), 0 0 20px rgba(244, 67, 54, 0.25)', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2), 0 0 10px rgba(128, 0, 255, 0.175), 0 0 20px rgba(128, 0, 255, 0.125)',
filter: 'drop-shadow(0 2px 4px rgba(244, 67, 54, 0.3))', filter: 'drop-shadow(0 2px 4px rgba(128, 0, 255, 0.15))',
transition: 'all 0.3s ease-in-out', transition: 'all 0.3s ease-in-out',
'&:hover': { '&:hover': {
boxShadow: '0 6px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(244, 67, 54, 0.5), 0 0 30px rgba(244, 67, 54, 0.35)', boxShadow: '0 6px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(128, 0, 255, 0.25), 0 0 30px rgba(128, 0, 255, 0.175)',
filter: 'drop-shadow(0 4px 8px rgba(244, 67, 54, 0.4))', filter: 'drop-shadow(0 4px 8px rgba(128, 0, 255, 0.2))',
transform: 'translateY(-5px)' transform: 'translateY(-5px)'
} }
}; };
@ -33,7 +33,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{ sx={{
height: item.height || 'auto', height: item.height || 'auto',
width: '100%', width: '100%',
backgroundColor: redBackground, backgroundColor: purpleBackground,
...shadowEffects ...shadowEffects
}} }}
> >
@ -55,7 +55,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{ sx={{
height: item.height || 'auto', height: item.height || 'auto',
width: '100%', width: '100%',
backgroundColor: redBackground, backgroundColor: purpleBackground,
...shadowEffects ...shadowEffects
}} }}
> >
@ -81,7 +81,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
p: 2, p: 2,
height: item.height || 'auto', height: item.height || 'auto',
width: '100%', width: '100%',
backgroundColor: redBackground, backgroundColor: purpleBackground,
borderRadius: 1, borderRadius: 1,
...shadowEffects ...shadowEffects
}} }}

10
src/components/TypingAnimation.tsx
View File

@ -120,9 +120,9 @@ const TypingAnimation: React.FC<TypingAnimationProps> = ({
filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))' filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))'
}; };
// Red glow for exclamation mark // Purple glow for exclamation mark
const redGlowEffects = { const purpleGlowEffects = {
textShadow: '0 0 10px rgba(244, 67, 54, 0.35), 0 0 20px rgba(244, 67, 54, 0.25)', textShadow: '0 0 10px rgba(128, 0, 255, 0.175), 0 0 20px rgba(128, 0, 255, 0.125)',
filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))' filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))'
}; };
@ -205,8 +205,8 @@ const TypingAnimation: React.FC<TypingAnimationProps> = ({
<Box <Box
component="span" component="span"
sx={{ sx={{
color: '#f44336', /* Material UI red */ color: '#8000ff', /* Purple */
...redGlowEffects ...purpleGlowEffects
}} }}
> >
{exclamationMark} {exclamationMark}