Vector logo: SVG logo in loader/menu/blog header; #ec9770 favicon set (svg, ico, apple-touch-icon) on every page

orb: startup self-check — verify float framebuffers complete and the simulation produces a sane particle, else fall back to the static layout with a console warning
music: automatic light theme via prefers-color-scheme (colours moved to CSS variables; dark unchanged)
2026-10-24 10:55:03 -04:00 · 2026-10-24 10:34:17 -04:00 · 2026-10-24 10:25:01 -04:00 · 2026-10-24 10:19:50 -04:00 · 2026-10-24 10:19:49 -04:00 · 2026-10-24 10:14:17 -04:00
41 changed files with 3486 additions and 875 deletions
--- a/blog/index.html
+++ b/blog/index.html
@ -4,9 +4,10 @@
 <head>
  <meta charset="UTF-8">
  <title>dangrubb.net</title>
      <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="./style.css">
 </head>
--- a/cv/assets/img/favicon.ico
+++ b/cv/assets/img/favicon.ico
--- a/cv/index.html
+++ b/cv/index.html
@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/favicon.ico" sizes="48x48">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -207,6 +209,22 @@
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Service Desk Tech</h3>
                  <span class="experience__company"
                    >2026 to Present | Forterra</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
                  </ul>
                 </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
@ -215,7 +233,7 @@
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
-                    >2025 to Present | Blue Tech Innovation</span>
+                    >2025 to 2026 | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
--- a/cv/moreInformation.html
+++ b/cv/moreInformation.html
@ -1,7 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
+<link rel="icon" href="/favicon.ico" sizes="48x48">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -215,6 +217,23 @@
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Service Desk Tech</h3>
                  <span class="experience__company"
                    >2026 to Present | Forterra</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
                  </ul>
                 </p>
                </div>
                </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
@ -223,7 +242,7 @@
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
-                    >2025 to Present | Blue Tech Innovation</span>
+                    >2025 to 2026 | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
@ -248,7 +267,7 @@
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company"
-                    >2023 to Present | ITG</span
+                    >2023 to 2025 | ITG</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
--- a/index.html
+++ b/index.html
@ -4,9 +4,10 @@
 <head>
  <meta charset="UTF-8">
  <title>dangrubb.net</title>
      <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="./style.css">
 </head>
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,8 @@
      "name": "dangrubb-astro",
      "version": "0.0.1",
      "dependencies": {
        "@fontsource/geist-mono": "^5.3.0",
        "@fontsource/instrument-sans": "^5.3.0",
        "astro": "^6.1.9"
      },
      "engines": {
@ -593,6 +595,24 @@
        "node": ">=18"
      }
    },
    "node_modules/@fontsource/geist-mono": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.3.0.tgz",
      "integrity": "sha512-UtJ1BBBCVpMYdIcW7nEB45UAoAw5M53ZXs2t0ciPW+IokuAAIc56M8+kW5tXbRJCTpDw4XTtU7proT6NdQAHTg==",
      "license": "OFL-1.1",
      "funding": {
        "url": "https://github.com/sponsors/ayuhito"
      }
    },
    "node_modules/@fontsource/instrument-sans": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/@fontsource/instrument-sans/-/instrument-sans-5.3.0.tgz",
      "integrity": "sha512-QwXc4hb/px3XvSPS2CPAOgey8nyrQFxgxrmXQQ+pN+P51hKdAcchxpg8rSbjANFfPu6VKXhDqkVDucXMZ9CM5g==",
      "license": "OFL-1.1",
      "funding": {
        "url": "https://github.com/sponsors/ayuhito"
      }
    },
    "node_modules/@img/colour": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -12,6 +12,8 @@
    "astro": "astro"
  },
  "dependencies": {
    "@fontsource/geist-mono": "^5.3.0",
    "@fontsource/instrument-sans": "^5.3.0",
    "astro": "^6.1.9"
  }
-}
+}
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/cv/assets/img/favicon.ico
+++ b/public/cv/assets/img/favicon.ico
--- a/public/cv/index.html
+++ b/public/cv/index.html
@ -0,0 +1,414 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
 <link rel="icon" href="/favicon.ico" sizes="48x48">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
    />
    <link rel="stylesheet" href="styles/index.css" />
    <title>Dan Grubb CV</title>
  </head>
  <body>
    <!--========== HEADER ==========-->
    <header class="l-header" id="header">
      <nav class="nav bd-container">
        <a href="#" class="nav nav__logo">Dan</a>
        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item">
              <a href="#home" class="nav__link active-link">
                <i class="bx bx-home nav__icon"></i>Home
              </a>
            </li>
            <li class="nav__item">
              <a href="#profile" class="nav__link">
                <i class="bx bx-user nav__icon"></i>Profile
              </a>
            </li>
            <li class="nav__item">
              <a href="#education" class="nav__link">
                <i class="bx bx-book nav__icon"></i>Education
              </a>
            </li>
            <li class="nav__item">
              <a href="#skills" class="nav__link">
                <i class="bx bx-receipt nav__icon"></i>Skills
              </a>
            </li>
            <li class="nav__item">
              <a href="#experiencie" class="nav__link">
                <i class="bx bx-briefcase nav__icon"></i>Experience
              </a>
            </li>
            <li class="nav__item">
              <a href="#certificates" class="nav__link">
                <i class="bx bx-briefcase nav__icon"></i>Certificates
              </a>
            </li>
            <li class="nav__item">
              <a href="#references" class="nav__link">
                <i class="bx bx-link-external nav__icon"></i>References
              </a>
            </li>
          </ul>
        </div>
        <div class="nav__toggle" id="nav-toggle">
          <i class="bx bx-grid-alt nav__icon"></i>
        </div>
      </nav>
    </header>
    <main class="l-main bd-container">
      <!-- All elements within this div, is generated in PDF -->
      <div class="resume" id="area-cv">
        <div class="resume__left">
          <!--========== HOME ==========-->
          <section class="home" id="home">
            <div class="home__container section bd-grid">
              <div class="home__data bd-grid">
                <img
                  src="assets/img/perfil-example.jpg"
                  alt="perfil"
                  class="home__img"
                />
                <h1 class="home__title">Dan <b>Grubb</b></h1>
                <h3 class="home__profession">IT Man</h3>
                <div>
                  <a
                    download=""
                    href="assets/pdf/DanGrubbResume.pdf"
                    class="home__button-movil"
                    >Download</a
                  >
                </div> 
              </div>
              <div class="home__address bd-grid">
                <span class="home__information">
                  <i class="bx bx-map home__icon"></i>Falls Church, VA
                </span>
                <span class="home__information">
                    <i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net               
              </span>
                <span class="home__information">
                  <i class="bx bx-phone home__icon"></i> 703-649-1637
                </span>
              </span>
              <span class="home__information">
                <i class="bx bx-planet home__icon"></i> dangrubb.net
              </span>
              </div>
            </div>
            <!-- Theme change button -->
            <i
              class="bx bx-moon change-theme"
              title="Theme"
              id="theme-button"
            ></i>
            <!-- Button to generate and download the pdf. Available for desktop. -->
            <i
              class="bx bx-download generate-pdf"
              title="Generate PDF"
              id="resume-button"
            ></i>
          </section>
          <!--========== PROFILE ==========-->
          <section class="profile section" id="profile">
            <h2 class="section-title">Profile</h2>
            <p class="profile__description">
              Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
            </p>
          </section>
          <!--========== EDUCATION ==========-->
          <section class="education section" id="education">
            <h2 class="section-title">Education</h2>
            <div class="education__container">
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Advanced Diploma</h3>
                  <span class="education__studies">Patriot High School</span>
                  <span class="education__year">2015 - 2019</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Some College</h3>
                  <!-- <span class="education__studies"></span> -->
                  <span class="education__year">2020</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <!-- <span class="education__line"></span> -->
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Self-Study Certifications</h3>
                  <!-- <span class="education__studies"></span> -->
                  <span class="education__year">2020 - Present</span>
                </div>
              </div>
            </div>
          </section>
          <!--========== SKILLS  ==========-->
          <section class="skills section" id="skills">
            <h2 class="section-title">Skills</h2>
            <div class="skills__content bd-grid">
              <ul class="skills__data">
                <li class="skills__name">
                  <span class="skills__circle"></span>Windows
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Mac
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Linux
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Networking
                </li>
              </ul>
              <ul class="skills__data">
                <li class="skills__name">
                  <span class="skills__circle"></span>Security
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Hardware
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Software
                </li>
              </ul>
            </div>
          </section>
        </div>
        <div class="resume__right">
          <!--========== EXPERIENCE ==========-->
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Service Desk Tech</h3>
                  <span class="experience__company"
                    >2026 to Present | Forterra</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
                  </ul>
                 </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
                    >2025 to 2026 | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                      <li>• Offer end-user support for both office-based and remote employees.</li>
                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                      <li>• Firewalls, Printer Servers, Office 365</li>
                      <li>• Mac systems, workstation and network connectivity issues</li>
                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>       
                 </p>
                </div>
                </div>
                <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company"
                    >2023 to 2025 | ITG</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
                      <li>• Manage client relationships and troubleshoot technical issues.</li>
                      <li>• Deliver tailored solutions for business needs.</li>
                      <li>• Find creative solutions for government and private clients.</li>
                      <li>• Maintained 99% SLA compliance.</li>
                      <li>• Streamlined and documented standard operating procedures.</li>
                      <li>• Automated daily and repetitive tasks.</li>
                      <li>• Created instructional media for field technicians.</li>
                  </ul>       
                 </p>
                </div>
              </div>
            <div class="experience__content">
                    <div class="experience__time">
                        <span class="experience__rounder"></span>
                        <span class="experience__line__last"></span>
                    </div>
                    <div class="experience__data bd-grid">
                        <h3 class="experience__title">Field Technician</h3>
                        <span class="experience__company">2023 | Dell</span>
                        <p class="experience__description">
                            <ul class="experience__description">
                                <li>• Managed a workload of repairs in a ticketing system.</li>
                                <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                                <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                                <li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
                                <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                            </ul>
                        </p>
                    </div>
                </div>
              <a href="moreInformation.html" class="more__information">
                <i class="bx bx-info-circle information__icon"></i>
                More Information
              </a>
            </div>
          </section>
          <!--========== CERTIFICATES ==========-->
          <section class="certificate section" id="certificates">
            <h2 class="section-title">Certifications</h2>
            <div class="certificate__container bd-grid">
              <div class="certificate__content">
                <h3 class="certificate__title">
                  CompTIA A+, Network+ and Security+
                </h3>
                <p class="certificate__description">
                  https://www.credly.com/users/dangrubbb
                </p>
              </div>
              <div class="certificate__content">
                <h3 class="certificate__title">
                  Microsoft Office Specialist
                </h3>
                <p class="certificate__description">
                  https://www.credly.com/users/dangrubbb
                </p>
              </div>
              <div class="certificate__content">
                <h3 class="certificate__title">
                  Dell, Apple, Samsung Certified Repair Technician
                </h3>
                <p class="certificate__description">
                </p>
              </div>
            </div>
          </section>
          <!--========== REFERENCES ==========-->
          <section class="references section" id="references">
            <h2 class="section-title">References</h2>
            <div class="references__container bd-grid">
              <div class="references__content bd-grid">
                <span class="references__subtitle">IT Engineer, ITG</span>
                <h3 class="references__title">Samuel Alpert</h3>
                <ul class="references__contact">
                  <li>Details available upon request</li>
                  <!-- <li>Email: user@email.com</li> -->
                </ul>
              </div>
              <div class="references__content bd-grid">
                <span class="references__subtitle">Server Technician, AMD</span>
                <h3 class="references__title">Brian Oberoi</h3>
                <ul class="references__contact">
                  <li>Details available upon request</li>
                  <!-- <li>Email: user@email.com</li> -->
                </ul>
              </div>
            </div>
          </section>
          <!--========== LANGUAGES ==========-->
          <section class="languages section">
            <h2 class="section-title">Languages</h2>
            <div class="languages__container">
              <ul class="languages__content bd-grid">
                <li class="languages__name">
                  <span class="languages__circle"></span> English
                </li>
                <li class="languages__name">
                  <span class="languages__circle"></span> Python
                </li>
                <li class="languages__name">
                  <span class="languages__circle"></span> HTML
                </li>
              </ul>
            </div>
          </section>
          <!--========== INTERESTS ==========-->
          <section class="interests section">
            <h2 class="section-title">Interests</h2>
            <div class="interests__container bd-grid">
              <div class="interests__content">
                <i class="bx bx-headphone interests__icon"></i>
                <span class="interests__name">Music</span>
              </div>
              <div class="interests__content">
                <i class="bx bx-cog interests__icon"></i>
                <span class="interests__name">Tech</span>
              </div>
              <div class="interests__content">
                <i class="bx bx-walk interests__icon"></i>
                <span class="interests__name">Fitness</span>
              </div>
              <div class="interests__content">
                <i class="bx bx-bible interests__icon"></i>
                <span class="interests__name">Christ</span>
              </div>
            </div>
          </section>
        </div>
      </div>
    </main>
    <!--========== SCROLL TOP ==========-->
    <a href="#" class="scrolltop" id="scroll-top">
      <i class="bx bx-up-arrow-alt scrolltop__icon"></i>
    </a>
    <!--========== HTML2PDF ==========-->
    <script src="js/html2pdf.bundle.min.js"></script>
    <!--========== MAIN JS ==========-->
    <script src="js/main.js"></script>
  </body>
 </html>
