Modularize SCSS

Divide `about.scss` to smaller modules

css/about.css

@@ -45,17 +45,6 @@ main {
   max-width: 800px;
 }
 
-.intro .content h1 {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  text-shadow: 0px 0px 9px #373737;
-  color: #5488bf;
-}
-.intro .content h1 .myname {
-  font-style: normal;
-  color: #fff;
-}
-
 h2 {
   font-size: 2rem;
   margin-bottom: 1rem;
@@ -83,25 +72,25 @@ footer {
 .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");
 }
-.section1 .portrait {
+.section1 .content {
+  text-align: left;
+  margin-left: -30rem;
+}
+.section1 .content .portrait {
   text-align: right;
   margin-top: 0;
   margin-right: -25rem;
 }
-.section1 .portrait img {
+.section1 .content .portrait img {
   width: 350px;
   height: 350px;
   object-fit: cover;
   border-radius: 50%;
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
 }
-.section1 .content {
-  text-align: left;
-  margin-left: -30rem;
-}
 .section1 .content h1 {
   font-size: 4rem;
-  margin: -5rem 0 1rem;
+  margin: -6rem 0 1rem;
   color: #5488bf;
   text-shadow: 0 0 9px #373737;
 }
@@ -117,7 +106,7 @@ footer {
   display: inline;
   margin-right: 0.7ch;
 }
-.section1 .content .tagline .cursor {
+.section1 .content .tagline .tagline-item .cursor {
   display: inline-block;
   animation: blink 1s steps(2, start) infinite;
   margin-left: 0.2ch;
@@ -150,7 +139,7 @@ footer {
   .section1 .content .tagline .tagline-item:last-child {
     margin-bottom: 0;
   }
-  .section1 .content .tagline .cursor {
+  .section1 .content .tagline .tagline-item:last-child .cursor {
     margin-left: 0.4ch;
   }
 }

scss/about.scss

@@ -1,191 +1,5 @@
-// styles.scss
+@use "about/base";
-
+@use "about/section1";
-$font-stack: sans-serif;
-$background:#232323;
-$text-color: #fff;
-
-html, body {
-  margin: 0;
-  padding: 0;
-  scroll-behavior: smooth;
-  height: 100%;
-  font-family: $font-stack;
-  background: $background;
-  color: $text-color;
-}
-
-main {
-  scroll-snap-type: y mandatory;
-  overflow-y: scroll;
-  height: 100vh;
-}
-
-.section {
-  scroll-snap-align: start;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  box-sizing: border-box;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background-size: cover;
-    background-position: center;
-    filter: blur(5px);
-    opacity: 0.2;
-    z-index: 0;
-  }
-
-  .content {
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    max-width: 800px;
-  }
-}
-
-.intro .content h1 {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-  text-shadow: 0px 0px 9px #373737;
-  color: #5488bf;
-  
-  .myname {
-    font-style: normal;
-    color: $text-color;
-  }
-}
-h2 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-
-  li {
-    margin: 0.5rem 0;
-  }
-}
-
-footer {
-  margin-top: auto;
-  padding: 1rem;
-  font-size: 0.875rem;
-  text-align: center;
-  opacity: 0.5;
-}
-
-// 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');
-  }
-
-  .portrait {
-    text-align: right;
-    margin-top: 0;
-    margin-right: -25rem;
-
-    img {
-      width: 350px;
-      height: 350px;
-      object-fit: cover;
-      border-radius: 50%;
-      box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
-    }
-  }
-
-  .content {
-    text-align: left;
-    margin-left: -30rem;
-
-    h1 {
-      font-size: 4rem;
-      margin: -5rem 0 1rem;
-      color: #5488bf;
-      text-shadow: 0 0 9px #373737;
-
-      .myname {
-        font-style: normal;
-        color: $text-color;
-      }
-    }
-
-    .tagline {
-      font-size: 1.7rem;
-      text-align: left;
-
-      .tagline-item {
-        display: inline;
-        margin-right: 0.7ch;
-      }
-
-      .cursor {
-        display: inline-block;
-        animation: blink 1s steps(2, start) infinite;
-        margin-left: 0.2ch;
-      }
-    }
-  }
-
-  @media (max-width: 600px) {
-    .content {
-      margin: 0;
-
-      .portrait {
-        text-align: center;
-        margin: 0;
-
-        img {
-          width: 200px;
-          height: 200px;
-        }
-      }
-
-      h1 {
-        text-align: left;
-        margin: 0 0 1ch 1.5rem;
-        font-size: 2.7rem;
-      }
-
-      .tagline {
-        display: block;
-        margin-left: 1.5rem;
-
-        .tagline-item {
-          display: block;
-          margin-bottom: 0.3rem;
-        }
-
-        .tagline-item:last-child {
-          margin-bottom: 0;
-        }
-
-        .cursor {
-          margin-left: 0.4ch;
-        }
-      }
-    }
-  }
-}
-
-// Blinking cursor animation
-@keyframes blink {
-  0%, 100% { color: #fff0; }
-  50% { color: #fff; }
-}
-
-
 
 .section2 {
     &::before {

scss/about/_base.scss

@@ -0,0 +1,69 @@
+@use "vars" as *;
+
+html, body {
+  margin: 0;
+  padding: 0;
+  scroll-behavior: smooth;
+  height: 100%;
+  font-family: $font-stack;
+  background: $background;
+  color: $text-color;
+}
+
+main {
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+  height: 100vh;
+}
+
+.section {
+  scroll-snap-align: start;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  box-sizing: border-box;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-size: cover;
+    background-position: center;
+    filter: blur(5px);
+    opacity: 0.2;
+    z-index: 0;
+  }
+
+  .content {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    max-width: 800px;
+  }
+}
+
+h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin: 0.5rem 0;
+  }
+}
+
+footer {
+  margin-top: auto;
+  padding: 1rem;
+  font-size: 0.875rem;
+  text-align: center;
+  opacity: 0.5;
+}

scss/about/_section1.scss

@@ -0,0 +1,101 @@
+@use "vars" as *;
+
+.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');
+    }
+
+    .content {
+      text-align: left;
+      margin-left: -30rem;
+
+      .portrait {
+        text-align: right;
+        margin-top: 0;
+        margin-right: -25rem;
+    
+        img {
+          width: 350px;
+          height: 350px;
+          object-fit: cover;
+          border-radius: 50%;
+          box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+        }
+      }
+  
+      h1 {
+        font-size: 4rem;
+        margin: -6rem 0 1rem;
+        color: #5488bf;
+        text-shadow: 0 0 9px #373737;
+  
+        .myname {
+          font-style: normal;
+          color: $text-color;
+        }
+      }
+  
+      .tagline {
+        font-size: 1.7rem;
+        text-align: left;
+  
+        .tagline-item {
+          display: inline;
+          margin-right: 0.7ch;
+
+          .cursor {
+            display: inline-block;
+            animation: blink 1s steps(2, start) infinite;
+            margin-left: 0.2ch;
+          }
+        }
+      }
+    }
+  
+    @media (max-width: 600px) {
+      .content {
+        margin: 0;
+  
+        .portrait {
+          text-align: center;
+          margin: 0;
+  
+          img {
+            width: 200px;
+            height: 200px;
+          }
+        }
+  
+        h1 {
+          text-align: left;
+          margin: 0 0 1ch 1.5rem;
+          font-size: 2.7rem;
+        }
+  
+        .tagline {
+          display: block;
+          margin-left: 1.5rem;
+  
+          .tagline-item {
+            display: block;
+            margin-bottom: 0.3rem;
+          }
+  
+          .tagline-item:last-child {
+            margin-bottom: 0;
+            .cursor {
+                margin-left: 0.4ch;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  // Blinking cursor animation
+  @keyframes blink {
+    0%, 100% { color: #fff0; }
+    50% { color: #fff; }
+  }

scss/about/_vars.scss

@@ -0,0 +1,3 @@
+$font-stack: sans-serif;
+$background:#232323;
+$text-color: #fff;