From cb3bb6c4dee9c3626aac24cf05b3ef3f13c0c865 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:32:31 -0400
Subject: [PATCH 1/6] style: Smaller width on About Container

---
 src/Components/About/About.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss
index b4d8f5d..d7dfc4a 100644
--- a/src/Components/About/About.scss
+++ b/src/Components/About/About.scss
@@ -21,9 +21,11 @@ $tools-item-tint: darken($list-item-color, 40%);
 }
 
 .AboutContainer {
-  width: auto;
+  width: 85%;
   padding: 40px;
   margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .AboutContentContainer {
@@ -123,4 +125,4 @@ $tools-item-tint: darken($list-item-color, 40%);
   .AboutImageContainer {
     width: 90%;
   }
-}
\ No newline at end of file
+}

From d279a707025abd0ac5199049d7e0c99de8d50ffa Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:35:42 -0400
Subject: [PATCH 2/6] feat: About uses Framer Motion

---
 src/Components/About/About.tsx       | 23 ++++++++++++++++++-----
 src/Components/Projects/Projects.tsx |  1 -
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx
index 4f1d0c9..b6f0465 100644
--- a/src/Components/About/About.tsx
+++ b/src/Components/About/About.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
+import { motion, useInView } from 'framer-motion';
 import './About.scss';
 
 const About: React.FC = () => {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true });
+
   return (
-    <div className="AboutContainer">
+    <motion.div
+      className="AboutContainer"
+      ref={ref}
+      initial={{ opacity: 0, y: 100 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 1 }}
+    >
       <div className="AboutContentContainer">
         <div className="AboutContent">
           <p className="AboutText">
@@ -72,12 +82,15 @@ const About: React.FC = () => {
           </p>
         </div>
 
-        <div className='AboutImageContainer'>
-          <img className='AboutImage' 
-            src={`${process.env.PUBLIC_URL}/aboutImage.webp`} alt='At JACHacks' />
+        <div className="AboutImageContainer">
+          <img
+            className="AboutImage"
+            src={`${process.env.PUBLIC_URL}/aboutImage.webp`}
+            alt="At JACHacks"
+          />
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };
 
diff --git a/src/Components/Projects/Projects.tsx b/src/Components/Projects/Projects.tsx
index 49d9a74..17669c9 100644
--- a/src/Components/Projects/Projects.tsx
+++ b/src/Components/Projects/Projects.tsx
@@ -1,4 +1,3 @@
-// src/components/Projects.tsx
 import React from 'react';
 import ProjectItem from './ProjectItem';
 import { projects } from '../Data/portfolioProjects';

From 73b1ed17f086ad99d1266841fa8b54fa888e4071 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:37:31 -0400
Subject: [PATCH 3/6] feat: Framer Motion on Experience Page

---
 src/Components/About/About.tsx           |  2 +-
 src/Components/Experience/Experience.tsx | 22 +++++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/Components/About/About.tsx b/src/Components/About/About.tsx
index b6f0465..6871533 100644
--- a/src/Components/About/About.tsx
+++ b/src/Components/About/About.tsx
@@ -10,7 +10,7 @@ const About: React.FC = () => {
     <motion.div
       className="AboutContainer"
       ref={ref}
-      initial={{ opacity: 0, y: 100 }}
+      initial={{ opacity: 0, y: 50 }}
       animate={isInView ? { opacity: 1, y: 0 } : {}}
       transition={{ duration: 1 }}
     >
diff --git a/src/Components/Experience/Experience.tsx b/src/Components/Experience/Experience.tsx
index dd281e1..74e1d11 100644
--- a/src/Components/Experience/Experience.tsx
+++ b/src/Components/Experience/Experience.tsx
@@ -1,10 +1,22 @@
 import React from 'react';
+import { motion, useInView } from 'framer-motion';
 import ExperienceTimeline from './ExperienceTimeline';
 
-const Experience = () => (
-  <div className="experience-page">
-    <ExperienceTimeline />
-  </div>
-);
+const Experience: React.FC = () => {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <motion.div
+      className="experience-page"
+      ref={ref}
+      initial={{ opacity: 0, y: 50 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 1 }}
+    >
+      <ExperienceTimeline />
+    </motion.div>
+  );
+};
 
 export default Experience;

From 3c006248301658cf83b3baad610f778c73c08f6d Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 19:54:07 -0400
Subject: [PATCH 4/6] fix: Remove horizontal scroll issue

---
 src/Components/About/About.scss                   | 5 -----
 src/Components/Experience/ExperienceTimeline.scss | 1 -
 src/Components/Projects/Projects.scss             | 1 -
 3 files changed, 7 deletions(-)

diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss
index d7dfc4a..6735002 100644
--- a/src/Components/About/About.scss
+++ b/src/Components/About/About.scss
@@ -21,7 +21,6 @@ $tools-item-tint: darken($list-item-color, 40%);
 }
 
 .AboutContainer {
-  width: 85%;
   padding: 40px;
   margin-top: 20px;
   margin-left: auto;
@@ -113,7 +112,6 @@ $tools-item-tint: darken($list-item-color, 40%);
 }
 
 .AboutImage {
-  width: 90%;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 }
@@ -122,7 +120,4 @@ $tools-item-tint: darken($list-item-color, 40%);
   .AboutImage {
     width: 100%;
   }