--- a/public/cv/js/main.js
+++ b/public/cv/js/main.js
@ -0,0 +1,179 @@
 /*==================== SHOW MENU ====================*/
 const showMenu = (toggleId, navId) => {
  const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId);
  //validate that variables exist
  if (toggle && nav) {
    toggle.addEventListener("click", () => {
      //we add the show menu class to the div tag with the nav__menu class
      nav.classList.toggle("show-menu");
    });
  }
 };
 showMenu("nav-toggle", "nav-menu");
 /*==================== REMOVE MENU MOBILE ====================*/
 const navLink = document.querySelectorAll(".nav__link");
 function linkAction() {
  const navMenu = document.getElementById("nav-menu");
  //when we click on each nav__link, we remove the show-menu class
  navMenu.classList.remove("show-menu");
 }
 navLink.forEach((n) => n.addEventListener("click", linkAction));
 /*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
 const sections = document.querySelectorAll("section[id]");
 function scrollActive() {
  const scrollY = window.pageYOffset;
  sections.forEach((current) => {
    const sectionHeight = current.offsetHeight;
    const sectionTop = current.offsetTop - 50;
    sectionId = current.getAttribute("id");
    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      document
        .querySelector(".nav__menu a[href*=" + sectionId + "]")
        .classList.add("active-link");
    } else {
      document
        .querySelector(".nav__menu a[href*=" + sectionId + "]")
        .classList.remove("active-link");
    }
  });
 }
 window.addEventListener("scroll", scrollActive);
 /*==================== SHOW SCROLL TOP ====================*/
 function scrollTop() {
  const scrollTop = document.getElementById("scroll-top");
  // When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
  if (this.scrollY >= 200) scrollTop.classList.add("show-scroll");
  else scrollTop.classList.remove("show-scroll");
 }
 window.addEventListener("scroll", scrollTop);
 /*==================== DARK LIGHT THEME ====================*/
 const themeButton = document.getElementById("theme-button");
 const darkTheme = "dark-theme";
 const iconTheme = "bx-sun";
 // Previously selected topic (if user selected)
 const selectedTheme = localStorage.getItem("selected-theme");
 const selectedIcon = localStorage.getItem("selected-icon");
 // We obtain the current theme that the interface has by validating the dark-theme class
 const getCurrentTheme = () =>
  document.body.classList.contains(darkTheme) ? "dark" : "light";
 const getCurrentIcon = () =>
  themeButton.classList.contains(iconTheme) ? "bx-moon" : "bx-sun";
 // We validate if the user previously chose a topic
 if (selectedTheme) {
  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
  document.body.classList[selectedTheme === "dark" ? "add" : "remove"](
    darkTheme
  );
  themeButton.classList[selectedIcon === "bx-moon" ? "add" : "remove"](
    iconTheme
  );
 }
 // Activate / deactivate the theme manually with the button
 themeButton.addEventListener("click", () => {
  // Add or remove the dark / icon theme
  document.body.classList.toggle(darkTheme);
  themeButton.classList.toggle(iconTheme);
  // We save the theme and the current icon that the user chose
  localStorage.setItem("selected-theme", getCurrentTheme());
  localStorage.setItem("selected-icon", getCurrentIcon());
 });
 /*==================== REDUCE THE SIZE AND PRINT ON AN A4 SHEET ====================*/
 function scaleCv() {
  document.body.classList.add("scale-cv");
 }
 /*==================== REMOVE THE SIZE WHEN THE CV IS DOWNLOADED ====================*/
 function removeScale() {
  document.body.classList.remove("scale-cv");
 }
 /*==================== GENERATE PDF ====================*/
 // PDF generated area
 let areaCv = document.getElementById("area-cv");
 let resumeButton = document.getElementById("resume-button");
 // Html2pdf options
 let opt = {
  margin: 0,
  filename: "DanGrubbResume.pdf",
  image: { type: "jpeg", quality: 0.98 },
  html2canvas: { scale: 2 },
  jsPDF: { format: "a4", orientation: "portrait" },
 };
 // Function to call areaCv and Html2Pdf options
 function generateResume() {
  // Select the elements to hide
  const experienceLink = document.querySelector("#experience > div > a");
  const interestsSection = document.querySelector("#area-cv > div.resume__right > section.interests.section");
  // Hide the elements before generating PDF
  if (experienceLink) {
    experienceLink.style.display = 'none'; // Hide the link
  }
  if (interestsSection) {
    interestsSection.style.display = 'none'; // Hide the interests section
  }
  // Generate the PDF
  html2pdf(areaCv, opt);
  // Show the elements again after a timeout
  setTimeout(() => {
    if (experienceLink) {
      experienceLink.style.display = 'block'; // Show the link again
    }
    if (interestsSection) {
      interestsSection.style.display = 'block'; // Show the interests section again
    }
  }, 2000); // Adjust the timeout if necessary
 }
 // When the button is clicked, it executes the three functions
 resumeButton.addEventListener("click", () => {
  // 1. The class .scale-cv is added to the body, where it reduces the size of the elements
  scaleCv();
  // 2. The PDF is generated
  generateResume();
  // 3. The .scale-cv class is removed from the body after 5 seconds to return to normal size.
  setTimeout(removeScale, 5000);
 });
 /*========== CONFIRMATION MESSAGE ==========*/
 const countdownElement = document.getElementById("countdown");
 // Date to countdown (July 1, 2023)
 const countdownDate = new Date("July 1, 2023 00:00:00").getTime();
 // Update the countdown every second
 const countdownTimer = setInterval(() => {
  const now = new Date().getTime();
  const distance = countdownDate - now;
  // Calculate days, hours, minutes, and seconds remaining
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
  // Update the countdown element
  countdownElement.innerHTML = `The remaining time is ${days} days, ${hours} hours, ${minutes} minutes, and ${seconds} seconds.`;
  // If the target date is reached, stop the countdown
  if (distance < 0) {
    clearInterval(countdownTimer);
    countdownElement.innerHTML = "The day has arrived!";
  }
 }, 1000);
--- a/public/cv/moreInformation.html
+++ b/public/cv/moreInformation.html
@ -0,0 +1,385 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
 <link rel="icon" href="/favicon.ico" sizes="48x48">
 <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
    />
    <link rel="stylesheet" href="styles/index.css" />
    <title>Dan Grubb CV</title>
  </head>
  <body>
    <!--========== HEADER ==========-->
    <header class="l-header" id="header">
      <nav class="nav bd-container">
        <a href="#" class="nav nav__logo">Dan</a>
        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item">
              <a href="#home" class="nav__link active-link">
                <i class="bx bx-home nav__icon"></i>Home
              </a>
            </li>
            <li class="nav__item">
              <a href="#profile" class="nav__link">
                <i class="bx bx-user nav__icon"></i>Profile
              </a>
            </li>
            <li class="nav__item">
              <a href="#education" class="nav__link">
                <i class="bx bx-book nav__icon"></i>Education
              </a>
            </li>
            <li class="nav__item">
              <a href="#skills" class="nav__link">
                <i class="bx bx-receipt nav__icon"></i>Skills
              </a>
            </li>
            <li class="nav__item">
              <a href="#experiencie" class="nav__link">
                <i class="bx bx-briefcase nav__icon"></i>Experience
              </a>
            </li>
            <li class="nav__item">
              <a href="#certificates" class="nav__link">
                <i class="bx bx-briefcase nav__icon"></i>Certificates
              </a>
            </li>
            <li class="nav__item">
              <a href="#references" class="nav__link">
                <i class="bx bx-link-external nav__icon"></i>References
              </a>
            </li>
          </ul>
        </div>
        <div class="nav__toggle" id="nav-toggle">
          <i class="bx bx-grid-alt nav__icon"></i>
        </div>
      </nav>
    </header>
    <main class="l-main bd-container">
      <!-- All elements within this div, is generated in PDF -->
      <div class="resume" id="area-cv">
        <div class="resume__left">
          <!--========== HOME ==========-->
          <section class="home" id="home">
            <div class="home__container section bd-grid">
              <div class="home__data bd-grid">
                <img
                  src="assets/img/perfil-example.jpg"
                  alt="perfil"
                  class="home__img"
                />
                <h1 class="home__title">Dan <b>Grubb</b></h1>
                <h3 class="home__profession">IT Man</h3>
                <div>
                  <a
                    download=""
                    href="assets/pdf/ResumeCv.pdf"
                    class="home__button-movil"
                    >Download</a
                  >
                </div>
                <!-- 
                <div>
                  <a href="contact.html" class="home__button-contact"
                    >Contact Me</a
                  >
                </div>
                -->
              </div>
              <div class="home__address bd-grid">
                <span class="home__information">
                  <i class="bx bx-map home__icon"></i>Falls Church, VA
                </span>
                <span class="home__information">
                  <i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net
                </span>
                <span class="home__information">
                  <i class="bx bx-phone home__icon"></i> 703-649-1637
                </span>
                <span class="home__information">
                  <i class="bx bx-planet home__icon"></i> dangrubb.net
                </span>
              </div>
            </div>
            <!-- Theme change button -->
            <i
              class="bx bx-moon change-theme"
              title="Theme"
              id="theme-button"
            ></i>
            <!-- Button to generate and download the pdf. Available for desktop. -->
            <i
              class="bx bx-download generate-pdf"
              title="Generate PDF"
              id="resume-button"
            ></i>
          </section>
          <!--========== PROFILE ==========-->
          <section class="profile section" id="profile">
            <h2 class="section-title">Profile</h2>
            <p class="profile__description">
              Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
            </p>
          </section>
          <!--========== EDUCATION ==========-->
          <section class="education section" id="education">
            <h2 class="section-title">Education</h2>
            <div class="education__container">
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Advanced Diploma</h3>
                  <span class="education__studies">Patriot High School</span>
                  <span class="education__year">2015 - 2019</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Some College</h3>
                  <!-- <span class="education__studies"></span> -->
                  <span class="education__year">2020</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <!-- <span class="education__line"></span> -->
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Self-Study Certifications</h3>
                  <!-- <span class="education__studies"></span> -->
                  <span class="education__year">2020 - Present</span>
                </div>
              </div>
            </div>
          </section>
          <!--========== SKILLS  ==========-->
          <section class="skills section" id="skills">
            <h2 class="section-title">Skills</h2>
            <div class="skills__content bd-grid">
              <ul class="skills__data">
                <li class="skills__name">
                  <span class="skills__circle"></span>Windows
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Mac
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Linux
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Networking
                </li>
              </ul>
              <ul class="skills__data">
                <li class="skills__name">
                  <span class="skills__circle"></span>Security
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Hardware
                </li>
                <li class="skills__name">
                  <span class="skills__circle"></span>Software
                </li>
              </ul>
            </div>
          </section>
        </div>
        <div class="resume__right">
          <!--========== EXPERIENCE ==========-->
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Service Desk Tech</h3>
                  <span class="experience__company"
                    >2026 to Present | Forterra</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</li>
                  </ul>
                 </p>
                </div>
                </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company"
                    >2025 to 2026 | Blue Tech Innovation</span>
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                      <li>• Offer end-user support for both office-based and remote employees.</li>
                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                      <li>• Firewalls, Printer Servers, Office 365</li>
                      <li>• Mac systems, workstation and network connectivity issues</li>
                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>       
                 </p>
                </div>
                </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company"
                    >2023 to 2025 | ITG</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
                      <li>• Manage client relationships and troubleshoot technical issues.</li>
                      <li>• Deliver tailored solutions for business needs.</li>
                      <li>• Find creative solutions for government and private clients.</li>
                      <li>• Maintained 99% SLA compliance.</li>
                      <li>• Streamlined and documented standard operating procedures.</li>
                      <li>• Automated daily and repetitive tasks.</li>
                      <li>• Created instructional media for field technicians.</li>
                  </ul>                  
                </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Field Technician</h3>
                  <span class="experience__company"
                    >2023 | Dell</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Managed a workload of repairs in a ticketing system.</li>
                      <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                      <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                      <li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
                      <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                  </ul>                  
                </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">
                    Lead Repair Technician
                  </h3>
                  <span class="experience__company"
                    >2021 to 2022 | T-Mobile</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Diagnosed and repaired cellphones, tablets, laptops, and other mobile devices.</li>
                      <li>• Efficiently diagnosed issues with customers' devices and performed all necessary repairs.</li>
                      <li>• Handled inventory and parts returns while ensuring systems were up to date.</li>
                      <li>• Exceeded SLA expectations completing 90% of repairs in under 90 minutes.</li>
                  </ul>                  
                </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Lead Technician</h3>
                  <span class="experience__company"
                    >2021 | Red Door Pro Wash</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Communicated with customers to perform soft wash services efficiently.</li>
                      <li>• Created job plans for the team prior to arrival.</li>
                      <li>• Maintained and drove the company vehicle.</li>
                  </ul>                  </p>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time">
                  <span class="experience__rounder"></span>
                  <span class="experience__line"></span>
                </div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Night Shift Manager</h3>
                  <span class="experience__company"
                    >2020 to 2021 | Taco Bell</span
                  >
                  <p class="experience__description">
                    <ul class="experience__description">
                      <li>• Managed up to 10 staff during the night shift.</li>
                      <li>• Trained new employees and handled customer issues.</li>
                      <li>• Processed refunds, tracked inventory, and kept cash registers balanced.</li>
                  </ul>                  </p>
                </div>
              </div>
              <a href="index.html" class="back__home">
                <i class="bx bx-arrow-back back__icon"></i>
                Back to Home
              </a>
            </div>
          </section>
        </div>
      </div>
    </main>
    <!--========== SCROLL TOP ==========-->
    <a href="#" class="scrolltop" id="scroll-top">
      <i class="bx bx-up-arrow-alt scrolltop__icon"></i>
    </a>
    <!--========== HTML2PDF ==========-->
    <script src="js/html2pdf.bundle.min.js"></script>
    <!--========== MAIN JS ==========-->
    <script src="js/main.js"></script>
  </body>
 </html>
