Added about section with image carousel and dynamic scrolling.

site.html

@@ -12,12 +12,17 @@
     <header id="top" class="site-header">
       <nav class="navbar">
         <div class="nav-left">
+          <img
+            class="icon-pic"
+            src="images/Ravenwood Watermark .png"
+            alt="Ravenwood Watermark"
+          />
           <a href="#top" class="nav-link">The Ravenwood Arts</a>
         </div>
         <div class="nav-right">
           <a href="#about" class="nav-link">About</a>
-          <a href="#work" class="nav-link">Work</a>
           <a href="#projects" class="nav-link">Projects</a>
+          <a href="#work" class="nav-link">Work</a>
           <a href="#contact" class="nav-link">Contact</a>
         </div>
       </nav>
@@ -39,16 +44,33 @@
 
     <section id="about" class="about-section">
       <div class="about-box">
+        <!-- First Column: About Text -->
         <div class="about-text">
-          <h1 class="about-title">About Me</h1>
-          <p class="about-paragraph">Hey this is about me!</p>
+          <h1 class="about-title">About Jesse,</h1>
+          <p class="about-paragraph">Loading...</p>
+        </div>
+        <!-- Second Column: Images -->
+        <div class="about-image">
+          <img
+            src="images/Figma.jpg"
+            alt="About Me Images"
+            class="current-image"
+          />
+          <img
+            src="images/Clouds.png"
+            alt="About me images"
+            class="hidden-image"
+          />
+          <img
+            src="images/SiteUpdate1.jpg"
+            alt="About me images"
+            class="hidden-image"
+          />
+          <div class="about-buttons">
+            <button class="prev-btn">&larr;</button>
+            <button class="next-btn">&rarr;</button>
+          </div>
         </div>
-      </div>
-    </section>
-
-    <section id="work" class="work-section">
-      <div class="work-box">
-        <h2 class="section-title">Previous Work</h2>
       </div>
     </section>
 
@@ -58,6 +80,12 @@
       </div>
     </section>
 
+    <section id="work" class="work-section">
+      <div class="work-box">
+        <h2 class="section-title">Previous Work</h2>
+      </div>
+    </section>
+
     <section id="contact" class="contact-section">
       <div class="contact-box">
         <h2 class="section-title">Contact</h2>