---
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>