--- a/public/cv/styles/index.css
+++ b/public/cv/styles/index.css
@ -0,0 +1,692 @@
 /*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
 /*===== VARIABLES CSS =====*/
 :root {
  --header-height: 3rem;
  /*========== Colors ==========*/
  --title-color: #0b0a0a;
  --text-color: #403a3a;
  --text-color-light: #707070;
  --container-color: #fafafa;
  --container-color-alt: #f0efef;
  --body-color: #fcfcfc;
  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.875rem;
  --smaller-font-size: 0.813rem;
  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
  /*========== Margenes ==========*/
  --mb-1: 0.5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
 }
 /*========== BASE ==========*/
 /*========== Variables Dark theme ==========*/
 body.dark-theme {
  --title-color: #f2f2f2;
  --text-color: #bfbfbf;
  --container-color: #212121;
  --container-color-alt: #181616;
  --body-color: #2b2b2b;
 }
 /*========== Button Dark/Light ==========*/
 .change-theme {
  position: absolute;
  right: 0;
  top: 2.2rem;
  display: flex;
  color: var(--text-color);
  font-size: 1.2rem;
  cursor: pointer;
 }
 .change-theme:hover {
  color: var(--title-color);
 }
 /*========== Font size variables to scale cv ==========*/
 body.scale-cv {
  --h1-font-size: 0.938rem;
  --h2-font-size: 0.938rem;
  --h3-font-size: 0.875rem;
  --normal-font-size: 0.813rem;
  --small-font-size: 0.75rem;
  --smaller-font-size: 0.688rem;
 }
 /*========== Generate PDF button ==========*/
 .generate-pdf {
  display: none;
  position: absolute;
  top: 2.2rem;
  left: 0;
  font-size: 1.2rem;
  color: var(--text-color);
  cursor: pointer;
 }
 .generate-pdf:hover {
  color: var(--title-color);
 }
 /*========== Classes modified to reduce size and print on A4 sheet ==========*/
 .scale-cv .change-theme,
 .scale-cv .generate-pdf {
  display: none;
 }
 .scale-cv .bd-container {
  max-width: 595px;
 }
 .scale-cv .section {
  padding: 1.5rem 0 0.8rem;
 }
 .scale-cv .section-title {
  margin-bottom: 0.75rem;
 }
 .scale-cv .resume__left,
 .scale-cv .resume__right {
  padding: 0 1rem;
 }
 .scale-cv .home-img {
  width: 90px;
  height: 90px;
 }
 .scale-cv .home__container {
  gap: 1.5rem;
 }
 .scale-cv .home__data {
  gap: 0.25rem;
 }
 .scale-cv .home__address,
 .scale-cv .social__container {
  gap: 0.75rem;
 }
 .scale-cv .home__icon,
 .scale-cv .social__icon,
 .scale-cv .interests__icon {
  font-size: 1rem;
 }
 .scale-cv .education__container,
 .scale-cv .experience__company,
 .scale-cv .certificate__container {
  gap: 1rem;
 }
 .scale-cv .education__time,
 .scale-cv .experience__time {
  padding-right: 0.5rem;
 }
 .scale-cv .education__rounder,
 .scale-cv .experience__rounder {
  width: 11px;
  height: 11px;
  margin-top: 0.22rem;
 }
 .scale-cv .education__line,
 .scale-cv .experience__line {
  width: 1px;
  height: 110%;
  transform: translate(5px, 0);
 }
 .scale-cv .experience__line__last {
  width: 1px;
  height: 100%;
  transform: translate(5px, 0);
 }
 .scale-cv .education__data,
 .scale-cv .experience__data {
  gap: 0.25rem;
 }
 .scale-cv .skills__name {
  margin-bottom: var(--mb-1);
 }
 .scale-cv .interests__container {
  column-gap: 2.5rem;
 }
 body {
  margin: 0 0 var(--header-height);
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
 }
 h1,
 h2,
 h3,
 ul,
 p {
  margin: 0;
 }
 h1,
 h2,
 h3 {
  color: var(--title-color);
  font-weight: var(--font-medium);
 }
 ul {
  padding: 0;
  list-style: none;
 }
 a {
  text-decoration: none;
 }
 img {
  max-width: 100%;
  height: auto;
 }
 /*========== CLASS CSS ==========*/
 .section {
  padding: 1.5rem 0;
 }
 .section-title {
  font-size: var(--h2-font-size);
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  text-transform: uppercase;
  letter-spacing: 0.35rem;
  text-align: center;
  margin-bottom: var(--mb-3);
 }
 /*========== LAYOUT ==========*/
 .bd-container {
  max-width: 968px;
  width: calc(100% - 3rem);
  margin-left: var(--mb-3);
  margin-right: var(--mb-3);
 }
 .bd-grid {
  display: grid;
  gap: 1.5rem;
 }
 .l-header {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: var(--body-color);
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
 }
 /*========== NAV ==========*/
 .nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
@media screen and (max-width: 968px) {
  .nav__menu {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    padding: 2rem 0rem;
    background-color: var(--body-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 1rem 1rem 0 0;
    z-index: var(--z-fixed);
    transition: 0.3s;
  }
 }
 .nav__logo,
 .nav__toggle {
  color: var(--title-color);
  font-weight: var(--font-medium);
 }
 .nav__toggle {
  font-size: 1.2rem;
  cursor: pointer;
 }
 .nav__item {
  text-align: center;
 }
 .nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
 }
 .nav__link {
  display: flex;
  flex-direction: column;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  font-weight: var(--font-medium);
 }
 .nav__link:hover {
  color: var(--title-color);
 }
 .nav__icon {
  font-size: 1.2rem;
  margin-bottom: var(--mb-1);
 }
 /* Show menu */
 .show-menu {
  bottom: var(--header-height);
 }
 /* Active menu link */
 .active-link {
  color: var(--title-color);
 }
 /*========== HOME ==========*/
 .home {
  position: relative;
 }
 .home__container {
  gap: 3rem;
 }
 .home__data {
  gap: 0.5rem;
  text-align: center;
 }
 .home__img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  justify-self: center;
  margin-bottom: var(--mb-1);
 }
 .home__title {
  font-size: var(--h1-font-size);
 }
 .home__profession {
  font-size: var(--normal-font-size);
  margin-bottom: var(--mb-1);
 }
 .home__address {
  gap: 1rem;
 }
 .home__information {
  display: flex;
  align-items: center;
  font-size: var(--small-font-size);
 }
 .home__icon {
  font-size: 1.2rem;
  margin-right: 0.25rem;
 }
 .home__button-movil {
  display: inline-block;
  border: 2px solid var(--text-color);
  color: var(--title-color);
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  transition: 0.3s;
  font-weight: var(--font-medium);
  margin-top: var(--mb-3);
 }
 .home__button-movil:hover {
  background-color: var(--text-color);
  color: var(--container-color);
 }
 .home__button-contact {
  display: inline-block;
  border: 2px solid var(--text-color);
  color: var(--title-color);
  padding: 1rem 1.6rem;
  border-radius: 0.25rem;
  transition: 0.3s;
  font-weight: var(--font-medium);
  margin-top: var(--mb-3);
 }
 .home__button-contact:hover {
  background-color: var(--text-color);
  color: var(--container-color);
 }
 .information__icon,
 .back__icon {
  font-size: 1.5rem;
  color: var(--text-color);
 }
 .information__icon:hover,
 .back__icon:hover {
  color: var(--title-color);
 }
 .more__information,
 .back__home {
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  display: flex;
  gap: 0.5rem;
 }
 .back__home {
  margin-top: 1.5rem;
 }
 .more__information:hover,
 .back__home:hover {
  color: var(--title-color);
 }
 /*========== SOCIAL ==========*/
 .social__container {
  grid-template-columns: max-content;
  gap: 1rem;
 }
 .social__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--small-font-size);
  color: var(--text-color);
 }
 .social__link:hover {
  color: var(--title-color);
 }
 .social__icon {
  font-size: 1.2rem;
  margin-right: 0.25rem;
 }
 /*========== PROFILE ==========*/
 .profile__description {
  text-align: center;
 }
 /*========== EDUCATION AND EXPERIENCE ==========*/
 .education__content,
 .experience__content {
  display: flex;
 }
 .education__time,
 .experience__time {
  padding-right: 1rem;
 }
 .education__rounder,
 .experience__rounder {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--text-color-light);
  border-radius: 50%;
  margin-top: 0.25rem;
 }
 .education__line,
 .experience__line {
  display: block;
  width: 2px;
  height: 109%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
 }
 .experience__line__last {
  display: block;
  width: 2px;
  height: 100%;
  background-color: var(--text-color-light);
  transform: translate(7px, 0);
 }
 .education__data,
 .experience__data {
  gap: 0.5rem;
 }
 .education__title,
 .experience__title {
  font-size: var(--h3-font-size);
 }
 .education__studies,
 .experience__company {
  font-size: var(--small-font-size);
  color: var(--title-color);
 }
 .education__year {
  font-size: var(--smaller-font-size);
 }
 /*========== SKILLS AND LANGUAGES ==========*/
 .skills__content,
 .languages__content {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
 }
 .skills__name,
 .languages__name {
  display: flex;
  align-items: center;
  margin-bottom: var(--mb-3);
 }
 .skills__circle,
 .languages__circle {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--text-color);
  border-radius: 50%;
  margin-right: 0.75rem;
 }
 /*========== CERTIFICATES ==========*/
 .certificate__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
 }
 /*========== REFERENCES ==========*/
 .references__content {
  gap: 0.25rem;
 }
 .references__subtitle {
  color: var(--text-color-light);
 }
 .references__subtitle,
 .references__contact {
  font-size: var(--smaller-font-size);
 }
 .references__title {
  font-size: var(--h3-font-size);
 }
 /*========== INTERESTS ==========*/
 .interests__container {
  display: grid; /* Ensure the grid display is set */
  grid-template-columns: repeat(4, 1fr); /* Keep 4 columns with equal widths */
  gap: 1.5rem; /* Adjust gap if needed; this is value you can tweak */
  margin-top: var(--mb-2);
 }
 .interests__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* You can add a fixed width here if necessary to avoid wrapping, but typically it's better to avoid fixed widths */
 }
 .interests__icon {
  font-size: 1.5rem;
  color: var(--text-color-light);
  margin-bottom: 0.25rem;
 }
 /*========== CONTACT ==========*/
 .contact__container {
  display: flex;
  justify-content: center;
  flex-direction: column;
 }
 .contact__info {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: center;
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  display: flex;
  gap: 2rem;
 }
 .contact__icon {
  font-size: 1.5rem;
  color: var(--text-color);
 }
 .contact__phone,
 .contact__email {
  font-size: var(--h3-font-size);
  color: var(--text-color);
  font-weight: var(--font-medium);
  gap: 0.5rem;
 }
 .contact__form {
  width: 100%;
  max-width: 500px;
  padding: 3rem;
  background-color: #f1f1f1;
  border-radius: 10px;
 }
 .contact__content {
  display: flex;
  flex-direction: row;
 }
 .contact__inputs {
  display: grid;
  gap: 1rem;
 }
 .contact__input,
 .contact__textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  background-color: #e5e5e5;
  border-radius: 5px;
 }
 .contact__textarea {
  resize: none;
  height: 150px;
  margin-top: 1rem;
 }
 .contact__button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-top: 1.5rem;
  border: none;
  background-color: #222;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
 }
 .contact__button:hover {
  background-color: #555;
 }
 /* Scroll top */
 .scrolltop {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem;
  background-color: var(--container-color-alt);
  border-radius: 0.4rem;
  z-index: var(--z-tooltip);
  transition: 0.4s;
  visibility: hidden;
 }
 .scrolltop__icon {
  font-size: 1.2rem;
  color: var(--text-color);
 }
 .show-scroll {
  visibility: visible;
  bottom: 5rem;
 }
 /*========== CONFIRMATION MESSAGE ==========*/
 .confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
 }
 .confirmation h2 {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-2);
 }
 .confirmation p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
 }
 #countdown {
  font-size: 2rem;
  margin-bottom: 2rem;
 }
 /*========== MEDIA QUERIES ==========*/
 /* For small devices, menu two columns */
@media screen and (max-width: 320px) {
  .nav__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.5rem;
  }
 }
 /* Classes modified for large screen size */
