SoulsTogetherX · SoulsTogetherX · Jun 16, 2026 · Jun 16, 2026
diff --git a/content/links.html b/content/links.html
@@ -8,9 +8,8 @@ <h1 class="text-highlight header-popup">Yay, mail!</h1>
 
   <div class="horizontal-center horizontal-padding">
     <p>
-      The easist way to get my attention is my emailing me. I don't check my
-      social media much (or really use them), so please contact me though my
-      business gmail instead. Thank you.
+      The easist way to get my attention is my emailing me. Please use my business
+      gmail if you wish to get into contact. I can't wait to see you there!
     </p>
     <div style="margin-bottom: 2rem; margin-top: 1rem;">
       Email me at

diff --git a/content/skills.html b/content/skills.html
@@ -54,7 +54,7 @@ <h3 class="text-highlight">Framework & Tools</h3>
     </ul>
   </div>
 
-  <p class="page-emphasis-borders">
-    I am always willing to learn something new, so this list may be outdated.
+  <p class="page-emphasis-borders" style="text-align: center;">
+    I am always willing to learn something new, so this list is ever growing!
   </p>
 </section>
diff --git a/hugo.yaml b/hugo.yaml
@@ -1,3 +1,3 @@
 disableKinds: ['taxonomy', 'term']
 
-baseURL: 'https://hello-xavier-alvarez.com/'
+baseURL: 'https://hello-xavier-alvarez.com'
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -11,53 +11,58 @@
     aria-hidden="true"
   ></div>
 
-  <div id="desktop-show">
-    {{ partial "objs/soundToken" }}
-    {{ partial "objs/colorToken" }}
-    {{ partial "objs/pencil" }}
+  {{ partial "toggle-options" }}
 
+  <div class="desktop-size-only">
+    <div id="desktop-show" >
+      {{ partial "stickyNote" }}
 
-    <div id="envelope-wrapper" class="movable-wrapper">
-      <span
-        id="envelope-helper-guide"
-        class="floating-bubble"
-        aria-hidden="true"
-        >Click or Drag me</span
-      >
-      <div id="envelope" class="movable-origin-offset grab-hover">
-        <div id="desktop-page-holder" class="page-wrapper">
-          <main class="page movable-wrapper">
-            {{ block "main" . }}
-            {{ end }}
-          </main>
+      {{ partial "objs/soundToken" }}
+      {{ partial "objs/colorToken" }}
+      {{ partial "objs/pencil" }}
+
+
+      <div id="envelope-wrapper" class="movable-wrapper">
+        <span
+          id="envelope-helper-guide"
+          class="floating-bubble"
+          aria-hidden="true"
+          >Click or Drag me</span
+        >
+        <div id="envelope" class="movable-origin-offset grab-hover">
+          <div id="desktop-page-holder" class="page-wrapper">
+            <main class="page movable-wrapper">
+              {{ block "main" . }}
+              {{ end }}
+            </main>
+          </div>
+          {{ partial "envelope/envelopeSvgs" }}
+          {{ partial "envelope/envelopeNav" }}
         </div>
-        {{ partial "envelope/envelopeSvgs" }}
-        {{ partial "envelope/envelopeNav" }}
       </div>
     </div>
   </div>
 
-  <div id="mobile-show">
-    {{ partial "mobile/toggle-options" }}
-
-
-    <div class="mobile-page-front-text">
-      <h2>Xavier Alvarez</h2>
-      <h4>Freelance Godot, Web, and Mobile developer.</h4>
-    </div>
+  <div class="mobile-size-only">
+    <div id="mobile-show">
+      <div class="mobile-page-front-text">
+        <h2>Xavier Alvarez</h2>
+        <h4>Freelance Godot, Web, and Mobile developer.</h4>
+      </div>
 
-    {{ partial "mobile/mobile-nav" }}
+      {{ partial "mobile/mobile-nav" }}
 
 
-    <div class="mobile-window">
-      {{ partial "mobile/page-nav" }}
+      <div class="mobile-window">
+        {{ partial "mobile/page-nav" }}
 
 
-      <div id="mobile-page-holder">
-        <main class="mobile-page-scroll scroll-gradient disable-highlight">
-          {{ block "main" . }}
-          {{ end }}
-        </main>
+        <div id="mobile-page-holder">
+          <main class="mobile-page-scroll scroll-gradient disable-highlight">
+            {{ block "main" . }}
+            {{ end }}
+          </main>
+        </div>
       </div>
     </div>
   </div>

diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -17,10 +17,10 @@
     </a>
 
     <header class="home-header">
-      <h1 class="text-highlight desktop-only">
+      <h1 class="text-highlight desktop-size-only">
         Thank you for receiving my letter!
       </h1>
-      <h1 class="text-highlight mobile-only">
+      <h1 class="text-highlight mobile-size-only">
         Thank you for receiving my email!
       </h1>
 
@@ -49,7 +49,7 @@ <h4>US, Nevada, Las Vegas</h4>
 
           <div>
             <h4>Resume</h4>
-            <h6>View Resume</h6>
+            <h6>Download Resume</h6>
           </div>
         </a>
         <a
@@ -83,15 +83,19 @@ <h6>View Repository</h6>
         </a>
       </div>
     </div>
-    <div class="bottom-page-margin border-left desktop-only">
-      You can use the bottom tabs to navigate between sections.
+    <div class="desktop-size-only">
+      <div class="bottom-page-margin border-left">
+        You can use the bottom tabs to navigate between sections.
+      </div>
     </div>
-    <div class="bottom-page-margin border-left mobile-only">
-      <p style="margin-bottom: 0.5rem;">
-        This website is best experienced in desktop. Some features might not be
-        available on other devices.
-      </p>
-      <p>Sorry!</p>
+    <div class="mobile-size">
+      <div class="bottom-page-margin border-left">
+        <p style="margin-bottom: 0.5rem;">
+          This website is best experienced in desktop. Some features might not be
+          available on other devices.
+        </p>
+        <p>Sorry!</p>
+      </div>
     </div>
   </section>
 {{ end }}
diff --git a/layouts/_partials/metadata.html b/layouts/_partials/metadata.html
@@ -26,11 +26,10 @@
 <link rel="stylesheet" href="{{ relURL "/css/styles.css" }}" />
 
 <!-- ICON -->
-<!--
-<link rel="icon" type="image/x-icon" href="{{ relURL "myfavicon.ico" }}" /> 
--->
+<link rel="icon" type="image/svg" href="{{ relURL "assets/logos/fav-icon.svg" }}" /> 
 
 <!-- Modules -->
+<script type="module" src="{{ relURL "js/styleModeHandler.js" }}"></script>
 <script type="module" src="{{ relURL "js/audioHandler.js" }}"></script>
 <script type="module" src="{{ relURL "js/colorModeHandler.js" }}"></script>
 <script type="module" src="{{ relURL "js/moveableHandler.js" }}"></script>

diff --git a/layouts/_partials/stickyNote.html b/layouts/_partials/stickyNote.html
@@ -0,0 +1,9 @@
+<div class="sticky-note">
+  <div class="stick-note-tape"></div>
+  <p>Todo:</p>
+  <ul>
+    <li>Click items to interact</li>
+    <li>Drag items to move</li>
+    <li>Press the top-right button<br>for a simplier design</li>
+  </ul>
+</div>
diff --git a/layouts/_partials/mobile/toggle-options.html → layouts/_partials/toggle-options.html b/layouts/_partials/mobile/toggle-options.html → layouts/_partials/toggle-options.html
@@ -1,58 +1,117 @@
-<div class="mobile-toggle-options">
-  <button id="dark-mode-toggle" class="toggle-option">
-    <span class="off"
-      ><svg width="100%" height="100%" viewBox="0 0 50 50">
+<div class="toggle-options-head">
+  <button id="dark-mode-toggle" class="toggle-option mobile-size-only">
+    <span class="off">
+      <svg width="100%" height="100%" viewBox="0 0 50 50">
         <path
           style="fill:#f9f9f9;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
           d="m 22.84,8.146 1.34,2.864 a 13.77,14.37 0 0 1 0.71,0 13.77,14.37 0 0 1 6.06,1.47 l 2.25,-2.31 -0.66,3.26 a 13.77,14.37 0 0 1 4.4,4.98 l 3.45,-0.6 -2.64,2.41 a 13.77,14.37 0 0 1 0.91,5.16 13.77,14.37 0 0 1 0,1.32 l 3.04,1.46 -3.33,0.39 a 13.77,14.37 0 0 1 -3.09,6.33 l 1.29,2.39 -2.33,-1.29 a 13.77,14.37 0 0 1 -6.95,3.56 l -0.3,2.12 -0.92,-1.95 a 13.77,14.37 0 0 1 -1.13,0 13.77,14.37 0 0 1 -6.66,-1.79 l -1.65,1.69 0.49,-2.44 a 13.77,14.37 0 0 1 -4.7,-5.7 L 9.388,32 11.79,29.81 a 13.77,14.37 0 0 1 -0.68,-4.44 13.77,14.37 0 0 1 0.17,-2.21 L 8.125,21.64 11.7,21.23 a 13.77,14.37 0 0 1 3.17,-5.72 l -1.61,-2.97 2.98,1.65 a 13.77,14.37 0 0 1 6.16,-2.96 z"
           transform="matrix(0.8312,0,0,0.837,4.185,4.042)"
