chore: Lighthouse optimizing

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/react-in-jsx-scope": "off", 
+    "react/no-unescaped-entities": "warn"
+  }
+}

package.json

@@ -8,9 +8,6 @@
     "@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",
@@ -21,13 +18,10 @@
     "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.4",
     "react-typical": "^0.1.3",
-    "styled-components": "^6.1.12",
     "typescript": "^5.5.3",
     "web-vitals": "^2.1.4"
   },
@@ -58,6 +52,12 @@
     ]
   },
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.2.0",
+    "@typescript-eslint/parser": "^8.2.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "prettier": "3.3.3",
     "sass": "^1.77.8"
   }

src/Components/About/About.tsx

@@ -17,7 +17,7 @@ const About: React.FC = () => {
       <div className="AboutContentContainer">
         <div className="AboutContent">
           <p className="AboutText">
-            Hi, my name is Carson! I'm a recent grad from John Abbott College's
+            Hi, my name is Carson! I&#39;m a recent grad from John Abbott College&#39;s
             Computer Science degree continuing my education over at Concordia
             University!
             <br />
@@ -29,20 +29,20 @@ const About: React.FC = () => {
               target="_blank"
               rel="noreferrer"
             >
-              Tail'ed
+              Tail&#39;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
+            In my free time, I&#39;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{' '}
+            I&#39;m not hard to track down, but you can find me on{' '}
             <a
               className="hoverLink"
               href="https://linkedin.com/in/carsonspriggs"

src/Components/Content/Content.tsx

@@ -1,24 +1,31 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import Hero from '../Home/Hero/Hero';
-import Projects from '../Projects/Projects';
-import Experience from '../Experience/Experience';
-import About from '../About/About';
 import './Content.scss';
 
+const LazyProjects = lazy(() => import('../Projects/Projects'));
+const LazyExperience = lazy(() => import('../Experience/Experience'));
+const LazyAbout = lazy(() => import('../About/About'));
+
 const Content: React.FC = () => {
   return (
     <div className="content-container">
       <div id="hero">
         <Hero />
       </div>
       <div id="projects" className="section-container">
-        <Projects />
+        <Suspense fallback={<div>Loading projects...</div>}>
+          <LazyProjects />
+        </Suspense>
       </div>
       <div id="stats" className="section-container">
-        <Experience />
+        <Suspense fallback={<div>Loading experience...</div>}>
+          <LazyExperience />
+        </Suspense>
       </div>
       <div id="about" className="section-container">
-        <About />
+        <Suspense fallback={<div>Loading about...</div>}>
+          <LazyAbout />
+        </Suspense>
       </div>
     </div>
   );

src/Components/Home/Hero/LeftContainer.tsx

@@ -6,7 +6,7 @@ const LeftContainer: React.FC = () => {
   return (
     <div className="LeftContainer">
       <h1 className="HeroText">
-        Hi, I'm <span className="AnimatedText">Carson</span>
+        Hi, I&#39;m <span className="AnimatedText">Carson</span>
       </h1>
       <p>
         <Typewriter

src/Components/Projects/ProjectItem.tsx

@@ -2,7 +2,6 @@ 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 { ProjectItemProps } from '../Interfaces/projectItemProps';
 import './Projects.scss';
 

src/index.tsx

@@ -18,7 +18,4 @@ if (rootElement) {
   );
 }
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();