From 938677d41912cfa873e6e486d0aa274c19a5abd0 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Thu, 8 Aug 2024 20:26:53 -0400 Subject: [PATCH 01/33] feat: Add beginning state of About --- src/App.tsx | 3 +- src/Components/About/About.scss | 89 +++++++++++++++++++++++++++++++++ src/Components/About/About.tsx | 29 +++++++++++ 3 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 src/Components/About/About.scss create mode 100644 src/Components/About/About.tsx diff --git a/src/App.tsx b/src/App.tsx index 8a70109..9b1876b 100644 --- a/src/App.tsx +++ b/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 = () => <>; diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss new file mode 100644 index 0000000..d73337f --- /dev/null +++ b/src/Components/About/About.scss @@ -0,0 +1,89 @@ +$primary-color: #2af598; +$secondary-color: #00715f; +$tertiary-color: #33b072; +$quaternary-color: #95b9b0; +$background-color: #262f2aec; +$text-color: #fafff0; +$font-color: #a2aa94; + +/* About Section Styling */ +.AboutContainer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: $background-color; + color: $text-color; + padding: 50px 20px; + min-height: 100vh; + text-align: center; + + @media (max-width: 768px) { + padding: 30px 10px; + } + + @media (min-width: 768px) and (max-width: 1200px) { + padding: 40px 30px; + } + + @media (min-width: 1200px) { + padding: 60px 40px; + } + } + + .AboutTitle { + font-size: 3.5em; + margin-bottom: 20px; + color: $text-color; + + @media (min-width: 768px) and (max-width: 1200px) { + font-size: 3em; + } + + @media (min-width: 1200px) { + font-size: 4em; + } + } + + .AboutText { + font-size: 1.5em; + line-height: 1.6; + color: $font-color; + max-width: 800px; + + @media (max-width: 768px) { + font-size: 1.2em; + } + + @media (min-width: 768px) and (max-width: 1200px) { + font-size: 1.4em; + } + + @media (min-width: 1200px) { + font-size: 1.6em; + } + } + + .AboutImage { + margin-top: 40px; + width: 100%; + max-width: 500px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + + @media (max-width: 768px) { + margin-top: 30px; + max-width: 90%; + } + + @media (min-width: 768px) and (max-width: 1200px) { + margin-top: 35px; + max-width: 400px; + } + + @media (min-width: 1200px) { + margin-top: 50px; + max-width: 600px; + } + } + \ No newline at end of file diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx new file mode 100644 index 0000000..34cb97f --- /dev/null +++ b/src/Components/About/About.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import './About.scss'; + +const About: React.FC = () => { + return ( +
+

About Me

+
+

+ Hi, I'm Carson! I'm a passionate software developer currently working as a Junior Software Engineer. + I love building cool things and exploring the world of machine learning. I'm also an active participant in hackathons, + constantly seeking opportunities to enhance my skills and make an impact. +

+

+ In my free time, I work on indie game development, collaborate on open-source projects, + and dive into Leetcode challenges to sharpen my problem-solving abilities. + I believe in continuous learning and strive to stay up-to-date with the latest technologies. +

+

+ My journey into software development began with a technical DEC in Computer Science from John Abbott College, + and I'm now pursuing further studies in economics to meet the prerequisites for a BCompSc at Concordia University. + My ultimate goal is to contribute to meaningful projects and grow as a developer. +

