Website Update

Author: Modelized

docs/assets/css/style.css

@@ -25,6 +25,7 @@
   --menu-thumb-bg-default: rgba(255,255,255,.16);
   --menu-thumb-bg-press: rgba(255,255,255,.24);
   --accent-orange: #ff9d4d;
+  --accent-script-color: #df8d5d;
   --hero-outline-color: rgba(243, 242, 238, 0.96);
   --hero-fill-color: rgba(243, 242, 238, 0.995);
   --nav-backdrop: linear-gradient(
@@ -220,6 +221,18 @@ a {
   text-transform: uppercase;
 }
 
+.tagline-script {
+  display: inline-block;
+  font-family: "Rock Salt", cursive;
+  font-size: 0.72em;
+  font-weight: 400;
+  line-height: 1.08;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  white-space: nowrap;
+  color: var(--accent-script-color);
+}
+
 .section-note {
   margin: 1rem 0 0;
   max-width: 62ch;
@@ -1282,10 +1295,10 @@ a {
   line-height: 1.82;
 }
 
-.about-operator-title {
-  --about-role-width: 8.6ch;
-  --about-role-height: 1.08em;
-  --about-role-shift: 0px;
+.about-creator-title {
+  --about-creator-width: 8.6ch;
+  --about-creator-height: 1.08em;
+  --about-creator-shift: 0px;
 
   display: flex;
   flex-wrap: wrap;
@@ -1294,57 +1307,57 @@ a {
   max-width: 100%;
 }
 
-.about-operator-prefix,
-.about-operator-suffix,
-.about-operator-roller {
+.about-creator-prefix,
+.about-creator-suffix,
+.about-creator-roller {
   display: inline-flex;
   align-items: baseline;
 }
 
-.about-operator-prefix,
-.about-operator-suffix {
+.about-creator-prefix,
+.about-creator-suffix {
   white-space: nowrap;
 }
 
-.about-operator-roller {
+.about-creator-roller {
   flex: 0 0 auto;
   min-width: 0;
 }
 
-.about-operator-viewport {
+.about-creator-viewport {
   position: relative;
   display: block;
-  width: var(--about-role-width);
-  height: var(--about-role-height);
+  width: var(--about-creator-width);
+  height: var(--about-creator-height);
   overflow: hidden;
   transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.about-operator-track {
+.about-creator-track {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: max-content;
-  transform: translateY(calc(-1 * var(--about-role-shift)));
+  transform: translateY(calc(-1 * var(--about-creator-shift)));
   transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform;
   -webkit-user-select: none;
   user-select: none;
 }
 
-.about-operator-word {
+.about-creator-word {
   position: relative;
   display: inline-flex;
   align-items: center;
   align-self: flex-start;
-  height: var(--about-role-height);
+  height: var(--about-creator-height);
   white-space: nowrap;
   line-height: 1;
   -webkit-user-select: none;
   user-select: none;
 }
 
-.about-operator-word.is-active {
+.about-creator-word.is-active {
   -webkit-user-select: text;
   user-select: text;
 }

docs/assets/js/shell.js

@@ -1124,15 +1124,15 @@
     }
   }
 
-  function initAboutOperator() {
-    const title = document.querySelector(".about-operator-title");
+  function initAboutCreator() {
+    const title = document.querySelector(".about-creator-title");
     if (!title) {
       return;
     }
 
-    const viewport = title.querySelector(".about-operator-viewport");
-    const track = title.querySelector(".about-operator-track");
-    const words = Array.from(title.querySelectorAll(".about-operator-word"));
+    const viewport = title.querySelector(".about-creator-viewport");
+    const track = title.querySelector(".about-creator-track");
+    const words = Array.from(title.querySelectorAll(".about-creator-word"));
     if (!viewport || !track || !words.length) {
       return;
     }
@@ -1168,7 +1168,7 @@
       );
 
       metrics = { height, widths };
-      title.style.setProperty("--about-role-height", `${height}px`);
+      title.style.setProperty("--about-creator-height", `${height}px`);
       return metrics;
     };
 
@@ -1203,8 +1203,8 @@
         setImmediateTransitions(true);
       }
 
-      title.style.setProperty("--about-role-width", `${width}px`);
-      title.style.setProperty("--about-role-shift", `${shift}px`);
+      title.style.setProperty("--about-creator-width", `${width}px`);
+      title.style.setProperty("--about-creator-shift", `${shift}px`);
 
       if (immediate) {
         void title.offsetHeight;
@@ -1442,7 +1442,7 @@
     initSectionDepth();
     initReveal();
     initHeroIntro();
-    initAboutOperator();
+    initAboutCreator();
     initParallax();
     initHoverTracking();
 

docs/index.html

@@ -7,8 +7,8 @@
 
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="assets/css/style.css?v=20260409h">
+  <link href="https://fonts.googleapis.com/css2?family=Rock+Salt&family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="assets/css/style.css?v=20260409i">
 
   <link rel="icon" type="image/svg+xml" href="favicon.svg">
   <link rel="icon" sizes="192x192" href="android-chrome-192x192.png">
@@ -69,21 +69,21 @@ <h1 class="hero-title hero-title--pending" aria-label="SHAPE THE UNSEEN." data-h
       <div class="container">
         <div class="section-head reveal" data-reveal data-parallax="0.02">
           <p class="eyebrow">About Me</p>
-          <h2 class="about-operator-title" aria-label="Jason Lee, The Operator Behind Modelized">
-            <span class="about-operator-prefix" aria-hidden="true">Jason Lee, The</span>
-            <span class="about-operator-roller" aria-hidden="true">
-              <span class="about-operator-viewport">
-                <span class="about-operator-track">
-                  <span class="about-operator-word" data-word="Developer">Developer</span>
-                  <span class="about-operator-word" data-word="Engineer">Engineer</span>
-                  <span class="about-operator-word" data-word="Designer">Designer</span>
-                  <span class="about-operator-word" data-word="Artist">Artist</span>
-                  <span class="about-operator-word" data-word="Researcher">Researcher</span>
-                  <span class="about-operator-word about-operator-word--final" data-word="Operator">Operator</span>
+          <h2 class="about-creator-title" aria-label="Jason Lee, The Creator Behind Modelized">
+            <span class="about-creator-prefix" aria-hidden="true">Jason Lee, The</span>
+            <span class="about-creator-roller" aria-hidden="true">
+              <span class="about-creator-viewport">
+                <span class="about-creator-track">
+                  <span class="about-creator-word tagline-script" data-word="Developer">Developer</span>
+                  <span class="about-creator-word tagline-script" data-word="Engineer">Engineer</span>
+                  <span class="about-creator-word tagline-script" data-word="Designer">Designer</span>
+                  <span class="about-creator-word tagline-script" data-word="Artist">Artist</span>
+                  <span class="about-creator-word tagline-script" data-word="Researcher">Researcher</span>
+                  <span class="about-creator-word about-creator-word--final tagline-script" data-word="Creator">Creator</span>
                 </span>
               </span>
             </span>
-            <span class="about-operator-suffix" aria-hidden="true">Behind Modelized</span>
+            <span class="about-creator-suffix" aria-hidden="true">Behind Modelized</span>
           </h2>
         </div>
         <p class="about-copy reveal" data-reveal>
@@ -96,7 +96,7 @@ <h2 class="about-operator-title" aria-label="Jason Lee, The Operator Behind Mode
       <div class="container">
         <div class="section-head reveal" data-reveal data-parallax="0.02">
           <p class="eyebrow">Core Disciplines</p>
-          <h2>Smooth Operator Across The Entire Stack</h2>
+          <h2><span class="tagline-script">Smooth Operator</span> Across The Entire Stack</h2>
         </div>
 
         <div class="discipline-grid">
@@ -120,7 +120,7 @@ <h3>Chords</h3>
       <div class="container projects-shell">
         <div class="section-head reveal" data-reveal data-parallax="0.02">
           <p class="eyebrow">Current Projects</p>
-          <h2>Live Modules</h2>
+          <h2><span class="tagline-script">Live</span> Modules</h2>
           <p class="section-note">Where creative intent meets structural logic.</p>
         </div>
         <div id="project-track" class="project-track"></div>
@@ -152,7 +152,7 @@ <h2>Live Modules</h2>
       <div class="container">
         <div class="section-head reveal" data-reveal data-parallax="0.02">
           <p class="eyebrow">Social Connect</p>
-          <h2>Open Repositories and Direct Channels</h2>
+          <h2>A <span class="tagline-script">Closer Look</span> At The Path</h2>
         </div>
         <p class="about-copy reveal" data-reveal>
           This section anchors the public-facing routes around Modelized: open repositories, live links, and direct channels that extend the work beyond the portfolio surface.
@@ -163,6 +163,6 @@ <h2>Open Repositories and Direct Channels</h2>
 
   <div id="footer-slot"></div>
 
-  <script src="assets/js/shell.js?v=20260409h" defer></script>
+  <script src="assets/js/shell.js?v=20260409i" defer></script>
 </body>
 </html>