diff --git a/about.html b/about.html
index a92ddd9..4f0d5f2 100755
--- a/about.html
+++ b/about.html
@@ -9,7 +9,7 @@
   <meta name='keywords' content="Braeden Sowinski, sowinski.dev, about, software engineer, backend systems, BCIT" />
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta name='robots' content='index, follow'>
-  <meta name='theme-color' content='#1d1e20'>
+  <meta name='theme-color' content='#0c0d10'>
   <link rel='canonical' href='https://sowinski.dev/about.html'>
   <meta property='og:type' content='profile'>
   <meta property='og:title' content='About Braeden Sowinski | Software Engineer'>
@@ -67,11 +67,12 @@
     }
   </script>
 
+  <link rel="icon" type="image/svg+xml" href="./public/images/favicon.svg">
   <link rel="stylesheet" href="./public/css/style.css">
   <link rel="stylesheet" href="./public/css/about.css">
 </head>
 
-<body class="js-stop-transition">
+<body class="js-stop-transition" data-page="about">
   <header class="header">
     <nav class="nav">
       <div class="logo">
@@ -133,20 +134,24 @@
   <main class="container page-shell">
     <div class="left-content">
       <section id="profile">
-        <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="Braeden Sowinski profile photo">
-        <div class="profile-sub">
-          <h1 class="profile-name">Braeden Sowinski</h1>
-          <p class="des profile-role">
-            Software Engineer &amp; Systems Admin | CST Student @ BCIT | C4A President
-          </p>
-          <p class="des profile-focus">
-            Backend systems, APIs, data-driven software, and low-level problem solving
-          </p>
+        <h2 class="panel__bar">profile</h2>
+        <div class="panel__body">
+          <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="Braeden Sowinski profile photo">
+          <div class="profile-sub">
+            <h1 class="profile-name">Braeden Sowinski</h1>
+            <p class="des profile-role">
+              Software Engineer &amp; Systems Admin | CST Student @ BCIT | C4A President
+            </p>
+            <p class="des profile-focus">
+              Backend systems, APIs, data-driven software, and low-level problem solving
+            </p>
+          </div>
         </div>
       </section>
       <section id="skills">
-        <h3>Skills</h3>
-        <ul class="text skills-list">
+        <h2 class="panel__bar">skills</h2>
+        <div class="panel__body">
+          <ul class="text skills-list">
           <li>Java, C, Go, OCaml</li>
           <li>JavaScript and Node.js</li>
           <li>Python3+</li>
@@ -160,64 +165,68 @@
           <li>Oral & Written Communication</li>
           <li>Team Collaboration & Adaptability</li>
         </ul>
+        </div>
       </section>
     </div>
 
     <section class="about" id="about">
-      <h2 class="title">About Me</h2>
-      <p class="text">
-        I'm Braeden Sowinski, a Computer Systems Technology student at
-        <abbr title="British Columbia Institute of Technology">BCIT</abbr> focused on backend development,
-        systems administration, and building practical software that solves real problems.
-      </p>
+      <h2 class="panel__bar title">about_me</h2>
+      <div class="panel__body">
+        <p class="text">
+          I'm Braeden Sowinski, a Computer Systems Technology student at
+          <abbr title="British Columbia Institute of Technology">BCIT</abbr> focused on backend development,
+          systems administration, and building practical software that solves real problems.
+        </p>
 
-      <p class="text">
-        My work spans APIs, full-stack applications, data-driven tools, server infrastructure,
-        and software built around real users and workflows. Through personal projects, freelance work,
-        collaborative BCIT projects, and open-source development, I’ve built experience with C, Go, Java,
-        JavaScript, TypeScript, Python, Docker, MongoDB, PostgreSQL, and Debian-based systems.
-      </p>
+        <p class="text">
+          My work spans APIs, full-stack applications, data-driven tools, server infrastructure,
+          and software built around real users and workflows. Through personal projects, freelance work,
+          collaborative BCIT projects, and open-source development, I’ve built experience with C, Go, Java,
+          JavaScript, TypeScript, Python, Docker, MongoDB, PostgreSQL, and Debian-based systems.
+        </p>
 
-      <p class="text">
-        Outside of my own projects and coursework, I’m involved in BCIT’s student tech community as
-        President of Coding 4 All (C4A) Club. In this role, I help organize events, workshops, and student-focused
-        opportunities alongside the BCIT Computing Club, with the goal of helping more students learn,
-        build, and connect.
-      </p>
+        <p class="text">
+          Outside of my own projects and coursework, I’m involved in BCIT’s student tech community as
+          President of Coding 4 All (C4A) Club. In this role, I help organize events, workshops, and student-focused
+          opportunities alongside the BCIT Computing Club, with the goal of helping more students learn,
+          build, and connect.
+        </p>
 
-      <p class="text" style="margin-bottom: 0;">
-        I’m especially interested in backend systems, infrastructure, analytics, and practical tools
-        that turn messy real-world problems into clean, usable software.
-      </p>
+        <p class="text" style="margin-bottom: 0;">
+          I’m especially interested in backend systems, infrastructure, analytics, and practical tools
+          that turn messy real-world problems into clean, usable software.
+        </p>
+      </div>
     </section>
 
     <section class="honors" id="honors">
-      <h2 class="title">Highlights</h2>
+      <h2 class="panel__bar title">highlights</h2>
+      <div class="panel__body">
+        <dl>
+          <dt class="text"><b>Red Team Hackathon - 3rd Place</b></dt>
+          <dd class="text">
+            Team Cerberus Gate earned a third-place finish at the inaugural Red Team Hackathon for building a working
+            prototype around signal classification and emitter tracking.
+            <a class="honor-inline-link" href="/entry.html?type=updates&slug=red-team-hackathon-2026">Read the full write-up</a>
+            <div class="honor-subitem">
+              <span class="honor-subitem__label">Additional recognition</span>
+              <p class="honor-subitem__text">Best Dressed Award at the inaugural Red Team Hackathon.</p>
+            </div>
+          </dd>
 
-      <dl>
-        <dt class="text"><b>Red Team Hackathon - 3rd Place</b></dt>
-        <dd class="text">
-          Team Cerberus Gate earned a third-place finish at the inaugural Red Team Hackathon for building a working
-          prototype around signal classification and emitter tracking.
-          <a class="honor-inline-link" href="/entry.html?type=updates&slug=red-team-hackathon-2026">Read the full write-up</a>
-          <div class="honor-subitem">
-            <span class="honor-subitem__label">Additional recognition</span>
-            <p class="honor-subitem__text">Best Dressed Award at the inaugural Red Team Hackathon.</p>
-          </div>
-        </dd>
+          <dt class="text"><b>Capstone Project Recognition</b></dt>
+          <dd class="text">
+            Issued by <abbr title="Sullivan Heights Secondary School">SHSS</abbr> for work on schedule-generating
+            software used to produce student schedules and master timetables.
+          </dd>
 
-        <dt class="text"><b>Capstone Project Recognition</b></dt>
-        <dd class="text">
-          Issued by <abbr title="Sullivan Heights Secondary School">SHSS</abbr> for work on schedule-generating
-          software used to produce student schedules and master timetables.
-        </dd>
-
-        <dt class="text"><b>Master Digital Crafter</b></dt>
-        <dd class="text">
-          Issued by <abbr title="Sullivan Heights Secondary School">SHSS</abbr> for excellence in Web Development 10
-          and Software Engineering 11/12.
-        </dd>
-      </dl>
+          <dt class="text"><b>Master Digital Crafter</b></dt>
+          <dd class="text">
+            Issued by <abbr title="Sullivan Heights Secondary School">SHSS</abbr> for excellence in Web Development 10
+            and Software Engineering 11/12.
+          </dd>
+        </dl>
+      </div>
     </section>
 
     <footer class="footer flex-container">
diff --git a/entry.html b/entry.html
index bc174b7..0d6e38b 100644
--- a/entry.html
+++ b/entry.html
@@ -9,7 +9,7 @@
   <meta name='keywords' content="Braeden Sowinski, sowinski.dev, portfolio entry, project, update" />
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta name='robots' content='index, follow'>
-  <meta name='theme-color' content='#1d1e20'>
+  <meta name='theme-color' content='#0c0d10'>
   <link rel='canonical' href='https://sowinski.dev/entry.html'>
   <meta property='og:type' content='article'>
   <meta property='og:title' content='Portfolio Entry | Braeden Sowinski'>
@@ -46,11 +46,12 @@
     })();
   </script>
 
+  <link rel="icon" type="image/svg+xml" href="./public/images/favicon.svg">
   <link rel="stylesheet" href="./public/css/style.css">
   <link rel="stylesheet" href="./public/css/projects.css">
 </head>
 
-<body class="js-stop-transition">
+<body class="js-stop-transition" data-page="projects">
   <header class="header">
     <nav class="nav">
       <div class="logo">
diff --git a/index.html b/index.html
index 13a93fd..b850405 100755
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <meta name='keywords' content="Braeden Sowinski, sowinski.dev, software engineer, backend systems, APIs, BCIT, portfolio" />
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta name='robots' content='index, follow'>
-  <meta name='theme-color' content='#1d1e20'>
+  <meta name='theme-color' content='#0c0d10'>
   <meta name='application-name' content='sowinski.dev'>
   <link rel='canonical' href='https://sowinski.dev/'>
   <meta property='og:type' content='website'>
@@ -105,10 +105,11 @@
     }
   </script>
 
+  <link rel="icon" type="image/svg+xml" href="./public/images/favicon.svg">
   <link rel="stylesheet" href="./public/css/style.css">
 </head>
 
-<body class="js-stop-transition">
+<body class="js-stop-transition" data-page="home">
   <header class="header">
     <nav class="nav">
       <div class="logo">
@@ -167,59 +168,72 @@
     </div>
   </header>
 
