diff --git a/package-lock.json b/package-lock.json
index 107d8fa..ca27e92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "carsonsgit.github.io",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.6.0",
+        "@fortawesome/free-brands-svg-icons": "^6.6.0",
+        "@fortawesome/free-solid-svg-icons": "^6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.2",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -15,15 +19,17 @@
         "@types/node": "^20.14.11",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "framer-motion": "^11.3.6",
+        "framer-motion": "^11.3.8",
         "gh-pages": "^6.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",
+        "react-intersection-observer": "^9.13.0",
+        "react-reveal": "^1.2.2",
         "react-router-dom": "^6.25.1",
         "react-scripts": "5.0.1",
         "react-simple-typewriter": "^5.0.1",
-        "react-spring": "^9.7.3",
+        "react-spring": "^9.7.4",
         "react-typical": "^0.1.3",
         "styled-components": "^6.1.12",
         "typescript": "^5.5.3",
@@ -2705,6 +2711,59 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -5182,25 +5241,25 @@
       "peer": true
     },
     "node_modules/@react-spring/animated": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
-      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.4.tgz",
+      "integrity": "sha512-7As+8Pty2QlemJ9O5ecsuPKjmO0NKvmVkRR1n6mEotFgWar8FKuQt2xgxz3RTgxcccghpx1YdS1FCdElQNexmQ==",
       "dependencies": {
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@react-spring/core": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
-      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.4.tgz",
+      "integrity": "sha512-GzjA44niEJBFUe9jN3zubRDDDP2E4tBlhNlSIkTChiNf9p4ZQlgXBg50qbXfSXHQPHak/ExYxwhipKVsQ/sUTw==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "funding": {
         "type": "opencollective",
@@ -5211,14 +5270,14 @@
       }
     },
     "node_modules/@react-spring/konva": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.3.tgz",
-      "integrity": "sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.4.tgz",
+      "integrity": "sha512-B2IRytWM2ixifoKxE5DXTUXxNAhPsPqozrZEXXkwKhet1P2xvxXpTYrmDi0NnqTijVbAA3n1hUv8/DqqMKoI0Q==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "konva": ">=2.6",
@@ -5226,26 +5285,32 @@
         "react-konva": "^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0"
       }
     },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.4.tgz",
+      "integrity": "sha512-mqDI6rW0Ca8IdryOMiXRhMtVGiEGLIO89vIOyFQXRIwwIMX30HLya24g9z4olDvFyeDW3+kibiKwtZnA4xhldA=="
+    },
     "node_modules/@react-spring/shared": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
-      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.4.tgz",
+      "integrity": "sha512-bEPI7cQp94dOtCFSEYpxvLxj0+xQfB5r9Ru1h8OMycsIq7zFZon1G0sHrBLaLQIWeMCllc4tVDYRTLIRv70C8w==",
       "dependencies": {
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/rafz": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/@react-spring/three": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.3.tgz",
-      "integrity": "sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.4.tgz",
+      "integrity": "sha512-HKUhrrvWW7F/MAroObOloqcYyFqsUHp1ANIDvPVxk9cSh7veW7gQbJm2Sc7Ka+L4gVJEwSkS+MRfr8kk+sRZBw==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "@react-three/fiber": ">=6.0",
@@ -5254,19 +5319,19 @@
       }
     },
     "node_modules/@react-spring/types": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
-      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.4.tgz",
+      "integrity": "sha512-iQVztO09ZVfsletMiY+DpT/JRiBntdsdJ4uqk3UJFhrhS8mIC9ZOZbmfGSRs/kdbNPQkVyzucceDicQ/3Mlj9g=="
     },
     "node_modules/@react-spring/web": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
-      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.4.tgz",
+      "integrity": "sha512-UMvCZp7I5HCVIleSa4BwbNxynqvj+mJjG2m20VO2yPoi2pnCYANy58flvz9v/YcXTAvsmL655FV3pm5fbr6akA==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5274,14 +5339,14 @@
       }
     },
     "node_modules/@react-spring/zdog": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.3.tgz",