+
+
+ ); +}; + +export default About; From 4ef92384b1751cfc295b521f3c58b85753f6bd96 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 13:26:03 -0400 Subject: [PATCH 02/33] feat: Bad version of about page, gearing towards goal --- src/Components/About/About.scss | 151 ++++++++++++++++---------------- src/Components/About/About.tsx | 44 ++++++---- 2 files changed, 103 insertions(+), 92 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index d73337f..8bcf33f 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -5,85 +5,84 @@ $quaternary-color: #95b9b0; $background-color: #262f2aec; $text-color: #fafff0; $font-color: #a2aa94; +$hover-color: #ced4da; +$box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +$border-radius: 8px; -/* About Section Styling */ .AboutContainer { - display: flex; + padding: 20px; + max-width: 1200px; + margin: 0 auto; + background-color: $background-color; + border-radius: $border-radius; + box-shadow: $box-shadow; +} + +.AboutTitle { + font-size: 2.5rem; + margin-bottom: 20px; + color: $primary-color; + text-align: center; +} + +.AboutContentContainer { + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.AboutContent { + flex: 1; + margin-right: 20px; + font-size: 1.1rem; + line-height: 1.6; + color: $secondary-color; +} + +.Technologies { + flex: 1; +} + +.TechnologiesTitle { + font-size: 2rem; + margin-bottom: 20px; + color: $primary-color; + text-align: center; +} + +.TechList { + list-style-type: none; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.TechList li { + font-size: 1.1rem; + margin-bottom: 10px; + background-color: lighten($background-color, 5%); + padding: 10px; + border-radius: 4px; + color: $primary-color; + display: flex; + align-items: center; + gap: 8px; + transition: background-color 0.3s ease; + + &:hover { + background-color: $hover-color; + } +} + +@media screen and (max-width: 768px) { + .AboutContentContainer { flex-direction: column; - align-items: center; - justify-content: center; - background-color: $background-color; - color: $text-color; - padding: 50px 20px; - min-height: 100vh; - text-align: center; - - @media (max-width: 768px) { - padding: 30px 10px; - } - - @media (min-width: 768px) and (max-width: 1200px) { - padding: 40px 30px; - } - - @media (min-width: 1200px) { - padding: 60px 40px; - } } - - .AboutTitle { - font-size: 3.5em; + + .AboutContent { + margin-right: 0; margin-bottom: 20px; - color: $text-color; - - @media (min-width: 768px) and (max-width: 1200px) { - font-size: 3em; - } - - @media (min-width: 1200px) { - font-size: 4em; - } } - - .AboutText { - font-size: 1.5em; - line-height: 1.6; - color: $font-color; - max-width: 800px; - - @media (max-width: 768px) { - font-size: 1.2em; - } - - @media (min-width: 768px) and (max-width: 1200px) { - font-size: 1.4em; - } - - @media (min-width: 1200px) { - font-size: 1.6em; - } - } - - .AboutImage { - margin-top: 40px; - width: 100%; - max-width: 500px; - border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - - @media (max-width: 768px) { - margin-top: 30px; - max-width: 90%; - } - - @media (min-width: 768px) and (max-width: 1200px) { - margin-top: 35px; - max-width: 400px; - } - - @media (min-width: 1200px) { - margin-top: 50px; - max-width: 600px; - } - } - \ No newline at end of file +} + diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 34cb97f..b188988 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -1,26 +1,38 @@ import React from 'react'; import './About.scss'; +import { FaPython, FaJava, FaJsSquare, FaReact, FaGitAlt, FaDocker } from 'react-icons/fa'; +import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiGooglecolab } from 'react-icons/si'; const About: React.FC = () => { return (

About Me

-
-

- Hi, I'm Carson! I'm a passionate software developer currently working as a Junior Software Engineer. - I love building cool things and exploring the world of machine learning. I'm also an active participant in hackathons, - constantly seeking opportunities to enhance my skills and make an impact. -

-

- In my free time, I work on indie game development, collaborate on open-source projects, - and dive into Leetcode challenges to sharpen my problem-solving abilities. - I believe in continuous learning and strive to stay up-to-date with the latest technologies. -

-

- My journey into software development began with a technical DEC in Computer Science from John Abbott College, - and I'm now pursuing further studies in economics to meet the prerequisites for a BCompSc at Concordia University. - My ultimate goal is to contribute to meaningful projects and grow as a developer. -

+
+
+

+ Hi, I'm Carson! I'm a passionate software developer currently working as a Junior Software Engineer. + I love building cool things and exploring the world of machine learning. I'm also an active participant in hackathons, + constantly seeking opportunities to enhance my skills and make an impact. +

+
+ +
+

Technologies I Work With

+
    +
  • Python
    • +
  • Java
    • +
  • JavaScript
    • +
  • C#
    • +
  • SQL
    • +
  • Kotlin
    • +
  • React
    • +
  • ASP.NET, .NET MAUI
    • +
  • Xamarin
    • +
  • Git, GitHub
    • +
  • Google Colab
    • +
  • Docker
    • +
