From 52fa02b40ecbcc3c00f8afdb7d415193a7c6b23b Mon Sep 17 00:00:00 2001
From: Damien <damienostler1@outlook.com>
Date: Fri, 28 Feb 2025 06:44:42 -0500
Subject: [PATCH] feat: gradiant background

---
 src/app/page.tsx                      |  2 ++
 src/components/ChatWindow.tsx         | 35 ++++++++++++++++-----
 src/components/GradientBackground.tsx | 44 +++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 src/components/GradientBackground.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cbb98f9..c1b34c4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,6 +16,7 @@ import software_projects from '@/data/software_projects';
 import game_projects from '@/data/game_projects';
 import timelineData from '@/data/timeline';
 import FloatingChatIcon from '@/components/ChatWindow';
+import GradientBackground from '../components/GradientBackground';
 
 export default function HomePage() {
   const [showContent, setShowContent] = useState(false);
@@ -27,6 +28,7 @@ export default function HomePage() {
 
   return (
     <>
+      <GradientBackground />
       {!showContent && (
         <TypingAnimation
           titleText="My name is d4m13n."
diff --git a/src/components/ChatWindow.tsx b/src/components/ChatWindow.tsx
index 1032cd6..c7e42e3 100644
--- a/src/components/ChatWindow.tsx
+++ b/src/components/ChatWindow.tsx
@@ -1,5 +1,7 @@
-import React, { useState } from 'react'; import { Box, IconButton, Drawer } from '@mui/material';
-import ChatIcon from '@mui/icons-material/Chat'; import CloseIcon from '@mui/icons-material/Close';
+import React, { useState } from 'react';
+import { Box, IconButton, Drawer } from '@mui/material';
+import ChatIcon from '@mui/icons-material/Chat';
+import CloseIcon from '@mui/icons-material/Close';
 
 const FloatingChatIcon: React.FC = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -9,15 +11,34 @@ const FloatingChatIcon: React.FC = () => {
     
     return (
         <>      
-            <Box sx={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000, }} >       
-                <IconButton onClick={toggleDrawer} sx={{ backgroundColor: 'primary.main', color: 'white', '&:hover': { backgroundColor: 'primary.dark', }, }} >         
-                <ChatIcon />
+            <Box sx={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000 }} >       
+                <IconButton 
+                    onClick={toggleDrawer} 
+                    sx={{ 
+                        backgroundColor: 'transparent',
+                        color: '#4fd1ff',
+                        textShadow: '0 0 10px rgba(79, 209, 255, 0.15), 0 0 20px rgba(79, 209, 255, 0.1)',
+                        filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))',
+                        transition: 'all 0.3s ease-in-out',
+                        padding: '16px', // Increased padding around the icon
+                        '&:hover': {
+                            backgroundColor: 'transparent',
+                            color: '#4fd1ff',
+                            textShadow: '0 0 15px rgba(79, 209, 255, 0.3), 0 0 30px rgba(79, 209, 255, 0.2)',
+                            transform: 'scale(1.1)',
+                        },
+                        '& .MuiSvgIcon-root': {
+                            fontSize: '4rem', // Makes the icon 4x larger
+                        },
+                    }}
+                >         
+                    <ChatIcon />
                 </IconButton>      
             </Box>
             <Drawer anchor="right" open={isOpen} onClose={toggleDrawer} >       
-                <Box sx={{ width: 250, p: 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-end', }} >
+                <Box sx={{ width: '100%', p: 2, display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }} >
                     <IconButton onClick={toggleDrawer}>            
-                    <CloseIcon />
+                        <CloseIcon />
                     </IconButton>     
                 </Box>     
             </Drawer>
diff --git a/src/components/GradientBackground.tsx b/src/components/GradientBackground.tsx
new file mode 100644
index 0000000..720190f
--- /dev/null
+++ b/src/components/GradientBackground.tsx
@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '@mui/material';
+
+const GradientBackground: React.FC = () => {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      setMousePosition({
+        x: (e.clientX / window.innerWidth) * 100,
+        y: (e.clientY / window.innerHeight) * 100,
+      });
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: -1,
+        backgroundColor: '#121212', // Dark background
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, #1E1E1E 0%, #121212 50%)`,
+          transition: 'background 0.3s ease',
+        },
+      }}
+    />
+  );
+};
+
+export default GradientBackground;
\ No newline at end of file