safari fix

Author: maxwlang

src/components/home/ProjectCard.tsx

@@ -23,8 +23,7 @@ const ProjectCard: React.FC<ProjectCardProps> = ({ project, onViewMore }) => {
     : description;
 
   return (
-    // TODO: fix strange behavior in desktop safari
-    <div className="break-inside-avoid bg-foreground dark:bg-slate-900 dark:text-foreground mb-6 sm:mb-8 rounded-lg dark:shadow-lg shadow-xl p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
+    <div className="will-change-transform break-inside-avoid bg-foreground dark:bg-slate-900 dark:text-foreground mb-6 sm:mb-8 rounded-lg dark:shadow-lg shadow-xl p-6 flex flex-col max-w-sm transform transition-transform hover:scale-105 hover:shadow-2xl">
       {image && (
         <Image
           src={image}

src/components/home/sections/Projects.tsx

@@ -18,7 +18,7 @@ const Projects: React.FC = () => {
       <ScrollToBottom scrollToBottomText="Skip Projects">
         <h2 className="text-4xl font-bold text-center mb-12">Projects</h2>
 
-        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6">
+        <div className="columns-1 sm:columns-2 lg:columns-3 gap-6 mb-32">
           {projects.map((project, index) => (
             <ProjectCard
               key={index}

src/images.ts

@@ -60,7 +60,6 @@ const images = {
   cardHarbinger,
   // cardGithub,
 
-  // TODO: add real images
   hobby3DPrinting,
   hobbyPhotography,
   hobbyMusic,