From dbab8f577065428aaefffc14b4f61d21239f92f2 Mon Sep 17 00:00:00 2001
From: Candifloss <candifloss@candifloss.cc>
Date: Fri, 28 Nov 2025 23:21:51 +0530
Subject: [PATCH] Start re-designing About page

---
 css/about.css             | 267 ++++++++++++++------------------------
 html/about.html           | 115 ++++++++--------
 scss/_vars.scss           |  10 ++
 scss/about.scss           |  96 +++++++++++---
 scss/about/_base.scss     |  87 -------------
 scss/about/_section1.scss | 102 ---------------
 scss/about/_section2.scss |   6 -
 scss/about/_section5.scss |   3 -
 scss/about/_vars.scss     |   3 -
 9 files changed, 237 insertions(+), 452 deletions(-)
 create mode 100644 scss/_vars.scss
 delete mode 100644 scss/about/_base.scss
 delete mode 100644 scss/about/_section1.scss
 delete mode 100644 scss/about/_section2.scss
 delete mode 100644 scss/about/_section5.scss
 delete mode 100644 scss/about/_vars.scss

diff --git a/css/about.css b/css/about.css
index 7f10bde..a4c819d 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1,198 +1,123 @@
-html, body {
-  margin: 0;
-  padding: 0;
-  scroll-behavior: smooth;
-  height: 100%;
-  font-family: sans-serif;
-  background: #232323;
-  color: #fff;
-}
-
-main {
-  scroll-snap-type: y mandatory;
-  overflow-y: scroll;
-  height: 100vh;
-}
-
-.section {
-  scroll-snap-align: start;
-  height: 90vh;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+* {
+  all: unset;
   box-sizing: border-box;
-  margin: 0;
+}
+
+head, script {
+  display: none;
+}
+
+html, body {
+  height: 100%;
+  font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
+  background: #202020;
+  color: #e0e0e0;
+}
+
+.sections {
+  height: 100vh;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+
+/* Each section is exactly 90vh tall. */
+/* The missing 10vh comes from the next section's title-footer. */
+.section {
+  height: 90vh;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+  /* This belongs to THIS section, but visually appears at the bottom of
+   the previous section's viewport. */
+  /* The rest of the section: 80vh main content */
 }
 .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;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
 }
-.section::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;
+.section .title-footer h2 {
+  font-size: 1.2rem;
+  color: #bdbdbd;
+}
+.section .title-footer:hover h2 {
+  color: #6fa8a8;
 }
 .section .content {
-  position: relative;
-  z-index: 1;
-  text-align: center;
-  max-width: 800px;
-  margin: 0 2rem;
-}
-
-h2 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}
-ul li {
-  margin: 0.5rem 0;
-}
-
-footer {
-  margin-top: auto;
-  padding: 1rem;
-  font-size: 0.875rem;
-  text-align: center;
-  opacity: 0.5;
+  height: 80vh;
+  flex-shrink: 0;
+  padding: 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.section .content h1 {
+  font-size: 3rem;
+  margin-bottom: 0.5rem;
+  color: #e0e0e0;
+}
+.section .content p {
+  color: #bdbdbd;
+  line-height: 1.5;
 }
 
+/* background colors */
 .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");
-}
-.section1 .content {
-  text-align: left;
-  max-width: 1024px;
-  margin: 4rem auto auto;
-}
-.section1 .content .portrait {
-  text-align: right;
-  margin-top: 0;
-}
-.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 h1 {
-  font-size: 4rem;
-  margin: -6rem 0 1rem;
-  color: #5488bf;
-  text-shadow: 0 0 9px #373737;
-}
-.section1 .content h1 .myname {
-  font-style: normal;
-  color: #fff;
-}
-.section1 .content .tagline {
-  font-size: 1.7rem;
-  text-align: left;
-}
-.section1 .content .tagline .tagline-item {
-  display: inline;
-  margin-right: 0.7ch;
-}
-.section1 .content .tagline .tagline-item .cursor {
-  display: inline-block;
-  animation: blink 1s steps(2, start) infinite;
-  margin-left: 0.2ch;
-}
-@media (max-width: 600px) {
-  .section1 .content {
-    margin: 0;
-  }
-  .section1 .content .portrait {
-    text-align: center;
-    margin: 0;
-  }
-  .section1 .content .portrait img {
-    width: 200px;
-    height: 200px;
-  }
-  .section1 .content h1 {
-    text-align: left;
-    margin: 0 0 1ch 1.5rem;
-    font-size: 2.7rem;
-  }
-  .section1 .content .tagline {
-    display: block;
-    margin-left: 1.5rem;
-  }
-  .section1 .content .tagline .tagline-item {
-    display: block;
-    margin-bottom: 0.3rem;
-  }
-  .section1 .content .tagline .tagline-item:last-child {
-    margin-bottom: 0;
-  }
-  .section1 .content .tagline .tagline-item:last-child .cursor {
-    margin-left: 0.4ch;
-  }
+  background: #202020;
 }
 
