feat: Tweaks & Width fixes

src/Components/About/About.scss

@@ -21,9 +21,10 @@ $tools-item-tint: darken($list-item-color, 40%);
 }
 
 .AboutContainer {
-  width: auto;
   padding: 40px;
   margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .AboutContentContainer {
@@ -34,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;
@@ -111,7 +112,6 @@ $tools-item-tint: darken($list-item-color, 40%);
 }
 
 .AboutImage {
-  width: 90%;
   border-radius: $border-radius;
   box-shadow: $box-shadow;
 }
@@ -120,7 +120,4 @@ $tools-item-tint: darken($list-item-color, 40%);
   .AboutImage {
     width: 100%;
   }
-  .AboutImageContainer {
-    width: 90%;
-  }
-}
+}

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: 50 }}
+      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>
   );
 };
 

src/Components/Content/Content.scss

@@ -0,0 +1,7 @@
+.content-container {
+    .section-container {
+      max-width: 1500px;
+      margin: 0 auto;
+    }
+  }
+

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>
   );
 };

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;

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 {

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;
 

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';