-  <main class="main hero-main">
-    <div class="hero-shell">
-      <div class="hero-shell__shine"></div>
-      <img src="https://avatars.githubusercontent.com/u/48144618" class="profile" alt="Braeden Sowinski profile photo">
-      <div id="main-wrapper" class="svg-wrapper">
-        <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
-          <rect x="0" y="0" class="shape" height="60" width="320" />
-        </svg>
-        <h1 class="name">Braeden Sowinski</h1>
+  <main class="main">
+    <section class="term">
+      <div class="term__bar">
+        <span class="term__title">braeden@sowinski.dev: <b>~</b></span>
+        <span class="term__dots">&#9472; &#9633; &#10005;</span>
       </div>
+      <div class="term__body">
+        <div class="term__avatar-wrap">
+          <img src="https://avatars.githubusercontent.com/u/48144618" class="term__avatar" alt="Braeden Sowinski profile photo">
+          <span class="term__avatar-caption">./braeden.png</span>
+        </div>
 
-      <p class="des hero-description">
-        Software Engineer & Systems Admin | CST Student @ BCIT
-      </p>
-      <p class="des hero-description hero-description-secondary">
-        Backend systems, APIs, data-driven software, and low-level problem solving
-      </p>
+        <div class="term__stream">
+          <p class="cmd">whoami</p>
+          <h1 class="name line">Braeden Sowinski</h1>
 
-      <div class="hero-badges">
-        <span class="badge">BCIT CST Diploma</span>
-        <span class="badge">C4A President</span>
-        <span class="badge">Hackathon Podium Finisher</span>
+          <p class="cmd">cat ./role</p>
+          <p class="des line">
+            Software Engineer &amp; Systems Admin | CST Student @ BCIT
+          </p>
+          <p class="des line hero-description-secondary">
+            Backend systems, APIs, data-driven software, and low-level problem solving
+          </p>
+
+          <p class="cmd">ls ./highlights</p>
+          <div class="hero-badges line">
+            <span class="badge">BCIT CST Diploma</span>
+            <span class="badge">C4A President</span>
+            <span class="badge">Hackathon Podium Finisher</span>
+          </div>
+
+          <p class="cmd">ls ./pages</p>
+          <div class="hero-actions line">
+            <a class="button button-primary" href="./projects.html">projects</a>
+            <a class="button button-secondary" href="./about.html">about</a>
+          </div>
+
+          <p class="cmd">cat ./contact</p>
+        <div class="social-icons line">
+          <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target="_blank" rel="noopener noreferrer me"
+            title="LinkedIn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
+              viewBox="0 0 16 16">
+              <path
+                d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
+            </svg>
+          </a>
+          <a class="icon" href="https://git.sowinski.dev/SowinskiBraeden" target="_blank" rel="noopener noreferrer me" title="Gitea" aria-label="Gitea">
+            <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+              <path
+                d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" />
+            </svg>
+          </a>
+          <a class="icon" href="mailto:braeden@sowinski.dev" target="_blank" rel="noopener noreferrer me" title="Email">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
+              stroke-linecap="round" stroke-linejoin="round">
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+              <polyline points="22,6 12,13 2,6" />
+            </svg>
+          </a>
+        </div>
+
+          <p class="prompt-end">$ <span class="caret"></span></p>
+        </div>
       </div>
-
-      <div class="hero-actions">
-        <a class="button button-primary" href="./projects.html">View Projects</a>
-        <a class="button button-secondary" href="./about.html">About Me</a>
-      </div>
-
-      <div class="social-icons">
-        <a class="icon" href="https://www.linkedin.com/in/SowinskiBraeden" target="_blank" rel="noopener noreferrer me"
-          title="LinkedIn">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin"
-            viewBox="0 0 16 16">
-            <path
-              d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
-          </svg>
-        </a>
-        <a class="icon" href="https://git.sowinski.dev/SowinskiBraeden" target="_blank" rel="noopener noreferrer me" title="Gitea" aria-label="Gitea">
-          <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
-            <path
-              d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" />
-          </svg>
-        </a>
-        <a class="icon" href="mailto:braeden@sowinski.dev" target="_blank" rel="noopener noreferrer me" title="Email">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 21" fill="none" stroke="currentcolor" stroke-width="2"
-            stroke-linecap="round" stroke-linejoin="round">
-            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
-            <polyline points="22,6 12,13 2,6" />
-          </svg>
-        </a>
-      </div>
-    </div>
+    </section>
   </main>
 
   <script src="./public/scripts/mobile.js"></script>
diff --git a/projects.html b/projects.html
index 68dba2a..f2d4e4a 100755
--- a/projects.html
+++ b/projects.html
@@ -9,7 +9,7 @@
   <meta name='keywords' content="Braeden Sowinski, sowinski.dev, projects, updates, portfolio, software engineer, BCIT" />
   <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta name='robots' content='index, follow'>
-  <meta name='theme-color' content='#1d1e20'>
+  <meta name='theme-color' content='#0c0d10'>
   <link rel='canonical' href='https://sowinski.dev/projects.html'>
   <meta property='og:type' content='website'>
   <meta property='og:title' content='Braeden Sowinski Projects and Updates | Software Portfolio'>
@@ -43,11 +43,12 @@
     }
   </script>
 
+  <link rel="icon" type="image/svg+xml" href="./public/images/favicon.svg">
   <link rel="stylesheet" href="./public/css/style.css">
   <link rel="stylesheet" href="./public/css/projects.css">
 </head>
 
-<body class="js-stop-transition">
+<body class="js-stop-transition" data-page="projects">
   <header class="header">
     <nav class="nav">
       <div class="logo">
@@ -108,7 +109,7 @@
 
   <main class="projects-page page-shell">
     <section class="projects-hero">
-      <p class="eyebrow">Projects & Updates</p>
+      <p class="cmd">ls ~/projects --all</p>
       <h1>Braeden Sowinski projects, milestones, and technical writeups.</h1>
       <p class="projects-intro">
         A collection of backend, infrastructure, data-driven, and full-stack projects,
@@ -118,27 +119,27 @@
 
     <section class="content-section">
       <div class="section-heading">
-        <div>
-          <p class="eyebrow">Portfolio</p>
-          <h2>Selected Projects</h2>
+        <h2>selected_projects</h2>
+        <div class="section-heading__right">
+          <span id="projects-count" class="section-count"></span>
+          <a class="section-link" href="https://git.sowinski.dev/SowinskiBraeden" target="_blank" rel="noopener noreferrer">gitea</a>
         </div>
-        <a class="section-link" href="https://git.sowinski.dev/SowinskiBraeden" target="_blank" rel="noopener noreferrer">View Gitea</a>
       </div>
       <div id="projects-grid" class="content-grid">
         <p class="loading-state">Loading projects...</p>
       </div>
       <div id="projects-toggle-shell" class="projects-toggle-shell" hidden>
         <button id="projects-toggle" class="projects-toggle" type="button" aria-expanded="false">
-          Show More Projects
+          show more projects
         </button>
       </div>
     </section>
 
     <section class="content-section updates-section">
       <div class="section-heading">
-        <div>
-          <p class="eyebrow">Recent</p>
-          <h2>Updates & Achievements</h2>
+        <h2>updates_and_achievements</h2>
+        <div class="section-heading__right">
+          <span id="updates-count" class="section-count"></span>
         </div>
       </div>
       <div id="updates-grid" class="content-grid updates-grid">
diff --git a/public/css/about.css b/public/css/about.css
index 4ca031e..dcb059c 100755
--- a/public/css/about.css
+++ b/public/css/about.css
@@ -1,193 +1,243 @@
 .container {
-  display: grid;
-  grid-template-columns: minmax(280px, 320px) repeat(3, 1fr);
-  grid-template-areas:
-    "pro about about about"
-    "pro other other other"
-    "footer footer footer footer";
-  grid-template-rows: auto 1fr auto;
-  gap: 24px;
-  padding-top: 18px;
-  min-height: calc(100vh - 132px);
-  align-items: stretch;
+    display: grid;
+    grid-template-columns: minmax(260px, 300px) repeat(3, 1fr);
+    grid-template-areas:
+        "pro about about about"
+        "pro other other other"
+        "footer footer footer footer";
+    grid-template-rows: auto 1fr auto;
+    gap: 18px;
+    padding-top: 22px;
+    min-height: calc(100vh - 120px);
+    align-items: stretch;
 }
 
 .left-content {
-  grid-area: pro;
-  display: flex;
-  flex-direction: column;
+    grid-area: pro;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 }
 
 .about {
-  grid-area: about;
+    grid-area: about;
 }
 
 .honors {
-  grid-area: other;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
+    grid-area: other;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
 }
 
 .footer {
-  grid-area: footer;
+    grid-area: footer;
 }
 
-.about {
-  display: flex;
-  flex-direction: column;
-}
+/* ----------------------------------------------------------- TUI panels */
 
 section {
-  transition: 0.8s;
-  padding: 24px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
-    linear-gradient(135deg, rgba(235, 82, 52, 0.05), transparent 48%),
-    rgba(20, 21, 24, 0.36);
-  border-radius: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow:
-    0 18px 44px rgba(0, 0, 0, 0.16),
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
-  backdrop-filter: blur(14px) saturate(120%);
-  -webkit-backdrop-filter: blur(14px) saturate(120%);
+    padding: 0;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
 }
 
-body.light section {
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42)),
-    linear-gradient(135deg, rgba(235, 82, 52, 0.04), transparent 48%),
-    rgba(255, 255, 255, 0.34);
-  border-color: rgba(255, 255, 255, 0.52);
-  box-shadow:
-    0 16px 36px rgba(0, 0, 0, 0.06),
-    inset 0 1px 0 rgba(255, 255, 255, 0.72),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.22);
+.panel__bar {
+    margin: 0;
+    padding: 6px 12px;
+    background: var(--bar);
+    border-bottom: 1px solid var(--border);
+    font-size: 0.92rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    color: var(--bright);
 }
 
-section h3 {
-  margin-top: 0;
-  margin-bottom: 14px;
-  font-size: 1.2rem;
+.panel__bar::before {
+    content: "▸ ";
+    color: var(--secondary);
 }
 
-#profile {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)), url("../images/pic.png");
-  background-size: cover;
-  background-position: center;
-  color: #d8d8d9;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  margin-bottom: 0;
+.panel__body {
+    padding: 16px;
+    flex: 1;
 }
 
 #skills {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  flex: 1;
+    flex: 1;
 }
 
