From 35e036ea6001a70a5aa67cd4565882e08f1f8616 Mon Sep 17 00:00:00 2001
From: Damien <damienostler1@outlook.com>
Date: Tue, 25 Feb 2025 10:14:21 -0500
Subject: [PATCH] feat

---
 src/components/ProjectCard.tsx          | 12 ++++++------
 src/components/Timeline/MasonryItem.tsx | 22 +++++++++++-----------
 src/components/TypingAnimation.tsx      | 10 +++++-----
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
index c8bb753..649f4ba 100644
--- a/src/components/ProjectCard.tsx
+++ b/src/components/ProjectCard.tsx
@@ -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',
               }}
diff --git a/src/components/Timeline/MasonryItem.tsx b/src/components/Timeline/MasonryItem.tsx
index 160ff89..de50e05 100644
--- a/src/components/Timeline/MasonryItem.tsx
+++ b/src/components/Timeline/MasonryItem.tsx
@@ -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
             }}
diff --git a/src/components/TypingAnimation.tsx b/src/components/TypingAnimation.tsx
index d037577..5b16360 100644
--- a/src/components/TypingAnimation.tsx
+++ b/src/components/TypingAnimation.tsx
@@ -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}