feat: mobile

src/app/page.tsx

@@ -121,8 +121,12 @@ export default function HomePage() {
                 </Box>
               } />
               <Tab label="Resume" />
-              <Tab label="About" />
+              <Tab
-              <Tab label="Contact" />
+                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

src/components/ProjectCard.tsx

@@ -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,
+                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': {
-                  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',
               }}

src/components/Timeline/MasonryGrid.tsx

@@ -39,58 +39,24 @@ const MasonryGrid: React.FC<MasonryGridProps> = ({
     }
   }, [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
-  const getColumns = () => {
-    const columnCount = getColumnCount();
-    const columns: React.ReactNode[][] = Array.from({ length: columnCount }, () => []);
-    
-    items.forEach((item, index) => {
-      const columnIndex = index % columnCount;
-      columns[columnIndex].push(
-        <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 
+    <Box
       sx={{
-        display: 'flex',
-        flexDirection: 'row',
-        gap: 2,
         width: '100%',
         mt: 2,
         mb: 2
       }}
     >
-      {columns.map((column, index) => (
+      {imageItems.map((item, index) => (
-        <Box 
+        <MasonryItem
-          key={`column-${index}`}
+          key={item.id}
-          sx={{
+          item={item}
-            display: 'flex',
+          isVisible={visibleItems[index]}
-            flexDirection: 'column',
+          animationDelay={0} // Already handled by parent staggering
-            width: `calc(${100 / columnCount}% - ${(columnCount - 1) * 8 / columnCount}px)`,
+        />
-          }}
-        >
-          {column}
-        </Box>
       ))}
     </Box>
   );

src/components/Timeline/MasonryItem.tsx

@@ -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 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 = {
-    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',
     '&: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)'
     }
   };
@@ -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
             }}

src/components/Timeline/TimelineItem.tsx

@@ -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'],