add load time, copyright, updated about, and more

- show site load time in top right corner on desktop
- show copyright and source code link in bottom right on desktop
- shorten projects tab name on mobile
- update about me description
- add bluesky social link
- add social link emojis
- use css variable for bold font weight

Author: boldandbrad

index.html

@@ -25,6 +25,8 @@
           <span class="cwd">boldandbrad.dev</span>
           <span class="subtext"> on </span>
           <span class="branch">~</span>
+          <span class="loadtime right desktop"></span>
+          <span class="subtext right desktop">took&nbsp;</span>
         </div>
         <div>
           <span class="prompt">-&gt; </span>
@@ -38,45 +40,55 @@
           </div>
           <div>
             <p>
-              Hi 👋, my name is Brad. I'm a software developer and agile coach
-              who enjoys building open-source command line tools and helping
-              others. I firmly believe that learning is a life long process. To
-              that end, I am constantly on the lookout for new technologies to
-              try and projects to take on. Today, you're likely to find me
-              refining my
+              Hey there 👋, I'm Brad. I'm a software developer, agile coach, and
+              aspiring Lego master builder. I enjoy creating and using
+              open-source command line tools, playing Minecraft and board games,
+              and spending time with my friends and family.
+            </p>
+            <p>
+              I firmly believe that learning is a life long process so I am
+              constantly on the lookout for new technologies to try and projects
+              to take on. Today, you're likely to find me refining my
               <a
                 class="project-link"
                 href="https://github.com/boldandbrad/dotfiles"
                 target="_blank"
               >dotfiles</a>
-              or building new things in golang 🐹 or rust 🦀.
+              (which this site is modeled after) and building new things in
+              golang 🐹 or rust 🦀.
             </p>
             <p>
-              In my free time I play Minecraft and board games with my partner,
-              tinker with Legos, and mod GameCubes. If you'd like to chat or
-              collaborate on a project, feel free to reach out on socials:
+              If you'd like to chat or collaborate, feel free to reach out on
+              socials:
             </p>
           </div>
           <div>
             <ul>
               <li class="social-link">
-                <i class="nf nf-cod-github"></i>
                 <a
                   href="https://github.com/boldandbrad"
                   alt="github"
                   target="_blank"
                 >
-                  GitHub
+                  💾 GitHub
+                </a>
+              </li>
+              <li class="social-link">
+                <a
+                  href="https://bsky.app/profile/boldandbrad.bsky.social"
+                  alt="bluesky"
+                  target="_blank"
+                >
+                  🦋 Bluesky
                 </a>
               </li>
               <li class="social-link">
-                <i class="nf nf-md-spotify"></i>
                 <a
                   href="https://open.spotify.com/user/1219025914"
                   alt="spotify"
                   target="_blank"
                 >
-                  Spotify
+                  🎧 Spotify
                 </a>
               </li>
               <li class="social-link">
@@ -86,20 +98,18 @@
                   alt="twitch"
                   target="_blank"
                 >
-                  Twitch
+                  📹 Twitch
                 </a>
               </li>
               <!--
               <li class="social-link">
-                <i class="nf nf-md-discord"></i>
                 <a href="" alt="discord" target="_blank">
-                  Discord
+                  💬 Discord
                 </a>
               </li>
               <li class="social-link">
-                <i class="nf nf-md-youtube"></i>
                 <a href="" alt="youtube" target="_blank">
-                  YouTube
+                  📺 YouTube
                 </a>
               </li>
               -->
@@ -118,6 +128,9 @@
           <span class="cwd">boldandbrad.dev</span>
           <span class="subtext"> on </span>
           <span class="branch">projects</span>
+
+          <span class="loadtime right desktop"></span>
+          <span class="subtext right desktop">took&nbsp;</span>
         </div>
         <div>
           <span class="prompt">-&gt; </span>
@@ -170,10 +183,16 @@
       --><span
           id="projects-btn-id"
           class="nav-btn-id"
-        >&nbsp;2&nbsp;</span><span class="nav-btn-title"
-        >&nbsp;projects&nbsp;</span>
+        >&nbsp;2&nbsp;</span><span class="nav-btn-title desktop"
+        >&nbsp;projects&nbsp;</span><span class="nav-btn-title mobile"
+        >&nbsp;prjs&nbsp;</span>
         <!-- TODO: add blog tab btn? -->
       </span>
