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/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..9d5e485 --- /dev/null +++ b/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; +} diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx new file mode 100644 index 0000000..b011e63 --- /dev/null +++ b/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 ( +
+
+
+

+ 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 and Medium pages. +

+
+ +
+
+

Languages

+
    +
  • Python
    • +
  • Java
    • +
  • JavaScript
    • +
  • TypeScript
    • +
  • C#
    • +
  • Kotlin
    • +
  • PHP
    • +
  • PowerShell
    • +
  • Bash
    • +
  • Markdown
    • +
  • HTML
    • +
  • CSS
    • +
  • MSSQL
    • +
  • SQLite
    • +
  • MySQL
    • +
+
+ +
+

Frameworks & Libraries

+
    +
  • ASP.NET
    • +
  • .NET MAUI
    • +
  • WPF
    • +
  • Xamarin
    • +
  • React
    • +
  • Next.js
    • +
  • jQuery
    • +
  • Angular
    • +
  • Bootstrap
    • +
  • Mantine
    • +
  • Node.js
    • +
  • SCSS
    • +
  • TailwindCSS
    • +
  • Express.js
    • +
  • Keras
    • +
  • PyTorch
    • +
  • scikit-learn
    • +
+
+ +
+

Tools & Platforms

+
    +
  • Git
    • +
  • Docker
    • +
  • Microsoft Azure
    • +
  • AWS
    • +
  • Cloudflare
    • +
  • Firebase
    • +
  • Vercel
    • +
  • Nginx
    • +
  • Unity
    • +
  • Kubernetes
    • +
  • Postman
    • +
  • Swagger
    • +
  • Jira
    • +
  • Cisco
    • +
  • Raspberry Pi
    • +
  • Figma
    • +
  • MongoDB
    • +
+
+
+
+
+ ); +}; + +export default About; 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;