+          vector-effect="non-scaling-stroke"
         />
         <path
           style="fill:#999999;stroke:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
           d="m 12.33,19.46 v 0 c 0,10.56 7.97,19.13 17.81,19.17 -0.94,0.4 -1.91,0.69 -2.9,0.87 l -0.3,2.12 -0.92,-1.95 c -0.37,0 -0.75,0 -1.13,0 -2.33,0 -4.62,-0.61 -6.66,-1.79 l -1.65,1.69 0.49,-2.44 C 15.06,35.76 13.45,33.78 12.42,31.47 L 9.388,32 11.79,29.81 v 0 c -0.45,-1.43 -0.67,-2.93 -0.68,-4.44 0,-0.74 0.1,-1.48 0.17,-2.21 L 8.125,21.64 11.7,21.23 c 0.17,-0.6 0.38,-1.19 0.63,-1.77 z"
           transform="matrix(0.8312,0,0,0.837,4.185,4.042)"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </span>
-    <span class="on"
-      ><svg width="100%" height="100%" viewBox="0 0 50 50">
+
+    <span class="on">
+      <svg width="100%" height="100%" viewBox="0 0 50 50">
         <path
           style="fill:#ececec;stroke:#000000;stroke-width:2;stroke-linecap:square;stroke-dasharray:none;paint-order:stroke markers fill"
           d="M 26.03,8.926 C 16.54,8.925 8.845,16.07 8.845,24.89 c 0,2.51 0.627,4.89 1.745,7.01 v 0 c 2.79,5.3 8.66,8.95 15.44,8.95 4.28,0 8.41,-1.48 11.57,-4.16 -9.49,0 -17.18,-7.15 -17.18,-15.96 0,-4.5 2.03,-8.78 5.61,-11.804 z"
           transform="matrix(0.8563,0,0,0.8756,3.703,3.078)"
+          vector-effect="non-scaling-stroke"
         />
         <path
           style="fill:#cccccc;stroke:none;stroke-width:2;stroke-linecap:square;stroke-dasharray:none;paint-order:stroke markers fill"
           d="m 12.54,15.02 c -2.39,2.81 -3.691,6.29 -3.695,9.87 0,8.82 7.695,15.96 17.185,15.96 0.79,0 1.57,-0.1 2.34,-0.16 C 16.76,36.58 10.2,27.19 12.54,15.02 Z"
           transform="matrix(0.8563,0,0,0.8756,3.703,3.078)"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </span>
   </button>
