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

feat: mobile

Browse Source
This commit is contained in:
Damien 2025-02-25 10:28:07 -05:00
parent 392c7bace1
commit d24cce4a78
5 changed files with 41 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/page.tsx
View File

@ -121,8 +121,12 @@ export default function HomePage() {
</Box> </Box>
} /> } />
<Tab label="Resume" /> <Tab label="Resume" />
<Tab label="About" /> <Tab
<Tab label="Contact" /> label="Contact"
sx={{
display: { xs: 'none', sm: 'flex' }
}}
/>
</Tabs> </Tabs>
</Box> </Box>
@ -160,7 +164,7 @@ export default function HomePage() {
</Box> </Box>
)} )}
{activeTab === 4 && ( {activeTab === 3 && (
<Box sx={{ width: '100%', maxWidth: 800, mx: 'auto', p: 2 }}> <Box sx={{ width: '100%', maxWidth: 800, mx: 'auto', p: 2 }}>
<Typography variant="h5" component="h2" gutterBottom sx={{ mb: 2 }}> <Typography variant="h5" component="h2" gutterBottom sx={{ mb: 2 }}>
Contact Contact

17
src/components/ProjectCard.tsx
View File

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

56
src/components/Timeline/MasonryGrid.tsx
View File

@ -39,58 +39,24 @@ const MasonryGrid: React.FC<MasonryGridProps> = ({
} }
}, [isVisible, items.length, animationDelay]); }, [isVisible, items.length, animationDelay]);
// Determine column count based on screen size // Filter to only show image items
const getColumnCount = () => { const imageItems = items.filter(item => item.type === 'image');
if (isMobile) return 1;
if (isTablet) return 2;
return 3;
};
// Distribute items into columns for masonry layout return (
const getColumns = () => { <Box
const columnCount = getColumnCount(); sx={{
const columns: React.ReactNode[][] = Array.from({ length: columnCount }, () => []); width: '100%',
mt: 2,
items.forEach((item, index) => { mb: 2
const columnIndex = index % columnCount; }}
columns[columnIndex].push( >
{imageItems.map((item, index) => (
<MasonryItem <MasonryItem
key={item.id} key={item.id}
item={item} item={item}
isVisible={visibleItems[index]} isVisible={visibleItems[index]}
animationDelay={0} // Already handled by parent staggering animationDelay={0} // Already handled by parent staggering
/> />
);
});
return columns;
};
const columns = getColumns();
const columnCount = getColumnCount();
return (
<Box
sx={{
display: 'flex',
flexDirection: 'row',
gap: 2,
width: '100%',
mt: 2,
mb: 2
}}
>
{columns.map((column, index) => (
<Box
key={`column-${index}`}
sx={{
display: 'flex',
flexDirection: 'column',
width: `calc(${100 / columnCount}% - ${(columnCount - 1) * 8 / columnCount}px)`,
}}
>
{column}
</Box>
))} ))}
</Box> </Box>
); );

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 purpleBackground = 'rgba(128, 0, 255, 0.4)'; // Purple background const blueBackground = 'rgba(79, 209, 255, 0.4)'; // Blue background
const titleColor = '#8000ff'; // Purple color const titleColor = '#4fd1ff'; // Blue 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) const titleGlow = '0 0 10px rgba(79, 209, 255, 0.5), 0 0 20px rgba(79, 209, 255, 0.3)'; // Blue glow
// Enhanced shadow effects with purple glow (half intensity) // Enhanced shadow effects with blue glow
const shadowEffects = { const shadowEffects = {
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)', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2), 0 0 10px rgba(79, 209, 255, 0.5), 0 0 20px rgba(79, 209, 255, 0.3)',
filter: 'drop-shadow(0 2px 4px rgba(128, 0, 255, 0.15))', filter: 'drop-shadow(0 2px 4px rgba(79, 209, 255, 0.4))',
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(128, 0, 255, 0.25), 0 0 30px rgba(128, 0, 255, 0.175)', boxShadow: '0 6px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(79, 209, 255, 0.6), 0 0 30px rgba(79, 209, 255, 0.4)',
filter: 'drop-shadow(0 4px 8px rgba(128, 0, 255, 0.2))', filter: 'drop-shadow(0 4px 8px rgba(79, 209, 255, 0.5))',
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: purpleBackground, backgroundColor: blueBackground,
...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: purpleBackground, backgroundColor: blueBackground,
...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: purpleBackground, backgroundColor: blueBackground,
borderRadius: 1, borderRadius: 1,
...shadowEffects ...shadowEffects
}} }}

5
src/components/Timeline/TimelineItem.tsx
View File

@ -147,14 +147,17 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
/> />
{item.actionUrl && ( {item.actionUrl && (
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: 2 }}> <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, width: '100%' }}>
<Button <Button
variant="contained" variant="contained"
endIcon={<ArrowForwardIcon />} endIcon={<ArrowForwardIcon />}
href={item.actionUrl} href={item.actionUrl}
fullWidth
sx={{ sx={{
backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev
color: 'white', // White text color: 'white', // White text
textAlign: 'center',
justifyContent: 'center',
...buttonHoverEffects, ...buttonHoverEffects,
'&:hover': { '&:hover': {
...buttonHoverEffects['&:hover'], ...buttonHoverEffects['&:hover'],