-#profile img {
-  border: 4px solid rgba(235, 82, 52, 0.18);
-  box-shadow: var(--shadow);
+#profile .panel__body {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+#profile img.profile {
+    width: 100%;
+    max-width: 180px;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border: 1px solid var(--border-strong);
+    border-radius: 0;
+    filter: grayscale(0.3) contrast(1.03);
 }
 
 .profile-sub {
-  background:
-    linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.42)),
-    rgba(0, 0, 0, 0.36);
-  padding: 16px;
-  border-radius: 14px;
-  margin-top: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    padding: 0;
+    border: 0;
+    background: transparent;
 }
 
-.profile-sub .profile-name,
-.profile-sub .profile-role,
-.profile-sub .profile-focus {
-  color: #f4f1ed;
-}
-
-.skills-list {
-  padding-left: 18px;
-}
-
-.skills-list li {
-  margin-bottom: 8px;
-}
-
-.text {
-  font-weight: 400;
-  transition: 0.8s;
-  margin: 0 0 14px;
-}
-
-dt {
-  margin-top: 16px;
-}
-
-dd {
-  margin-left: 0;
-  color: var(--muted);
-}
-
-.honor-inline-link {
-  display: inline-block;
-  margin-top: 8px;
-}
-
-.honor-subitem {
-  margin-top: 10px;
-  padding-left: 14px;
-}
-
-.honor-subitem__label {
-  display: inline-block;
-  font-size: 0.74rem;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.honor-subitem__text {
-  margin: 4px 0 0;
-  color: var(--muted);
-}
-
-.honors dl,
-.skills-list {
-  margin-bottom: 0;
-}
-
-@media only screen and (max-width: 920px) {
-  .container {
-    display: flex;
-    flex-direction: column;
-    min-height: auto;
-  }
-
-  #skills {
-    margin-bottom: 0;
-  }
-}
-
-
 .profile-name {
-  margin: 0 0 6px;
-  font-size: clamp(1.45rem, 2vw, 1.9rem);
-  line-height: 1.1;
+    margin: 0 0 4px;
+    font-size: 1.15rem;
+    line-height: 1.25;
 }
 
 .profile-role,
 .profile-focus {
-  margin: 0;
+    margin: 0;
+    font-size: 0.82rem;
+    color: var(--primary);
+    padding-left: 14px;
+    text-indent: -14px;
 }
 
 .profile-focus {
-  margin-top: 6px;
-  color: rgba(255, 255, 255, 0.76);
+    margin-top: 6px;
+    color: var(--muted);
+}
+
+.profile-role::before,
+.profile-focus::before {
+    content: "#\00a0";
+    color: var(--border-strong);
+}
+
+/* ------------------------------------------------------------- contents */
+
+.skills-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.85rem;
+}
+
+.skills-list li {
+    margin-bottom: 4px;
+    color: var(--primary);
+    padding-left: 14px;
+    text-indent: -14px;
+}
+
+.skills-list li::before {
+    content: "-\00a0";
+    color: var(--secondary);
+}
+
+.text {
+    font-weight: 400;
+    margin: 0 0 14px;
+    font-size: 0.9rem;
+}
+
+.about .panel__body,
+.honors .panel__body {
+    max-width: 92ch;
+}
+
+.about .text:last-child {
+    margin-bottom: 0;
+}
+
+.about .text,
+.honors .text {
+    color: var(--primary);
+}
+
+.honors dl {
+    margin: 0;
+}
+
+dt {
+    margin-top: 16px;
+}
+
+dt:first-of-type {
+    margin-top: 0;
+}
+
+dt.text {
+    margin-bottom: 4px;
+    color: var(--bright);
+}
+
+dt.text b::before {
+    content: "▸ ";
+    color: var(--secondary);
+    font-weight: 400;
+}
+
+dd {
+    margin-left: 14px;
+    color: var(--muted);
+    border-left: 1px solid var(--border);
+    padding-left: 12px;
+}
+
+dd.text {
+    color: var(--muted);
+}
+
+.honor-inline-link {
+    display: inline-block;
+    margin-top: 6px;
+    font-size: 0.82rem;
+    color: var(--secondary);
+}
+
+.honor-inline-link::before {
+    content: "> ";
+}
+
+.honor-subitem {
+    margin-top: 10px;
+    padding-left: 12px;
+    border-left: 1px solid var(--border);
+}
+
+.honor-subitem__label {
+    display: inline-block;
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--secondary);
+}
+
+.honor-subitem__text {
+    margin: 2px 0 0;
+    color: var(--muted);
+    font-size: 0.85rem;
+}
+
+abbr {
+    text-decoration: underline dotted var(--border-strong);
+    cursor: help;
+}
+
+@media only screen and (max-width: 920px) {
+    .container {
+        display: flex;
+        flex-direction: column;
+        min-height: auto;
+        gap: 14px;
+    }
+
+    #profile img.profile {
+        max-width: 140px;
+    }
 }
diff --git a/public/css/projects.css b/public/css/projects.css
index 460cea2..c68ae40 100755
--- a/public/css/projects.css
+++ b/public/css/projects.css
@@ -1,27 +1,28 @@
 .projects-page,
 .entry-page {
-    padding-top: 18px;
+    padding-top: 22px;
 }
 
+/* ----------------------------------------------------------- TUI panels */
+
 .projects-hero,
 .entry-shell,
 .content-section {
-    background: var(--menu-text-bg);
+    background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 22px;
-    padding: 28px;
-    box-shadow: var(--shadow);
 }
 
 .projects-hero {
-    margin-bottom: 24px;
+    margin-bottom: 20px;
+    padding: 20px;
 }
 
 .projects-hero h1,
 .entry-title {
-    font-size: clamp(2rem, 4vw, 3rem);
-    line-height: 1.1;
-    margin: 6px 0 14px;
+    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
+    line-height: 1.25;
+    margin: 8px 0 10px;
+    max-width: 860px;
 }
 
 .projects-intro,
@@ -29,287 +30,486 @@
     margin: 0;
     max-width: 760px;
     color: var(--muted);
+    font-size: 0.92rem;
 }
 
 .eyebrow {
-    text-transform: uppercase;
-    letter-spacing: 0.14em;
-    font-size: 0.78rem;
-    color: var(--secondary);
     margin: 0;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--secondary);
     font-weight: 700;
 }
 
