Adds modal for portfolio cards, adds image carousel, adds new favicon, etc

Author: kylejoe

package.json

@@ -10,16 +10,17 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
-    "@mantine/carousel": "^7.5.0",
+    "@icons-pack/react-simple-icons": "^9.3.0",
+    "@mantine/carousel": "^7.5.3",
     "@mantine/core": "^7.5.0",
     "@mantine/form": "^7.5.0",
     "@mantine/hooks": "^7.5.0",
     "@tabler/icons-react": "^2.47.0",
     "@types/node": "20.11.14",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
-    "embla-carousel-autoplay": "^8.0.0-rc22",
-    "embla-carousel-react": "^8.0.0-rc22",
+    "embla-carousel-autoplay": "^7.1.0",
+    "embla-carousel-react": "^7.1.0",
     "eslint": "8.56.0",
     "eslint-config-next": "14.1.0",
     "next": "^14.1.0",

public/client-projects/pastor-stays-3.png

@@ -1,54 +1,46 @@
 .card {
   position: relative;
-  overflow: hidden;
+  /* border: 0.75px solid #cccccc; */
+  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
   cursor: pointer;
-  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Maintain smooth transition for transform and box-shadow */
-  box-shadow: var(--mantine-shadow-xl);
-  border: 3px solid transparent; /* Ensures layout stability */
-  /* Apply zoom effect */
-  transform: scale(1); /* Default scale */
-}
-
-/* Initial state for top/left border */
-.card::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width to cover the top edge */
-  height: 100%; /* Full height to cover the left edge */
-  border-top: 3px solid var(--cc-green); /* Top border */
-  border-left: 3px solid var(--cc-green); /* Left border */
-  transition: transform 0.3s ease-out; /* Smooth transition for border */
-  transform-origin: top left;
-  transform: scaleX(0); /* Start with top border fully retracted */
-}
-
-/* Initial state for bottom/right border */
-.card::after {
-  content: "";
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 100%; /* Full width to cover the bottom edge */
-  height: 100%; /* Full height to cover the right edge */
-  border-bottom: 3px solid var(--cc-green); /* Bottom border */
-  border-right: 3px solid var(--cc-green); /* Right border */
-  transition: transform 0.3s ease-out 0.3s; /* Delay bottom/right animation for a sequential effect */
-  transform-origin: bottom right;
-  transform: scaleY(0); /* Start with right border fully retracted */
 }
 
 .card:hover {
   /* Enhance zoom effect on hover */
   transform: scale(1.03); /* Slightly larger scale for zoom effect */
   box-shadow: none; /* Optionally remove the box-shadow for focus on the border animation */
+  border: 1px solid var(--cc-green);
+}
+
+.cardImage {
+  position: relative;
+  object-fit: inherit;
+  min-height: 300px;
 }
 
-.card:hover::before {
-  transform: scaleY(1); /* Expand left border downwards after delay */
+.viewProjectbutton {
+  background-color: var(--cc-green);
+  width: 250px;
+  &:hover {
+    background-color: var(--cc-light-green);
+  }
 }
 
-.card:hover::after {
-  transform: scaleX(1); /* Expand bottom border to the right */
+.closeButton {
+  width: 250px;
+  background-color: var(--cc-green);
+  &:hover {
+    background-color: var(--cc-light-green);
+  }
+}
+
+/* for image carousel */
+.indicator {
+  width: rem(12px);
+  height: rem(4px);
+  transition: width 250ms ease;
+
+  &[data-active] {
+    width: rem(40px);
+  }
 }