+
); From 24b7eb870f4729e6bf0780db2ba3b731cea29060 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 17:14:41 -0400 Subject: [PATCH 03/33] fix: Remove useless background differentiation --- src/Components/About/About.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 8bcf33f..debf90f 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -11,10 +11,8 @@ $border-radius: 8px; .AboutContainer { padding: 20px; - max-width: 1200px; margin: 0 auto; background-color: $background-color; - border-radius: $border-radius; box-shadow: $box-shadow; } From a910e6273f5fb3ee1bbecf93512b22348ea162e2 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 17:19:33 -0400 Subject: [PATCH 04/33] style: Adjusting colour choice for technologies --- src/Components/About/About.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index debf90f..ffc89aa 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -62,14 +62,14 @@ $border-radius: 8px; background-color: lighten($background-color, 5%); padding: 10px; border-radius: 4px; - color: $primary-color; + color: lighten($background-color, 70%); display: flex; align-items: center; gap: 8px; transition: background-color 0.3s ease; &:hover { - background-color: $hover-color; + background-color: darken($background-color, 10%); } } From 61997c684cdd7b7820c66cd7be7bf2ca558dbb37 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 17:27:49 -0400 Subject: [PATCH 05/33] style: Better display of technologies --- src/Components/About/About.scss | 31 ++++++++++++++++--------------- src/Components/About/About.tsx | 2 +- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index ffc89aa..fe42ced 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -17,9 +17,9 @@ $border-radius: 8px; } .AboutTitle { - font-size: 2.5rem; + font-size: 3rem; margin-bottom: 20px; - color: $primary-color; + color: darken($primary-color, 10%); text-align: center; } @@ -43,7 +43,7 @@ $border-radius: 8px; .TechnologiesTitle { font-size: 2rem; - margin-bottom: 20px; + margin-bottom: 30px; color: $primary-color; text-align: center; } @@ -53,23 +53,25 @@ $border-radius: 8px; padding: 0; display: flex; flex-wrap: wrap; - gap: 10px; + gap: 15px; + justify-content: center; } .TechList li { - font-size: 1.1rem; - margin-bottom: 10px; - background-color: lighten($background-color, 5%); - padding: 10px; - border-radius: 4px; - color: lighten($background-color, 70%); + font-size: 1.2rem; + background-color: lighten($background-color, 10%); + padding: 12px 20px; + border-radius: $border-radius; + color: $text-color; display: flex; align-items: center; - gap: 8px; - transition: background-color 0.3s ease; + gap: 10px; + transition: background-color 0.3s ease, transform 0.3s ease; + box-shadow: $box-shadow; &:hover { - background-color: darken($background-color, 10%); + background-color: darken($background-color, 15%); + transform: scale(1.05); } } @@ -80,7 +82,6 @@ $border-radius: 8px; .AboutContent { margin-right: 0; - margin-bottom: 20px; + margin-bottom: 30px; } } - diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index b188988..ca612c3 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -17,7 +17,7 @@ const About: React.FC = () => {
-

Technologies I Work With

+

TechStack

From b3d2411b84c0a5afed365b6b3cf352a53ad04310 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:02:45 -0400 Subject: [PATCH 07/33] feat: Categorize tech stack --- src/Components/About/About.tsx | 132 ++++++++++++++++++++------------- 1 file changed, 79 insertions(+), 53 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index f4353f9..c4f20ea 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -7,7 +7,7 @@ import { import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiSql } from 'react-icons/si'; const About: React.FC = () => { @@ -25,58 +25,84 @@ const About: React.FC = () => {

TechStack

- + +
+

Languages

+ +
+ +
+

Frameworks & Libraries

+ +
+ +
+

Tools & Platforms

+ +
+ +
+

Databases

+ +
From be060016c96790b4de0b84f434ebdea71a3d9406 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:04:26 -0400 Subject: [PATCH 08/33] fix: SQL Icon --- src/Components/About/About.tsx | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index c4f20ea..1cbc22a 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -2,12 +2,12 @@ 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 + FaAngular, FaBootstrap, FaFigma, FaRaspberryPi, FaDatabase } from 'react-icons/fa'; import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiSql + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, } from 'react-icons/si'; const About: React.FC = () => { @@ -35,7 +35,7 @@ const About: React.FC = () => {
  • TypeScript
  • C#
  • Kotlin
    • -
  • SQL
    • +
  • SQL
  • PHP
  • PowerShell
  • Bash
    • @@ -97,12 +97,6 @@ const About: React.FC = () => {
  • Microsoft SQL Server
    • - -
    -

    Databases

    - -
    From 2becb9f044e5743de4fdd92283e1908c1de315ba Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:09:16 -0400 Subject: [PATCH 09/33] chore: Fix up some code style --- src/Components/About/About.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 1cbc22a..3b224f3 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -7,7 +7,7 @@ import { import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity } from 'react-icons/si'; const About: React.FC = () => { @@ -40,17 +40,17 @@ const About: React.FC = () => {
  • PowerShell
  • Bash
  • Markdown
    • -
  • HTML
    • -
  • CSS
    • +
  • HTML
    • +
  • CSS

    • Frameworks & Libraries

    From db34f2ad589430bdbf989e64a0aa93775b6baf34 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:14:20 -0400 Subject: [PATCH 12/33] feat: Mantine Icon --- src/Components/About/About.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 8243279..aaae698 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -7,7 +7,7 @@ import { import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine } from 'react-icons/si'; const About: React.FC = () => { @@ -57,7 +57,7 @@ const About: React.FC = () => {
  • jQuery
  • Angular
  • Bootstrap
    • -
  • Mantine
    • +
  • Mantine
  • Node.js
  • SCSS
  • TailwindCSS
    • From 6deab225d329c5fdf680dc2f8d0a68b520abb11c Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:17:11 -0400 Subject: [PATCH 13/33] fix: Proper icons per item --- src/Components/About/About.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index aaae698..acbab05 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -2,12 +2,12 @@ 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, FaDatabase, FaTerminal + FaAngular, FaBootstrap, FaFigma, FaRaspberryPi, FaDatabase } from 'react-icons/fa'; import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine, SiGnubash, SiPowershell } from 'react-icons/si'; const About: React.FC = () => { @@ -37,8 +37,8 @@ const About: React.FC = () => {
  • Kotlin
  • SQL
  • PHP
    • -
  • PowerShell
    • -
  • Bash
    • +
  • PowerShell
    • +
  • Bash
  • Markdown
  • HTML
  • CSS
    • From f0f9a49a32cb2326dc9a846454225e1b1ee9df56 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:51:07 -0400 Subject: [PATCH 14/33] feat: SQL organizing & Item styling --- src/Components/About/About.scss | 28 +++++++++++++++++++++++++++- src/Components/About/About.tsx | 9 ++++----- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index fe42ced..455f870 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -9,6 +9,11 @@ $hover-color: #ced4da; $box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); $border-radius: 8px; +// Tint colors for list items in each category +$language-item-tint: lighten($background-color, 10%); +$framework-item-tint: lighten($background-color, 5%); +$tools-item-tint: lighten($background-color, 15%); + .AboutContainer { padding: 20px; margin: 0 auto; @@ -48,6 +53,16 @@ $border-radius: 8px; text-align: center; } +.CategoryContainer { + margin-bottom: 20px; +} + +.CategoryTitle { + font-size: 1.5rem; + margin-bottom: 10px; + color: $primary-color; +} + .TechList { list-style-type: none; padding: 0; @@ -57,9 +72,20 @@ $border-radius: 8px; 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.2rem; - background-color: lighten($background-color, 10%); padding: 12px 20px; border-radius: $border-radius; color: $text-color; diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index acbab05..3e6affb 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -7,7 +7,7 @@ import { import { SiCsharp, SiSqlite, SiKotlin, SiDotnet, SiXamarin, SiTypescript, SiJquery, SiNextdotjs, SiAzuredevops, SiFirebase, SiVercel, SiCloudflare, SiExpress, SiTailwindcss, SiNginx, SiMongodb, SiMysql, SiMicrosoftsqlserver, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine, SiGnubash, SiPowershell + SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine, SiGnubash, SiPowershell } from 'react-icons/si'; const About: React.FC = () => { @@ -35,13 +35,15 @@ const About: React.FC = () => {
  • TypeScript
  • C#
  • Kotlin
    • -
  • SQL
  • PHP
  • PowerShell
  • Bash
  • Markdown
  • HTML
  • CSS
    • +
  • MSSQL
    • +
  • SQLite
    • +
  • MySQL
    • @@ -91,10 +93,7 @@ const About: React.FC = () => {
  • Canva
  • Figma
  • Gimp
    • -
  • SQLite
  • MongoDB
    • -
  • MySQL
    • -
  • MSSQL
    • From 25478d6fbf628fc3ad40cccc2b739280f8bf6746 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 18:54:58 -0400 Subject: [PATCH 15/33] feat: Remove some unnecessary items --- src/Components/About/About.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 3e6affb..02371bb 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -86,13 +86,9 @@ const About: React.FC = () => {
  • Postman
  • Swagger
  • Jira
    • -
  • Gradle
    • -
  • Arduino
  • Cisco
  • Raspberry Pi
    • -
  • Canva
  • Figma
    • -
  • Gimp
  • MongoDB
    • From 07e60222f5e0abbb36115eec5283ce370b67cd91 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:00:25 -0400 Subject: [PATCH 16/33] feat: Remove About Title --- src/Components/About/About.scss | 7 ------- src/Components/About/About.tsx | 1 - 2 files changed, 8 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 455f870..d30f764 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -21,13 +21,6 @@ $tools-item-tint: lighten($background-color, 15%); box-shadow: $box-shadow; } -.AboutTitle { - font-size: 3rem; - margin-bottom: 20px; - color: darken($primary-color, 10%); - text-align: center; -} - .AboutContentContainer { display: flex; justify-content: space-between; diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 02371bb..54710fb 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -13,7 +13,6 @@ import { const About: React.FC = () => { return (
    -

    About Me

    From 3f1ee7162ee9ba69df982242f599e677d0b7f020 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:05:17 -0400 Subject: [PATCH 17/33] style: Colour correction --- src/Components/About/About.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index d30f764..3326278 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -3,6 +3,7 @@ $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; @@ -10,9 +11,9 @@ $box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); $border-radius: 8px; // Tint colors for list items in each category -$language-item-tint: lighten($background-color, 10%); -$framework-item-tint: lighten($background-color, 5%); -$tools-item-tint: lighten($background-color, 15%); +$language-item-tint: darken($list-item-color, 30%); +$framework-item-tint: darken($list-item-color, 35%); +$tools-item-tint: darken($list-item-color, 40%); .AboutContainer { padding: 20px; From 4fea79ae3c70e650ca376d8138adac9a9076dc57 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:09:43 -0400 Subject: [PATCH 18/33] fix: Temp changes to text colours --- src/Components/About/About.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 3326278..627ae8c 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -10,7 +10,6 @@ $hover-color: #ced4da; $box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); $border-radius: 8px; -// Tint colors for list items in each category $language-item-tint: darken($list-item-color, 30%); $framework-item-tint: darken($list-item-color, 35%); $tools-item-tint: darken($list-item-color, 40%); @@ -42,8 +41,7 @@ $tools-item-tint: darken($list-item-color, 40%); .TechnologiesTitle { font-size: 2rem; - margin-bottom: 30px; - color: $primary-color; + color: $text-color; text-align: center; } @@ -54,7 +52,8 @@ $tools-item-tint: darken($list-item-color, 40%); .CategoryTitle { font-size: 1.5rem; margin-bottom: 10px; - color: $primary-color; + color: $text-color; + text-align: center; } .TechList { From 33f165324f0939a187ed33ee959269510bcb238c Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:14:39 -0400 Subject: [PATCH 19/33] fix: Background colour --- src/Components/About/About.scss | 8 -------- src/Components/About/About.tsx | 2 -- 2 files changed, 10 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 627ae8c..6cd09d5 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -16,9 +16,7 @@ $tools-item-tint: darken($list-item-color, 40%); .AboutContainer { padding: 20px; - margin: 0 auto; background-color: $background-color; - box-shadow: $box-shadow; } .AboutContentContainer { @@ -39,12 +37,6 @@ $tools-item-tint: darken($list-item-color, 40%); flex: 1; } -.TechnologiesTitle { - font-size: 2rem; - color: $text-color; - text-align: center; -} - .CategoryContainer { margin-bottom: 20px; } diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 54710fb..d52a24f 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -23,8 +23,6 @@ const About: React.FC = () => {

    -

    TechStack

    -

    Languages

      From 5daafbf7857230a969726818e793caa230109eaf Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:26:29 -0400 Subject: [PATCH 20/33] fix: Remove white space --- src/Components/About/About.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 6cd09d5..e4f110b 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -14,17 +14,21 @@ $language-item-tint: darken($list-item-color, 30%); $framework-item-tint: darken($list-item-color, 35%); $tools-item-tint: darken($list-item-color, 40%); + .AboutContainer { + width:auto; padding: 20px; background-color: $background-color; } + .AboutContentContainer { display: flex; justify-content: space-between; align-items: flex-start; } + .AboutContent { flex: 1; margin-right: 20px; From 37aad4a97bf4705624959c7e6afdaca7452c9a79 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:34:37 -0400 Subject: [PATCH 21/33] fix: Big moron mistake --- src/App.scss | 5 +++++ src/Components/About/About.scss | 2 +- src/Components/Home/Hero/Hero.scss | 1 - src/Components/Navbar.scss | 1 - src/Components/Projects/Projects.scss | 1 - 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index 86b3329..324e2a3 100644 --- a/src/App.scss +++ b/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; diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 6cd09d5..54d5959 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -15,8 +15,8 @@ $framework-item-tint: darken($list-item-color, 35%); $tools-item-tint: darken($list-item-color, 40%); .AboutContainer { + width: auto; padding: 20px; - background-color: $background-color; } .AboutContentContainer { diff --git a/src/Components/Home/Hero/Hero.scss b/src/Components/Home/Hero/Hero.scss index 1cf0b9d..30b7d7e 100644 --- a/src/Components/Home/Hero/Hero.scss +++ b/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; diff --git a/src/Components/Navbar.scss b/src/Components/Navbar.scss index cb8b3a7..8deae64 100644 --- a/src/Components/Navbar.scss +++ b/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; diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss index f9f9745..87ee421 100644 --- a/src/Components/Projects/Projects.scss +++ b/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; From e0ce732eab0ac40c48028dfca0e228746fd1303f Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 19:49:35 -0400 Subject: [PATCH 22/33] fix: Adjustments to Text --- src/Components/About/About.scss | 12 +++++++++--- src/Components/About/About.tsx | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 10c0931..3e5b6c9 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -14,20 +14,17 @@ $language-item-tint: darken($list-item-color, 30%); $framework-item-tint: darken($list-item-color, 35%); $tools-item-tint: darken($list-item-color, 40%); - .AboutContainer { width: auto; padding: 20px; } - .AboutContentContainer { display: flex; justify-content: space-between; align-items: flex-start; } - .AboutContent { flex: 1; margin-right: 20px; @@ -36,6 +33,15 @@ $tools-item-tint: darken($list-item-color, 40%); color: $secondary-color; } +.AboutText { + font-size: 2em; + color: lighten($font-color, 30%); + + @media (min-width: 1800px) { + padding: 160px 40px 0px 40px; /* top, right, bottom, left */ + } +} + .Technologies { flex: 1; } diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index d52a24f..0de15c5 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -15,7 +15,7 @@ const About: React.FC = () => {
      -

      +

      Hi, I'm Carson! I'm a passionate software developer currently working as a Junior Software Engineer. I love building cool things and exploring the world of machine learning. I'm also an active participant in hackathons, constantly seeking opportunities to enhance my skills and make an impact. From 951322be895c9a5d12665b8667880cf673cc7822 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 20:27:31 -0400 Subject: [PATCH 23/33] feat: Improved About text --- src/Components/About/About.scss | 5 +++-- src/Components/About/About.tsx | 13 ++++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 3e5b6c9..6f9c8dc 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -34,11 +34,12 @@ $tools-item-tint: darken($list-item-color, 40%); } .AboutText { - font-size: 2em; + font-size: 1.8em; + font-weight: 400; color: lighten($font-color, 30%); @media (min-width: 1800px) { - padding: 160px 40px 0px 40px; /* top, right, bottom, left */ + padding: 0px 40px 0px 40px; /* top, right, bottom, left */ } } diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 0de15c5..ffc17b3 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -16,9 +16,16 @@ const About: React.FC = () => {

      - Hi, I'm Carson! I'm a passionate software developer currently working as a Junior Software Engineer. - I love building cool things and exploring the world of machine learning. I'm also an active participant in hackathons, - constantly seeking opportunities to enhance my skills and make an impact. + 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! +
      +
      + This summer, I interned @ Tail'ed 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). +
      +
      + 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. +
      +
      + I'm not hard to track down, but you can find me on LinkedIn, GitHub. I also dabble in a bit of writing on my Dev.to / Medium pages.

      From 045c959a94f1a47a313ba48b04ee95738f605a14 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 20:31:16 -0400 Subject: [PATCH 24/33] style: Improved readability --- src/Components/About/About.scss | 5 ++--- src/Components/About/About.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 6f9c8dc..0add352 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -29,7 +29,7 @@ $tools-item-tint: darken($list-item-color, 40%); flex: 1; margin-right: 20px; font-size: 1.1rem; - line-height: 1.6; + line-height: 1.4; color: $secondary-color; } @@ -37,9 +37,8 @@ $tools-item-tint: darken($list-item-color, 40%); font-size: 1.8em; font-weight: 400; color: lighten($font-color, 30%); - @media (min-width: 1800px) { - padding: 0px 40px 0px 40px; /* top, right, bottom, left */ + padding: 0px 40px 0px 20px; /* top, right, bottom, left */ } } diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index ffc17b3..e34b2bb 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -25,7 +25,7 @@ const About: React.FC = () => { 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.

      - I'm not hard to track down, but you can find me on LinkedIn, GitHub. I also dabble in a bit of writing on my Dev.to / Medium pages. + I'm not hard to track down, but you can find me on LinkedIn, GitHub. I also dabble in a bit of writing on my Dev.to and Medium pages.

      From 3083196ecf6f0596a3164ac2f466e10637d3c419 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 20:32:16 -0400 Subject: [PATCH 25/33] feat: Mobile text change --- src/Components/About/About.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 0add352..9aa35e7 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -105,3 +105,11 @@ $tools-item-tint: darken($list-item-color, 40%); margin-bottom: 30px; } } + +@media screen and (max-width: 768px) { + .AboutText { + font-size: 1.6em; // Adjust for readability + padding-left: 20px; + padding-right: 20px; + } +} From f99909bfd8aa34281a5783ebec8d2c53d161fa68 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 21:24:30 -0400 Subject: [PATCH 26/33] style: Remove shadows --- src/Components/About/About.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 9aa35e7..61657db 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -87,7 +87,6 @@ $tools-item-tint: darken($list-item-color, 40%); align-items: center; gap: 10px; transition: background-color 0.3s ease, transform 0.3s ease; - box-shadow: $box-shadow; &:hover { background-color: darken($background-color, 15%); From d7906c11e70ee3766909900329f685d8fb2d7263 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 21:29:21 -0400 Subject: [PATCH 27/33] feat: Add a cool little background element for the About text --- src/Components/About/About.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 61657db..522e606 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -31,6 +31,9 @@ $tools-item-tint: darken($list-item-color, 40%); font-size: 1.1rem; line-height: 1.4; color: $secondary-color; + background-color: #17201bc3; + border-radius: $border-radius; + margin-left: 20px; } .AboutText { From c9fafc6f91cc37c059d69a55b1febba16dccd9d1 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 21:31:55 -0400 Subject: [PATCH 28/33] style: Mobile improvements --- src/Components/About/About.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 522e606..6d1a60a 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -113,5 +113,9 @@ $tools-item-tint: darken($list-item-color, 40%); font-size: 1.6em; // Adjust for readability padding-left: 20px; padding-right: 20px; + text-align: center; + } + .AboutContainer{ + margin-right: 20px; } } From 526eafdae27d3fc3353ad04345769e85d0f79ce8 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 21:35:21 -0400 Subject: [PATCH 29/33] style: Improved padding consistency --- src/Components/About/About.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 6d1a60a..790e2b1 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -40,9 +40,7 @@ $tools-item-tint: darken($list-item-color, 40%); font-size: 1.8em; font-weight: 400; color: lighten($font-color, 30%); - @media (min-width: 1800px) { - padding: 0px 40px 0px 20px; /* top, right, bottom, left */ - } + padding: 0px 40px 0px 20px; /* top, right, bottom, left */ } .Technologies { From 5814f62a251b60adde049940abbc3cf7252672e3 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 21:46:58 -0400 Subject: [PATCH 30/33] feat: Fun little hover animation for the hyperlinks --- src/Components/About/About.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 790e2b1..9fc44b8 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -117,3 +117,35 @@ $tools-item-tint: darken($list-item-color, 40%); margin-right: 20px; } } + +a { + color: $list-item-color; +} + +@keyframes gradientAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +a: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; +} From 992f3b4cae7df99c4ea25898d13bfbf932321bc7 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 22:13:55 -0400 Subject: [PATCH 31/33] feat: About us page fun little different font --- src/Components/About/About.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 9fc44b8..636c632 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -14,7 +14,10 @@ $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; } @@ -28,7 +31,7 @@ $tools-item-tint: darken($list-item-color, 40%); .AboutContent { flex: 1; margin-right: 20px; - font-size: 1.1rem; + font-size: 1rem; line-height: 1.4; color: $secondary-color; background-color: #17201bc3; @@ -52,7 +55,7 @@ $tools-item-tint: darken($list-item-color, 40%); } .CategoryTitle { - font-size: 1.5rem; + font-size: 1.3rem; margin-bottom: 10px; color: $text-color; text-align: center; @@ -80,7 +83,7 @@ $tools-item-tint: darken($list-item-color, 40%); } .TechList li { - font-size: 1.2rem; + font-size: 1.1rem; padding: 12px 20px; border-radius: $border-radius; color: $text-color; @@ -108,7 +111,7 @@ $tools-item-tint: darken($list-item-color, 40%); @media screen and (max-width: 768px) { .AboutText { - font-size: 1.6em; // Adjust for readability + font-size: 1.4em; // Adjust for readability padding-left: 20px; padding-right: 20px; text-align: center; From 8ed4610994f3242285040da91b23bf30c56d6706 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 22:21:47 -0400 Subject: [PATCH 32/33] fix: Isolate hover effect --- src/Components/About/About.scss | 6 +++--- src/Components/About/About.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss index 636c632..9d5e485 100644 --- a/src/Components/About/About.scss +++ b/src/Components/About/About.scss @@ -43,7 +43,7 @@ $tools-item-tint: darken($list-item-color, 40%); font-size: 1.8em; font-weight: 400; color: lighten($font-color, 30%); - padding: 0px 40px 0px 20px; /* top, right, bottom, left */ + padding: 0px 40px 0px 30px; /* top, right, bottom, left */ } .Technologies { @@ -121,7 +121,7 @@ $tools-item-tint: darken($list-item-color, 40%); } } -a { +.hoverLink { color: $list-item-color; } @@ -137,7 +137,7 @@ a { } } -a:hover { +.hoverLink:hover { background: linear-gradient( 90deg, $primary-color, diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index e34b2bb..22850b7 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -19,13 +19,13 @@ const About: React.FC = () => { 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!

      - This summer, I interned @ Tail'ed 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). + This summer, I interned @ Tail'ed 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).

      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.

      - I'm not hard to track down, but you can find me on LinkedIn, GitHub. I also dabble in a bit of writing on my Dev.to and Medium pages. + I'm not hard to track down, but you can find me on LinkedIn, GitHub. I also dabble in a bit of writing on my Dev.to and Medium pages.

      From 8ead84c57f76b0f374be150dca7b0523b3d93521 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Sat, 10 Aug 2024 22:58:07 -0400 Subject: [PATCH 33/33] fix: Remove unused icons --- src/Components/About/About.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx index 22850b7..b011e63 100644 --- a/src/Components/About/About.tsx +++ b/src/Components/About/About.tsx @@ -2,12 +2,12 @@ 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, FaDatabase + 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, SiCanva, SiGimp, SiKeras, SiPytorch, SiScikitlearn, - SiPostman, SiSwagger, SiJira, SiGradle, SiKubernetes, SiArduino, SiCisco, SiUnity, SiMantine, SiGnubash, SiPowershell + 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 = () => {