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

feat: gradiant background
All checks were successful
Build and Push Docker Image to Gitea Registry / build-and-push (push) Successful in 14m19s
Details

Browse Source
This commit is contained in:
Damien 2025-02-28 06:44:42 -05:00
parent 47757ff5ef
commit 52fa02b40e
3 changed files with 74 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@ -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."

35
src/components/ChatWindow.tsx
View File

@ -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>

44
src/components/GradientBackground.tsx Normal file
View File

@ -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;