From dd87592f466433010d6ab4e06585a30cfde7f17a Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Mon, 2 Jun 2025 07:33:36 +0530
Subject: [PATCH] Add `.title-footer`

- Incomplete
---
 css/about.css             | 41 +++++++++++++++++++++++++++++++--------
 html/about.html           | 16 +++++++++++----
 scss/about.scss           | 10 +++++-----
 scss/about/_base.scss     | 24 ++++++++++++++++++++---
 scss/about/_section1.scss |  5 +++--
 scss/about/_section2.scss |  6 ++++++
 6 files changed, 80 insertions(+), 22 deletions(-)
 create mode 100644 scss/about/_section2.scss

diff --git a/css/about.css b/css/about.css
index 170fd23..7f10bde 100644
--- a/css/about.css
+++ b/css/about.css
@@ -17,13 +17,25 @@ main {
 .section {
   scroll-snap-align: start;
   height: 90vh;
-  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1rem;
   box-sizing: border-box;
-  position: relative;
+  margin: 0;
+}
+.section .title-footer {
+  position: sticky;
+  top: 0;
+  height: 10vh;
+  width: 100%;
+  margin: 0;
+  z-index: 2;
+  text-align: left;
+  font-size: 2rem;
+  text-shadow: 0 0 5px #000;
+  transition: top 0.3s ease;
+  background-color: white;
+  color: purple;
 }
 .section::before {
   content: "";
@@ -43,6 +55,7 @@ main {
   z-index: 1;
   text-align: center;
   max-width: 800px;
+  margin: 0 2rem;
 }
 
 h2 {
@@ -74,12 +87,12 @@ footer {
 }
 .section1 .content {
   text-align: left;
-  margin-left: -30rem;
+  max-width: 1024px;
+  margin: 4rem auto auto;
 }
 .section1 .content .portrait {
   text-align: right;
   margin-top: 0;
-  margin-right: -25rem;
 }
 .section1 .content .portrait img {
   width: 350px;
@@ -152,22 +165,34 @@ footer {
     color: #fff;
   }
 }
-.lastsection {
-  height: 100vh;
+.section2 {
+  background-color: orange;
 }
-
 .section2::before {
   background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
 }
 
+.lastsection {
+  height: 100vh;
+}
+
+.section3 {
+  background-color: red;
+}
 .section3::before {
   background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
 }
 
+.section4 {
+  background-color: green;
+}
 .section4::before {
   background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
 }
 
+.section5 {
+  background-color: blue;
+}
 .section5::before {
   background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
 }
diff --git a/html/about.html b/html/about.html
index 03c5666..cea0865 100644
--- a/html/about.html
+++ b/html/about.html
@@ -25,15 +25,19 @@
     </section>
 
     <section class="section section2" id="about">
-      <div class="content">
+      <a class="title-footer">
         <h2>About Me</h2>
+      </a>
+      <div class="content">
         <p>A short, informal overview about who you are and what you enjoy doing.</p>
       </div>
     </section>
 
     <section class="section section3" id="skills">
-      <div class="content">
+      <a class="title-footer">
         <h2>Skills</h2>
+      </a>
+      <div class="content">
         <ul>
           <li>Web development</li>
           <li>Linux & system tinkering</li>
@@ -44,15 +48,19 @@
     </section>
 
     <section class="section section4" id="projects">
-      <div class="content">
+      <a class="title-footer">
         <h2>Projects</h2>
+      </a>
+      <div class="content">
         <p>A few interesting things I've made or contributed to.</p>
       </div>
     </section>
 
     <section class="section section5 lastsection" id="contact">
-      <div class="content">
+      <a class="title-footer">
         <h2>Contact</h2>
+      </a>
+      <div class="content">
         <p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
       </div>
       <footer>
diff --git a/scss/about.scss b/scss/about.scss
index a437ee9..b319784 100644
--- a/scss/about.scss
+++ b/scss/about.scss
@@ -1,27 +1,27 @@
 @use "about/base";
 @use "about/section1";
+@use "about/section2";
 @use "about/section5";
 
-.section2 {
-    &::before {
-      background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
-    }
-}
+
 
 .section3 {
   &::before {
     background-image: url('https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg');
   }
+  background-color: red;
 }
 
 .section4 {
   &::before {
     background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
   }
+  background-color: green;
 }
 
 .section5 {
   &::before {
     background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
   }
+  background-color: blue;
 }
diff --git a/scss/about/_base.scss b/scss/about/_base.scss
index 8d04042..75a1c4c 100644
--- a/scss/about/_base.scss
+++ b/scss/about/_base.scss
@@ -19,13 +19,30 @@ main {
 .section {
   scroll-snap-align: start;
   height: 90vh;
-  display: flex;
+  //display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1rem;
+  //padding: 1rem;
   box-sizing: border-box;
-  position: relative;
+  //position: relative;
+  margin:0; 
+
+  .title-footer {
+    position: sticky;
+    top: 0;
+    height: 10vh;
+    width: 100%;
+    margin: 0;
+    z-index: 2;
+    text-align: left;
+    //color: white;
+    font-size: 2rem;
+    text-shadow: 0 0 5px #000;
+    transition: top 0.3s ease;
+    background-color: white;
+    color: purple;
+  }
 
   &::before {
     content: "";
@@ -43,6 +60,7 @@ main {
     z-index: 1;
     text-align: center;
     max-width: 800px;
+    margin: 0 2rem;
   }
 }
 
diff --git a/scss/about/_section1.scss b/scss/about/_section1.scss
index dd794a4..e9ff9e3 100644
--- a/scss/about/_section1.scss
+++ b/scss/about/_section1.scss
@@ -9,12 +9,13 @@
 
     .content {
       text-align: left;
-      margin-left: -30rem;
+      max-width: 1024px;
+      margin: 4rem auto auto;
 
       .portrait {
         text-align: right;
         margin-top: 0;
-        margin-right: -25rem;
+        //margin-right: -25rem;
     
         img {
           width: 350px;
diff --git a/scss/about/_section2.scss b/scss/about/_section2.scss
new file mode 100644
index 0000000..52deda4
--- /dev/null
+++ b/scss/about/_section2.scss
@@ -0,0 +1,6 @@
+.section2 {
+    &::before {
+      background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
+    }
+    background-color: orange;
+}
\ No newline at end of file