-  .AboutImageContainer {
-    width: 90%;
-  }
 }
diff --git a/src/Components/Experience/ExperienceTimeline.scss b/src/Components/Experience/ExperienceTimeline.scss
index a8e4732..ac34c92 100644
--- a/src/Components/Experience/ExperienceTimeline.scss
+++ b/src/Components/Experience/ExperienceTimeline.scss
@@ -20,7 +20,6 @@ $tools-item-tint: darken($list-item-color, 40%);
   padding: 2rem;
   max-width: 1900px;
   margin: 0 auto;
-  width: 90%;
   align-items: start;
 
   .category-containers {
diff --git a/src/Components/Projects/Projects.scss b/src/Components/Projects/Projects.scss
index d324e35..f1c580f 100644
--- a/src/Components/Projects/Projects.scss
+++ b/src/Components/Projects/Projects.scss
@@ -19,7 +19,6 @@ a {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  width: 90%;
   margin: 0 auto;
   margin-bottom: 30px;
 

From 42961ab2893698bde864e813eb64f6a391a79c19 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 20:01:25 -0400
Subject: [PATCH 5/6] style: Proper width setting

---
 src/Components/Content/Content.scss |  7 +++++++
 src/Components/Content/Content.tsx  | 11 +++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/Components/Content/Content.scss

diff --git a/src/Components/Content/Content.scss b/src/Components/Content/Content.scss
new file mode 100644
index 0000000..8a6886a
--- /dev/null
+++ b/src/Components/Content/Content.scss
@@ -0,0 +1,7 @@
+.content-container {
+    .section-container {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/Components/Content/Content.tsx b/src/Components/Content/Content.tsx
index 4d453f8..f3afc7e 100644
--- a/src/Components/Content/Content.tsx
+++ b/src/Components/Content/Content.tsx
@@ -3,14 +3,17 @@ 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 Content: React.FC = () => {
   return (
-    <div>
+    <div className="content-container">
       <Hero />
-      <Projects />
-      <Experience />
-      <About />
+      <div className="section-container">
+        <Projects />
+        <Experience />
+        <About />
+      </div>
     </div>
   );
 };

From 1a3d05d87379289c15a59fa78c6b6d9d3b165425 Mon Sep 17 00:00:00 2001
From: carsonSgit <92652800+carsonSgit@users.noreply.github.com>
Date: Fri, 23 Aug 2024 20:04:58 -0400
Subject: [PATCH 6/6] style: Larger gap between image and text

---
 src/Components/About/About.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/About/About.scss b/src/Components/About/About.scss
index 6735002..a0fafa2 100644
--- a/src/Components/About/About.scss
+++ b/src/Components/About/About.scss
@@ -35,7 +35,7 @@ $tools-item-tint: darken($list-item-color, 40%);
 
 .AboutContent {
   flex: 1;
-  margin-right: 20px;
+  margin-right: 50px;
   font-size: 1rem;
   line-height: 1.4;
   color: $secondary-color;