From d24cce4a789fbd33f438a33407fba6016e81f717 Mon Sep 17 00:00:00 2001 From: Damien Date: Tue, 25 Feb 2025 10:28:07 -0500 Subject: [PATCH] feat: mobile --- src/app/page.tsx | 10 +++-- src/components/ProjectCard.tsx | 17 ++++---- src/components/Timeline/MasonryGrid.tsx | 54 +++++------------------- src/components/Timeline/MasonryItem.tsx | 22 +++++----- src/components/Timeline/TimelineItem.tsx | 5 ++- 5 files changed, 41 insertions(+), 67 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 688581f..138123c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -121,8 +121,12 @@ export default function HomePage() { } /> - - + @@ -160,7 +164,7 @@ export default function HomePage() { )} - {activeTab === 4 && ( + {activeTab === 3 && ( Contact diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx index 649f4ba..895d96f 100644 --- a/src/components/ProjectCard.tsx +++ b/src/components/ProjectCard.tsx @@ -223,16 +223,17 @@ const ProjectCard: React.FC = ({ 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', }} diff --git a/src/components/Timeline/MasonryGrid.tsx b/src/components/Timeline/MasonryGrid.tsx index 4755fa3..7b603fb 100644 --- a/src/components/Timeline/MasonryGrid.tsx +++ b/src/components/Timeline/MasonryGrid.tsx @@ -39,58 +39,24 @@ const MasonryGrid: React.FC = ({ } }, [isVisible, items.length, animationDelay]); - // Determine column count based on screen size - const getColumnCount = () => { - if (isMobile) return 1; - if (isTablet) return 2; - return 3; - }; - - // 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 columns; - }; - - const columns = getColumns(); - const columnCount = getColumnCount(); + // Filter to only show image items + const imageItems = items.filter(item => item.type === 'image'); return ( - - {columns.map((column, index) => ( - - {column} - + {imageItems.map((item, index) => ( + ))} ); diff --git a/src/components/Timeline/MasonryItem.tsx b/src/components/Timeline/MasonryItem.tsx index de50e05..d8bd549 100644 --- a/src/components/Timeline/MasonryItem.tsx +++ b/src/components/Timeline/MasonryItem.tsx @@ -8,18 +8,18 @@ const MasonryItem: React.FC = ({ 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 = ({ sx={{ height: item.height || 'auto', width: '100%', - backgroundColor: purpleBackground, + backgroundColor: blueBackground, ...shadowEffects }} > @@ -55,7 +55,7 @@ const MasonryItem: React.FC = ({ sx={{ height: item.height || 'auto', width: '100%', - backgroundColor: purpleBackground, + backgroundColor: blueBackground, ...shadowEffects }} > @@ -81,7 +81,7 @@ const MasonryItem: React.FC = ({ p: 2, height: item.height || 'auto', width: '100%', - backgroundColor: purpleBackground, + backgroundColor: blueBackground, borderRadius: 1, ...shadowEffects }} diff --git a/src/components/Timeline/TimelineItem.tsx b/src/components/Timeline/TimelineItem.tsx index fbb34c8..ea523ac 100644 --- a/src/components/Timeline/TimelineItem.tsx +++ b/src/components/Timeline/TimelineItem.tsx @@ -147,14 +147,17 @@ const TimelineItem: React.FC = ({ /> {item.actionUrl && ( - +