-.content-section {
-    margin-bottom: 24px;
+.eyebrow::before {
+    content: "// ";
+    color: var(--border-strong);
 }
 
+.content-section {
+    margin-bottom: 20px;
+    padding: 0;
+}
+
+/* Panel title bar, like a window chrome strip in a TUI. */
 .section-heading {
     display: flex;
     justify-content: space-between;
-    align-items: end;
+    align-items: center;
     gap: 12px;
-    margin-bottom: 18px;
+    margin: 0;
+    padding: 6px 12px;
+    background: var(--bar);
+    border-bottom: 1px solid var(--border);
 }
 
 .section-heading h2 {
-    margin: 6px 0 0;
-    font-size: 1.8rem;
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    letter-spacing: 0.02em;
 }
 
-.section-link,
-.card-link,
-.entry-back,
-.inline-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 12px;
+.section-heading h2::before {
+    content: "▸ ";
+    color: var(--secondary);
+}
+
+.section-heading .eyebrow {
+    display: none;
+}
+
+.section-link {
+    font-size: 12px;
+    color: var(--muted);
     border: 1px solid var(--border);
-    padding: 10px 14px;
-    font-weight: 600;
-    background: transparent;
+    padding: 1px 8px;
+    background: var(--surface);
 }
 
-.section-link:hover,
-.card-link:hover,
-.entry-back:hover,
-.inline-button:hover {
-    border-color: rgba(235, 82, 52, 0.32);
+.section-link::before {
+    content: "> ";
+    color: var(--secondary);
+}
+
+.section-link:hover {
+    color: var(--bright);
+    border-color: var(--secondary);
 }
 
 .content-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 18px;
-}
-
-.content-card.is-hidden {
-    display: none;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 14px;
+    padding: 16px;
 }
 
 .updates-grid {
     grid-template-columns: 1fr;
 }
 
+.content-card.is-hidden {
+    display: none;
+}
+
+/* ------------------------------------------------------------ TUI cards */
+
 .content-card {
-    border-radius: 18px;
-    padding: 22px;
-    background: var(--panel);
+    padding: 0;
+    background: var(--surface-alt);
     border: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     min-height: 100%;
-    scroll-margin-top: 96px;
+    scroll-margin-top: 80px;
+    transition:
+        border-color 0.12s linear,
+        background-color 0.12s linear;
+}
+
+.content-card:hover {
+    border-color: var(--border-strong);
 }
 
 .content-card.featured {
-    border-color: rgba(235, 82, 52, 0.34);
+    border-color: rgba(235, 82, 52, 0.42);
 }
 
-.card-meta,
-.entry-meta,
-.entry-links,
-.card-links,
-.tag-list,
-.entry-tag-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
+body.light .content-card.featured {
+    border-color: rgba(200, 64, 31, 0.42);
 }
 
 .card-meta {
-    margin-bottom: 14px;
-}
-
-.card-kicker,
-.card-date,
-.entry-pill {
-    display: inline-flex;
+    display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    border-radius: 999px;
-    padding: 6px 12px;
-    font-size: 0.84rem;
-    font-weight: 600;
+    gap: 10px;
+    margin: 0;
+    padding: 4px 12px;
+    background: var(--bar);
+    border-bottom: 1px solid var(--border);
+    font-size: 11px;
 }
 
-.card-kicker,
-.entry-pill-primary {
-    background: rgba(235, 82, 52, 0.16);
+.card-kicker {
     color: var(--secondary);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
 }
 
-.card-date,
-.entry-pill-secondary {
-    background: rgba(216, 216, 217, 0.08);
+.card-date {
     color: var(--muted);
 }
 
+.card-status {
+    margin-left: auto;
+    color: var(--muted);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.card-status::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    background: var(--muted);
+    display: inline-block;
+}
+
+.card-status[data-state="active"]::before {
+    background: var(--ok);
+}
+
+.card-status[data-state="attention"]::before {
+    background: var(--secondary);
+}
+
 .content-card h3 {
-    margin: 0 0 10px;
-    font-size: 1.35rem;
-    line-height: 1.2;
+    margin: 0;
+    padding: 12px 12px 0;
+    font-size: 1.05rem;
+    line-height: 1.3;
 }
 
 .card-summary {
     color: var(--muted);
-    margin: 0 0 18px;
+    margin: 0;
+    padding: 8px 12px 12px;
+    font-size: 0.85rem;
     flex: 1;
 }
 
+.tag-list,
+.entry-tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.tag-list {
+    padding: 0 12px 12px;
+}
+
 .tag,
 .entry-tag {
     display: inline-flex;
-    border-radius: 999px;
-    padding: 6px 10px;
-    font-size: 0.82rem;
-    background: rgba(255, 255, 255, 0.04);
+    text-transform: lowercase;
+    padding: 0 6px;
+    font-size: 11px;
+    color: var(--muted);
+    background: transparent;
     border: 1px solid var(--border);
 }
 
+.tag::before,
+.entry-tag::before {
+    content: "#";
+    color: var(--border-strong);
+    margin-right: 2px;
+}
+
 .card-links,
 .entry-links {
-    margin-top: 18px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.card-links {
+    margin-top: auto;
+    padding: 10px 12px;
+    border-top: 1px solid var(--border);
+    background: var(--surface);
+}
+
+.card-link,
+.entry-back,
+.inline-button {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--border);
+    background: transparent;
+    color: var(--primary);
+    padding: 2px 9px;
+    font-size: 12px;
+}
+
+.card-link::before,
+.entry-back::before,
+.inline-button::before {
+    content: ">\00a0";
+    color: var(--secondary);
+}
+
+.card-link:hover,
+.entry-back:hover,
+.inline-button:hover {
+    color: var(--bright);
+    border-color: var(--secondary);
 }
 
 .card-link-primary,
 .inline-button-primary {
-    background: var(--secondary);
-    color: #fff;
-    border-color: transparent;
+    border-color: var(--border-strong);
+    color: var(--bright);
 }
 
 .card-link-primary:hover,
 .inline-button-primary:hover {
-    color: #fff;
-    filter: brightness(1.04);
+    background: var(--secondary);
+    color: #0c0d10;
+}
+
+.card-link-primary:hover::before,
+.inline-button-primary:hover::before {
+    color: #0c0d10;
 }
 
 .projects-toggle-shell {
     display: flex;
     justify-content: center;
-    margin-top: 20px;
+    padding: 0 16px 16px;
 }
 
 .projects-toggle {
+    font-family: var(--mono);
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    border-radius: 999px;
     border: 1px solid var(--border);
-    padding: 12px 18px;
-    font-weight: 600;
-    background: rgba(255, 255, 255, 0.03);
-    color: var(--primary);
+    padding: 4px 14px;
+    font-size: 12px;
+    background: var(--surface-alt);
+    color: var(--muted);
+    cursor: pointer;
+    transition:
+        color 0.12s linear,
+        border-color 0.12s linear;
 }
 
-.projects-toggle:hover {
-    border-color: rgba(235, 82, 52, 0.32);
+.projects-toggle::before {
+    content: "+\00a0";
     color: var(--secondary);
 }
 
+.projects-toggle[aria-expanded="true"]::before {
+    content: "-\00a0";
+}
+
+.projects-toggle:hover {
+    color: var(--bright);
+    border-color: var(--secondary);
+}
+
 .updates-grid .content-card {
-    background: linear-gradient(
-        180deg,
-        rgba(235, 82, 52, 0.08),
-        rgba(255, 255, 255, 0.02)
-    );
+    background: var(--surface-alt);
 }
 
 .site-footer {
-    margin-bottom: 24px;
+    margin-bottom: 22px;
 }
 
+/* ------------------------------------------------------------ entry page */
+
 .entry-shell {
-    padding: 24px 28px 30px;
+    padding: 20px 22px 26px;
 }
 
 .entry-header {
-    margin-bottom: 24px;
-}
-
-.entry-back {
     margin-bottom: 20px;
 }
 
-.entry-meta {
+.entry-back {
     margin-bottom: 18px;
 }
 
+.entry-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-bottom: 14px;
+    font-size: 11px;
+}
+
+.entry-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 1px 8px;
+    border: 1px solid var(--border);
+}
+
+.entry-pill-primary {
+    color: var(--secondary);
+    border-color: rgba(235, 82, 52, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 700;
+}
+
+.entry-pill-secondary {
+    color: var(--muted);
+}
+
 .entry-links {
-    margin-top: 18px;
+    margin-top: 16px;
 }
 
 .entry-content {
-    margin-top: 28px;
-    padding-top: 24px;
+    margin-top: 24px;
+    padding-top: 20px;
     border-top: 1px solid var(--border);
+    font-size: 0.92rem;
+    max-width: 88ch;
 }
 
 .entry-content h1,
 .entry-content h2,
 .entry-content h3,
 .entry-content h4 {
-    margin-top: 28px;
-    line-height: 1.2;
+    margin-top: 26px;
+    margin-bottom: 8px;
+    line-height: 1.3;
+    font-size: 1rem;
+}
+
+.entry-content h2::before,
+.entry-content h3::before {
+    content: "## ";
+    color: var(--secondary);
+    font-weight: 400;
+}
+
+.entry-content h3::before {
+    content: "### ";
 }
 
 .entry-content p,
-.entry-content li,
-.entry-content blockquote {
+.entry-content li {
     color: var(--primary);
 }
 
 .entry-content ul,
 .entry-content ol {
-    padding-left: 22px;
+    padding-left: 20px;
+}
+
+.entry-content ul {
+    list-style: none;
+    padding-left: 4px;
+}
+
+.entry-content ul li {
+    padding-left: 14px;
+    text-indent: -14px;
+}
+
+.entry-content ul li::before {
+    content: "-\00a0";
+    color: var(--secondary);
 }
 
 .entry-content a {
     color: var(--secondary);
+    border-bottom: 1px solid rgba(235, 82, 52, 0.35);
+}
+
+.entry-content a:hover {
+    border-bottom-color: var(--secondary);
 }
 
 .entry-content blockquote {
-    margin: 18px 0;
-    padding: 12px 16px;
-    border-left: 4px solid var(--secondary);
-    background: rgba(235, 82, 52, 0.08);
-    border-radius: 0 12px 12px 0;
+    margin: 16px 0;
+    padding: 10px 14px;
+    border-left: 2px solid var(--secondary);
+    background: var(--surface-alt);
+    color: var(--muted);
 }
 
 .entry-content code {
-    background: rgba(0, 0, 0, 0.24);
-    padding: 2px 6px;
-    border-radius: 6px;
-    font-size: 0.92rem;
+    background: var(--bar);
+    border: 1px solid var(--border);
+    padding: 0 4px;
+    font-size: 0.86rem;
 }
 
 .entry-content pre {
-    padding: 16px;
+    padding: 14px;
     overflow-x: auto;
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 16px;
+    background: var(--bar);
+    border: 1px solid var(--border);
+    border-left: 2px solid var(--secondary);
+    font-size: 0.84rem;
+    line-height: 1.5;
 }
 
 .entry-content pre code {
     background: transparent;
+    border: 0;
     padding: 0;
 }
 
 .entry-empty {
     text-align: center;
-    padding: 40px 18px;
+    padding: 36px 18px;
 }
 
-@media only screen and (max-width: 740pt) {
+@media only screen and (max-width: 860px) {
     .projects-hero,
-    .entry-shell,
-    .content-section {
-        padding: 22px;
+    .entry-shell {
+        padding: 18px;
+    }
+
+    .content-grid {
+        padding: 12px;
+        gap: 12px;
     }
 
     .section-heading {
         flex-direction: column;
         align-items: start;
+        gap: 6px;
     }
 }
+
+.section-heading__right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.section-count {
+    font-size: 11px;
+    color: var(--muted);
+}
+
+.section-count::before {
+    content: "[ ";
+    color: var(--border-strong);
+}
+
+.section-count::after {
+    content: " ]";
+    color: var(--border-strong);
+}
diff --git a/public/css/style.css b/public/css/style.css
index df25029..0df4852 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,45 +1,40 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
 
 :root {
-    --theme: #1d1e20;
-    --primary: #d8d8d9;
+    --theme: #0c0d10;
+    --surface: #111318;
+    --surface-alt: #15171d;
+    --bar: #16181e;
+    --primary: #c9cdd6;
+    --bright: #eef1f6;
     --secondary: #eb5234;
     --accent: #ff005a;
-    --panel: rgba(216, 216, 217, 0.08);
-    --panel-text: #303030;
-    --menu-text-bg: #303030;
-    --not-found: #030005;
-    --border: rgba(216, 216, 217, 0.12);
-    --muted: rgba(216, 216, 217, 0.72);
-    --shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
-    --hero-glow-x: 50%;
-    --hero-glow-y: 20%;
-    --hero-glow-alt-x: 50%;
-    --hero-glow-alt-y: 28%;
-    --hero-glow-rotate: 0deg;
-    --hero-glow-shift-x: 0px;
-    --hero-glow-shift-y: 0px;
+    --ok: #7fb069;
+    --muted: #767d8a;
+    --border: #262a33;
+    --border-strong: #3a404c;
+    --grid: rgba(255, 255, 255, 0.022);
+    --selection: rgba(235, 82, 52, 0.28);
+    --mono:
+        "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
+        Consolas, "Liberation Mono", monospace;
 }
 
-.light {
-    --theme: #d8d8d9;
-    --primary: rgba(0, 0, 0, 0.88);
-    --secondary: #eb5234;
-    --accent: #ff005a;
-    --panel: rgba(0, 0, 0, 0.06);
-    --panel-text: rgba(216, 216, 217);
-    --menu-text-bg: #b7b7b7;
-    --not-found: #303030;
-    --border: rgba(0, 0, 0, 0.08);
-    --muted: rgba(0, 0, 0, 0.68);
-    --shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
-    --hero-glow-x: 50%;
-    --hero-glow-y: 20%;
-    --hero-glow-alt-x: 50%;
-    --hero-glow-alt-y: 28%;
-    --hero-glow-rotate: 0deg;
-    --hero-glow-shift-x: 0px;
-    --hero-glow-shift-y: 0px;
+body.light {
+    --theme: #e7e7e2;
+    --surface: #f2f2ee;
+    --surface-alt: #ebebe5;
+    --bar: #ddddd6;
+    --primary: #24262b;
+    --bright: #0e0f12;
+    --secondary: #c8401f;
+    --accent: #c20046;
+    --ok: #4b7a3a;
+    --muted: #6a6e76;
+    --border: #cbcbc2;
+    --border-strong: #a9a9a0;
+    --grid: rgba(0, 0, 0, 0.03);
+    --selection: rgba(200, 64, 31, 0.22);
 }
 
 * {
@@ -50,95 +45,53 @@ html {
     scroll-behavior: smooth;
 }
 
+::selection {
+    background: var(--selection);
+    color: var(--bright);
+}
+
 body {
-    transition: 0.8s;
-    font-size: 18px;
-    line-height: 1.6;
+    margin: 0;
+    font-family: var(--mono);
+    font-size: 15px;
+    line-height: 1.65;
+    font-variant-ligatures: none;
+    color: var(--primary);
+    background-color: var(--theme);
     word-break: break-word;
-    background: var(--theme);
-    font-family:
-        "Poppins",
-        -apple-system,
-        BlinkMacSystemFont,
-        segoe ui,
-        Roboto,
-        Oxygen,
-        Ubuntu,
-        Cantarell,
-        open sans,
-        helvetica neue,
-        sans-serif;
     min-height: 100vh;
     position: relative;
     overflow-x: hidden;
+    transition:
+        background-color 0.25s linear,
+        color 0.25s linear;
 }
 
-body::before,
-body::after {
+/* Faint graph-paper grid, fixed so it reads as a backdrop, not content. */
+body::before {
     content: "";
     position: fixed;
-    inset: -20%;
-    pointer-events: none;
+    inset: 0;
     z-index: 0;
-    transition:
-        transform 0.18s ease-out,
-        opacity 0.25s ease-out;
-}
-
-body::before {
-    background:
-        radial-gradient(
-            circle at var(--hero-glow-x) var(--hero-glow-y),
-            rgba(235, 82, 52, 0.24),
-            transparent 18%
-        ),
-        radial-gradient(
-            circle at var(--hero-glow-alt-x) var(--hero-glow-alt-y),
-            rgba(255, 0, 90, 0.14),
-            transparent 20%
-        );
-    filter: blur(48px);
-    opacity: 0.9;
-    transform: translate3d(
-            var(--hero-glow-shift-x),
-            var(--hero-glow-shift-y),
-            0
-        )
-        rotate(var(--hero-glow-rotate));
-}
-
-body::after {
-    background:
-        radial-gradient(
-            circle at 20% 20%,
-            rgba(235, 82, 52, 0.08),
-            transparent 20%
-        ),
-        radial-gradient(
-            circle at 80% 18%,
-            rgba(255, 0, 90, 0.05),
-            transparent 18%
-        );
-    filter: blur(90px);
-    opacity: 0.55;
-    transform: translate3d(
-            calc(var(--hero-glow-shift-x) * -0.35),
-            calc(var(--hero-glow-shift-y) * -0.35),
-            0
-        )
-        rotate(calc(var(--hero-glow-rotate) * -0.45));
+    pointer-events: none;
+    background-image:
+        linear-gradient(var(--grid) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
+    background-size: 28px 28px;
 }
 
 body.js-stop-transition * {
     transition: none !important;
 }
 
-a:hover {
-    cursor: pointer;
+header,
+main,
+.page-shell {
+    position: relative;
+    z-index: 1;
 }
 
 a,
-body,
 h1,
 h2,
 h3,
@@ -150,318 +103,184 @@ dt {
     color: var(--primary);
 }
 
-header,
-nav {
-    display: block;
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--bright);
 }
 
-header,
-main,
-.page-shell {
-    position: relative;
-    z-index: 1;
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition:
+        color 0.12s linear,
+        background-color 0.12s linear,
+        border-color 0.12s linear;
 }
 
+a:hover {
+    cursor: pointer;
+    color: var(--secondary);
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+}
+
+code,
+kbd,
+samp,
+pre {
+    font-family: var(--mono);
+}
+
+/* ---------------------------------------------------------------- header */
+
 .header {
     position: relative;
     z-index: 1000;
-}
-
-ul {
-    padding: 0;
-}
-
-ul li::before {
-    content: "";
-    position: absolute;
-    margin-top: 42pt;
-    width: 0;
-    background-color: var(--secondary);
-    z-index: 9999;
-    height: 3pt;
-    transition: 0.8s all;
-}
-
-ul li#home-link:hover::before,
-ul li#about-link:hover::before {
-    width: 45pt;
-}
-
-ul li#projects-link:hover::before {
-    width: 58pt;
-}
-
-a {
-    transition: 0.8s;
-    text-decoration: none;
-}
-
-a:hover {
-    color: var(--secondary);
-}
-
-body,
-ul {
-    margin: 0;
+    border-bottom: 1px solid var(--border);
+    background: var(--bar);
 }
 
 .nav {
-    color: var(--primary);
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     justify-content: space-between;
-    max-width: calc(1024pt + 24pt * 2);
-    margin-inline-start: auto;
-    margin-inline-end: auto;
-    line-height: 60pt;
-}
-
-.nav a {
-    display: block;
-}
-
-.logo,
-#menu {
-    display: flex;
-    margin: auto 24pt;
+    gap: 12px;
+    width: min(1120px, calc(100% - 32px));
+    margin: 0 auto;
+    min-height: 46px;
 }
 
 .logo {
-    flex-wrap: inherit;
+    display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 10px;
 }
 
 .logo a {
-    font-size: 24px;
-    font-weight: 700;
     display: inline-flex;
     align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--bright);
+    letter-spacing: 0.01em;
+}
+
+.logo a::before {
+    content: "~/";
+    color: var(--secondary);
+    font-weight: 400;
 }
 
 .logo a img {
     display: block;
     pointer-events: none;
-    border-radius: 6pt;
-    margin-inline-end: 8pt;
+    border-radius: 2px !important;
+    width: 22px;
+    height: 22px;
+    border: 1px solid var(--border-strong);
+    filter: grayscale(0.25);
+}
+
+.logo a:hover {
+    color: var(--secondary);
 }
 
 #menu {
+    display: flex;
+    align-items: center;
     list-style: none;
-    word-break: keep-all;
-    overflow-x: auto;
+    gap: 4px;
     white-space: nowrap;
-}
-
-#menu li + li {
-    margin-inline-start: 24pt;
+    overflow-x: auto;
 }
 
 #menu a {
-    font-size: 16px;
-}
-
-#menu .active {
-    font-weight: 500;
-}
-
-.page-shell {
-    width: min(1120px, calc(100% - 32px));
-    margin: 0 auto;
-    padding-bottom: 32px;
-}
-
-.main {
-    text-align: center;
-    position: absolute;
-    top: 52%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(760px, calc(100% - 32px));
-    padding: 24px 12px 12px;
-    color: var(--primary);
-}
-
-.hero-main {
-    position: absolute;
-}
-
-.svg-wrapper {
-    margin: 0 auto;
-    width: 320pt;
-    position: relative;
-
-    height: 64pt;
-    overflow-y: hidden;
-}
-
-.shape {
-    z-index: 9999;
-    stroke-dasharray: 140 540;
-    stroke-dashoffset: -474;
-    stroke-width: 8pt;
-    fill: transparent;
-    stroke: var(--secondary);
-    transition:
-        stroke-width 1s,
-        stroke-dashoffset 1s,
-        stroke-dasharray 1s;
-}
-
-.svg-wrapper:hover .shape {
-    stroke-width: 2pt;
-    stroke-dashoffset: 0;
-    stroke-dasharray: 760;
-}
-
-.name {
-    transition: 0.8s;
-    font-size: 30px;
-    font-weight: 900;
-    margin: 16pt 0 10pt;
-    transform: translate(0, -64pt);
-}
-
-.name:hover,
-.des:hover,
-.mobile-name:hover {
-    color: var(--secondary);
-    cursor: default;
-}
-
-.des {
-    transition: 0.8s;
-    font-size: 1.06rem;
     display: block;
-}
-
-.hero-description {
-    margin: 0;
-}
-
-.hero-description-secondary {
-    margin-top: 6px;
+    font-size: 13px;
+    text-transform: lowercase;
+    padding: 3px 9px;
+    border: 1px solid transparent;
     color: var(--muted);
 }
 
-.profile {
-    width: 190pt;
-    height: 190pt;
-    border-radius: 50%;
-    transition: 0.8s;
-    object-fit: cover;
-    border: 4px solid rgba(235, 82, 52, 0.18);
-    box-shadow: var(--shadow);
+#menu a::before {
+    content: "[";
+    color: var(--border-strong);
+    margin-right: 2px;
 }
 
-.hero-badges {
-    display: flex;
-    justify-content: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    margin-top: 18px;
+#menu a::after {
+    content: "]";
+    color: var(--border-strong);
+    margin-left: 2px;
 }
 
-.badge {
-    border: 1px solid var(--border);
-    background: var(--panel);
-    color: var(--primary);
-    border-radius: 999px;
-    padding: 8px 14px;
-    font-size: 0.88rem;
+#menu a:hover {
+    color: var(--secondary);
 }
 
-.hero-actions {
-    display: flex;
-    gap: 12px;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 20px;
+#menu a:hover::before,
+#menu a:hover::after {
+    color: var(--secondary);
 }
 
-.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 148px;
-    border-radius: 12px;
-    padding: 12px 18px;
-    font-weight: 600;
-    border: 1px solid transparent;
-}
-
-.button-primary {
-    background: var(--secondary);
-    color: #fff;
-}
-
-.button-primary:hover {
-    color: #fff;
-    filter: brightness(1.04);
-}
-
-.button-secondary {
-    background: transparent;
+body[data-page="home"] #home-link a,
+body[data-page="about"] #about-link a,
+body[data-page="projects"] #projects-link a {
+    color: var(--bright);
+    background: var(--surface-alt);
     border-color: var(--border);
 }
 
-.social-icons {
-    padding: 12pt 0;
-}
-
-.social-icons a:not(:last-of-type) {
-    margin-inline-end: 12pt;
-}
-
-.social-icons a svg {
-    height: 26pt;
-    width: 26pt;
-}
-
-.social-icons a {
-    color: var(--primary);
-}
-
-.icon {
-    transition: 0.8s;
-}
-
-.icon:hover {
+body[data-page="home"] #home-link a::before,
+body[data-page="about"] #about-link a::before,
+body[data-page="projects"] #projects-link a::before,
+body[data-page="home"] #home-link a::after,
+body[data-page="about"] #about-link a::after,
+body[data-page="projects"] #projects-link a::after {
     color: var(--secondary);
 }
 
 .logo-switches {
-    flex-wrap: inherit;
     display: inline-flex;
     align-items: center;
 }
 
-#theme-toggle svg {
-    height: 18pt;
-}
-
 button#theme-toggle {
-    background-color: transparent;
-    border: none;
-    color: var(--primary);
-    font-size: 26px;
-    margin: 0 0 0 4pt;
-    transition: 0.8s;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    padding: 2px 5px;
+    height: 24px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    line-height: 1;
-    padding: 0;
-    height: 32px;
+    cursor: pointer;
+    transition:
+        color 0.12s linear,
+        border-color 0.12s linear;
+}
+
+button#theme-toggle svg {
+    height: 13px;
+    width: 13px;
 }
 
 button#theme-toggle:hover {
