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

17
src/components/ProjectCard.tsx
View File

@ -223,16 +223,17 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project }) => {
label={tech}
size="small"
sx={{
backgroundColor: 'rgba(128, 0, 255, 0.7)', // Purple background
backgroundColor: 'rgba(79, 209, 255, 0.4)',
color: textColor,
height: 24,
fontSize: '0.75rem',
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))',
borderRadius: '6px',
padding: '4px 12px',
minWidth: '80px',
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': {
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))',
backgroundColor: 'rgba(79, 209, 255, 0.5)',
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(10, 25, 50, 0.6))',
},
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]);
// Determine column count based on screen size
const getColumnCount = () => {
if (isMobile) return 1;
if (isTablet) return 2;
return 3;
};
// Filter to only show image items
const imageItems = items.filter(item => item.type === 'image');
// Distribute items into columns for masonry layout
const getColumns = () => {
const columnCount = getColumnCount();
const columns: React.ReactNode[][] = Array.from({ length: columnCount }, () => []);
items.forEach((item, index) => {
const columnIndex = index % columnCount;
columns[columnIndex].push(
return (
<Box
sx={{
width: '100%',
mt: 2,
mb: 2
}}
>
{imageItems.map((item, index) => (
<MasonryItem
key={item.id}
item={item}
isVisible={visibleItems[index]}
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>
);

22
src/components/Timeline/MasonryItem.tsx
View File

@ -8,18 +8,18 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
animationDelay = 0
}) => {
// Define colors and effects
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)
const blueBackground = 'rgba(79, 209, 255, 0.4)'; // Blue background
const titleColor = '#4fd1ff'; // Blue color
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 = {
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))',
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(79, 209, 255, 0.4))',
transition: 'all 0.3s ease-in-out',
'&: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)',
filter: 'drop-shadow(0 4px 8px rgba(128, 0, 255, 0.2))',
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(79, 209, 255, 0.5))',
transform: 'translateY(-5px)'
}
};
@ -33,7 +33,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{
height: item.height || 'auto',
width: '100%',
backgroundColor: purpleBackground,
backgroundColor: blueBackground,
...shadowEffects
}}
>
@ -55,7 +55,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
sx={{
height: item.height || 'auto',
width: '100%',
backgroundColor: purpleBackground,
backgroundColor: blueBackground,
...shadowEffects
}}
>
@ -81,7 +81,7 @@ const MasonryItem: React.FC<MasonryItemProps> = ({
p: 2,
height: item.height || 'auto',
width: '100%',
backgroundColor: purpleBackground,
backgroundColor: blueBackground,
borderRadius: 1,
...shadowEffects
}}

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

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