feat: Projects page

package.json

@@ -4,22 +4,28 @@
   "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",
     "@types/jest": "^29.5.12",
     "@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",

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>
   );
 };

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;

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);
+  }
+}

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;