change color scheme

index.html

@@ -15,6 +15,16 @@
         <h1>Chris Wangsanata</h1>
 
         <!-- TODO: Add About and Greeting Message -->
+        <div class="section-wrapper" id="about">
+            <h2>About Me</h2>
+            <div class="about-wrapper">
+                <div class="about-content-wrapper">
+                    <p>Hi! Welcome to my website. My name is Chris Wangsanata and I am a student at the University of California - Berkeley studying Computer Science.
+                        I am passionate about learning new technologies and developing software that is both functional and user-friendly.
+                        I am currently looking for a Software Engineering Internship for Summer 2024.</p>
+                </div>
+            </div>
+        </div>
 
         <div class="section-wrapper" id="education">
             <h2>Education</h2>

styles.css

@@ -37,16 +37,20 @@ h1:hover {
     transform: scale(1.05);
 }
 
+#about {
+    background-color: #C8D6B9;
+}
+
 #education {
     background-color: #769ECB;
 }
 
 #experience {
-    background-color: #9DBAD5;
+    background-color: #FAF3DD;
 }
 
 #projects {
-    background-color: #FAF3DD;
+    background-color: #9DBAD5;
 }
 
 #contact {
@@ -60,6 +64,10 @@ h1:hover {
     padding: 20px 0;
     border: 4px solid black;
 }
+/* About Section */
+.about-content-wrapper p {
+    margin: 1em 4em 1em 4em;
+}
 
 /* Education Section */
 .education-wrapper {
@@ -105,7 +113,7 @@ h1:hover {
     width: 35%;
     padding: 10px 20px;
     border-radius: 15px;
-    background-color: #a5d2ee;
+    background-color: bisque;
     transition: ease-in-out 0.2s;
 }
 
@@ -134,7 +142,7 @@ h1:hover {
     margin: 1em;
     transition: ease-in-out 0.2s;
     border-radius: 15px;
-    background-color: bisque;
+    background-color: #a5d2ee;
 }
 
 .project-list-item:hover{