-  <button id="sound-mode-toggle" class="toggle-option">
-    <span class="off"
-      ><svg width="100%" height="100%" viewBox="0 0 50 50">
+
+
+  <button id="sound-mode-toggle" class="toggle-option mobile-size-only">
+    <span class="off">
+      <svg width="100%" height="100%" viewBox="0 0 50 50">
         <g transform="translate(-1.349,0.4223)">
           <path
             d="M 36.91,40.38 A 22.23,22.28 0 0 0 43.45,24.58 22.23,22.28 0 0 0 36.91,8.773 l -1.86,1.857 a 19.63,19.67 0 0 1 5.78,13.95 c 0,5.44 -2.21,10.38 -5.78,13.93 z"
             style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+            vector-effect="non-scaling-stroke"
           />
           <path
             d="M 33.18,36.68 A 17.01,17.04 0 0 0 38.2,24.58 17.01,17.04 0 0 0 33.18,12.49 l -1.85,1.86 a 14.39,14.41 0 0 1 4.25,10.23 14.39,14.41 0 0 1 -4.25,10.23 z"
             style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+            vector-effect="non-scaling-stroke"
           />
           <path
             d="m 29.48,32.95 a 11.81,11.83 0 0 0 3.47,-8.37 11.81,11.83 0 0 0 -3.47,-8.37 l -1.86,1.86 a 9.181,9.201 0 0 1 2.69,6.51 9.181,9.201 0 0 1 -2.69,6.52 z M 24.25,12.88 A 1.312,1.315 0 0 1 25,14.06 V 35.1 a 1.312,1.315 0 0 1 -2.14,1.03 l -6.2,-4.97 h -6.1 A 1.312,1.315 0 0 1 9.248,29.84 V 19.32 A 1.312,1.315 0 0 1 10.56,18 h 6.1 l 6.2,-4.97 a 1.312,1.315 0 0 1 1.39,-0.15"
             style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+            vector-effect="non-scaling-stroke"
           />
         </g>
       </svg>
     </span>
-    <span class="on"
-      ><svg width="100%" height="100%" viewBox="0 0 50 50">
+
+    <span class="on">
+      <svg width="100%" height="100%" viewBox="0 0 50 50">
         <path
           d="m 22.79,12.45 a 1.414,1.41 0 0 1 0.79,1.27 V 36.3 a 1.414,1.41 0 0 1 -2.29,1.1 L 14.61,32.07 H 8.032 A 1.414,1.41 0 0 1 6.613,30.66 V 19.37 a 1.414,1.41 0 0 1 1.419,-1.41 h 6.578 l 6.68,-5.33 a 1.414,1.41 0 0 1 1.5,-0.18 m 20.18,5.92 a 1.414,1.41 0 0 1 0,2.01 l -4.64,4.63 4.64,4.65 a 1.417,1.412 0 0 1 -1.99,1.99 L 36.32,27 31.67,31.65 a 1.417,1.412 0 0 1 -2.01,-1.99 l 4.65,-4.65 -4.65,-4.63 a 1.423,1.42 0 1 1 2.01,-2.01 l 4.65,4.65 4.66,-4.65 a 1.414,1.41 0 0 1 1.99,0"
           style="fill:#ececec;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    </span>
+  </button>
+
+
+  <button id="style-mode-toggle" class="toggle-option desktop-size-only desktop-size">
+    <span class="off">
+      <svg
+        width="50"
+        height="50"
+        viewBox="0 0 13.23 13.23" >
+        <g>
+          <circle
+            style="fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+            id="path3"
+            cx="6.615"
+            cy="6.615"
+            r="3"
+            vector-effect="non-scaling-stroke"
+          />
+        </g>
+      </svg>
+    </span>
+
+    <span class="on">
+      <svg
+        width="50"
+        height="50"
+        viewBox="0 0 13.23 13.23" >
+        <path
+          sodipodi:type="star"
+          style="fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
+          id="path2"
+          inkscape:flatsided="false"
+          sodipodi:sides="5"
+          sodipodi:cx="3.063"
+          sodipodi:cy="3.022"
+          sodipodi:r1="5.468"
+          sodipodi:r2="2.736"
+          sodipodi:arg1="0.9354"
+          sodipodi:arg2="1.564"
+          inkscape:rounded="0"
+          inkscape:randomized="0"
+          d="M 6.308,7.423 3.082,5.758 -0.1196,7.468 0.4667,3.885 -2.149,1.369 1.44,0.8195 3.024,-2.446 4.656,0.7977 8.251,1.296 5.671,3.85 Z"
+          transform="matrix(0.76,0,0,0.7975,4.299,4.72)"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </span>

diff --git a/static/assets/logos/fav-icon.svg b/static/assets/logos/fav-icon.svg