+      <span class="nav-msg desktop"><i>(c) 2024 Bradley Wojcik |
+          <a
+            href="https://github.com/boldandbrad/boldandbrad.github.io"
+            class="nav-msg-link"
+          >view src</a></i></span>
     </footer>
   </body>
 </html>

script.js

@@ -1,8 +1,22 @@
-// add content loaded event listener
-document.addEventListener("DOMContentLoaded", userOS);
+// load dynamic content on page load
+onload = function () {
+  getLoadTime();
+  getSystem();
+};
+
+// calculate approximate page load time
+function getLoadTime() {
+  const [entry] = performance.getEntriesByType("navigation");
+  // console.table(entry.toJSON());
+  const loadDuration = entry.domComplete - entry.startTime;
+  const loadtime_elements = document.getElementsByClassName("loadtime");
+  for (const elem of loadtime_elements) {
+    elem.innerHTML = loadDuration.toFixed(0) + "ms";
+  }
+}
 
 // determine user operating system
-function userOS() {
+function getSystem() {
   const userAgent = navigator.userAgent,
     platform = navigator.platform,
     macosPlatforms = ["Macintosh", "MacIntel", "MacPPC", "Mac68K"],
@@ -28,10 +42,10 @@ function userOS() {
   }
 }
 
-// add key event listener
+// add key-event listener
 document.addEventListener("keydown", parseKey);
 
-// parse key events
+// parse key-events
 function parseKey(e) {
   console.log("key pressed: " + e.key);
   if (e.code == "Digit1") {
@@ -61,14 +75,14 @@ function _deactivate_tabs() {
 
 function show_home_tab() {
   document.getElementById("projects-tab").style.display = "none";
-  document.getElementById("home-tab").style.display = "block";
+  document.getElementById("home-tab").style.display = "unset";
   _deactivate_tabs();
   _activate_tab("home-btn-id");
 }
 
 function show_projects_tab() {
   document.getElementById("home-tab").style.display = "none";
-  document.getElementById("projects-tab").style.display = "block";
+  document.getElementById("projects-tab").style.display = "unset";
   _deactivate_tabs();
   _activate_tab("projects-btn-id");
 }

styles.css

@@ -10,6 +10,26 @@
 /* import Anonymous Pro typeface */
 @import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
+/*----------------------------*/
+/* display size specific      */
+/*----------------------------*/
+
+.desktop {
+  display: unset;
+}
+.mobile {
+  display: none;
+}
+
+@media (max-width: 450px) {
+  .desktop {
+    display: none;
+  }
+  .mobile {
+    display: unset;
+  }
+}
+
 /*----------------------------*/
 /* global styles              */
 /*----------------------------*/
@@ -20,6 +40,9 @@
   font-weight: 400;
   font-size: 16pt;
   color: var(--ctp-mocha-text);
+
+  /* variables */
+  --bold-weight: 700;
 }
 
 html,
@@ -35,6 +58,7 @@ body {
   bottom: 1rem;
   margin: 1rem 0 1rem 1rem;
   padding-right: 1rem;
+  width: calc(100vw - 2rem);
 }
 
 ::selection {
@@ -58,7 +82,7 @@ li {
 
 a {
   text-decoration: none;
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 a:hover {
@@ -67,27 +91,27 @@ a:hover {
 
 .system {
   color: var(--ctp-mocha-maroon);
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 .user {
   color: var(--ctp-mocha-mauve);
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 .shell {
   color: var(--ctp-mocha-lavender);
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 .cwd {
   color: var(--ctp-mocha-blue);
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 .branch {
   color: var(--ctp-mocha-green);
-  font-weight: 700;
+  font-weight: var(--bold-weight);
 }
 
 .prompt {
@@ -103,10 +127,22 @@ a:hover {
   color: var(--ctp-mocha-surface2);
 }
 
+.loadtime {
+  color: var(--ctp-mocha-yellow);
+}
+
+.right {
+  float: inline-end;
+}
+
 /*----------------------------*/
 /* home tab                   */
 /*----------------------------*/
 
+#home-tab {
+  display: unset;
+}
+
 .cmd-whoami {
   display: inline-block;
   vertical-align: middle;
@@ -190,6 +226,15 @@ footer {
   background: var(--ctp-mocha-surface0);
 }
 
+.nav-msg {
+  float: inline-end;
+  color: var(--ctp-mocha-surface2);
+}
+
+.nav-msg-link {
+  color: var(--ctp-mocha-lavender);
+}
+
 /*----------------------------*/
 /* animations                 */
 /*----------------------------*/