-    cursor: pointer;
     color: var(--secondary);
+    border-color: var(--secondary);
 }
 
 body.light #moon {
-    vertical-align: middle;
     display: none;
 }
 
@@ -469,35 +288,42 @@ body:not(.light) #sun {
     display: none;
 }
 
-.cta {
+.menu.cta {
+    display: none;
+    margin: 0;
+    text-transform: lowercase;
+    padding: 2px 8px;
+    font-size: 13px;
     cursor: pointer;
-    font-weight: 600;
-    transition: 0.8s;
-    position: absolute;
-    right: 14%;
+    border: 1px solid var(--border);
+    color: var(--muted);
 }
 
-.menu {
-    display: none;
-    color: var(--primary);
-    size: 125%;
+.menu.cta::before {
+    content: "≡ ";
+    color: var(--secondary);
 }
 
+.menu.cta:hover {
+    color: var(--secondary);
+    border-color: var(--secondary);
+}
+
+/* --------------------------------------------------------------- overlay */
+
 .overlay {
     position: fixed;
     inset: 0;
     z-index: 2147483647;
     isolation: isolate;
-    background: rgba(20, 20, 24, 0.86);
-    backdrop-filter: blur(14px) saturate(135%);
-    -webkit-backdrop-filter: blur(14px) saturate(135%);
+    background: var(--theme);
     overflow: hidden;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     transition:
-        opacity 0.28s ease,
-        visibility 0.28s ease;
+        opacity 0.15s linear,
+        visibility 0.15s linear;
 }
 
 .overlay--active {
@@ -515,62 +341,51 @@ body:not(.light) #sun {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    opacity: 0;
-    transform: translateY(12px) scale(0.985);
-    transition:
-        opacity 0.24s ease,
-        transform 0.24s ease;
-}
-
-.overlay--active .overlay__content {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+    gap: 6px;
 }
 
 .overlay a {
-    color: white;
-    text-decoration: none;
-    padding: 15pt;
-    font-size: clamp(1.9rem, 5vw, 2.35rem);
-    line-height: 1.1;
+    color: var(--primary);
+    text-transform: lowercase;
+    padding: 10px 18px;
+    font-size: 1.3rem;
     display: block;
-    text-align: center;
-    transition:
-        color 0.24s ease,
-        transform 0.24s ease;
+    text-align: left;
+    width: min(320px, 80%);
+    border: 1px solid var(--border);
+    background: var(--surface);
 }
 
-.overlay__content a {
-    width: 100%;
-    max-width: 320px;
+.overlay a::before {
+    content: "> ";
+    color: var(--secondary);
 }
 
 .overlay a:hover,
 .overlay a:focus {
-    color: var(--secondary);
-    transform: translateY(-1px);
+    color: var(--bright);
+    border-color: var(--secondary);
+    background: var(--surface-alt);
 }
 
 .overlay .close {
     position: absolute;
     z-index: 3;
-    top: 20pt;
-    right: 45pt;
-    font-size: 60px;
+    top: 14px;
+    right: 18px;
+    font-size: 26px;
     line-height: 1;
-    color: #edf0f1;
+    font-family: var(--mono);
+    color: var(--muted);
     cursor: pointer;
-    border: 0;
+    border: 1px solid var(--border);
     background: transparent;
-    padding: 0;
-    appearance: none;
+    padding: 0 10px;
 }
 
-.mobile-name {
-    display: none;
-    transition: 0.8s;
-    font-size: 30px;
-    font-weight: 900;
+.overlay .close:hover {
+    color: var(--secondary);
+    border-color: var(--secondary);
 }
 
 body.menu-open {
@@ -592,75 +407,314 @@ body.menu-open .overlay * {
     pointer-events: auto;
 }
 
+/* ------------------------------------------------------------ page shell */
+
+.page-shell {
+    width: min(1120px, calc(100% - 32px));
+    margin: 0 auto;
+    padding-bottom: 28px;
+}
+
+/* ------------------------------------------------------- terminal window */
+
+.main {
+    width: min(1120px, calc(100% - 32px));
+    margin: 34px auto 0;
+    padding-bottom: 28px;
+}
+
+.term {
+    border: 1px solid var(--border);
+    background: var(--surface);
+}
+
+body[data-page="home"] .main {
+    display: flex;
+    min-height: calc(100vh - 110px);
+}
+
+body[data-page="home"] .term {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+body[data-page="home"] .term__body {
+    flex: 1;
+    align-content: start;
+}
+
+.term__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 5px 10px;
+    background: var(--bar);
+    border-bottom: 1px solid var(--border);
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.term__title {
+    color: var(--muted);
+}
+
+.term__title b {
+    color: var(--primary);
+    font-weight: 500;
+}
+
+.term__dots {
+    letter-spacing: 2px;
+    color: var(--border-strong);
+}
+
+.term__body {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 26px;
+    padding: 22px 22px 18px;
+}
+
+.term__avatar {
+    width: 148px;
+    height: 148px;
+    object-fit: cover;
+    border: 1px solid var(--border-strong);
+    border-radius: 0;
+    filter: grayscale(0.3) contrast(1.03);
+}
+
+.term__avatar-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.term__avatar-caption {
+    font-size: 11px;
+    color: var(--muted);
+}
+
+.term__stream {
+    min-width: 0;
+}
+
+.line {
+    margin: 0;
+}
+
+.line + .cmd {
+    margin-top: 16px;
+}
+
+.cmd {
+    color: var(--muted);
+    font-size: 13px;
+}
+
+.cmd::before {
+    content: "$ ";
+    color: var(--secondary);
+    font-weight: 700;
+}
+
+.name {
+    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
+    font-weight: 700;
+    margin: 2px 0 0;
+    line-height: 1.2;
+    color: var(--bright);
+}
+
+.des {
+    margin: 2px 0 0;
+    font-size: 0.94rem;
+}
+
+.hero-description-secondary {
+    color: var(--muted);
+}
+
+.hero-badges {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 6px;
+}
+
+.badge {
+    border: 1px solid var(--border);
+    background: var(--surface-alt);
+    color: var(--primary);
+    padding: 2px 8px;
+    font-size: 12px;
+}
+
+.badge::before {
+    content: "+ ";
+    color: var(--ok);
+}
+
+.hero-actions {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 6px;
+}
+
+.button {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--border-strong);
+    background: var(--surface-alt);
+    color: var(--primary);
+    padding: 5px 12px;
+    font-size: 13px;
+    font-weight: 500;
+}
+
+.button::before {
+    content: ">\00a0";
+    color: var(--secondary);
+}
+
+.button:hover {
+    color: var(--bright);
+    border-color: var(--secondary);
+    background: var(--surface);
+}
+
+.button-primary {
+    border-color: var(--secondary);
+    color: var(--bright);
+}
+
+.button-primary:hover {
+    background: var(--secondary);
+    color: #0c0d10;
+}
+
+.button-primary:hover::before {
+    color: #0c0d10;
+}
+
+.prompt-end {
+    margin: 14px 0 0;
+    color: var(--secondary);
+    font-weight: 700;
+}
+
+.caret {
+    display: inline-block;
+    width: 0.6em;
+    height: 1em;
+    vertical-align: -0.15em;
+    background: var(--secondary);
+    animation: caret-blink 1.1s steps(1, end) infinite;
+}
+
+@keyframes caret-blink {
+    0%,
+    49% {
+        opacity: 1;
+    }
+    50%,
+    100% {
+        opacity: 0;
+    }
+}
+
+.social-icons {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+}
+
+.social-icons a svg {
+    height: 15px;
+    width: 15px;
+    display: block;
+}
+
+.social-icons a {
+    color: var(--muted);
+    display: inline-flex;
+}
+
+.icon:hover {
+    color: var(--secondary);
+}
+
+/* --------------------------------------------------------- status footer */
+
 .footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
-    transition: 0.8s;
-    padding: 12pt 18pt;
-    background-color: var(--menu-text-bg);
-    border-radius: 18px;
+    padding: 0;
+    background: var(--bar);
+    border: 1px solid var(--border);
+    font-size: 12px;
 }
 
 .footer p {
     margin: 0;
+    padding: 6px 12px;
+    color: var(--muted);
+}
+
+.footer p::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--ok);
+    margin-right: 8px;
+    vertical-align: 1px;
+}
+
+.footer .social-icons {
+    padding: 6px 12px;
+    border-left: 1px solid var(--border);
 }
 
 .loading-state {
     color: var(--muted);
 }
 
-@media screen and (max-width: 768pt) {
-    .profile {
-        width: 128pt;
-        height: 128pt;
-    }
-
-    .footer {
-        padding: 16px;
-    }
+.loading-state::before {
+    content: "… ";
 }
 
-@media only screen and (max-width: 740pt) {
-    .nav__links li a,
-    .svg-wrapper#main-wrapper svg {
+/* ---------------------------------------------------------- responsive */
+
+@media only screen and (max-width: 860px) {
+    #menu,
+    .term__avatar-wrap {
         display: none;
     }
 
-    .menu {
+    .menu.cta {
         display: block;
     }
 
-    .svg-wrapper#main-wrapper {
-        width: auto;
-        height: auto;
-        overflow: visible;
+    .nav {
+        min-height: 42px;
     }
 
-    .svg-wrapper#main-wrapper .name {
-        margin: 2pt 0 10pt;
-        transform: none;
-    }
-
-    .logo {
-        margin-top: 12pt;
-    }
-
-    .logo-switches {
-        margin-top: 4pt;
+    .term__body {
+        grid-template-columns: 1fr;
+        gap: 0;
+        padding: 18px 16px 14px;
     }
 
     .main {
-        position: static;
-        transform: none;
-        width: min(760px, calc(100% - 24px));
-        margin: 44px auto 0;
-        padding-bottom: 40px;
-    }
-
-    .hero-main {
-        position: static;
+        margin-top: 22px;
+        width: min(1120px, calc(100% - 20px));
     }
 
     .page-shell {
@@ -669,283 +723,25 @@ body.menu-open .overlay * {
 
     .footer {
         display: block;
-        text-align: center;
     }
 
-    .social-icons {
-        margin-top: 6pt;
-    }
-
-    .overlay .close {
-        right: 20px;
-        top: 16px;
+    .footer .social-icons {
+        border-left: 0;
+        border-top: 1px solid var(--border);
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    body::before,
-    body::after {
-        transition: none;
-        transform: none !important;
+    .caret {
+        animation: none;
     }
 
-    .hero-main .profile,
-    .hero-main .svg-wrapper,
-    .hero-main .hero-description,
-    .hero-main .hero-badges,
-    .hero-main .hero-actions,
-    .hero-main .social-icons {
-        transition: none;
-        transform: none !important;
+    * {
+        transition: none !important;
     }
 }
 
-/* Glassy premium hero refinements */
-:root {
-    --hero-shell-spot-x: 50%;
-    --hero-shell-spot-y: 28%;
-}
-
-body {
-    background:
-        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 28%),
-        linear-gradient(140deg, rgba(235, 82, 52, 0.045), transparent 34%),
-        linear-gradient(220deg, rgba(255, 0, 90, 0.03), transparent 30%),
-        var(--theme);
-}
-
-body::before {
-    background:
-        radial-gradient(
-            circle at var(--hero-glow-x) var(--hero-glow-y),
-            rgba(255, 255, 255, 0.08),
-            transparent 12%
-        ),
-        radial-gradient(
-            circle at var(--hero-glow-x) var(--hero-glow-y),
-            rgba(235, 82, 52, 0.3),
-            transparent 24%
-        ),
-        radial-gradient(
-            circle at var(--hero-glow-alt-x) var(--hero-glow-alt-y),
-            rgba(255, 0, 90, 0.18),
-            transparent 24%
-        );
-    filter: blur(78px);
-    opacity: 1;
-}
-
-body::after {
-    background:
-        radial-gradient(
-            circle at 18% 18%,
-            rgba(255, 255, 255, 0.055),
-            transparent 15%
-        ),
-        radial-gradient(
-            circle at 82% 14%,
-            rgba(235, 82, 52, 0.08),
-            transparent 18%
-        ),
-        radial-gradient(
-            circle at 70% 76%,
-            rgba(255, 255, 255, 0.03),
-            transparent 20%
-        );
-    filter: blur(110px);
-    opacity: 0.82;
-}
-
-.logo {
-    align-items: center;
-}
-
-.logo-switches {
-    align-items: center;
-    min-height: 32px;
-}
-
-button#theme-toggle {
-    margin-top: 1px;
-}
-
-.hero-main {
-    width: min(820px, calc(100% - 32px));
-}
-
-.hero-shell {
-    position: relative;
-    overflow: hidden;
-    border-radius: 30px;
-    padding: 34px 28px 18px;
-    border: 1px solid rgba(255, 255, 255, 0.13);
-    background:
-        linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.12),
-            rgba(255, 255, 255, 0.02)
-        ),
-        linear-gradient(135deg, rgba(235, 82, 52, 0.09), transparent 42%),
-        linear-gradient(225deg, rgba(255, 0, 90, 0.05), transparent 34%),
-        rgba(20, 21, 24, 0.44);
-    box-shadow:
-        0 24px 80px rgba(0, 0, 0, 0.22),
-        inset 0 1px 0 rgba(255, 255, 255, 0.18),
-        inset 0 -1px 0 rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(22px) saturate(135%);
-    -webkit-backdrop-filter: blur(22px) saturate(135%);
-    isolation: isolate;
-    transform: none;
-    transition:
-        transform 0.18s ease-out,
-        border-color 0.25s ease-out,
-        box-shadow 0.25s ease-out;
-}
-
-body.light .hero-shell {
-    background:
-        linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0.72),
-            rgba(255, 255, 255, 0.4)
-        ),
-        linear-gradient(135deg, rgba(235, 82, 52, 0.08), transparent 42%),
-        linear-gradient(225deg, rgba(255, 0, 90, 0.04), transparent 34%),
-        rgba(255, 255, 255, 0.42);
-    border-color: rgba(255, 255, 255, 0.55);
-    box-shadow:
-        0 24px 60px rgba(0, 0, 0, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.75),
-        inset 0 -1px 0 rgba(255, 255, 255, 0.35);
-}
-
-.hero-shell::before,
-.hero-shell::after,
-.hero-shell__shine {
-    content: "";
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-}
-
-.hero-shell::before {
-    background: radial-gradient(
-        circle at var(--hero-shell-spot-x) var(--hero-shell-spot-y),
-        rgba(255, 255, 255, 0.14),
-        transparent 26%
-    );
-    opacity: 0.85;
-    z-index: 0;
-}
-
-.hero-shell::after {
-    inset: 1px;
-    border-radius: 29px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    z-index: 1;
-}
-
-.hero-shell__shine {
-    background: linear-gradient(
-        115deg,
-        transparent 18%,
-        rgba(255, 255, 255, 0.085) 42%,
-        transparent 68%
-    );
-    transform: translate3d(
-            calc(var(--hero-glow-shift-x) * 0.18),
-            calc(var(--hero-glow-shift-y) * 0.16),
-            0
-        )
-        rotate(0deg);
-    opacity: 0.9;
-    z-index: 0;
-}
-
-.hero-shell > * {
-    position: relative;
-    z-index: 2;
-}
-
-.profile {
-    border: 4px solid rgba(255, 255, 255, 0.14);
-    box-shadow:
-        0 16px 42px rgba(0, 0, 0, 0.22),
-        0 0 0 1px rgba(255, 255, 255, 0.05);
-}
-
-.shape {
-    stroke: rgba(235, 82, 52, 0.95);
-    filter: drop-shadow(0 6px 18px rgba(235, 82, 52, 0.18));
-}
-
-.hero-description-secondary {
-    max-width: 640px;
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.badge {
-    background: rgba(255, 255, 255, 0.07);
-    border-color: rgba(255, 255, 255, 0.12);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-body.light .badge {
-    background: rgba(255, 255, 255, 0.55);
-    border-color: rgba(255, 255, 255, 0.6);
-}
-
-.button {
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
-
-.button-primary {
-    background: linear-gradient(
-        135deg,
-        rgba(255, 108, 74, 0.96),
-        rgba(235, 82, 52, 0.9)
-    );
-    box-shadow:
-        0 10px 24px rgba(235, 82, 52, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.14);
-}
-
-.button-secondary {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.12);
-}
-
-body.light .button-secondary {
-    background: rgba(255, 255, 255, 0.55);
-    border-color: rgba(255, 255, 255, 0.65);
-}
-
-.social-icons {
-    padding-top: 16px;
-}
-
-@media only screen and (max-width: 740pt) {
-    .hero-main {
-        width: min(760px, calc(100% - 24px));
-    }
-
-    .hero-shell {
-        padding: 26px 18px 12px;
-        border-radius: 24px;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .hero-shell {
-        transform: none !important;
-    }
-
-    .hero-shell__shine {
-        transform: none !important;
-    }
+/* Typing sequence: outputs keep their space while hidden, so nothing shifts. */
+.is-typing-hidden {
+    visibility: hidden;
 }
diff --git a/public/images/favicon.svg b/public/images/favicon.svg
new file mode 100644
index 0000000..5ee7dc4
--- /dev/null
+++ b/public/images/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#0c0d10"/>
+  <path d="M7 10l6 6-6 6" fill="none" stroke="#eb5234" stroke-width="3" stroke-linecap="square"/>
+  <rect x="17" y="19" width="9" height="3" fill="#c9cdd6"/>
+</svg>
diff --git a/public/scripts/content.js b/public/scripts/content.js
index 59fdb5c..565c10c 100644
--- a/public/scripts/content.js
+++ b/public/scripts/content.js
@@ -134,12 +134,12 @@
 
   const renderLinks = (entry, className) => {
     const links = [];
-    const sourceLabel = entry.github && entry.github.includes("git.sowinski.dev") ? "Gitea" : "GitHub";
+    const sourceLabel = entry.github && entry.github.includes("git.sowinski.dev") ? "gitea" : "github";
 
-    links.push(`<a class="${className} ${className}-primary" href="./entry.html?type=${encodeURIComponent(entry.type)}&slug=${encodeURIComponent(entry.slug)}">Read More</a>`);
+    links.push(`<a class="${className} ${className}-primary" href="./entry.html?type=${encodeURIComponent(entry.type)}&slug=${encodeURIComponent(entry.slug)}">details</a>`);
 
     if (entry.demo) {
-      links.push(`<a class="${className}" href="${escapeHtml(entry.demo)}" target="_blank" rel="noopener noreferrer">Live</a>`);
+      links.push(`<a class="${className}" href="${escapeHtml(entry.demo)}" target="_blank" rel="noopener noreferrer">live</a>`);
     } else if (entry.github) {
       links.push(`<a class="${className}" href="${escapeHtml(entry.github)}" target="_blank" rel="noopener noreferrer">${sourceLabel}</a>`);
     }
@@ -147,8 +147,21 @@
     return `<div class="${className.replace("card-link", "card-links")}">${links.join("")}</div>`;
   };
 
+  const statusState = (entry) => {
+    const status = String(entry.status || "").toLowerCase();
+
+    if (status.startsWith("active")) {
+      return "active";
+    }
+
+    if (entry.type === "updates") {
+      return "attention";
+    }
+
+    return "idle";
+  };
+
   const createCard = (entry) => {
-    const formattedDate = formatDate(entry.date);
     const featuredClass = entry.featured ? " featured" : "";
     const anchorId = entry.slug ? ` id="${escapeHtml(entry.slug)}"` : "";
 
@@ -156,7 +169,8 @@
       <article class="content-card${featuredClass}"${anchorId}>
         <div class="card-meta">
           <span class="card-kicker">${escapeHtml(entry.label || entry.type)}</span>
-          ${formattedDate ? `<span class="card-date">${escapeHtml(formattedDate)}</span>` : ""}
+          ${entry.date ? `<span class="card-date">${escapeHtml(entry.date)}</span>` : ""}
+          ${entry.status ? `<span class="card-status" data-state="${statusState(entry)}">${escapeHtml(entry.status.toLowerCase())}</span>` : ""}
         </div>
         <h3>${escapeHtml(entry.title)}</h3>
         <p class="card-summary">${escapeHtml(entry.summary || "")}</p>
@@ -166,6 +180,15 @@
     `;
   };
 
+  const setSectionCount = (countId, entries) => {
+    const element = document.getElementById(countId);
+    if (!element) {
+      return;
+    }
+
+    element.textContent = `${entries.length} ${entries.length === 1 ? "entry" : "entries"}`;
+  };
+
   const renderSection = (containerId, entries, emptyMessage) => {
     const container = document.getElementById(containerId);
     if (!container) {
@@ -201,7 +224,7 @@
         card.classList.toggle("is-hidden", !expanded && index >= defaultVisibleCount);
       });
 
-      toggleButton.textContent = expanded ? "Show Fewer Projects" : "Show More Projects";
+      toggleButton.textContent = expanded ? "show fewer projects" : "show more projects";
       toggleButton.setAttribute("aria-expanded", String(expanded));
     };
 
@@ -255,8 +278,12 @@
       const index = await getIndex();
       const sortedProjects = [...(index.projects || [])].sort(compareByPriorityOrder);
       renderSection("projects-grid", sortedProjects, "No projects added yet.");
+      setSectionCount("projects-count", sortedProjects);
       initProjectsToggle(sortedProjects);
-      renderSection("updates-grid", [...(index.updates || [])].sort(compareByNewestDate), "No updates added yet.");
+
+      const sortedUpdates = [...(index.updates || [])].sort(compareByNewestDate);
+      renderSection("updates-grid", sortedUpdates, "No updates added yet.");
+      setSectionCount("updates-count", sortedUpdates);
     } catch (error) {
       renderSection("projects-grid", [], error.message);
       renderSection("updates-grid", [], error.message);
@@ -279,7 +306,7 @@
           <div class="entry-empty">
             <p class="eyebrow">Not found</p>
             <h1 class="entry-title">This entry could not be loaded.</h1>
-            <a class="entry-back" href="./projects.html">Back to projects</a>
+            <a class="entry-back" href="./projects.html">cd ../projects</a>
           </div>
         `;
         return;
@@ -305,7 +332,7 @@
 
       shell.innerHTML = `
         <div class="entry-header">
-          <a class="entry-back" href="./projects.html">Back to projects</a>
+          <a class="entry-back" href="./projects.html">cd ../projects</a>
           <div class="entry-meta">
             <span class="entry-pill entry-pill-primary">${escapeHtml(entry.label || entry.type)}</span>
             ${entry.date ? `<span class="entry-pill entry-pill-secondary">${escapeHtml(formatDate(entry.date))}</span>` : ""}
@@ -315,8 +342,8 @@
           <p class="entry-summary">${escapeHtml(entry.summary || "")}</p>
           ${renderTags(entry.tags || [], "entry-tag-list")}
           <div class="entry-links">
-            ${entry.demo ? `<a class="inline-button inline-button-primary" href="${escapeHtml(entry.demo)}" target="_blank" rel="noopener noreferrer">Live</a>` : ""}
-            ${entry.github ? `<a class="inline-button" href="${escapeHtml(entry.github)}" target="_blank" rel="noopener noreferrer">${entry.github.includes("git.sowinski.dev") ? "Gitea" : "GitHub"}</a>` : ""}
+            ${entry.demo ? `<a class="inline-button inline-button-primary" href="${escapeHtml(entry.demo)}" target="_blank" rel="noopener noreferrer">live</a>` : ""}
+            ${entry.github ? `<a class="inline-button" href="${escapeHtml(entry.github)}" target="_blank" rel="noopener noreferrer">${entry.github.includes("git.sowinski.dev") ? "gitea" : "github"}</a>` : ""}
           </div>
         </div>
         <article class="entry-content">
@@ -328,7 +355,7 @@
         <div class="entry-empty">
           <p class="eyebrow">Not found</p>
           <h1 class="entry-title">${escapeHtml(error.message)}</h1>
-          <a class="entry-back" href="./projects.html">Back to projects</a>
+          <a class="entry-back" href="./projects.html">cd ../projects</a>
         </div>
       `;
     }
diff --git a/public/scripts/hero-effects.js b/public/scripts/hero-effects.js
index ced719a..c1017d7 100644
--- a/public/scripts/hero-effects.js
+++ b/public/scripts/hero-effects.js
@@ -1,62 +1,62 @@
 (function() {
-  const heroShell = document.querySelector(".hero-main .hero-shell");
+  const stream = document.querySelector(".term__stream");
 
-  if (!heroShell) {
+  if (!stream) {
     return;
   }
 
   const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
 
-  if (prefersReducedMotion || coarsePointer) {
+  if (prefersReducedMotion) {
     return;
   }
 
-  let targetX = 0;
-  let targetY = 0;
-  let currentX = 0;
-  let currentY = 0;
+  const CHAR_DELAY = 18;
+  const AFTER_COMMAND_DELAY = 90;
+  const AFTER_OUTPUT_DELAY = 130;
 
-  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+  // Build the playback script before hiding anything, so a thrown error here
+  // leaves the page in its fully rendered state.
+  const steps = Array.from(stream.children).map((element) => ({
+    element,
+    isCommand: element.classList.contains("cmd"),
+    text: element.textContent
+  }));
 
-  const animate = () => {
-    currentX += (targetX - currentX) * 0.065;
-    currentY += (targetY - currentY) * 0.065;
+  if (!steps.some((step) => step.isCommand)) {
+    return;
+  }
 
-    const bgX = 50 + currentX * 6.8;
-    const bgY = 18 + currentY * 5.6;
-    const bgXAlt = 50 - currentX * 5.2;
-    const bgYAlt = 30 - currentY * 4.6;
-    const glowRotate = currentX * 16 + currentY * 10;
-    const glowShiftX = currentX * 54;
-    const glowShiftY = currentY * 42;
+  steps.forEach((step) => {
+    if (step.isCommand) {
+      step.element.textContent = "";
+      return;
+    }
 
-    document.body.style.setProperty("--hero-glow-x", `${bgX}%`);
-    document.body.style.setProperty("--hero-glow-y", `${bgY}%`);
-    document.body.style.setProperty("--hero-glow-alt-x", `${bgXAlt}%`);
-    document.body.style.setProperty("--hero-glow-alt-y", `${bgYAlt}%`);
-    document.body.style.setProperty("--hero-glow-rotate", `${glowRotate}deg`);
-    document.body.style.setProperty("--hero-glow-shift-x", `${glowShiftX}px`);
-    document.body.style.setProperty("--hero-glow-shift-y", `${glowShiftY}px`);
+    step.element.classList.add("is-typing-hidden");
+  });
 
-    heroShell.style.setProperty("--hero-shell-spot-x", `${50 + currentX * 14}%`);
-    heroShell.style.setProperty("--hero-shell-spot-y", `${28 + currentY * 10}%`);
+  const wait = (ms) => new Promise((resolve) => window.setTimeout(resolve, ms));
 
-    requestAnimationFrame(animate);
+  const typeCommand = async (element, text) => {
+    for (let index = 0; index < text.length; index += 1) {
+      element.textContent = text.slice(0, index + 1);
+      await wait(CHAR_DELAY);
+    }
   };
 
-  window.addEventListener("mousemove", (event) => {
-    const x = clamp((event.clientX / window.innerWidth - 0.5) * 2, -1, 1);
-    const y = clamp((event.clientY / window.innerHeight - 0.5) * 2, -1, 1);
+  const play = async () => {
+    for (const step of steps) {
+      if (step.isCommand) {
+        await typeCommand(step.element, step.text);
+        await wait(AFTER_COMMAND_DELAY);
+        continue;
+      }
 
-    targetX = x;
-    targetY = y;
-  });
+      step.element.classList.remove("is-typing-hidden");
+      await wait(AFTER_OUTPUT_DELAY);
+    }
+  };
 
-  window.addEventListener("mouseleave", () => {
-    targetX = 0;
-    targetY = 0;
-  });
-
-  requestAnimationFrame(animate);
+  play();
 })();