-      "integrity": "sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.4.tgz",
+      "integrity": "sha512-uKAzQqKXxHYyGo36EYQEIZzNB60gxQsCG6aaXO2LY5aa7kq44pJX/92D1YigOIhJ/sbfJOXYfdJC/ntvATvzCQ==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -5374,9 +5439,9 @@
       }
     },
     "node_modules/@rnx-kit/chromium-edge-launcher/node_modules/@types/node": {
-      "version": "18.19.40",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
-      "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
+      "version": "18.19.41",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.41.tgz",
+      "integrity": "sha512-LX84pRJ+evD2e2nrgYCHObGWkiQJ1mL+meAgbvnwk/US6vmMY7S2ygBTGV2Jw91s9vUsLSXeDEkUHZIJGLrhsg==",
       "peer": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -9326,9 +9391,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
+      "version": "1.11.12",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
+      "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==",
       "peer": true
     },
     "node_modules/debounce": {
@@ -11423,9 +11488,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.3.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.6.tgz",
-      "integrity": "sha512-olpX48qfoSIDjhw0RbolhOGBQmdMAXHHpSI0PFdTj5LeXChcf5F4ApShs0mQ6FPEPOj7dnEvSyB07UgRK5G9Jw==",
+      "version": "11.3.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.8.tgz",
+      "integrity": "sha512-1D+RDTsIp4Rz2dq/oToqSEc9idEQwgBRQyBq4rGpFba+0Z+GCbj9z1s0+ikFbanWe3YJ0SqkNlDe08GcpFGj5A==",
       "dependencies": {
         "tslib": "^2.4.0"
       },
@@ -19518,6 +19583,20 @@
         "react": "*"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz",
+      "integrity": "sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -19612,6 +19691,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-reveal": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz",
+      "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==",
+      "dependencies": {
+        "prop-types": "^15.5.10"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.25.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
@@ -19740,16 +19830,16 @@
       }
     },
     "node_modules/react-spring": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.3.tgz",
-      "integrity": "sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.4.tgz",
+      "integrity": "sha512-ypxdsOwmCfbDZGTBRyBo7eLjF55xNFN86e/QkflZ1Rfo8QMzVjCAWocrEEbsuFKkQAg2RRdhNkinWJ6BpCvJoQ==",
       "dependencies": {
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/konva": "~9.7.3",
-        "@react-spring/native": "~9.7.3",
-        "@react-spring/three": "~9.7.3",
-        "@react-spring/web": "~9.7.3",
-        "@react-spring/zdog": "~9.7.3"
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/konva": "~9.7.4",
+        "@react-spring/native": "~9.7.4",
+        "@react-spring/three": "~9.7.4",
+        "@react-spring/web": "~9.7.4",
+        "@react-spring/zdog": "~9.7.4"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -19818,17 +19908,17 @@
       }
     },
     "node_modules/react-spring/node_modules/@react-spring/native": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.3.tgz",
-      "integrity": "sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.4.tgz",
+      "integrity": "sha512-mBaDq8MA1O42QS1vlw06cf+GiwWZWPi0n6reZAjAfpO1mShi63uHCBcRrez8JGw2F/JSMaRQ5Ya1n5s47S3VlQ==",
       "dependencies": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       },
       "peerDependencies": {
-        "react": "^16.8.0  || >=17.0.0 || >=18.0.0",
+        "react": "16.8.0  || >=17.0.0 || >=18.0.0",
         "react-native": ">=0.58"
       }
     },
@@ -25601,6 +25691,43 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
       "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -27466,79 +27593,85 @@
       "peer": true
     },
     "@react-spring/animated": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz",
