About page

src/App.scss

@@ -2,6 +2,11 @@ $scrollbar-width: 10px;
 $scrollbar-track-color: #262f2a;
 $scrollbar-thumb-color: #8cbc9158;
 $scrollbar-thumb-hover-color: #5f7167;
+$background-color: #27302B;
+
+body{
+  background-color: $background-color;
+}
 
 ::-webkit-scrollbar {
   width: $scrollbar-width;

src/App.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import Hero from './Components/Home/Hero/Hero';
 import Project from './Components/Projects/Projects';
+import About from './Components/About/About';
 import { Route, Routes } from 'react-router-dom';
 import Navbar from './Components/Navbar';
 import './App.scss';
 
 const Home = () => <></>;
-const About = () => <></>;
+const Abouts = () => <></>;
 const Projects = () => <></>;
 const Contact = () => <></>;
 

src/Components/About/About.scss

@@ -0,0 +1,154 @@
+$primary-color: #2af598;
+$secondary-color: #00715f;
+$tertiary-color: #33b072;
+$quaternary-color: #95b9b0;
+$background-color: #262f2aec;
+$list-item-color: #2bd4a0;
+$text-color: #fafff0;
+$font-color: #a2aa94;
+$hover-color: #ced4da;
+$box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+$border-radius: 8px;
+
+$language-item-tint: darken($list-item-color, 30%);
+$framework-item-tint: darken($list-item-color, 35%);
+$tools-item-tint: darken($list-item-color, 40%);
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+.AboutContainer {
+  font-family: 'Poppins', sans-serif;
+  width: auto;
+  padding: 20px;
+}
+
+.AboutContentContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.AboutContent {
+  flex: 1;
+  margin-right: 20px;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: $secondary-color;
+  background-color: #17201bc3;
+  border-radius: $border-radius;
+  margin-left: 20px;
+}
+
+.AboutText {
+  font-size: 1.8em;
+  font-weight: 400;
+  color: lighten($font-color, 30%);
+  padding: 0px 40px 0px 30px; /* top, right, bottom, left */
+}
+
+.Technologies {
+  flex: 1;
+}
+
+.CategoryContainer {
+  margin-bottom: 20px;
+}
+
+.CategoryTitle {
+  font-size: 1.3rem;
+  margin-bottom: 10px;
+  color: $text-color;
+  text-align: center;
+}
+
+.TechList {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+}
+
+.TechList.programming-languages li {
+  background-color: $language-item-tint;
+}
+
+.TechList.frameworks-libraries li {
+  background-color: $framework-item-tint;
+}
+
+.TechList.tools-platforms li {
+  background-color: $tools-item-tint;
+}
+
+.TechList li {
+  font-size: 1.1rem;
+  padding: 12px 20px;
+  border-radius: $border-radius;
+  color: $text-color;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+
+  &:hover {
+    background-color: darken($background-color, 15%);
+    transform: scale(1.05);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .AboutContentContainer {
+    flex-direction: column;
+  }
+
+  .AboutContent {
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .AboutText {
+    font-size: 1.4em; // Adjust for readability
+    padding-left: 20px;
+    padding-right: 20px;
+    text-align: center;
+  }
+  .AboutContainer{
+    margin-right: 20px;
+  }
+}
+
+.hoverLink {
+  color: $list-item-color;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.hoverLink:hover {
+  background: linear-gradient(
+    90deg,
+    $primary-color,
+    $secondary-color,
+    $tertiary-color,
+    $quaternary-color
+  );
+
+  background-size: 200% 200%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientAnimation 5s ease infinite;
+}

src/Components/About/About.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import './About.scss';
+import {
+  FaPython, FaJava, FaJsSquare, FaReact, FaGitAlt, FaDocker, FaHtml5, FaCss3Alt, FaAws, FaNodeJs, FaSass, FaPhp, FaMarkdown,
+  FaAngular, FaBootstrap, FaFigma, FaRaspberryPi 
+} from 'react-icons/fa';
+import {
+  SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel,
+  SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiKeras, SiPytorch, SiScikitlearn,
+  SiPostman, SiSwagger, SiJira, SiKubernetes, SiCisco, SiUnity, SiMantine, SiGnubash, SiPowershell
+} from 'react-icons/si';
+
+const About: React.FC = () => {
+  return (
+    <div className="AboutContainer">
+      <div className="AboutContentContainer">
+        <div className="AboutContent">
+          <p className="AboutText">
+            Hi, my name is Carson! I'm a recent grad from John Abbott College's Computer Science degree continuing my education over at Concordia University!
+            <br />
+            <br />
+            This summer, I interned @ <a className="hoverLink" href="https://www.tailed.ca/en" target='_blank' rel="noreferrer">Tail'ed</a> as a Software Developer, working on the company website using TypeScript, React, and Next.js. Alongside that, I also worked on some tools for users written in Python (notably, an AI-tool).
+            <br />
+            <br />
+            In my free time, I'm usually working on a personal project, learning a new technology, or wallowing in some imposter syndrome. Aside from that, my interests are geared towards AI/ML and their potential impact on environmental solutions.
+            <br />
+            <br />
+            I'm not hard to track down, but you can find me on <a className="hoverLink" href="www.linkedin.com/in/carsonspriggs" target="_blank" rel="noreferrer">LinkedIn</a>, <a className="hoverLink" href="https://github.com/carsonSgit" target='_blank' rel="noreferrer">GitHub</a>. I also dabble in a bit of writing on my <a className="hoverLink" href="https://dev.to/carsonsgit" target='_blank' rel="noreferrer">Dev.to</a> and <a className="hoverLink" href="https://medium.com/@carsonspriggs6" target='_blank' rel="noreferrer">Medium</a> pages.
+          </p>
+        </div>
+
+        <div className="Technologies">
+          <div className="CategoryContainer">
+            <h3 className="CategoryTitle">Languages</h3>
+            <ul className="TechList programming-languages">
+              <li><FaPython /> Python</li>
+              <li><FaJava /> Java</li>
+              <li><FaJsSquare /> JavaScript</li>
+              <li><SiTypescript /> TypeScript</li>
+              <li><SiCsharp /> C#</li>
+              <li><SiKotlin /> Kotlin</li>
+              <li><FaPhp /> PHP</li>
+              <li><SiPowershell /> PowerShell</li>
+              <li><SiGnubash /> Bash</li>
+              <li><FaMarkdown /> Markdown</li>
+              <li><FaHtml5 /> HTML</li>
+              <li><FaCss3Alt /> CSS</li>
+              <li><SiMicrosoftsqlserver /> MSSQL</li>
+              <li><SiSqlite /> SQLite</li>
+              <li><SiMysql /> MySQL</li>
+            </ul>
+          </div>
+
+          <div className="CategoryContainer">
+            <h3 className="CategoryTitle">Frameworks & Libraries</h3>
+            <ul className="TechList frameworks-libraries">
+              <li><SiDotnet /> ASP.NET</li>
+              <li><SiDotnet /> .NET MAUI</li>
+              <li><SiDotnet /> WPF</li>
+              <li><SiXamarin /> Xamarin</li>
+              <li><FaReact /> React</li>
+              <li><SiNextdotjs /> Next.js</li>
+              <li><SiJquery /> jQuery</li>
+              <li><FaAngular /> Angular</li>
+              <li><FaBootstrap /> Bootstrap</li>
+              <li><SiMantine /> Mantine</li>
+              <li><FaNodeJs /> Node.js</li>
+              <li><FaSass /> SCSS</li>
+              <li><SiTailwindcss /> TailwindCSS</li>
+              <li><SiExpress /> Express.js</li>
+              <li><SiKeras /> Keras</li>
+              <li><SiPytorch /> PyTorch</li>
+              <li><SiScikitlearn /> scikit-learn</li>
+            </ul>
+          </div>
+
+          <div className="CategoryContainer">
+            <h3 className="CategoryTitle">Tools & Platforms</h3>
+            <ul className="TechList tools-platforms">
+              <li><FaGitAlt /> Git</li>
+              <li><FaDocker /> Docker</li>
+              <li><SiAzuredevops /> Microsoft Azure</li>
+              <li><FaAws /> AWS</li>
+              <li><SiCloudflare /> Cloudflare</li>
+              <li><SiFirebase /> Firebase</li>
+              <li><SiVercel /> Vercel</li>
+              <li><SiNginx /> Nginx</li>
+              <li><SiUnity /> Unity</li>
+              <li><SiKubernetes /> Kubernetes</li>
+              <li><SiPostman /> Postman</li>
+              <li><SiSwagger /> Swagger</li>
+              <li><SiJira /> Jira</li>
+              <li><SiCisco /> Cisco</li>
+              <li><FaRaspberryPi /> Raspberry Pi</li>
+              <li><FaFigma /> Figma</li>
+              <li><SiMongodb /> MongoDB</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;

src/Components/Home/Hero/Hero.scss

@@ -12,7 +12,6 @@ $font-color: #a2aa94;
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background-color: $background-color;
   color: $text-color;
   overflow: hidden;
 

src/Components/Navbar.scss

@@ -11,7 +11,6 @@ $hamburger-size: 32px;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
-  background-color: $background-color;
   color: $text-color;
   margin-top: 0em;
 

src/Components/Projects/Projects.scss

@@ -13,7 +13,6 @@ a {
 
 .ProjectsContainer {
   padding: 0px 20px;
-  background-color: $background-color;
   color: $text-color;
   display: flex;
   flex-direction: column;