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}
size="small"
sx={{
backgroundColor: 'rgba(255, 0, 0, 0.7)', // Red background
backgroundColor: 'rgba(128, 0, 255, 0.7)', // Purple background
color: textColor,
height: 24,
fontSize: '0.75rem',
boxShadow: '0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3)', // Red glow
filter: 'drop-shadow(0 2px 4px rgba(255, 0, 0, 0.4))',
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(128, 0, 255, 0.2))',
'&:hover': {
backgroundColor: 'rgba(255, 0, 0, 0.8)', // Slightly darker red on hover
boxShadow: '0 0 15px rgba(255, 0, 0, 0.6), 0 0 30px rgba(255, 0, 0, 0.4)', // Enhanced red glow
filter: 'drop-shadow(0 4px 8px rgba(255, 0, 0, 0.5))',
backgroundColor: 'rgba(128, 0, 255, 0.8)', // Slightly darker purple on hover
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(128, 0, 255, 0.25))',
},
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
}) => {
// Define colors and effects
const redBackground = 'rgba(244, 67, 54, 0.4)'; // Red background similar to exclamation mark
const titleColor = '#f44336'; // Material UI red (same as exclamation mark)
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 purpleBackground = 'rgba(128, 0, 255, 0.4)'; // Purple background
const titleColor = '#8000ff'; // Purple color
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 = {
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)',
filter: 'drop-shadow(0 2px 4px rgba(244, 67, 54, 0.3))',
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(128, 0, 255, 0.15))',
transition: 'all 0.3s ease-in-out',
'&: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)',
filter: 'drop-shadow(0 4px 8px rgba(244, 67, 54, 0.4))',
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(128, 0, 255, 0.2))',
transform: 'translateY(-5px)'
}
};
@ -33,7 +33,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{
height: item.height || 'auto',
width: '100%',
backgroundColor: redBackground,
backgroundColor: purpleBackground,
...shadowEffects
}}
>
@ -55,7 +55,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{
height: item.height || 'auto',
width: '100%',
backgroundColor: redBackground,
backgroundColor: purpleBackground,
...shadowEffects
}}
>
@ -81,7 +81,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
p: 2,
height: item.height || 'auto',
width: '100%',
backgroundColor: redBackground,
backgroundColor: purpleBackground,
borderRadius: 1,
...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))'
};
// Red glow for exclamation mark
const redGlowEffects = {
textShadow: '0 0 10px rgba(244, 67, 54, 0.35), 0 0 20px rgba(244, 67, 54, 0.25)',
// Purple glow for exclamation mark
const purpleGlowEffects = {
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))'
};
@ -205,8 +205,8 @@ const TypingAnimation: React.FC<TypingAnimationProps> = ({
<Box
component="span"
sx={{
color: '#f44336', /* Material UI red */
...redGlowEffects
color: '#8000ff', /* Purple */
...purpleGlowEffects
}}
>
{exclamationMark}