-      "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.4.tgz",
+      "integrity": "sha512-7As+8Pty2QlemJ9O5ecsuPKjmO0NKvmVkRR1n6mEotFgWar8FKuQt2xgxz3RTgxcccghpx1YdS1FCdElQNexmQ==",
       "requires": {
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-spring/core": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz",
-      "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.4.tgz",
+      "integrity": "sha512-GzjA44niEJBFUe9jN3zubRDDDP2E4tBlhNlSIkTChiNf9p4ZQlgXBg50qbXfSXHQPHak/ExYxwhipKVsQ/sUTw==",
       "requires": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-spring/konva": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.3.tgz",
-      "integrity": "sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.4.tgz",
+      "integrity": "sha512-B2IRytWM2ixifoKxE5DXTUXxNAhPsPqozrZEXXkwKhet1P2xvxXpTYrmDi0NnqTijVbAA3n1hUv8/DqqMKoI0Q==",
       "requires": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
+    "@react-spring/rafz": {
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.4.tgz",
+      "integrity": "sha512-mqDI6rW0Ca8IdryOMiXRhMtVGiEGLIO89vIOyFQXRIwwIMX30HLya24g9z4olDvFyeDW3+kibiKwtZnA4xhldA=="
+    },
     "@react-spring/shared": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz",
-      "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.4.tgz",
+      "integrity": "sha512-bEPI7cQp94dOtCFSEYpxvLxj0+xQfB5r9Ru1h8OMycsIq7zFZon1G0sHrBLaLQIWeMCllc4tVDYRTLIRv70C8w==",
       "requires": {
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/rafz": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-spring/three": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.3.tgz",
-      "integrity": "sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.4.tgz",
+      "integrity": "sha512-HKUhrrvWW7F/MAroObOloqcYyFqsUHp1ANIDvPVxk9cSh7veW7gQbJm2Sc7Ka+L4gVJEwSkS+MRfr8kk+sRZBw==",
       "requires": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-spring/types": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz",
-      "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw=="
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.4.tgz",
+      "integrity": "sha512-iQVztO09ZVfsletMiY+DpT/JRiBntdsdJ4uqk3UJFhrhS8mIC9ZOZbmfGSRs/kdbNPQkVyzucceDicQ/3Mlj9g=="
     },
     "@react-spring/web": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz",
-      "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.4.tgz",
+      "integrity": "sha512-UMvCZp7I5HCVIleSa4BwbNxynqvj+mJjG2m20VO2yPoi2pnCYANy58flvz9v/YcXTAvsmL655FV3pm5fbr6akA==",
       "requires": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-spring/zdog": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.3.tgz",
-      "integrity": "sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.4.tgz",
+      "integrity": "sha512-uKAzQqKXxHYyGo36EYQEIZzNB60gxQsCG6aaXO2LY5aa7kq44pJX/92D1YigOIhJ/sbfJOXYfdJC/ntvATvzCQ==",
       "requires": {
-        "@react-spring/animated": "~9.7.3",
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/shared": "~9.7.3",
-        "@react-spring/types": "~9.7.3"
+        "@react-spring/animated": "~9.7.4",
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/shared": "~9.7.4",
+        "@react-spring/types": "~9.7.4"
       }
     },
     "@react-three/fiber": {
@@ -27591,9 +27724,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "18.19.40",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.40.tgz",
-          "integrity": "sha512-MIxieZHrm4Ee8XArBIc+Or9HINt2StOmCbgRcXGSJl8q14svRvkZPe7LJq9HKtTI1SK3wU8b91TjntUm7T69Pg==",
+          "version": "18.19.41",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.41.tgz",
+          "integrity": "sha512-LX84pRJ+evD2e2nrgYCHObGWkiQJ1mL+meAgbvnwk/US6vmMY7S2ygBTGV2Jw91s9vUsLSXeDEkUHZIJGLrhsg==",
           "peer": true,
           "requires": {
             "undici-types": "~5.26.4"
@@ -30505,9 +30638,9 @@
       }
     },
     "dayjs": {
-      "version": "1.11.11",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz",
-      "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==",
+      "version": "1.11.12",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.12.tgz",
+      "integrity": "sha512-Rt2g+nTbLlDWZTwwrIXjy9MeiZmSDI375FvZs72ngxx8PDC6YXOeR3q5LAuPzjZQxhiWdRKac7RKV+YyQYfYIg==",
       "peer": true
     },
     "debounce": {
@@ -32033,9 +32166,9 @@
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
     "framer-motion": {
-      "version": "11.3.6",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.6.tgz",
-      "integrity": "sha512-olpX48qfoSIDjhw0RbolhOGBQmdMAXHHpSI0PFdTj5LeXChcf5F4ApShs0mQ6FPEPOj7dnEvSyB07UgRK5G9Jw==",
+      "version": "11.3.8",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.8.tgz",
+      "integrity": "sha512-1D+RDTsIp4Rz2dq/oToqSEc9idEQwgBRQyBq4rGpFba+0Z+GCbj9z1s0+ikFbanWe3YJ0SqkNlDe08GcpFGj5A==",
       "requires": {
         "tslib": "^2.4.0"
       }
@@ -37739,6 +37872,12 @@
       "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
       "requires": {}
     },
+    "react-intersection-observer": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz",
+      "integrity": "sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -37803,6 +37942,14 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-reveal": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz",
+      "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-router": {
       "version": "6.25.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
@@ -37892,16 +38039,16 @@
       "requires": {}
     },
     "react-spring": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.3.tgz",
-      "integrity": "sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.4.tgz",
+      "integrity": "sha512-ypxdsOwmCfbDZGTBRyBo7eLjF55xNFN86e/QkflZ1Rfo8QMzVjCAWocrEEbsuFKkQAg2RRdhNkinWJ6BpCvJoQ==",
       "requires": {
-        "@react-spring/core": "~9.7.3",
-        "@react-spring/konva": "~9.7.3",
-        "@react-spring/native": "~9.7.3",
-        "@react-spring/three": "~9.7.3",
-        "@react-spring/web": "~9.7.3",
-        "@react-spring/zdog": "~9.7.3"
+        "@react-spring/core": "~9.7.4",
+        "@react-spring/konva": "~9.7.4",
+        "@react-spring/native": "~9.7.4",
+        "@react-spring/three": "~9.7.4",
+        "@react-spring/web": "~9.7.4",
+        "@react-spring/zdog": "~9.7.4"
       },
       "dependencies": {
         "@jest/environment": {
@@ -37954,14 +38101,14 @@
           }
         },
         "@react-spring/native": {
-          "version": "9.7.3",
-          "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.3.tgz",
-          "integrity": "sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==",
-          "requires": {
-            "@react-spring/animated": "~9.7.3",
-            "@react-spring/core": "~9.7.3",
-            "@react-spring/shared": "~9.7.3",
-            "@react-spring/types": "~9.7.3"
+          "version": "9.7.4",
+          "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.4.tgz",
+          "integrity": "sha512-mBaDq8MA1O42QS1vlw06cf+GiwWZWPi0n6reZAjAfpO1mShi63uHCBcRrez8JGw2F/JSMaRQ5Ya1n5s47S3VlQ==",
+          "requires": {
+            "@react-spring/animated": "~9.7.4",
+            "@react-spring/core": "~9.7.4",
+            "@react-spring/shared": "~9.7.4",
+            "@react-spring/types": "~9.7.4"
           }
         },
         "@sinclair/typebox": {
diff --git a/package.json b/package.json
index b7a750e..75834e7 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,10 @@
   "private": true,
   "homepage": "http://carsonsgit.github.io",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,15 +15,17 @@
     "@types/node": "^20.14.11",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "framer-motion": "^11.3.6",
+    "framer-motion": "^11.3.8",
     "gh-pages": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-intersection-observer": "^9.13.0",
+    "react-reveal": "^1.2.2",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "react-simple-typewriter": "^5.0.1",
-    "react-spring": "^9.7.3",
+    "react-spring": "^9.7.4",
     "react-typical": "^0.1.3",
     "styled-components": "^6.1.12",
     "typescript": "^5.5.3",
diff --git a/public/DEADWEIGHT.png b/public/DEADWEIGHT.png
new file mode 100644
index 0000000..5eccdd6
Binary files /dev/null and b/public/DEADWEIGHT.png differ
diff --git a/public/cropcare.png b/public/cropcare.png
new file mode 100644
index 0000000..391c3a8
Binary files /dev/null and b/public/cropcare.png differ
diff --git a/public/linky.png b/public/linky.png
new file mode 100644
index 0000000..9b936ba
Binary files /dev/null and b/public/linky.png differ
diff --git a/public/trademind.png b/public/trademind.png
new file mode 100644
index 0000000..92ebfb9
Binary files /dev/null and b/public/trademind.png differ
diff --git a/src/App.tsx b/src/App.tsx
index 0bc8ff4..76b7154 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Hero from './Components/Home/Hero/Hero';
+import Project from './Components/Projects/Projects';
 import { Route, Routes } from 'react-router-dom';
 import Navbar from './Components/Navbar';
 
@@ -13,12 +14,11 @@ const App: React.FC = () => {
     <div className="App">
       <Navbar />
       <Routes>
-        <Route path="/" element={<Home />} />
+        <Route path="/" element={<Hero />} />
         <Route path="/about" element={<About />} />
-        <Route path="/projects" element={<Projects />} />
+        <Route path="/projects" element={<Project />} />
         <Route path="/contact" element={<Contact />} />
       </Routes>
-      <Hero />
     </div>
   );
 };
diff --git a/src/Components/Home/Hero/Hero.scss b/src/Components/Home/Hero/Hero.scss
index 09fae02..7c2e382 100644
--- a/src/Components/Home/Hero/Hero.scss
+++ b/src/Components/Home/Hero/Hero.scss
@@ -7,11 +7,6 @@ $background-color: #f9fbf7;
 $text-color: #1c2211;
 $font-color: #61665b;
 
-/* Page styling */
-body {
-  overflow-y: hidden;
-}
-
 /* Hero Container */
 .HeroContainer {
   display: flex;
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
new file mode 100644
index 0000000..9521661
--- /dev/null
+++ b/src/Components/Projects/Projects.scss
@@ -0,0 +1,167 @@
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #19621d;
+$background-color: #f9fbf7;
+$text-color: #1c2211;
+$font-color: #61665b;
+
+a{
+  text-decoration: none;
+  color: $primary-color;
+}
+
+.ProjectsContainer {
+  padding: 0px 20px;
+  background-color: $background-color;
+  color: $text-color;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  text-align: center;
+
+  @media (min-width: 768px) {
+    padding: 0px 40px;
+  }
+}
+.ProjectsTitle {
+  font-size: 2.8em;
+  margin-bottom: 40px;
+  color: $text-color;
+
+  @media (min-width: 768px) {
+    font-size: 4.5em;
+  }
+}
+
+.ProjectsTitleAnimated {
+  margin-bottom: 40px;
+  color: transparent;
+  background: linear-gradient(45deg, $primary-color, $secondary-color, $tertiary-color, $quaternary-color);
+  background-size: 400% 400%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  animation: gradientAnimation 5s ease infinite;
+  
+  font-size: inherit; 
+
+  @media (min-width: 768px) {
+    font-size: inherit;
+  }
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+
+.ProjectItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+  width: 75em;
+  height: 35em;
+  background-size: cover;
+  background-position: center;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  position: relative;
+  color: #fff;
+  min-height: 200px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.417);
+  }
+
+  @media (max-width: 767px) {
+    width: 90%;
+    height: auto;
+    background-size: cover;
+    min-height: 200px;
+  }
+}
+
+.ProjectContent {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 15px;
+  background: rgba(0, 0, 0, 0.6);
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  box-sizing: border-box;
+  transition: transform 0.3s ease;
+
+  @media (max-width: 767px) {
+    position: relative;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.ProjectTitle {
+  font-size: 1.4em;
+  color: #fff;
+  margin-bottom: 5px;
+}
+
+.ProjectLanguages {
+  font-size: 1.2em;
+  color: #ccc;
+  margin-bottom: 5px;
+}
+
+.ProjectDescription {
+  font-size: 1em;
+  color: #eee;
+  text-align: left;
+  margin-bottom: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ProjectLinks {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+  align-items: center;
+}
+
+.ProjectLink {
+  display: inline-flex;
+  align-items: center;
+  padding: 12px 10px;
+  background-color: $secondary-color;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 5px;
+  transition: background-color 0.3s, transform 0.3s;
+
+  svg {
+    margin-right: 5px;
+  }
+
+  &:hover {
+    background-color: darken($secondary-color, 10%);
+    transform: scale(1.05);
+  }
+}
diff --git a/src/Components/Projects/Projects.tsx b/src/Components/Projects/Projects.tsx
new file mode 100644
index 0000000..c66580e
--- /dev/null
+++ b/src/Components/Projects/Projects.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
+import { motion } from 'framer-motion';
+import { useSpring } from 'react-spring';
+import './Projects.scss';
+
+const projects = [
+  {
+    image: 'DEADWEIGHT.png',
+    title: 'DEADWEIGHT',
+    languages: 'C#, Unity',
+    description: 'DEADWEIGHT is a game developed for the Kenney Jam 2024. It was my first experience working in Unity done in collaboration with <a href="https://github.com/NoahGJAC" target="_blank" rel="noopener noreferrer">NoahGJAC</a> as the first project for our game studio, <a href="https://github.com/Cano-Studios" target="_blank" rel="noopener noreferrer">Cano Studios</a>.',
+    github: 'https://github.com/Cano-Studios/DEADWEIGHT',
+    website: 'https://cano-studios.itch.io/deadweight',
+  },
+  {
+    image: 'cropcare.png',
+    title: 'CropCare',
+    languages: 'Python, .NET MAUI, Raspberry Pi, IoT',
+    description: 'Developed an IoT container farm with leveraging Python, .NET MAUI, a Raspberry Pi, and Azure IoT hub for mobile monitoring and control. Our project was recognized as the top Capstone project in the history of my schools Application Development III & Connected Objects courses.',
+    github: 'https://github.com/carsonSgit/CropCare',
+    website: 'https://carsonsgit.github.io/cropcare-3d/',
+  },
+  {
+    image: 'linky.png',
+    title: 'Linky',
+    languages: 'Mantine, TypeScript, RAG AI, Vector DB',
+    description: 'Linky is a hackathon winning project made for <a href="https://www.marihacks.com/" target="_blank" rel="noopener noreferrer">MariHacks 2024</a> in under 24hrs. It is a web app that uses a RAG AI & a Vector DB to turn your links into your own chatbot letting you interact with your URLs!',
+    github: 'https://github.com/carsonSgit/Linky',
+    website: 'https://www.linky.im/',
+  },
+  {
+    image: 'trademind.png',
+    title: 'TradeMind',
+    languages: 'React, Python, Machine Learning',
+    description: 'TradeMind is a project developed for <a href="https://launchlab.ai/" target="_blank" rel="noopener noreferrer">AI Launch Lab</a>\'s <a href="https://launchlab.ai/rd-program/" target="_blank" rel="noopener noreferrer">R&D Program</a>. It is a web app that uses machine learning to predict stock prices and provide insights to users.',
+    github: 'https://github.com/carsonSgit/TradeMind',
+    website: 'https://trademind.pages.dev/',
+  },
+  // Add more projects here
+];
+
+const Projects: React.FC = () => {
+  return (
+    <div className="ProjectsContainer">
+      <h1 className="ProjectsTitle">
+        <span className="ProjectsTitleAnimated">Notable</span> projects
+      </h1>
+      {projects.map((project, index) => (
+        <ProjectItem key={index} project={project} />
+      ))}
+    </div>
+  );
+};
+
+const ProjectItem: React.FC<{ project: any }> = ({ project }) => {
+  const [ref, inView] = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+
+  const props = useSpring({
+    opacity: inView ? 1 : 0,
+    transform: inView ? 'translateY(0)' : 'translateY(20px)',
+    config: { tension: 200, friction: 20 }
+  });
+
+  return (
+    <motion.div
+      className="ProjectItem"
+      style={{ backgroundImage: `url(${process.env.PUBLIC_URL}/${project.image})` }}
+      initial={{ opacity: 0, scale: 0.99 }}
+      animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.99 }}
+      transition={{ duration: 0.5 }}
+      ref={ref}
+      whileHover={{
+        scale: 1.01,
+        transition: { duration: 0.15 },
+      }}
+    >
+      <div className="ProjectContent">
+        <h2 className="ProjectTitle">{project.title}</h2>
+        <p className="ProjectLanguages">{project.languages}</p>
+        <p className="ProjectDescription" dangerouslySetInnerHTML={{ __html: project.description }} />
+        <div className="ProjectLinks">
+          {project.github && (
+            <a href={project.github} className="ProjectLink" target="_blank" rel="noopener noreferrer">
+              <FaGithub /> GitHub
+            </a>
+          )}
+          {project.website && (
+            <a href={project.website} className="ProjectLink" target="_blank" rel="noopener noreferrer">
+              <FaExternalLinkAlt /> Website
+            </a>
+          )}
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default Projects;