From 56f69c01d65810e38e023a8316bfc884e2427aa5 Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Tue, 27 May 2025 16:14:21 +0530
Subject: [PATCH] Cleanup code

Remove redundant verbosity
Keep same layout
Fix html classes
---
 css/about.css   | 13 +++++--------
 html/about.html |  8 ++++----
 scss/about.scss | 43 +++++++++++++++++++------------------------
 3 files changed, 28 insertions(+), 36 deletions(-)

diff --git a/css/about.css b/css/about.css
index 101c0b6..35e58db 100644
--- a/css/about.css
+++ b/css/about.css
@@ -77,6 +77,9 @@ footer {
   opacity: 0.5;
 }
 
+.section1 {
+  padding: 1rem;
+}
 .section1::before {
   background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
 }
@@ -98,8 +101,7 @@ footer {
 }
 .section1 .content h1 {
   font-size: 4rem;
-  margin-bottom: 1rem;
-  margin-top: -5rem;
+  margin: -5rem 0 1rem;
   color: #5488bf;
   text-shadow: 0 0 9px #373737;
 }
@@ -131,15 +133,10 @@ footer {
   .section1 .content .portrait img {
     width: 200px;
     height: 200px;
-    object-fit: cover;
-    border-radius: 50%;
-    margin: 0;
   }
   .section1 .content h1 {
     text-align: left;
-    margin-top: 0;
-    margin-bottom: 1ch;
-    margin-left: 1.5rem;
+    margin: 0 0 1ch 1.5rem;
     font-size: 2.7rem;
   }
   .section1 .content .tagline {
diff --git a/html/about.html b/html/about.html
index d8d1fc3..2c3c7b4 100644
--- a/html/about.html
+++ b/html/about.html
@@ -16,10 +16,10 @@
         <h1>
           Hello, I'm <span class="myname">[My Name]</span>
         </h1>
-        <p>
-          <span class="tagline">Code Wizard. </span>
-          <span class="tagline">Terminal Fanatic. </span>
-          <span class="tagline">Amateur Artist. <span class="cursor">_</span></span>
+        <p class="tagline">
+          <span class="tagline-item">Code Wizard.</span>
+          <span class="tagline-item">Terminal Fanatic.</span>
+          <span class="tagline-item">Amateur Artist.<span class="cursor">_</span></span>
         </p>
       </div>
     </section>
diff --git a/scss/about.scss b/scss/about.scss
index 8ee7c70..1e6ce01 100644
--- a/scss/about.scss
+++ b/scss/about.scss
@@ -85,6 +85,8 @@ footer {
 
 // Example background images per section
 .section1 {
+  padding: 1rem;
+
   &::before {
     background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
   }
@@ -99,7 +101,6 @@ footer {
       height: 350px;
       object-fit: cover;
       border-radius: 50%;
-      //border: 3px solid rgba(255, 255, 255, 0.3);
       box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
     }
   }
@@ -107,10 +108,10 @@ footer {
   .content {
     text-align: left;
     margin-left: -30rem;
+
     h1 {
       font-size: 4rem;
-      margin-bottom: 1rem;
-      margin-top: -5rem;
+      margin: -5rem 0 1rem;
       color: #5488bf;
       text-shadow: 0 0 9px #373737;
 
@@ -122,7 +123,6 @@ footer {
 
     .tagline {
       font-size: 1.7rem;
-      //color: #ccc;
       text-align: left;
 
       .tagline-item {
@@ -141,6 +141,7 @@ footer {
   @media (max-width: 600px) {
     .content {
       margin: 0;
+
       .portrait {
         text-align: center;
         margin: 0;
@@ -148,40 +149,33 @@ footer {
         img {
           width: 200px;
           height: 200px;
-          object-fit: cover;
-          border-radius: 50%;
-          margin: 0;
-          //border: 3px solid rgba(255, 255, 255, 0.3);
-          //box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
         }
       }
 
       h1 {
         text-align: left;
-        margin-top: 0;
-        margin-bottom: 1ch;
-        margin-left: 1.5rem;
-      font-size: 2.7rem;
+        margin: 0 0 1ch 1.5rem;
+        font-size: 2.7rem;
       }
 
       .tagline {
-      display: block;
+        display: block;
         margin-left: 1.5rem;
 
-      .tagline-item {
-        display: block;
-        margin-bottom: 0.3rem;
-      }
+        .tagline-item {
+          display: block;
+          margin-bottom: 0.3rem;
+        }
 
-      .tagline-item:last-child {
-        margin-bottom: 0; // remove extra space after last line
-      }
+        .tagline-item:last-child {
+          margin-bottom: 0;
+        }
 
-      .cursor {
-        margin-left: 0.4ch; // keep close to text
+        .cursor {
+          margin-left: 0.4ch;
+        }
       }
     }
-    }
   }
 }
 
@@ -192,6 +186,7 @@ footer {
 }
 
 
+
 .section2 {
     &::before {
       background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');