-@keyframes blink {
-  0%, 100% {
-    color: rgba(255, 255, 255, 0);
-  }
-  50% {
-    color: #fff;
-  }
-}
 .section2 {
-  background-color: orange;
+  background: #1b1b1b;
 }
-.section2::before {
-  background-image: url("https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg");
-}
-
-.lastsection {
-  height: 100vh;
+.section2 .title-footer {
+  background: #1b1b1b;
 }
 
 .section3 {
-  background-color: red;
+  background: #242424;
 }
-.section3::before {
-  background-image: url("https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-013.jpg");
+.section3 .title-footer {
+  background: #242424;
 }
 
 .section4 {
-  background-color: green;
+  background: #171717;
 }
-.section4::before {
-  background-image: url("https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg");
+.section4 .title-footer {
+  background: #171717;
 }
 
 .section5 {
-  background-color: blue;
+  background: #101010;
 }
-.section5::before {
-  background-image: url("https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg");
+.section5 .title-footer {
+  background: #101010;
+}
+
+/* section5 special footer */
+.section5 footer {
+  height: 10vh;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  color: #bdbdbd;
+}
+
+/* responsive */
+@media (max-width: 768px) {
+  .section .content {
+    padding: 1.5rem;
+  }
+  .section .content h1 {
+    font-size: 2rem;
+  }
+  .title-footer h2 {
+    font-size: 1rem;
+  }
 }
diff --git a/html/about.html b/html/about.html
index cea0865..93a0bc4 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,72 +1,65 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>MyName - Portfolio</title>
-  <link rel="stylesheet" href="../css/about.css" />
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>About • candifloss.cc</title>
+  <link rel="stylesheet" href="../css/about.css">
+  <style>html { scroll-behavior: smooth; }</style>
 </head>
 <body>
-  <main>
-    <section class="section intro section1" id="intro">
-      <div class="content">
-        <div class="portrait">
-          <img src="../img/me.jpg" alt="A stylized portrait" />
-        </div>
-        <h1>
-          Hello, I'm <span class="myname">[My Name]</span>
-        </h1>
-        <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>
 
-    <section class="section section2" id="about">
-      <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>
+<main class="sections" role="main">
 
-    <section class="section section3" id="skills">
-      <a class="title-footer">
-        <h2>Skills</h2>
-      </a>
-      <div class="content">
-        <ul>
-          <li>Web development</li>
-          <li>Linux & system tinkering</li>
-          <li>Rust, Python, Bash</li>
-          <li>Designing interfaces, ricing desktops</li>
-        </ul>
-      </div>
-    </section>
+  <!-- section1 has no title-footer because nothing should peek above it -->
+  <section id="section1id" class="section section1">
+    <div class="content">
+      <h1>Section1 title</h1>
+      <p>This is section 1</p>
+    </div>
+  </section>
 
-    <section class="section section4" id="projects">
-      <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>
+  <!-- section2 starts with title-footer (this belongs to section2) -->
+  <section id="section2id" class="section section2">
+    <a class="title-footer" href="#section2id" aria-label="Section 2">
+      <h2>Section 2 title</h2>
+    </a>
+    <div class="content">
+      <p>Section 2 content</p>
+    </div>
+  </section>
 
-    <section class="section section5 lastsection" id="contact">
-      <a class="title-footer">
-        <h2>Contact</h2>
-      </a>
-      <div class="content">
-        <p>Email: you@example.com<br />Mastodon / GitHub / etc.</p>
-      </div>
-      <footer>
+  <section id="section3id" class="section section3">
+    <a class="title-footer" href="#section3id" aria-label="Section 3">
+      <h2>Section 3 title</h2>
+    </a>
+    <div class="content">
+      <p>Section 3 content</p>
+    </div>
+  </section>
+
+  <section id="section4id" class="section section4">
+    <a class="title-footer" href="#section4id" aria-label="Section 4">
+      <h2>Section 4 title</h2>
+    </a>
+    <div class="content">
+      <p>Section 4 content</p>
+    </div>
+  </section>
+
+  <section id="section5id" class="section section5">
+    <a class="title-footer" href="#section5id" aria-label="Section 5">
+      <h2>Section 5 title</h2>
+    </a>
+    <div class="content">
+      <p>Section 5 content</p>
+    </div>
+    <footer>
         <p>&copy; 2024 candifloss.cc. All rights reserved.</p>
-      </footer>
-    </section>
-  </main>
+    </footer>    
+  </section>
+
+</main>
+
 </body>
 </html>
diff --git a/scss/_vars.scss b/scss/_vars.scss
new file mode 100644
index 0000000..e0ac7a2
--- /dev/null
+++ b/scss/_vars.scss
@@ -0,0 +1,10 @@
+// colors and small tokens
+$text: #e0e0e0;
+$muted: #bdbdbd;
+$accent: #6fa8a8;
+
+$bg1: #202020;
+$bg2: #1b1b1b;
+$bg3: #242424;
+$bg4: #171717;
+$bg5: #101010;
diff --git a/scss/about.scss b/scss/about.scss
index b319784..b430433 100644
--- a/scss/about.scss
+++ b/scss/about.scss
@@ -1,27 +1,85 @@
-@use "about/base";
-@use "about/section1";
-@use "about/section2";
-@use "about/section5";
+@use "vars" as v;
 
+* { all: unset; box-sizing: border-box; }
+head, script { display: none; }
 
-
-.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;
+html, body {
+  height: 100%;
+  font-family: "IosevkaTermSlab Nerd Font Mono", monospace;
+  background: v.$bg1;
+  color: v.$text;
 }
 
-.section4 {
-  &::before {
-    background-image: url('https://www.elegantthemes.com/blog/wp-content/uploads/2013/09/bg-1-full.jpg');
-  }
-  background-color: green;
+.sections {
+  height: 100vh;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
 }
 
-.section5 {
-  &::before {
-    background-image: url('https://wallpapers.com/images/hd/professional-zoom-background-3h69jq8rrky7f3tj.jpg');
+/* Each section is exactly 90vh tall. */
+/* The missing 10vh comes from the next section's title-footer. */
+.section {
+  height: 90vh;
+  scroll-snap-align: start;
+  display: flex;
+  flex-direction: column;
+
+  /* This belongs to THIS section, but visually appears at the bottom of
+     the previous section's viewport. */
+  .title-footer {
+    height: 10vh;
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    text-decoration: none;
+    cursor: pointer;
+
+    h2 {
+      font-size: 1.2rem;
+      color: v.$muted;
+    }
+
+    &:hover h2 { color: v.$accent; }
+  }
+
+  /* The rest of the section: 80vh main content */
+  .content {
+    height: 80vh;
+    flex-shrink: 0;
+
+    padding: 3rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    h1 { font-size: 3rem; margin-bottom: .5rem; color: v.$text; }
+    p  { color: v.$muted; line-height: 1.5; }
   }
-  background-color: blue;
+}
+
+/* background colors */
+.section1 { background: v.$bg1; }
+.section2 { background: v.$bg2; .title-footer { background: v.$bg2; } }
+.section3 { background: v.$bg3; .title-footer { background: v.$bg3; } }
+.section4 { background: v.$bg4; .title-footer { background: v.$bg4; } }
+.section5 { background: v.$bg5; .title-footer { background: v.$bg5; } }
+
+/* section5 special footer */
+.section5 footer {
+  height: 10vh;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255,255,255,0.05);
+  color: v.$muted;
+}
+
+/* responsive */
+@media (max-width: 768px) {
+  .section .content { padding: 1.5rem; h1 { font-size: 2rem; } }
+  .title-footer h2 { font-size: 1rem; }
 }
diff --git a/scss/about/_base.scss b/scss/about/_base.scss
deleted file mode 100644
index 75a1c4c..0000000
--- a/scss/about/_base.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@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: 90vh;
-  //display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  //padding: 1rem;
-  box-sizing: border-box;
-  //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: "";
-    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;
-    margin: 0 2rem;
-  }
-}
-
-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;
-}
\ No newline at end of file
diff --git a/scss/about/_section1.scss b/scss/about/_section1.scss
deleted file mode 100644
index e9ff9e3..0000000
--- a/scss/about/_section1.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-@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;
-      max-width: 1024px;
-      margin: 4rem auto auto;
-
-      .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; }
-  }
\ No newline at end of file
diff --git a/scss/about/_section2.scss b/scss/about/_section2.scss
deleted file mode 100644
index 52deda4..0000000
--- a/scss/about/_section2.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.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
diff --git a/scss/about/_section5.scss b/scss/about/_section5.scss
deleted file mode 100644
index 37f25e0..0000000
--- a/scss/about/_section5.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.lastsection {
-    height: 100vh;
-}
\ No newline at end of file
diff --git a/scss/about/_vars.scss b/scss/about/_vars.scss
deleted file mode 100644
index 215cedc..0000000
--- a/scss/about/_vars.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$font-stack: sans-serif;
-$background:#232323;
-$text-color: #fff;
\ No newline at end of file