Merge branch 'astro'

This commit is contained in:
dangrubbb
2026-05-31 09:18:17 -04:00
13 changed files with 1936 additions and 754 deletions

View File

@ -0,0 +1,58 @@
---
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="/src/img/favicon.ico" type="image/x-icon" />
<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>

View File

@ -1,15 +1,19 @@
---
import Base from '../../layouts/Base.astro';
import GlitchBard from '../../components/GlitchBard.astro';
import CrushBase from '../../layouts/CrushBase.astro';
import posts from '../../data/posts.json';
---
<Base title="dangrubb.net/blog">
<CrushBase title="dangrubb.net/blog">
<div class="page">
<GlitchBard />
<p class="page-title">dangrubb.net/blog</p>
<p class="back-link"><a href="/">← back to home</a></p>
<header class="blog-header">
<div class="header-logo">
<img src="/src/img/DanGrubbLogoTeal.png" alt="dangrubb" class="logo-img">
</div>
<p class="page-title">
<span class="title-name">dangrubb</span><span class="title-dot">.</span><span class="title-tld">net</span><span class="title-slash">/</span><span class="title-page">blog</span>
</p>
<p class="back-link"><a href="/">← home</a></p>
</header>
<div class="blogs-container">
{posts.map(post => (
@ -25,66 +29,111 @@ import posts from '../../data/posts.json';
</article>
))}
</div>
<footer class="blog-footer">
<a href="/">← home</a>
</footer>
</div>
</Base>
</CrushBase>
<style>
@import '../../styles/bard.css';
.page {
padding: 20px 20px 40px;
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
background: var(--crush-white);
}
.page-title, .back-link {
margin: 20px auto 0;
max-width: 400px;
.blog-header {
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
padding: 30px 20px 20px;
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
border-bottom: 3px solid var(--crush-teal);
}
.header-logo {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.logo-img {
width: 60px;
height: 60px;
object-fit: contain;
}
.page-title {
font-family: 'Alfa Slab One', 'Georgia', serif;
font-size: clamp(1.8rem, 5vw, 3rem);
letter-spacing: -1px;
line-height: 1;
margin-bottom: 8px;
}
.title-name { color: var(--crush-teal); }
.title-dot { color: var(--crush-teal-light); }
.title-tld { color: var(--crush-teal-dark); }
.title-slash { color: var(--crush-teal); }
.title-page { color: var(--crush-teal-dark); font-size: 0.7em; }
.back-link {
font-size: 0.875rem;
color: var(--crush-teal);
margin-top: 4px;
}
.back-link a {
color: var(--crush-teal);
opacity: 0.7;
}
.back-link a:hover { opacity: 1; }
.blogs-container {
margin: 40px auto 0;
max-width: 65em;
margin: 30px auto;
max-width: 700px;
width: 100%;
padding: 0 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.blog-post {
margin: 40px auto;
padding: 20px;
border: 1px solid rgba(155, 169, 180, 0.2);
border-radius: 4px;
background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
scroll-margin-top: 100px;
margin-bottom: 40px;
padding: 24px;
border: 1px solid rgba(0, 139, 139, 0.12);
border-radius: 6px;
background: linear-gradient(135deg, #f0faf9, #f8f9fa);
max-width: 700px;
width: 100%;
}
.blog-post-title {
color: #ffff00;
font-weight: bold;
font-size: 1.8rem;
color: var(--crush-teal);
font-weight: 700;
font-size: 1.6rem;
text-align: center;
margin-bottom: 6px;
}
.blog-post-date {
color: #aa95bd;
font-size: 0.9rem;
color: var(--crush-teal-light);
font-size: 0.85rem;
text-align: center;
margin-bottom: 20px;
opacity: 0.7;
}
.blog-post-content {
color: #9d9aa4;
font-size: 0.95rem;
line-height: 1.6;
color: #333;
text-align: center;
}
.blog-post-content :global(p) {
margin: 0 0 15px;
}
.blog-post-image {
display: flex;
justify-content: center;
@ -95,13 +144,26 @@ import posts from '../../data/posts.json';
height: auto;
max-height: 60vh;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 12px rgba(0, 102, 102, 0.15);
}
.blog-footer {
text-align: center;
padding: 30px 20px 40px;
border-top: 3px solid var(--crush-teal);
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
margin-top: auto;
}
.blog-footer a {
color: var(--crush-teal);
font-weight: 600;
}
@media (max-width: 768px) {
.page { padding: 20px 10px 40px; }
.page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
.blog-post { padding: 15px; margin: 20px auto; }
.blog-post-title { font-size: 1.4rem; }
.blog-header { padding: 20px 15px 15px; }
.logo-img { width: 45px; height: 45px; }
.blogs-container { padding: 0 15px; }
.blog-post { padding: 16px; margin-bottom: 24px; }
.blog-post-title { font-size: 1.3rem; }
}
</style>

View File

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

View File

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

View File

@ -1,154 +1,182 @@
---
import Base from '../layouts/Base.astro';
import GlitchBard from '../components/GlitchBard.astro';
import posts from '../data/posts.json';
const latest = posts[0];
const formattedDate = new Date(latest.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
import CrushBase from '../layouts/CrushBase.astro';
---
<Base title="dangrubb.net">
<div class="page">
<GlitchBard />
<p class="site-title">dangrubb.net</p>
<p class="announcement">
<a href="/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
</p>
<div class="blog-preview-container">
<div class="blog-preview">
<a href={`/blog/#${latest.slug}`} class="blog-preview-title">{latest.title}</a>
<div class="blog-preview-date">{formattedDate}</div>
<img src={latest.image} alt={latest.title} />
<p class="blog-preview-excerpt">{latest.excerpt}</p>
<a href={`/blog/#${latest.slug}`} class="blog-preview-link">Read more →</a>
<CrushBase title="dangrubb.net">
<div class="crush-page">
<header class="top-banner">
<div class="brand">
<span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span>
</div>
</div>
<p class="tagline">OFFICIAL SITE</p>
</header>
<nav class="bottom-nav">
<a target="_parent" href="https://ai.dangrubb.net">ai</a>
<a target="_parent" href="/blog">blog</a>
<a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
<a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
<a target="_parent" href="/cv">cv</a>
<a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
</nav>
<main class="logo-section">
<img src="/src/img/pack-splatter.png" alt="" class="splatter-img">
<div class="logo-center">
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img">
</div>
</main>
<footer class="bottom-nav">
<a href="https://ai.dangrubb.net" class="nav-item">AI</a>
<span class="nav-dot">•</span>
<a href="/blog" class="nav-item">BLOG</a>
<span class="nav-dot">•</span>
<a href="/music" class="nav-item">MUSIC</a>
<span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/jellyfin" class="nav-item">MEDIA</a>
<span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/nextcloud" class="nav-item">STORAGE</a>
<span class="nav-dot">•</span>
<a href="/cv" class="nav-item">CV</a>
<span class="nav-dot">•</span>
<a href="https://pi.dangrubb.net/dangit" class="nav-item">GIT</a>
</footer>
</div>
</Base>
</CrushBase>
<style>
@import '../styles/bard.css';
.page {
padding: 20px 20px 100px;
min-height: 100vh;
.crush-page {
display: flex;
flex-direction: column;
box-sizing: border-box;
height: 100vh;
height: 100dvh;
margin: 0;
background: var(--crush-white);
}
.site-title {
margin: 10px auto 0;
max-width: 400px;
.top-banner {
text-align: center;
line-height: 1.3;
font-size: 0.875rem;
padding: 16px 20px 10px;
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
border-bottom: 3px solid var(--crush-teal);
flex-shrink: 0;
}
.announcement {
margin: 20px auto 0;
display: inline-block;
border: 1px solid #ffff00;
padding: 10px 15px;
border-radius: 3px;
font-size: 0.875rem;
text-align: center;
.brand {
font-family: 'Alfa Slab One', 'Georgia', serif;
font-size: clamp(3rem, 10vw, 5rem);
color: var(--crush-teal);
letter-spacing: -2px;
line-height: 1;
}
.announcement a {
color: #ffff00;
font-weight: bold;
}
.announcement a:hover { text-decoration: underline; }
.blog-preview-container {
margin: 30px auto 0;
width: 100%;
.brand-dot { color: var(--crush-teal-light); }
.brand-tld { color: var(--crush-teal-dark); }
.tagline {
font-size: 14px;
font-weight: 700;
letter-spacing: 4px;
color: var(--crush-teal);
margin-top: 8px;
text-transform: uppercase;
opacity: 0.8;
}
.logo-section {
flex: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 0;
}
.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;
.splatter-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
.blog-preview img {
width: 100%;
height: auto;
max-height: 150px;
object-fit: cover;
border-radius: 3px;
margin: 10px 0;
.logo-center {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.blog-preview-title {
color: #ffff00;
font-weight: bold;
font-size: 0.95rem;
margin: 10px 0 5px;
display: block;
.logo-img {
width: 12%;
max-width: 160px;
aspect-ratio: 1;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
}
.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;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px 20px;
}
.bottom-nav a {
color: #6be1e9;
font-size: 0.875rem;
gap: 8px;
padding: 20px 20px 28px;
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
border-top: 3px solid var(--crush-teal);
flex-shrink: 0;
}
@media (max-width: 768px) {
.page { padding: 20px 10px 80px; }
.site-title { font-size: 0.8rem; max-width: 320px; }
.blog-preview { max-width: 300px; }
.nav-item {
font-size: 18px;
font-weight: 700;
color: var(--crush-teal);
letter-spacing: 2px;
padding: 8px 16px;
border-radius: 4px;
background: rgba(0, 139, 139, 0.05);
transition: all 0.3s ease;
}
@media (max-width: 400px) {
.site-title { font-size: 0.75rem; }
.blog-preview-container { margin-top: 20px; }
.nav-item:hover {
background: rgba(0, 139, 139, 0.15);
color: var(--crush-teal-dark);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 139, 139, 0.2);
}
.nav-dot {
font-size: 20px;
color: var(--crush-teal);
opacity: 0.5;
}
@media (max-width: 480px) {
.brand { font-size: 2.5rem; }
.top-banner {
flex: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 15px;
}
.logo-section {
aspect-ratio: 3 / 4;
flex: none;
}
.splatter-img {
object-fit: cover;
}
.logo-img { width: 36%; }
.nav-item { font-size: 16px; padding: 8px 14px; }
.bottom-nav {
flex: 1;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 3px;
padding: 4px 12px;
}
.nav-dot { display: none; }
}
</style>