style: Run prettier on codebase

README.md

@@ -29,10 +29,9 @@
 <div align="center"><h2> ✨ Features </h2></div>
 
 - 🎨 **Top Project Showcase:** Tiled sections featuring my top projects with links to live demos and GitHub repos.
-- 🔧 **Technologies:** A display of *most* of the technologies I've used in my CS career.
+- 🔧 **Technologies:** A display of _most_ of the technologies I've used in my CS career.
 - 📱 **Responsive Design:** Made with different screen-sizes in mind (mobile-first approach).
 
-
 <div align="center"><h2> 🔗 Important Links </h2></div>
 
 - 📚 **Development Resources:** Here are some [helpful links](https://github.com/carsonSgit/carsonsgit.github.io/issues/9) I made use of during development.
@@ -41,7 +40,6 @@
 - 📘 **TypeScript Documentation:** Explore TypeScript documentation [here](https://www.typescriptlang.org/docs/).
 - 🎨 **SCSS Documentation:** Check out the SCSS documentation [here](https://sass-lang.com/documentation).
 
-
 <div align="center"><h2> 📈 Quick Repo Stats </h2></div>
 
 <div align="center">
@@ -51,42 +49,47 @@
         <img src="https://img.shields.io/github/issues-pr-closed/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub PRs" />
     </p>
     <p>
+        <img src="https://img.shields.io/github/languages/count/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Languages" />
         <img src="https://img.shields.io/github/languages/code-size/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Code Size" />
         <img src="https://img.shields.io/github/repo-size/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Repo Size" />
-        <img src="https://img.shields.io/github/languages/count/carsonSgit/carsonSgit.github.io?style=for-the-badge" alt="GitHub Languages" />
     </p>
 </div>
 
 <div align="center"><h2> 🚀 Deploy Locally </h2></div>
 If you want to run it locally follow these steps:
 
 ### 🔧 Prerequisites:
+
 - `Git`
 - `Node.js`
 - `npm (Node Package Manager)`
 
 ### 📥 Installation Steps:
+
 1. Clone the repository:
    ```bash
    git clone https://github.com/carsonSgit/carsonsgit.github.io.git
-    ```
+   ```
 2. Go to the project directory:
-    ```bash
-    cd carsonsgit.github.io
-    ```
+   ```bash
+   cd carsonsgit.github.io
+   ```
 3. Install dependencies
-    ```bash
-    npm i
-    ```
-    **OR** if your `npm i` doesn't work
-
-    ```bash
-    npm i --force
-    ```
+
+   ```bash
+   npm i
+   ```
+
+   **OR** if your `npm i` doesn't work
+
+   ```bash
+   npm i --force
+   ```
+
 4. Run locally
-    ```bash
-    npm start
-    ```
+   ```bash
+   npm start
+   ```
 5. Open your browser at `http://localhost:3000`!
 
 <br />

public/manifest.json

@@ -20,8 +20,8 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#1c5722", 
-  "background_color": "#23272b", 
+  "theme_color": "#1c5722",
+  "background_color": "#23272b",
   "description": "Welcome to my personal portfolio!",
   "lang": "en-US"
 }

src/App.scss

@@ -26,6 +26,6 @@ body {
 }
 
 ::selection {
-  color:rgb(106, 222, 170);
+  color: rgb(106, 222, 170);
   background-color: #c7f2ea4d;
-}
+}

src/Components/About/About.scss

@@ -133,7 +133,9 @@ $tools-item-tint: darken($list-item-color, 40%);
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   box-shadow: $box-shadow;
-  transition: background 0.3s ease, transform 0.2s ease;
+  transition:
+    background 0.3s ease,
+    transform 0.2s ease;
 
   &:hover {
     transform: translateY(-2px);
@@ -174,7 +176,9 @@ $tools-item-tint: darken($list-item-color, 40%);
   font-family: 'Poppins', sans-serif;
   font-weight: 500;
   box-shadow: $box-shadow;
-  transition: background 0.3s ease, transform 0.2s ease;
+  transition:
+    background 0.3s ease,
+    transform 0.2s ease;
 
   &:hover {
     transform: translateY(-2px);
@@ -192,4 +196,3 @@ $tools-item-tint: darken($list-item-color, 40%);
   margin-top: -3px;
   font-size: 1.2em;
 }
-

src/Components/About/About.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { motion, useInView } from 'framer-motion';
-import { FaFilePdf, FaStar, FaGithub } from 'react-icons/fa'; 
+import { FaFilePdf, FaStar, FaGithub } from 'react-icons/fa';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import './About.scss';
@@ -10,8 +10,8 @@ const About: React.FC = () => {
   const isInView = useInView(ref, { once: true });
 
   const handleDownloadClick = () => {
-    toast.success("Resume downloaded successfully!", {
-      position: "bottom-right",
+    toast.success('Resume downloaded successfully!', {
+      position: 'bottom-right',
     });
   };
 
@@ -98,23 +98,23 @@ const About: React.FC = () => {
             alt="At JACHacks"
           />
           <div className="ButtonContainer">
-            <a 
-              href={`${process.env.PUBLIC_URL}/CarsonSpriggs_CV.pdf`} 
-              download 
+            <a
+              href={`${process.env.PUBLIC_URL}/CarsonSpriggs_CV.pdf`}
+              download
               onClick={handleDownloadClick}
             >
               <button className="DownloadCVButton">
                 <FaFilePdf className="DownloadIcon" />
                 Resume
               </button>
             </a>
-            <a 
-              href="https://github.com/carsonSgit/carsonsgit.github.io" 
-              target="_blank" 
+            <a
+              href="https://github.com/carsonSgit/carsonsgit.github.io"
+              target="_blank"
               rel="noreferrer"
             >
               <button className="GitHubButton">
-                <FaStar className="StarIcon" /> 
+                <FaStar className="StarIcon" />
                 this on
                 <FaGithub className="GitHubIcon" />
               </button>

src/Components/Home/Hero/Hero.scss

@@ -13,7 +13,7 @@ $font-color: #a2aa94;
   flex-direction: column;
   height: 100vh;
   color: $text-color;
-  margin-top:80px;
+  margin-top: 80px;
   margin-bottom: -100px;
   overflow: hidden;
 

src/Components/Navbar/Navbar.scss

@@ -21,7 +21,7 @@ $hamburger-size: 32px;
   left: 0;
   right: 0;
   z-index: 1000;
-  background-color: #27302B;
+  background-color: #27302b;
 
   @media (max-width: 768px) {
     padding-top: 20px;
@@ -40,7 +40,9 @@ $hamburger-size: 32px;
 
   a {
     color: $navbar-text-color;
-    transition: background 0.5s ease, color 0.5s ease;
+    transition:
+      background 0.5s ease,
+      color 0.5s ease;
 
     &:hover {
       background: linear-gradient(
@@ -97,7 +99,9 @@ $hamburger-size: 32px;
   font-size: 1.5rem;
   font-weight: 700;
   position: relative;
-  transition: background 0.5s ease, color 0.5s ease;
+  transition:
+    background 0.5s ease,
+    color 0.5s ease;
 
   @media (max-width: 768px) {
     margin: 0;
@@ -106,7 +110,9 @@ $hamburger-size: 32px;
     text-align: right;
     font-weight: 700;
     background-color: $background-color;
-    transition: transform 0.3s ease, opacity 0.3s ease;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
     transform: translateY(0px);
 
     &.show {
@@ -168,4 +174,4 @@ $hamburger-size: 32px;
   100% {
     background-position: 0% 50%;
   }
-}
+}

src/Components/Navbar/Navbar.tsx

@@ -17,11 +17,12 @@ const Navbar: React.FC = () => {
     event.preventDefault();
     const element = document.getElementById(id);
     if (element) {
-      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
-      const offsetPosition = elementPosition - 60; 
+      const elementPosition =
+        element.getBoundingClientRect().top + window.scrollY;
+      const offsetPosition = elementPosition - 60;
       window.scrollTo({
         top: offsetPosition,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     }
     setMenuOpen(false);
@@ -30,13 +31,10 @@ const Navbar: React.FC = () => {
   return (
     <nav className="navbar">
       <div className="navbar-left">
-          <a
-            href={`#hero`}
-            onClick={event => handleLinkClick(event, 'hero')}
-          >
-            carsonSgit
-          </a>
-          </div>
+        <a href={`#hero`} onClick={event => handleLinkClick(event, 'hero')}>
+          carsonSgit
+        </a>
+      </div>
       <div className="hamburger" onClick={toggleMenu}>
         {menuOpen ? <FaTimes /> : <FaBars />}
       </div>