Update about section content

index.html

@@ -107,10 +107,29 @@ <h3 class="social_title blue">LET’S CONNECT</h3>
         <div class="about-myself">
           <h2 class="headline_title">About Myself</h2>
           <p class="about_details">
-            Hello I&#39;m a software developer! I can help you build a product ,
-            feature or website Look through some of my work and experience! If
-            you like what you see and have a project you need coded, don&#39;t
-            hestiate to contact me.
+            As a passionate software developer, I have the skills to bring your
+            visions to life! Whether it's crafting innovative products,
+            designing enticing features, or building captivating websites, I am
+            here to assist you every step of the way.
+            <span class="space"></span>
+            My focus is on creating remarkable solutions with a dedication to delivering high-quality
+            code and user-centric experiences. I specialize in front-end and
+            back-end development, database management, and UI/UX design.
+            <span class="space"></span>
+            My portfolio showcases a collection of projects that demonstrate the
+            depth of my expertise and experiences. Each project represents my
+            commitment to excellence and my passion for creating impactful
+            digital experiences.
+            <span class="space"></span>
+            If my work resonates with you and you have a
+            coding project in mind, I wholeheartedly encourage you to get in
+            touch. Let's collaborate and turn your ideas into remarkable
+            realities! Together, we can create meaningful solutions that leave a
+            lasting impression on your audience.
+            <span class="space"></span>
+            Thank you for visiting my portfolio. I look forward to connecting with you and making your
+            projects a resounding success!
+            <span class="space"></span>
           </p>
           <h3 class="social_title blue">LET&#39;S CONNECT</h3>
           <ul class="social_links">
@@ -145,14 +164,7 @@ <h3 class="social_title blue">LET&#39;S CONNECT</h3>
         </div>
         <div class="about-framework">
           <ul class="about_ul">
-            <h3 class="sub_title">
-              Languages
-              <img
-                class="down_arrow_icon"
-                src="./images/down-arrow-icon.png"
-                alt="down"
-              />
-            </h3>
+            <h3 class="sub_title">Languages</h3>
             <div class="frame_work_items">
               <li class="ul_item">
                 <img src="./images/js-icon.png" alt="JavaScript" /><span
@@ -170,9 +182,7 @@ <h3 class="sub_title">
                 >
               </li>
               <li class="ul_item">
-                <img src="./images/ruby.png" alt="Ruby" /><span
-                  >Ruby</span
-                >
+                <img src="./images/ruby.png" alt="Ruby" /><span>Ruby</span>
               </li>
               <li class="ul_item">
                 <img src="./images/html-icon.png" alt="HTML" /><span>HTML</span>
@@ -183,24 +193,57 @@ <h3 class="sub_title">
             </div>
           </ul>
           <ul class="about_ul">
-            <h3 class="sub_title">
-              Frameworks
-              <img
-                class="arrow_icon"
-                src="./images/right-arrow-icon.png"
-                alt="down"
-              />
-            </h3>
+            <h3 class="sub_title">Frameworks</h3>
+            <div class="frame_work_items">
+              <li class="ul_item">
+                <img src="./images/nodejs.png" alt="Nodejs" /><span
+                  >Nodejs</span
+                >
+              </li>
+              <li class="ul_item">
+                <img src="./images/react.png" alt="React" /><span>React</span>
+              </li>
+              <li class="ul_item">
+                <img src="./images/rails.png" alt="Ruby_on_Rails" /><span
+                  >Ruby on Rails</span
+                >
+              </li>
+              <li class="ul_item">
+                <img src="./images/nextjs.png" alt="Nextjs" /><span
+                  >Nextjs</span
+                >
+              </li>
+            </div>
           </ul>
           <ul class="about_ul">
-            <h3 class="sub_title">
-              Skills
-              <img
-                class="arrow_icon"
-                src="./images/right-arrow-icon.png"
-                alt="down"
-              />
-            </h3>
+            <h3 class="sub_title">Database</h3>
+            <div class="frame_work_items">
+              <li class="ul_item">
+                <img src="./images/postgresql.png" alt="PostgreSQL" /><span
+                  >PostgreSQL</span
+                >
+              </li>
+              <li class="ul_item">
+                <img src="./images/mongodb.png" alt="MongoDB" /><span
+                  >MongoDB</span
+                >
+              </li>
+              <li class="ul_item">
+                <img src="./images/firebase.png" alt="Firebase" /><span
+                  >Firebase</span
+                >
+              </li>
+            </div>
+          </ul>
+          <ul class="about_ul">
+            <h3 class="sub_title">Skills</h3>
+            <div class="skill_items">
+              <li class="skill_item">Teamwork</li>
+              <li class="skill_item">Leadership</li>
+              <li class="skill_item">Time Management</li>
+              <li class="skill_item">Cultural Diversity</li>
+              <li class="skill_item">Critical Thinking</li>
+            </div>
           </ul>
         </div>
       </section>

style.css

@@ -347,7 +347,7 @@ a:hover {
 .about {
   display: flex;
   flex-direction: column;
-  row-gap: 15px;
+  gap: 1rem;
   padding: 0 15px;
   background-color: #fff;
   border-top-right-radius: 70px;
@@ -357,6 +357,11 @@ a:hover {
   flex: 1;
 }
 
+.space {
+  display: block;
+  padding: 1rem;
+}
+
 .about_ul {
   display: flex;
   flex-direction: column;
@@ -398,6 +403,21 @@ a:hover {
   border-radius: 8px;
 }
 
+.skill_items {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.skill_item {
+  padding: 10px;
+  color: #253858;
+  font-size: 15px;
+  font-weight: bold;
+  background: #f7f7f9;
+  margin: 10px;
+  border-radius: 8px;
+}
+
 .ul_item img {
   width: 40px;
   margin-right: 20px;