@media screen and (min-width: 968px) {
  body {
    margin: 3rem 0;
  }
  .bd-container {
    margin-left: auto;
    margin-right: auto;
  }
  .home__button-contact {
    margin-top: 0;
  }
  .l-header,
  .scrolltop {
    display: none;
  }
  .resume {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    background-color: var(--container-color);
    box-shadow: 0 0 8px rgba(13, 12, 12, 15);
  }
  .resume__left {
    background-color: var(--container-color-alt);
  }
  .resume__left,
  .resume__right {
    padding: 0 1.5rem;
  }
  .generate-pdf {
    display: inline-block;
  }
  .section-title,
  .profile__description {
    text-align: initial;
  }
  .home__container {
    gap: 1.5rem;
  }
  .home__button-movil {
    display: none;
  }
  .references__container {
    grid-template-columns: repeat(2, 1fr);
  }
  .languages__content {
    grid-template-columns: repeat(3, max-content);
    column-gap: 3.5rem;
  }
  .interests__container {
    grid-template-columns: repeat(4, max-content);
    column-gap: 3.5rem;
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -1,9 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 460 460">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<path fill="#EC9770" stroke="#EC9770" stroke-width="14" stroke-linejoin="miter" stroke-miterlimit="6" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
    <style>
        path { fill: #000; }
        @media (prefers-color-scheme: dark) {
            path { fill: #FFF; }
        }
    </style>
 </svg>
--- a/public/music/Darnea/DGDN/index.html
+++ b/public/music/Darnea/DGDN/index.html
@ -4,14 +4,16 @@
  <meta charset="UTF-8">
  <title>DGDN - Darnea | dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="../../music.css">
  <link rel="stylesheet" href="./player.css">
 </head>
 <body>
  <div class="music-container">
    <div class="music-header">
-      <h1><a href="/music">Music</a> / <a href="/music/Darnea">Darnea</a> / DGDN</h1>
+      <h1><a href="/music/">Music</a> / <a href="/music/Darnea/">Darnea</a> / DGDN</h1>
    </div>
    <div class="album-player">
@ -39,7 +41,7 @@
    </div>
    <div class="music-footer">
-      <p><a href="/music/Darnea">← back to artist</a></p>
+      <p><a href="/music/Darnea/">← back to artist</a></p>
    </div>
  </div>
--- a/public/music/Darnea/DGDN/player.css
+++ b/public/music/Darnea/DGDN/player.css
@ -9,7 +9,7 @@
  gap: 30px;
  margin-bottom: 40px;
  padding: 30px;
-  background: rgba(107, 225, 233, 0.05);
+  background: rgb(var(--accent-rgb) / 0.05);
  border-radius: 8px;
  align-items: center;
 }
@ -23,18 +23,18 @@
 .album-info h2 {
  margin: 0 0 5px 0;
  font-size: 2rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 .album-info .artist-name {
  margin: 0 0 5px 0;
-  color: #6be1e9;
+  color: var(--accent);
  font-size: 1.1rem;
 }
 .album-info .album-desc {
  margin: 0;
-  color: #6be1e9;
+  color: var(--accent);
  font-size: 0.9rem;
  font-style: italic;
 }
@ -43,8 +43,8 @@
 .now-playing {
  text-align: center;
  padding: 20px;
-  background: rgba(107, 225, 233, 0.1);
+  background: rgb(var(--accent-rgb) / 0.1);
-  border: 1px solid rgba(107, 225, 233, 0.3);
+  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 6px;
  margin-bottom: 20px;
  min-height: 60px;
@ -55,11 +55,11 @@
 .now-playing p {
  margin: 0;
-  color: #9d9aa4;
+  color: var(--text);
 }
 .now-playing.playing p {
-  color: #6be1e9;
+  color: var(--accent);
  font-weight: bold;
 }
@ -67,7 +67,7 @@
 #audio-player {
  width: 100%;
  margin-bottom: 30px;
-  accent-color: #6be1e9;
+  accent-color: var(--accent);
 }
 /* Tracklist */
@ -78,7 +78,7 @@
 .tracklist h3 {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 .tracklist ol {
@ -90,29 +90,29 @@
 .tracklist li {
  padding: 12px;
  margin-bottom: 8px;
-  background: rgba(157, 154, 164, 0.05);
+  background: rgb(var(--text-rgb) / 0.05);
-  border: 1px solid rgba(107, 225, 233, 0.2);
+  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
-  color: #9d9aa4;
+  color: var(--text);
 }
 .tracklist li:hover {
-  background: rgba(107, 225, 233, 0.1);
+  background: rgb(var(--accent-rgb) / 0.1);
-  border-color: rgba(107, 225, 233, 0.5);
+  border-color: rgb(var(--accent-rgb) / 0.5);
 }
 .tracklist li.active {
-  background: rgba(107, 225, 233, 0.2);
+  background: rgb(var(--accent-rgb) / 0.2);
-  border-color: #6be1e9;
+  border-color: var(--accent);
-  color: #6be1e9;
+  color: var(--accent);
  font-weight: bold;
 }
 .track-duration {
  float: right;
-  color: #6be1e9;
+  color: var(--accent);
  font-size: 0.9rem;
 }
--- a/public/music/Darnea/DGDN/player.js
+++ b/public/music/Darnea/DGDN/player.js
@ -1,14 +1,14 @@
 // Album player for DGDN
 const tracks = [
  { title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" },
  { title: "Neigh V3", filename: "Neigh V3.flac" },
  { title: "On Ice", filename: "On Ice.flac" },
  { title: "Otish", filename: "Otish.flac" },
  { title: "Scan V2", filename: "Scan V2.flac" },
  { title: "balance v2", filename: "balance v2.flac" },
  { title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
-  { title: "held v3", filename: "held v3.flac" }
+  { title: "held v3", filename: "held v3.flac" },
  { title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" }
 ];
 const audioPlayer = document.getElementById('audio-player');
--- a/public/music/Darnea/index.html
+++ b/public/music/Darnea/index.html
@ -4,13 +4,15 @@
  <meta charset="UTF-8">
  <title>Darnea - dangrubb.net</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="../music.css">
 </head>
 <body>
  <div class="music-container">
    <div class="music-header">
-      <h1><a href="/music">Music</a> / Darnea</h1>
+      <h1><a href="/music/">Music</a> / Darnea</h1>
    </div>
    <div class="artist-detail">
@ -21,13 +23,13 @@
    <div class="albums-grid">
      <div class="album-card">
        <div class="album-cover">🔥</div>
-        <h3><a href="/music/Darnea/DGDN">DGDN</a></h3>
+        <h3><a href="/music/Darnea/DGDN/">DGDN</a></h3>
        <p class="album-meta">8 tracks</p>
      </div>
    </div>
    <div class="music-footer">
-      <p><a href="/music">← back to music</a></p>
+      <p><a href="/music/">← back to music</a></p>
    </div>
  </div>
 </body>
--- a/public/music/index.html
+++ b/public/music/index.html
@ -4,7 +4,9 @@
  <meta charset="UTF-8">
  <title>dangrubb.net Music</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="/favicon.ico" sizes="48x48">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="stylesheet" href="./music.css">
 </head>
 <body>
@ -16,7 +18,7 @@
    <div class="artists-grid">
      <div class="artist-card">
        <div class="artist-cover">🎤</div>
-        <h2><a href="/music/Darnea">Darnea</a></h2>
+        <h2><a href="/music/Darnea/">Darnea</a></h2>
        <p class="artist-meta">1 album</p>
      </div>
    </div>
--- a/public/music/music.css
+++ b/public/music/music.css
@ -1,9 +1,38 @@
 /* --- THEME ---
   Dark is the default; a light palette switches on automatically with the visitor's system setting. */
 :root {
  color-scheme: dark light;
  --bg: #0d0a14;
  --text: #9d9aa4;
  --accent: #6be1e9;
  --text-rgb: 157 154 164;
  --accent-rgb: 107 225 233;
  --warn: #ffff00;
  --panel-a: rgb(13 10 20 / 0.6);
  --panel-b: rgb(50 30 80 / 0.3);
  --shadow: rgb(0 0 0 / 0.4);
 }
@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf6f2;
    --text: #4a4553;
    --accent: #0a727c;
    --text-rgb: 74 69 83;
    --accent-rgb: 10 114 124;
    --warn: #8a5a00;
    --panel-a: rgb(255 255 255 / 0.7);
    --panel-b: rgb(250 214 190 / 0.35);
    --shadow: rgb(74 69 83 / 0.18);
  }
 }
 /* --- BASE STYLES (Merged from style.css) --- */
 body {
-  background: #0d0a14;
+  background: var(--bg);
  padding: 40px 20px;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
-  color: #9d9aa4;
+  color: var(--text);
  /* Fixed the no-scroll issue here: */
  min-height: 100vh;
  margin: 0;
@ -14,7 +43,7 @@ body {
 }
 a {
-  color: #6be1e9;
+  color: var(--accent);
  text-decoration: none;
 }
@ -35,19 +64,19 @@ a:visited {
 .music-header {
  text-align: center;
  margin-bottom: 50px;
-  border-bottom: 2px solid rgba(107, 225, 233, 0.3);
+  border-bottom: 2px solid rgb(var(--accent-rgb) / 0.3);
  padding-bottom: 20px;
 }
 .music-header h1 {
  margin: 0;
  font-size: 2rem;
-  color: #9d9aa4;
+  color: var(--text);
  font-weight: bold;
 }
 .music-header h1 a {
-  color: #6be1e9;
+  color: var(--accent);
 }
 /* Artists/Albums Grid */
@ -63,16 +92,16 @@ a:visited {
 .album-card {
  text-align: center;
  padding: 20px;
-  background: rgba(157, 154, 164, 0.05);
+  background: rgb(var(--text-rgb) / 0.05);
-  border: 1px solid rgba(107, 225, 233, 0.2);
+  border: 1px solid rgb(var(--accent-rgb) / 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
 }
 .artist-card:hover,
 .album-card:hover {
-  background: rgba(107, 225, 233, 0.1);
+  background: rgb(var(--accent-rgb) / 0.1);
-  border-color: rgba(107, 225, 233, 0.5);
+  border-color: rgb(var(--accent-rgb) / 0.5);
  transform: translateY(-4px);
 }
@ -86,12 +115,12 @@ a:visited {
 .album-card h3 {
  margin: 10px 0;
  font-size: 1.3rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 .artist-meta,
 .album-meta {
-  color: #6be1e9;
+  color: var(--accent);
  font-size: 0.9rem;
  margin: 0;
 }
@ -101,7 +130,7 @@ a:visited {
  text-align: center;
  margin: 40px 0;
  padding: 40px 20px;
-  background: rgba(107, 225, 233, 0.05);
+  background: rgb(var(--accent-rgb) / 0.05);
  border-radius: 8px;
 }
@ -113,7 +142,7 @@ a:visited {
 .artist-detail h2 {
  margin: 0;
  font-size: 2.5rem;
-  color: #9d9aa4;
+  color: var(--text);
 }
 /* Footer / Bottom Nav */
@ -121,7 +150,7 @@ a:visited {
  text-align: center;
  margin-top: 60px;
  padding: 20px 0;
-  border-top: 2px solid rgba(107, 225, 233, 0.3);
+  border-top: 2px solid rgb(var(--accent-rgb) / 0.3);
 }
 .bottom-nav {
@ -160,7 +189,7 @@ a:visited {
 .announcement {
  margin: 20px auto;
  display: block;
-  border: 1px solid #ffff00;
+  border: 1px solid var(--warn);
  padding: 10px 15px;
  border-radius: 3px;
  text-align: center;
@ -168,7 +197,7 @@ a:visited {
 }
 .announcement a {
-  color: #ffff00;
+  color: var(--warn);
  font-weight: bold;
 }
@ -181,11 +210,11 @@ a:visited {
 }
 .blog-preview {
-  border: 1px solid rgba(155, 169, 180, 0.3);
+  border: 1px solid rgb(var(--text-rgb) / 0.3);
  border-radius: 4px;
  padding: 15px;
-  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
+  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 12px var(--shadow);
 }
 /* --- RESPONSIVE MEDIA QUERIES --- */
--- a/public/src/img/DanGrubbLogoDark.png
+++ b/public/src/img/DanGrubbLogoDark.png
--- a/public/src/img/DanGrubbLogoDark.svg
+++ b/public/src/img/DanGrubbLogoDark.svg
@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 444">
 <path fill="#090B11" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
 </svg>
--- a/public/src/img/DanGrubbLogoTeal.png
+++ b/public/src/img/DanGrubbLogoTeal.png
--- a/public/src/img/DanGrubbLogoWhite.svg
+++ b/public/src/img/DanGrubbLogoWhite.svg
@ -0,0 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 444">
 <path fill="#FFFFFF" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
 </svg>
--- a/public/src/img/crush-splatter.png
+++ b/public/src/img/crush-splatter.png
--- a/public/src/img/favicon.ico
+++ b/public/src/img/favicon.ico
--- a/public/src/img/pack-splatter-padded.png
+++ b/public/src/img/pack-splatter-padded.png
--- a/public/src/img/pack-splatter.png
+++ b/public/src/img/pack-splatter.png
--- a/src/img/favicon.ico
+++ b/src/img/favicon.ico
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@ -8,7 +8,9 @@ const { title } = Astro.props;
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
-    <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  </head>
  <body>
    <slot />
--- a/src/layouts/CVBase.astro
+++ b/src/layouts/CVBase.astro
@ -8,7 +8,9 @@ const { title } = Astro.props;
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
-    <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/favicon.ico" sizes="48x48">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
  </head>
  <body>
--- a/src/layouts/CrushBase.astro
+++ b/src/layouts/CrushBase.astro
@ -0,0 +1,60 @@
 ---
 const { title } = Astro.props;
 ---
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <link rel="icon" href="/favicon.ico" sizes="48x48">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Barlow:wght@400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <slot />
  </body>
 </html>
 <style is:global>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Camel Crush Smooth Silver color palette */
  :root {
    --crush-teal: #008b8b;
    --crush-teal-light: #20b2aa;
    --crush-teal-dark: #006666;
    --crush-silver: #c0c0c0;
    --crush-white: #ffffff;
    --crush-bg: #f8f9fa;
    --crush-cream: #faf8f5;
  }
  body {
    background: var(--crush-white);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--crush-teal-dark);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  a {
    color: var(--crush-teal);
    text-decoration: none;
    transition: all 0.3s ease;
  }
  a:hover {
    color: var(--crush-teal-light);
  }
  a:visited {
    color: var(--crush-teal);
  }
 </style>
--- a/src/layouts/RadianceBase.astro
+++ b/src/layouts/RadianceBase.astro
@ -0,0 +1,44 @@
 ---
 import '@fontsource/instrument-sans/latin-400.css';
 import '@fontsource/instrument-sans/latin-500.css';
 import '@fontsource/geist-mono/latin-500.css';
 const { title } = Astro.props;
 ---
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="theme-color" content="#fff6f4" />
    <link rel="icon" href="/favicon.ico" sizes="48x48">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  </head>
  <body>
    <slot />
  </body>
 </html>
 <style is:global>
  :root {
    --ink: 9 11 17;
    --ease: cubic-bezier(0.33, 0, 0.2, 1);
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    background-color: #f9d9b3;
    background-image:
      radial-gradient(115% 80% at 50% 30%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
      linear-gradient(180deg, #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 55%, #f3c19e 78%, #ee9972 92%, #ef815c 100%);
    background-attachment: fixed;
    color: rgb(var(--ink) / 0.8);
    font-family: 'Instrument Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
 </style>
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@ -1,22 +1,25 @@
 ---
-import Base from '../../layouts/Base.astro';
+import RadianceBase from '../../layouts/RadianceBase.astro';
 import GlitchBard from '../../components/GlitchBard.astro';
 import posts from '../../data/posts.json';
 ---
-<Base title="dangrubb.net/blog">
+<RadianceBase title="dangrubb.net/blog">
  <div class="page">
-    <GlitchBard />
+    <header class="blog-header">
-
+      <a class="header-logo" href="/">
-    <p class="page-title">dangrubb.net/blog</p>
+        <span class="sr-only">dangrubb.net home</span>
-    <p class="back-link"><a href="/">← back to home</a></p>
+        <img src="/src/img/DanGrubbLogoDark.svg" alt="" width="64" height="64" />
      </a>
      <h1 class="page-title">Blog</h1>
      <p class="back-link"><a href="/">← Home</a></p>
    </header>
    <div class="blogs-container">
      {posts.map(post => (
        <article class="blog-post" id={post.slug}>
          <h2 class="blog-post-title">{post.title}</h2>
          <div class="blog-post-date">
-            {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+            {new Date(post.date + 'T12:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
          </div>
          <div class="blog-post-content" set:html={post.content} />
          <div class="blog-post-image">
@ -25,83 +28,100 @@ import posts from '../../data/posts.json';
        </article>
      ))}
    </div>
    <footer class="blog-footer">
      <a href="/">← Home</a>
    </footer>
  </div>
-</Base>
+</RadianceBase>
 <style>
-  @import '../../styles/bard.css';
+  .page { min-height: 100vh; display: flex; flex-direction: column; }
-
+  .sr-only {
-  .page {
+    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
-    padding: 20px 20px 40px;
+    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    min-height: 100vh;
    box-sizing: border-box;
  }
-  .page-title, .back-link {
+  .blog-header { text-align: center; padding: 28px 20px 8px; }
-    margin: 20px auto 0;
+  .header-logo { display: inline-block; margin-bottom: 18px; }
-    max-width: 400px;
+  .header-logo img { width: 56px; height: 56px; }
-    text-align: center;
+
-    line-height: 1.3;
+  .page-title {
-    font-size: 0.875rem;
+    margin: 0 0 12px;
    font-weight: 400;
    font-size: clamp(30px, 3.34vw, 56px);
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .back-link, .blog-footer a {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .back-link { margin: 0; }
  .back-link a, .blog-footer a {
    position: relative; display: inline-block; overflow: hidden;
  }
  .back-link a::after, .blog-footer a::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
    background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
  }
  .back-link a:hover::after, .blog-footer a:hover::after { transform: none; }
  .blogs-container {
-    margin: 40px auto 0;
+    margin: 32px auto;
-    max-width: 65em;
+    max-width: 700px;
    width: 100%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .blog-post {
-    margin: 40px auto;
+    margin-bottom: 32px;
-    padding: 20px;
+    padding: 28px;
-    border: 1px solid rgba(155, 169, 180, 0.2);
+    background: #fff;
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
    scroll-margin-top: 100px;
    max-width: 700px;
    width: 100%;
  }
  .blog-post-title {
-    color: #ffff00;
+    margin: 0 0 8px;
-    font-weight: bold;
+    font-weight: 500;
-    font-size: 1.8rem;
+    font-size: 1.6rem;
    letter-spacing: -0.03em;
    text-align: center;
  }
-  .blog-post-date {
+
-    color: #aa95bd;
+  .blog-post-date {
-    font-size: 0.9rem;
+    font-family: 'Geist Mono', ui-monospace, monospace;
-    text-align: center;
+    font-weight: 500;
-    margin-bottom: 20px;
+    font-size: 12px;
-  }
+    text-transform: uppercase;
-  .blog-post-content {
+    letter-spacing: 0.02em;
-    color: #9d9aa4;
+    text-align: center;
-    font-size: 0.95rem;
+    margin-bottom: 22px;
-    line-height: 1.6;
+    padding-bottom: 14px;
-    text-align: center;
+    border-bottom: 1px solid rgb(var(--ink) / 0.15);
-  }
+    color: rgb(var(--ink) / 0.6);
-  .blog-post-content :global(p) {
+  }
-    margin: 0 0 15px;
+
-  }
+  .blog-post-content { font-size: 1rem; line-height: 1.55; text-align: center; }
-  .blog-post-image {
+  .blog-post-content :global(p) { margin: 0 0 15px; }
-    display: flex;
+  .blog-post-content :global(a) { text-decoration: underline; text-underline-offset: 3px; }
-    justify-content: center;
+
-    margin-top: 20px;
+  .blog-post-image { display: flex; justify-content: center; margin-top: 20px; }
-  }
+  .blog-post-image img { max-width: 100%; height: auto; max-height: 60vh; }
-  .blog-post-image img {
+
-    max-width: 100%;
+  .blog-footer { text-align: center; padding: 16px 20px 44px; margin-top: auto; }
    height: auto;
    max-height: 60vh;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  @media (max-width: 768px) {
-    .page { padding: 20px 10px 40px; }
+    .blogs-container { padding: 0 12px; }
-    .page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
+    .blog-post { padding: 18px; margin-bottom: 20px; }
-    .blog-post { padding: 15px; margin: 20px auto; }
+    .blog-post-title { font-size: 1.35rem; }
    .blog-post-title { font-size: 1.4rem; }
  }
 </style>
--- a/src/pages/cv/index.astro
+++ b/src/pages/cv/index.astro
@ -1,324 +0,0 @@
 ---
 import CVBase from '../../layouts/CVBase.astro';
 ---
 <CVBase title="Dan Grubb CV">
  <div class="cv-page">
    <!-- HEADER -->
    <header class="l-header" id="header">
      <nav class="nav bd-container">
        <a href="#" class="nav__logo">Dan</a>
        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item"><a href="#home" class="nav__link active-link"><i class="bx bx-home nav__icon"></i>Home</a></li>
            <li class="nav__item"><a href="#profile" class="nav__link"><i class="bx bx-user nav__icon"></i>Profile</a></li>
            <li class="nav__item"><a href="#education" class="nav__link"><i class="bx bx-book nav__icon"></i>Education</a></li>
            <li class="nav__item"><a href="#skills" class="nav__link"><i class="bx bx-receipt nav__icon"></i>Skills</a></li>
            <li class="nav__item"><a href="#experiencie" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Experience</a></li>
            <li class="nav__item"><a href="#certificates" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Certificates</a></li>
            <li class="nav__item"><a href="#references" class="nav__link"><i class="bx bx-link-external nav__icon"></i>References</a></li>
          </ul>
        </div>
        <div class="nav__toggle" id="nav-toggle"><i class="bx bx-grid-alt nav__icon"></i></div>
      </nav>
    </header>
    <main class="l-main bd-container">
      <div class="resume" id="area-cv">
        <div class="resume__left">
          <!-- HOME -->
          <section class="home" id="home">
            <div class="home__container section bd-grid">
              <div class="home__data bd-grid">
                <img src="/cv/assets/img/perfil-example.jpg" alt="perfil" class="home__img" />
                <h1 class="home__title">Dan <b>Grubb</b></h1>
                <h3 class="home__profession">IT Man</h3>
                <div>
                  <a download="" href="/cv/assets/pdf/DanGrubbResume.pdf" class="home__button-movil">Download</a>
                </div>
              </div>
              <div class="home__address bd-grid">
                <span class="home__information"><i class="bx bx-map home__icon"></i>Falls Church, VA</span>
                <span class="home__information"><i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net</span>
                <span class="home__information"><i class="bx bx-phone home__icon"></i> 703-649-1637</span>
                <span class="home__information"><i class="bx bx-planet home__icon"></i> dangrubb.net</span>
              </div>
            </div>
            <i class="bx bx-moon change-theme" title="Theme" id="theme-button"></i>
            <i class="bx bx-download generate-pdf" title="Generate PDF" id="resume-button"></i>
          </section>
          <!-- PROFILE -->
          <section class="profile section" id="profile">
            <h2 class="section-title">Profile</h2>
            <p class="profile__description">
              Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
            </p>
          </section>
          <!-- EDUCATION -->
          <section class="education section" id="education">
            <h2 class="section-title">Education</h2>
            <div class="education__container">
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Advanced Diploma</h3>
                  <span class="education__studies">Patriot High School</span>
                  <span class="education__year">2015 - 2019</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                  <span class="education__line"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Some College</h3>
                  <span class="education__year">2020</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time">
                  <span class="education__rounder"></span>
                </div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Self-Study Certifications</h3>
                  <span class="education__year">2020 - Present</span>
                </div>
              </div>
            </div>
          </section>
          <!-- SKILLS -->
          <section class="skills section" id="skills">
            <h2 class="section-title">Skills</h2>
            <div class="skills__content bd-grid">
              <ul class="skills__data">
                <li class="skills__name"><span class="skills__circle"></span>Windows</li>
                <li class="skills__name"><span class="skills__circle"></span>Mac</li>
                <li class="skills__name"><span class="skills__circle"></span>Linux</li>
                <li class="skills__name"><span class="skills__circle"></span>Networking</li>
              </ul>
              <ul class="skills__data">
                <li class="skills__name"><span class="skills__circle"></span>Security</li>
                <li class="skills__name"><span class="skills__circle"></span>Hardware</li>
                <li class="skills__name"><span class="skills__circle"></span>Software</li>
              </ul>
            </div>
          </section>
        </div>
        <div class="resume__right">
          <!-- EXPERIENCE -->
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company">2025 to Present | Blue Tech Innovation</span>
                  <ul class="experience__description">
                    <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                    <li>• Offer end-user support for both office-based and remote employees.</li>
                    <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                    <li>• Troubleshoot and resolve issues with the following technologies:</li>
                    <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                    <li>• Firewalls, Printer Servers, Office 365</li>
                    <li>• Mac systems, workstation and network connectivity issues</li>
                    <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company">2023 to 2025 | ITG</span>
                  <ul class="experience__description">
                    <li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
                    <li>• Manage client relationships and troubleshoot technical issues.</li>
                    <li>• Deliver tailored solutions for business needs.</li>
                    <li>• Find creative solutions for government and private clients.</li>
                    <li>• Maintained 99% SLA compliance.</li>
                    <li>• Streamlined and documented standard operating procedures.</li>
                    <li>• Automated daily and repetitive tasks.</li>
                    <li>• Created instructional media for field technicians.</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line__last"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Field Technician</h3>
                  <span class="experience__company">2023 | Dell</span>
                  <ul class="experience__description">
                    <li>• Managed a workload of repairs in a ticketing system.</li>
                    <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                    <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                    <li>• Maintained positive professional relations with Dell's corporate, government, and consumer clients.</li>
                    <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                  </ul>
                </div>
              </div>
              <a href="/cv/more-information" class="more__information">
                <i class="bx bx-info-circle information__icon"></i> More Information
              </a>
            </div>
          </section>
          <!-- CERTIFICATES -->
          <section class="certificate section" id="certificates">
            <h2 class="section-title">Certifications</h2>
            <div class="certificate__container bd-grid">
              <div class="certificate__content">
                <h3 class="certificate__title">CompTIA A+, Network+ and Security+</h3>
                <p class="certificate__description">https://www.credly.com/users/dangrubbb</p>
              </div>
              <div class="certificate__content">
                <h3 class="certificate__title">Microsoft Office Specialist</h3>
                <p class="certificate__description">https://www.credly.com/users/dangrubbb</p>
              </div>
              <div class="certificate__content">
                <h3 class="certificate__title">Dell, Apple, Samsung Certified Repair Technician</h3>
              </div>
            </div>
          </section>
          <!-- REFERENCES -->
          <section class="references section" id="references">
            <h2 class="section-title">References</h2>
            <div class="references__container bd-grid">
              <div class="references__content bd-grid">
                <span class="references__subtitle">IT Engineer, ITG</span>
                <h3 class="references__title">Samuel Alpert</h3>
                <ul class="references__contact"><li>Details available upon request</li></ul>
              </div>
              <div class="references__content bd-grid">
                <span class="references__subtitle">Server Technician, AMD</span>
                <h3 class="references__title">Brian Oberoi</h3>
                <ul class="references__contact"><li>Details available upon request</li></ul>
              </div>
            </div>
          </section>
          <!-- LANGUAGES -->
          <section class="languages section">
            <h2 class="section-title">Languages</h2>
            <div class="languages__container">
              <ul class="languages__content bd-grid">
                <li class="languages__name"><span class="languages__circle"></span> English</li>
                <li class="languages__name"><span class="languages__circle"></span> Python</li>
                <li class="languages__name"><span class="languages__circle"></span> HTML</li>
              </ul>
            </div>
          </section>
          <!-- INTERESTS -->
          <section class="interests section">
            <h2 class="section-title">Interests</h2>
            <div class="interests__container bd-grid">
              <div class="interests__content"><i class="bx bx-headphone interests__icon"></i><span class="interests__name">Music</span></div>
              <div class="interests__content"><i class="bx bx-cog interests__icon"></i><span class="interests__name">Tech</span></div>
              <div class="interests__content"><i class="bx bx-walk interests__icon"></i><span class="interests__name">Fitness</span></div>
              <div class="interests__content"><i class="bx bx-bible interests__icon"></i><span class="interests__name">Christ</span></div>
            </div>
          </section>
        </div>
      </div>
    </main>
    <a href="#" class="scrolltop" id="scroll-top">
      <i class="bx bx-up-arrow-alt scrolltop__icon"></i>
    </a>
  </div>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
  <script is:inline src="/cv/js/html2pdf.bundle.min.js"></script>
  <script>
    // Menu toggle
    const toggle = document.getElementById('nav-toggle');
    const nav = document.getElementById('nav-menu');
    if (toggle && nav) {
      toggle.addEventListener('click', () => nav.classList.toggle('show-menu'));
    }
    document.querySelectorAll('.nav__link').forEach(l => {
      l.addEventListener('click', () => nav?.classList.remove('show-menu'));
    });
    // Scroll active
    const sections = document.querySelectorAll('section[id]');
    window.addEventListener('scroll', () => {
      const scrollY = window.pageYOffset;
      sections.forEach(current => {
        const h = current.offsetHeight;
        const top = current.offsetTop - 50;
        const id = current.getAttribute('id');
        const link = document.querySelector(`.nav__menu a[href*="${id}"]`);
        if (link) {
          if (scrollY > top && scrollY <= top + h) link.classList.add('active-link');
          else link.classList.remove('active-link');
        }
      });
      // Scroll top
      const scrollTopEl = document.getElementById('scroll-top');
      if (scrollTopEl) {
        if (scrollY >= 200) scrollTopEl.classList.add('show-scroll');
        else scrollTopEl.classList.remove('show-scroll');
      }
    });
    // Theme toggle
    const themeButton = document.getElementById('theme-button');
    if (themeButton) {
      const darkTheme = 'dark-theme';
      const iconTheme = 'bx-sun';
      const selectedTheme = localStorage.getItem('selected-theme');
      const selectedIcon = localStorage.getItem('selected-icon');
      if (selectedTheme) {
        document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
        themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme);
      }
      themeButton.addEventListener('click', () => {
        document.body.classList.toggle(darkTheme);
        themeButton.classList.toggle(iconTheme);
        localStorage.setItem('selected-theme', document.body.classList.contains(darkTheme) ? 'dark' : 'light');
        localStorage.setItem('selected-icon', themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun');
      });
    }
    // PDF generation
    const resumeButton = document.getElementById('resume-button');
    if (resumeButton) {
      // @ts-ignore
      resumeButton.addEventListener('click', () => {
        document.body.classList.add('scale-cv');
        const areaCv = document.getElementById('area-cv');
        const expLink = document.querySelector('#experience > div > a');
        const interests = document.querySelector('.interests.section');
        if (expLink) (expLink as HTMLElement).style.display = 'none';
        if (interests) (interests as HTMLElement).style.display = 'none';
        // @ts-ignore
        html2pdf(areaCv, {
          margin: 0, filename: 'DanGrubbResume.pdf',
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { scale: 2 },
          jsPDF: { format: 'a4', orientation: 'portrait' },
        });
        setTimeout(() => {
          document.body.classList.remove('scale-cv');
          if (expLink) (expLink as HTMLElement).style.display = '';
          if (interests) (interests as HTMLElement).style.display = '';
        }, 5000);
      });
    }
  </script>
 </CVBase>
 <style is:global>
  @import '../../styles/cv.css';
 </style>
--- a/src/pages/cv/more-information.astro
+++ b/src/pages/cv/more-information.astro
@ -1,275 +0,0 @@
 ---
 import CVBase from '../../layouts/CVBase.astro';
 ---
 <CVBase title="Dan Grubb CV - More Information">
  <div class="cv-page">
    <header class="l-header" id="header">
      <nav class="nav bd-container">
        <a href="/cv/" class="nav__logo">Dan</a>
        <div class="nav__menu" id="nav-menu">
          <ul class="nav__list">
            <li class="nav__item"><a href="/cv/#home" class="nav__link"><i class="bx bx-home nav__icon"></i>Home</a></li>
            <li class="nav__item"><a href="/cv/#profile" class="nav__link"><i class="bx bx-user nav__icon"></i>Profile</a></li>
            <li class="nav__item"><a href="/cv/#education" class="nav__link"><i class="bx bx-book nav__icon"></i>Education</a></li>
            <li class="nav__item"><a href="/cv/#skills" class="nav__link"><i class="bx bx-receipt nav__icon"></i>Skills</a></li>
            <li class="nav__item"><a href="/cv/#experience" class="nav__link active-link"><i class="bx bx-briefcase nav__icon"></i>Experience</a></li>
            <li class="nav__item"><a href="/cv/#certificates" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Certificates</a></li>
            <li class="nav__item"><a href="/cv/#references" class="nav__link"><i class="bx bx-link-external nav__icon"></i>References</a></li>
          </ul>
        </div>
        <div class="nav__toggle" id="nav-toggle"><i class="bx bx-grid-alt nav__icon"></i></div>
      </nav>
    </header>
    <main class="l-main bd-container">
      <div class="resume" id="area-cv">
        <div class="resume__left">
          <section class="home" id="home">
            <div class="home__container section bd-grid">
              <div class="home__data bd-grid">
                <img src="/cv/assets/img/perfil-example.jpg" alt="perfil" class="home__img" />
                <h1 class="home__title">Dan <b>Grubb</b></h1>
                <h3 class="home__profession">IT Man</h3>
                <div>
                  <a download="" href="/cv/assets/pdf/ResumeCv.pdf" class="home__button-movil">Download</a>
                </div>
              </div>
              <div class="home__address bd-grid">
                <span class="home__information"><i class="bx bx-map home__icon"></i>Falls Church, VA</span>
                <span class="home__information"><i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net</span>
                <span class="home__information"><i class="bx bx-phone home__icon"></i> 703-649-1637</span>
                <span class="home__information"><i class="bx bx-planet home__icon"></i> dangrubb.net</span>
              </div>
            </div>
            <i class="bx bx-moon change-theme" title="Theme" id="theme-button"></i>
            <i class="bx bx-download generate-pdf" title="Generate PDF" id="resume-button"></i>
          </section>
          <section class="profile section" id="profile">
            <h2 class="section-title">Profile</h2>
            <p class="profile__description">
              Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
            </p>
          </section>
          <section class="education section" id="education">
            <h2 class="section-title">Education</h2>
            <div class="education__container">
              <div class="education__content">
                <div class="education__time"><span class="education__rounder"></span><span class="education__line"></span></div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Advanced Diploma</h3>
                  <span class="education__studies">Patriot High School</span>
                  <span class="education__year">2015 - 2019</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time"><span class="education__rounder"></span><span class="education__line"></span></div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Some College</h3>
                  <span class="education__year">2020</span>
                </div>
              </div>
              <div class="education__content">
                <div class="education__time"><span class="education__rounder"></span></div>
                <div class="education__data bd-grid">
                  <h3 class="education__title">Self-Study Certifications</h3>
                  <span class="education__year">2020 - Present</span>
                </div>
              </div>
            </div>
          </section>
          <section class="skills section" id="skills">
            <h2 class="section-title">Skills</h2>
            <div class="skills__content bd-grid">
              <ul class="skills__data">
                <li class="skills__name"><span class="skills__circle"></span>Windows</li>
                <li class="skills__name"><span class="skills__circle"></span>Mac</li>
                <li class="skills__name"><span class="skills__circle"></span>Linux</li>
                <li class="skills__name"><span class="skills__circle"></span>Networking</li>
              </ul>
              <ul class="skills__data">
                <li class="skills__name"><span class="skills__circle"></span>Security</li>
                <li class="skills__name"><span class="skills__circle"></span>Hardware</li>
                <li class="skills__name"><span class="skills__circle"></span>Software</li>
              </ul>
            </div>
          </section>
        </div>
        <div class="resume__right">
          <section class="experience section" id="experience">
            <h2 class="section-title">Experience</h2>
            <div class="experience__container bd-grid">
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
                  <span class="experience__company">2025 to Present | Blue Tech Innovation</span>
                  <ul class="experience__description">
                    <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
                    <li>• Offer end-user support for both office-based and remote employees.</li>
                    <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
                    <li>• Troubleshoot and resolve issues with the following technologies:</li>
                    <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
                    <li>• Firewalls, Printer Servers, Office 365</li>
                    <li>• Mac systems, workstation and network connectivity issues</li>
                    <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Technical Account Manager</h3>
                  <span class="experience__company">2023 to Present | ITG</span>
                  <ul class="experience__description">
                    <li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
                    <li>• Manage client relationships and troubleshoot technical issues.</li>
                    <li>• Deliver tailored solutions for business needs.</li>
                    <li>• Find creative solutions for government and private clients.</li>
                    <li>• Maintained 99% SLA compliance.</li>
                    <li>• Streamlined and documented standard operating procedures.</li>
                    <li>• Automated daily and repetitive tasks.</li>
                    <li>• Created instructional media for field technicians.</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Field Technician</h3>
                  <span class="experience__company">2023 | Dell</span>
                  <ul class="experience__description">
                    <li>• Managed a workload of repairs in a ticketing system.</li>
                    <li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
                    <li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
                    <li>• Maintained positive professional relations with Dell's corporate, government, and consumer clients.</li>
                    <li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Lead Repair Technician</h3>
                  <span class="experience__company">2021 to 2022 | T-Mobile</span>
                  <ul class="experience__description">
                    <li>• Diagnosed and repaired cellphones, tablets, laptops, and other mobile devices.</li>
                    <li>• Efficiently diagnosed issues with customers' devices and performed all necessary repairs.</li>
                    <li>• Handled inventory and parts returns while ensuring systems were up to date.</li>
                    <li>• Exceeded SLA expectations completing 90% of repairs in under 90 minutes.</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Lead Technician</h3>
                  <span class="experience__company">2021 | Red Door Pro Wash</span>
                  <ul class="experience__description">
                    <li>• Communicated with customers to perform soft wash services efficiently.</li>
                    <li>• Created job plans for the team prior to arrival.</li>
                    <li>• Maintained and drove the company vehicle.</li>
                  </ul>
                </div>
              </div>
              <div class="experience__content">
                <div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
                <div class="experience__data bd-grid">
                  <h3 class="experience__title">Night Shift Manager</h3>
                  <span class="experience__company">2020 to 2021 | Taco Bell</span>
                  <ul class="experience__description">
                    <li>• Managed up to 10 staff during the night shift.</li>
                    <li>• Trained new employees and handled customer issues.</li>
                    <li>• Processed refunds, tracked inventory, and kept cash registers balanced.</li>
                  </ul>
                </div>
              </div>
              <a href="/cv/" class="back__home">
                <i class="bx bx-arrow-back back__icon"></i> Back to Home
              </a>
            </div>
          </section>
        </div>
      </div>
    </main>
    <a href="#" class="scrolltop" id="scroll-top">
      <i class="bx bx-up-arrow-alt scrolltop__icon"></i>
    </a>
  </div>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
  <script is:inline src="/cv/js/html2pdf.bundle.min.js"></script>
  <script>
    // Menu toggle
    const nav = document.getElementById('nav-menu');
    if (toggle && nav) {
      toggle.addEventListener('click', () => nav.classList.toggle('show-menu'));
    }
    document.querySelectorAll('.nav__link').forEach(l => {
      l.addEventListener('click', () => nav?.classList.remove('show-menu'));
    });
    const sections = document.querySelectorAll('section[id]');
    window.addEventListener('scroll', () => {
      const scrollY = window.pageYOffset;
      sections.forEach(current => {
        const h = current.offsetHeight;
        const top = current.offsetTop - 50;
        const id = current.getAttribute('id');
        const link = document.querySelector(`.nav__menu a[href*="${id}"]`);
        if (link) {
          if (scrollY > top && scrollY <= top + h) link.classList.add('active-link');
          else link.classList.remove('active-link');
        }
      });
      const scrollTopEl = document.getElementById('scroll-top');
      if (scrollTopEl) {
        if (scrollY >= 200) scrollTopEl.classList.add('show-scroll');
        else scrollTopEl.classList.remove('show-scroll');
      }
    });
    const themeButton = document.getElementById('theme-button');
    if (themeButton) {
      const darkTheme = 'dark-theme';
      const iconTheme = 'bx-sun';
      const selectedTheme = localStorage.getItem('selected-theme');
      const selectedIcon = localStorage.getItem('selected-icon');
      if (selectedTheme) {
        document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
        themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme);
      }
      themeButton.addEventListener('click', () => {
        document.body.classList.toggle(darkTheme);
        themeButton.classList.toggle(iconTheme);
        localStorage.setItem('selected-theme', document.body.classList.contains(darkTheme) ? 'dark' : 'light');
        localStorage.setItem('selected-icon', themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun');
      });
    }
    const resumeButton = document.getElementById('resume-button');
    if (resumeButton) {
      resumeButton.addEventListener('click', () => {
        document.body.classList.add('scale-cv');
        const areaCv = document.getElementById('area-cv');
        // @ts-ignore
        html2pdf(areaCv, {
          margin: 0, filename: 'DanGrubbResume.pdf',
          image: { type: 'jpeg', quality: 0.98 },
          html2canvas: { scale: 2 },
          jsPDF: { format: 'a4', orientation: 'portrait' },
        });
        setTimeout(() => document.body.classList.remove('scale-cv'), 5000);
      });
    }
  </script>
 </CVBase>
 <style is:global>
  @import '../../styles/cv.css';
 </style>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,154 +1,99 @@
 ---
-import Base from '../layouts/Base.astro';
+import '@fontsource/instrument-sans/latin-400.css';
-import GlitchBard from '../components/GlitchBard.astro';
+import '@fontsource/instrument-sans/latin-500.css';
-import posts from '../data/posts.json';
+import '@fontsource/geist-mono/latin-500.css';
 import '../styles/radiance.css';
-const latest = posts[0];
+const nav = [
-const formattedDate = new Date(latest.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+  { label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
  { label: 'Exclusive Music', href: '/music/' },
  { label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
  { label: 'Private Search', href: 'https://search.dangrubb.net' },
  { label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
 ];
 const links = [
  { label: 'Blog', href: '/blog' },
  { label: 'CV', href: '/cv/' },
  { label: 'Git', href: 'https://pi.dangrubb.net/dangit/dangrubbb/dangrubb.net' },
 ];
 ---
-<Base title="dangrubb.net">
+<!doctype html>
-  <div class="page">
+<html lang="en">
-    <GlitchBard />
+  <head>
-
+    <meta charset="UTF-8" />
-    <p class="site-title">dangrubb.net</p>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
+    <title>dangrubb.net</title>
-    <p class="announcement">
+    <meta name="description" content="Welcome to dangrubb.net" />
-      <a href="/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
+    <meta name="theme-color" content="#fff6f4" />
-    </p>
+    <link rel="icon" href="/favicon.ico" sizes="48x48">
-
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-    <div class="blog-preview-container">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
-      <div class="blog-preview">
+    <link rel="preload" as="image" href="/src/img/DanGrubbLogoWhite.svg" type="image/svg+xml" />
-        <a href={`/blog/#${latest.slug}`} class="blog-preview-title">{latest.title}</a>
+  </head>
-        <div class="blog-preview-date">{formattedDate}</div>
+  <body class="is-loading">
-        <img src={latest.image} alt={latest.title} />
+    <div class="loader" id="loader" aria-hidden="true">
-        <p class="blog-preview-excerpt">{latest.excerpt}</p>
+      <div class="loader__stage">
-        <a href={`/blog/#${latest.slug}`} class="blog-preview-link">Read more →</a>
+        <div class="scene">
          <div class="cube">
            <div class="cube__face cube__face--front"><img src="/src/img/DanGrubbLogoWhite.svg" alt="" width="140" height="140" /></div>
            <div class="cube__face cube__face--back"><img src="/src/img/DanGrubbLogoWhite.svg" alt="" width="140" height="140" /></div>
            <div class="cube__face cube__face--right"></div>
            <div class="cube__face cube__face--left"></div>
            <div class="cube__face cube__face--top"></div>
            <div class="cube__face cube__face--bottom"></div>
          </div>
        </div>
      </div>
      <p class="loader__count" id="loader-count">000%</p>
    </div>
-    <nav class="bottom-nav">
+    <header class="bar">
-      <a target="_parent" href="https://ai.dangrubb.net">ai</a>
+      <a class="bar__logo" href="/">
-      <a target="_parent" href="/blog">blog</a>
+        <span class="sr-only">dangrubb.net home</span>
-      <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
+        <img src="/src/img/DanGrubbLogoDark.svg" alt="" width="48" height="48" />
-      <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
+      </a>
      <a target="_parent" href="/cv">cv</a>
      <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
    </nav>
  </div>
 </Base>
-<style>
+      <nav class="menu" id="menu" aria-label="Site">
-  @import '../styles/bard.css';
+        <button class="menu__btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
          <span class="sr-only">Site navigation</span>
          <svg class="menu__icon menu__icon--open" viewBox="0 0 18 14" width="18" height="14" aria-hidden="true">
            <path d="M0 1h2M5 1h13M0 7h10M13 7h5M0 13h2M5 13h13" stroke="currentColor" stroke-width="1.5" fill="none" />
          </svg>
          <svg class="menu__icon menu__icon--close" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
            <path d="M1 1l16 16M17 1L1 17" stroke="currentColor" stroke-width="1.5" fill="none" />
          </svg>
        </button>
        <div class="menu__panel" id="menu-panel">
          <ul class="menu__list">
            {nav.map((item, i) => (
              <li>
                <a href={item.href}>
                  <span class="menu__num">{String(i + 1).padStart(2, '0')}</span>
                  <span class="menu__label">{item.label}</span>
                </a>
              </li>
            ))}
          </ul>
          <div class="menu__links">
            {links.map((l) => (
              <a class="menu__link" href={l.href}><span>{l.label}</span></a>
            ))}
          </div>
        </div>
      </nav>
    </header>
-  .page {
+    <main class="hero">
-    padding: 20px 20px 100px;
+      <canvas class="hero__orb" id="orb" aria-hidden="true"></canvas>
-    min-height: 100vh;
+      <h1 class="hero__title" id="title">Welcome to dangrubb.net</h1>
-    display: flex;
+    </main>
    flex-direction: column;
    box-sizing: border-box;
  }
-  .site-title {
+    <script>
-    margin: 10px auto 0;
+      import { startOrb } from '../scripts/orb.js';
-    max-width: 400px;
+      import { initUI } from '../scripts/ui.js';
    text-align: center;
    line-height: 1.3;
    font-size: 0.875rem;
  }
-  .announcement {
+      initUI(startOrb);
-    margin: 20px auto 0;
+    </script>
-    display: inline-block;
+  </body>
-    border: 1px solid #ffff00;
+</html>
    padding: 10px 15px;
    border-radius: 3px;
    font-size: 0.875rem;
    text-align: center;
  }
  .announcement a {
    color: #ffff00;
    font-weight: bold;
  }
  .announcement a:hover { text-decoration: underline; }
  .blog-preview-container {
    margin: 30px auto 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .blog-preview {
    border: 1px solid rgba(155, 169, 180, 0.3);
    border-radius: 4px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    max-width: 350px;
    width: 100%;
  }
  .blog-preview img {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: 3px;
    margin: 10px 0;
  }
  .blog-preview-title {
    color: #ffff00;
    font-weight: bold;
    font-size: 0.95rem;
    margin: 10px 0 5px;
    display: block;
  }
  .blog-preview-title:hover { text-decoration: underline; }
  .blog-preview-date {
    color: #aa95bd;
    font-size: 0.8rem;
    margin-bottom: 8px;
  }
  .blog-preview-excerpt {
    color: #9d9aa4;
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 8px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-preview-link {
    display: inline-block;
    color: #6be1e9;
    font-size: 0.8rem;
  }
  .blog-preview-link:hover { text-decoration: underline; }
  .bottom-nav {
    margin-top: auto;
    width: 100%;
    text-align: center;
    padding: 20px 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .bottom-nav a {
    color: #6be1e9;
    font-size: 0.875rem;
  }
  @media (max-width: 768px) {
    .page { padding: 20px 10px 80px; }
    .site-title { font-size: 0.8rem; max-width: 320px; }
    .blog-preview { max-width: 300px; }
  }
  @media (max-width: 400px) {
    .site-title { font-size: 0.75rem; }
    .blog-preview-container { margin-top: 20px; }
  }
 </style>
--- a/src/scripts/orb.js
+++ b/src/scripts/orb.js
--- a/src/scripts/ui.js
+++ b/src/scripts/ui.js
@ -0,0 +1,80 @@
 // Loader, title reveal and menu behaviour for the home page.
 export function initUI(startOrb) {
  const body = document.body;
  const loader = document.getElementById('loader');
  const count = document.getElementById('loader-count');
  const title = document.getElementById('title');
  const canvas = document.getElementById('orb');
  const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
  // --- title: split into letters (each wrapped per word so lines break cleanly)
  const text = title.textContent.trim();
  title.setAttribute('aria-label', text);
  title.textContent = '';
  let n = 0;
  text.split(' ').forEach((word, wi, words) => {
    const w = document.createElement('span');
    w.className = 'word';
    w.setAttribute('aria-hidden', 'true');
    for (const ch of word) {
      const mask = document.createElement('span');
      mask.className = 'ch';
      const inner = document.createElement('span');
      inner.textContent = ch;
      inner.style.transitionDelay = `${0.04 * n++}s`;
      mask.appendChild(inner);
      w.appendChild(mask);
    }
    title.appendChild(w);
    if (wi < words.length - 1) title.appendChild(document.createTextNode(' '));
  });
  // --- loader: counts up while fonts and the first orb frame get ready
  let orbReady = false;
  let fontsReady = false;
  let shown = 0;
  const started = performance.now();
  const minimum = reduced ? 0 : 1100;
  const webgl = startOrb(canvas, { onReady: () => { orbReady = true; } });
  if (!webgl) { document.documentElement.classList.add('no-webgl'); orbReady = true; }
  (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => { fontsReady = true; });
  function tick(now) {
    const elapsed = now - started;
    const real = (orbReady ? 0.5 : 0.1) + (fontsReady ? 0.5 : 0.15);
    const timed = Math.min(1, elapsed / (minimum || 1));
    const target = Math.min(real, timed) * 100;
    shown += (target - shown) * 0.2;
    if (target - shown < 0.5) shown = target;
    count.textContent = String(Math.round(shown)).padStart(3, '0') + '%';
    if (shown >= 99.5 && orbReady && fontsReady && elapsed >= minimum) return done();
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
  function done() {
    count.textContent = '100%';
    body.classList.remove('is-loading');
    body.classList.add('is-ready');
    setTimeout(() => loader.remove(), 900);
  }
  // --- menu
  const menu = document.getElementById('menu');
  const btn = document.getElementById('menu-btn');
  const panel = document.getElementById('menu-panel');
  function setOpen(open) {
    menu.classList.toggle('is-open', open);
    btn.setAttribute('aria-expanded', String(open));
    panel.toggleAttribute('inert', !open);
  }
  setOpen(false);
  btn.addEventListener('click', () => setOpen(!menu.classList.contains('is-open')));
  addEventListener('keydown', (e) => { if (e.key === 'Escape') { setOpen(false); btn.focus(); } });
  document.addEventListener('pointerdown', (e) => {
    if (menu.classList.contains('is-open') && !menu.contains(e.target)) setOpen(false);
  });
 }
--- a/src/styles/radiance.css
+++ b/src/styles/radiance.css
@ -0,0 +1,196 @@
 /* Radiance home page. Sizes are written in --u units (1u = 1px on a 1600px-wide design). */
 :root {
  --ink: 9 11 17;
  --u: clamp(0.5px, 0.0625vw, 1.25px);
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
 }
 *, *::before, *::after { box-sizing: border-box; }
 html, body { margin: 0; height: 100%; }
 body {
  overflow: hidden;
  background: #fff6f4;
  color: rgb(var(--ink) / 0.8);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
 }
 a { color: inherit; text-decoration: none; }
 ul { list-style: none; margin: 0; padding: 0; }
 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
 img { display: block; }
 .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
 }
 :focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
 /* ---------- hero ---------- */
 .hero {
  touch-action: none;
  position: fixed; inset: 0;
  background:
    radial-gradient(115% 80% at 50% 40%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
    linear-gradient(180deg,
      #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 52%,
      #f7cfac 62%, #f3c19e 70%, #eeae8a 79%, #ee9972 87%, #eb8b63 94%, #ef815c 100%);
 }
 .hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
 .hero__title {
  position: absolute; left: 0; right: 0; top: 24%;
  margin: 0; padding: 0 24px;
  text-align: center;
  font-weight: 400;
  font-size: clamp(30px, 3.34vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgb(var(--ink) / 0.8);
  pointer-events: none;
 }
 .word { display: inline-block; white-space: nowrap; }
 .ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
 .ch > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
 }
 .is-ready .ch > span { transform: none; }
 /* fallback when WebGL is unavailable: a flat glowing sphere */
 .no-webgl .hero::after {
  content: ''; position: absolute; left: 50%; top: 52%;
  width: 52.5vw; max-width: 1100px; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fdd29a, #fb9a63 60%, #f06a4a);
  box-shadow: 0 0 0 2px rgb(255 235 230 / 0.8), 0 0 80px rgb(255 245 220 / 0.7);
 }
 /* ---------- top bar ---------- */
 .bar { position: fixed; z-index: 10; inset: 0 0 auto 0; pointer-events: none; }
 .bar > * { pointer-events: auto; }
 .bar__logo {
  position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
  opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
 }
 .bar__logo img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; }
 .is-ready .bar__logo { opacity: 1; }
 /* ---------- menu ---------- */
 .menu {
  position: absolute; right: calc(20 * var(--u)); top: calc(30 * var(--u));
  opacity: 0; transition: opacity 0.8s var(--ease) 0.3s;
 }
 .is-ready .menu { opacity: 1; }
 .menu__btn {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #fff;
 }
@media (min-width: 768px) { .menu__btn { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 40px; min-height: 40px; } }
 .menu__icon { position: absolute; transition: opacity 0.25s, transform 0.4s var(--ease); }
 .menu__icon--close { opacity: 0; transform: rotate(-45deg); }
 .is-open .menu__icon--open { opacity: 0; transform: rotate(45deg); }
 .is-open .menu__icon--close { opacity: 1; transform: none; }
 .menu__panel {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: #fff;
  width: max-content; max-width: calc(100vw - 24px);
  padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
 }
 .is-open .menu__panel { clip-path: inset(0); visibility: visible; transition: clip-path 0.5s var(--ease); }
@media (max-width: 767px) { .menu__panel { width: calc(100vw - 24px); padding: 64px 16px 16px; } }
 .menu__list li { border-bottom: 1px solid rgb(var(--ink) / 0.15); }
 .menu__list a {
  display: flex; align-items: baseline;
  padding: calc(6.5 * var(--u)) calc(60 * var(--u)) calc(6.5 * var(--u)) 0;
  font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.2; white-space: nowrap;
  transition: opacity 0.3s;
 }
 .menu__num {
  margin-right: calc(16 * var(--u));
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em;
 }
 .menu__list:hover a:not(:hover), .menu__list:focus-within a:not(:focus-visible):not(:hover) { opacity: 0.45; }
 .menu__list li, .menu__links { transform: translateY(8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
 .is-open .menu__list li, .is-open .menu__links { transform: none; opacity: 1; }
 .is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
 .is-open .menu__list li:nth-child(2) { transition-delay: 0.14s; }
 .is-open .menu__list li:nth-child(3) { transition-delay: 0.18s; }
 .is-open .menu__list li:nth-child(4) { transition-delay: 0.22s; }
 .is-open .menu__list li:nth-child(5) { transition-delay: 0.26s; }
 .is-open .menu__links { transition-delay: 0.32s; }
 .menu__links { display: flex; gap: calc(24 * var(--u)); padding-top: calc(39 * var(--u)); }
 .menu__link {
  position: relative; display: inline-block; overflow: hidden;
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: calc(14 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
 }
 .menu__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
 }
 .menu__link:hover::after, .menu__link:focus-visible::after { transform: none; }
@media (max-width: 767px) {
  .menu__list a { padding: 10px 40px 10px 0; font-size: 18px; }
  .menu__num { font-size: 12px; margin-right: 14px; }
  .menu__links { gap: 20px; padding-top: 28px; }
  .menu__link { font-size: 12px; }
  .bar__logo { left: 12px; top: 12px; }
  .bar__logo img { width: 44px; height: 44px; }
  .menu { right: 12px; top: 12px; }
 }
 /* ---------- loader ---------- */
 .loader {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px;
  background: #fff6f4;
  transition: opacity 0.7s var(--ease) 0.1s, visibility 0s 0.8s;
 }
 .is-ready .loader { opacity: 0; visibility: hidden; }
 .loader__stage { flex-grow: 1; display: flex; align-items: center; }
 .scene { margin: 80px; width: 140px; height: 140px; perspective: 400px; transform: translateZ(0); }
 .cube {
  position: relative; width: 140px; height: 140px;
  transform-style: preserve-3d; transform: translateZ(-100px);
  animation: spin 3s var(--ease) infinite;
 }
 .cube__face {
  position: absolute; width: 140px; height: 140px;
  background: rgb(var(--ink)); border: 2px solid rgb(var(--ink));
  display: flex; align-items: center; justify-content: center;
 }
 .cube__face img { width: 100%; height: 100%; padding: 14px; }
 .cube__face--front { transform: rotateY(0) translateZ(70px); }
 .cube__face--right { transform: rotateY(90deg) translateZ(70px); }
 .cube__face--back { transform: rotateY(180deg) translateZ(70px); }
 .cube__face--left { transform: rotateY(-90deg) translateZ(70px); }
 .cube__face--top { transform: rotateX(90deg) translateZ(70px); }
 .cube__face--bottom { transform: rotateX(-90deg) translateZ(70px); }
 .is-ready .cube { animation: none; }
@keyframes spin {
  0% { transform: translateZ(-100px) rotateY(0); }
  40%, 50% { transform: translateZ(-100px) rotateY(-180deg); }
  90%, 100% { transform: translateZ(-100px) rotateY(-360deg); }
 }
 .loader__count {
  margin: 0; flex-shrink: 0;
  font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 16px; line-height: 1; text-transform: uppercase; color: rgb(var(--ink) / 0.8);
 }
@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; }
  .ch > span { transform: none; transition: none; }
  * { transition-duration: 0.01s !important; }
 }
Author	SHA1	Message	Date
dangrubbb	d347df105a	Vector logo: SVG logo in loader/menu/blog header; #ec9770 favicon set (svg, ico, apple-touch-icon) on every page	2026-10-24 10:55:03 -04:00
dangrubbb	a919fa38cb	orb: startup self-check — verify float framebuffers complete and the simulation produces a sane particle, else fall back to the static layout with a console warning	2026-10-24 10:34:17 -04:00
dangrubbb	4b9ec8e395	music: automatic light theme via prefers-color-scheme (colours moved to CSS variables; dark unchanged)	2026-10-24 10:25:01 -04:00
dangrubbb	837adf433d	Merge branch 'radiance': new single-screen home page (WebGL particle orb), restyled blog	2026-10-24 10:19:50 -04:00
dangrubbb	25a97bf982	radiance: slash-terminated music/CV links so relative CSS resolves everywhere; Git menu links straight to the repo	2026-10-24 10:19:49 -04:00
dangrubbb	c98bab9868	radiance: link CV as /cv/ so its relative stylesheet resolves without relying on a redirect	2026-10-24 10:14:17 -04:00
dangrubbb	f2f6bf7708	radiance: perf — spawn point and corona birth cached in particle state, adaptive quality governor, debounced resize	2026-10-24 10:06:33 -04:00
dangrubbb	1645ed76ca	radiance: simulation clock x1.5 (currents, spin, lifecycles, fluid) and cursor force +30%	2026-10-24 09:46:18 -04:00
dangrubbb	ea3f061211	radiance: 20% fewer particles drawn 20% bigger; stronger cursor reaction inside the orb; idle spin and currents +50%	2026-10-24 09:43:29 -04:00
dangrubbb	cfd081abcd	radiance: corona sparks now have a lifecycle — born on the rim, drift outward, shrink and fizzle out; cursor pushes carry them, nothing pulls them back	2026-10-24 09:41:32 -04:00
dangrubbb	fcc1326e86	radiance: margin inside the glass rim; haloed corona sparks and glints (oversized soft-falloff points)	2026-10-24 09:36:45 -04:00
dangrubbb	aac2bdf2e6	radiance: snow-globe containment — tangential cursor push, glass wall, radius cap	2026-10-24 09:32:17 -04:00
dangrubbb	a900c5f750	radiance: shaded coral body + deeper right rim, red mass weighted to lower latitudes, bigger flakes, crisper haloed glints and corona	2026-10-24 09:29:07 -04:00
dangrubbb	384cb7f7b8	radiance: 3D particle sim — curl-noise currents, ribbon density, depth scatter on stir, rolling respawn; ~100k particles	2026-10-24 09:22:12 -04:00
dangrubbb	d4bfc88be7	radiance: match reference colors (asymmetric pink sky, saturated orange base, translucent pink-rimmed shell); ambient curl-noise shimmer	2026-10-22 20:29:47 -04:00
dangrubbb	0cd5d4c27c	radiance: pointer/touch-reactive particles Stable-fluids solver (velocity + dye) stirred by mouse/touch drives a GPU spring system over all ~65k particles: they swirl with the flow, heat up and flare while disturbed, then spring home. The sky shader leans and washes with the flow. WebGL2; falls back to the static orb without float render targets, and to a CSS orb without WebGL2.	2026-10-22 20:23:09 -04:00
dangrubbb	20d848623f	radiance: Private Search menu item (search.dangrubb.net); restyle blog with radiance colors and fonts	2026-10-22 20:10:52 -04:00
dangrubbb	ecaa3bbf6a	radiance: new home page — WebGL orb hero, DG cube loader, white dropdown menu Replaces the Crush landing page with a single-screen hero (no scroll): gradient sky, particle orb with corona, 'Welcome to dangrubb.net' title, top-left DG logo and a numbered menu. Raw WebGL (no three.js), self-hosted Instrument Sans + Geist Mono. ~10 KB of JS.	2026-10-22 20:00:53 -04:00
dangrubbb	3a662c8498	CV: year-only dates for Forterra and Blue Tech	2026-09-18 19:52:48 -04:00
dangrubbb	ba11514dc9	CV: Blue Tech ends August 2026; correct stale ITG date on More Info page	2026-09-18 19:46:56 -04:00
dangrubbb	a68287e5af	Add Forterra Service Desk Tech to CV experience	2026-09-18 19:40:00 -04:00
dangrubbb	ca85d297f3	Merge branch 'astro'	2026-05-31 15:18:21 -04:00
dangrubbb	bb65104fa5	Reorder DGDN tracks: move Dan Beat (bonus) to last	2026-05-31 15:11:06 -04:00
dangrubbb	ff2a284e64	Merge branch 'astro'	2026-05-31 09:18:17 -04:00
dangrubbb	7796792517	checkpoint: CV restored to original standalone files (bypass Astro)	2026-05-31 09:13:52 -04:00
dangrubbb	b3eabbd98f	checkpoint: blog rethemed to crush (teal logo, white bg, teal accents)	2026-05-31 09:01:51 -04:00
dangrubbb	b38cd8ba52	checkpoint: music link, mobile nav 2-row layout, logo scaling fixes	2026-05-31 08:56:19 -04:00
dangrubbb	c264a2e979	checkpoint: splatter layout with centered logo, one-viewport fit, mobile nav rows	2026-05-31 08:33:11 -04:00
dangrubbb	c4823cf2be	feat: better splatter - no camel branding	2026-05-30 14:35:44 -04:00
dangrubbb	55032bf6b3	feat: use isolated pack splatter with logo overlay	2026-05-30 14:31:27 -04:00
dangrubbb	0ce09fc35e	feat: extract splatter from actual Camel Crush pack	2026-05-30 14:28:02 -04:00
dangrubbb	498dc4f7a3	feat: use generated splatter image instead of hand-coded SVG	2026-05-30 14:24:48 -04:00
dangrubbb	8f5b831cc2	feat: bigger dramatic splatters with SVG turbulence filter	2026-05-30 14:14:15 -04:00
dangrubbb	1f7df496fe	feat: grungy splatter ring (SVG-based irregular spray marks)	2026-05-30 14:09:32 -04:00
dangrubbb	7b0a9ea9ce	feat: use actual logo in circle, remove menthol text	2026-05-30 14:04:22 -04:00
dangrubbb	20fe2a0962	feat: camel crush themed landing page (crush branch) - New CrushBase.astro layout with teal/silver color palette - Redesigned index.astro with Camel Crush pack-inspired branding: - Alfa Slab One font header (dangrubb.net) - Center circular DG monogram with teal gradient (like Joe Camel) - Animated splatter background effect - 'Hint of Menthol • More Menthol' tagline - Bottom nav links styled like pack text (ai•blog•media•storage•cv•git)	2026-05-30 14:00:02 -04:00