Convert dangrubb.net to Astro framework
- Migrated main site, blog, CV, and music sections to Astro - Component-based architecture with layouts - JSON-based blog posts - Static site generation - Preserved original styling and functionality
This commit is contained in:
dangrubbb
28
src/pages/404.astro
Normal file
28
src/pages/404.astro
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
import Base from '../layouts/Base.astro';
|
||||
---
|
||||
|
||||
<Base title="Page Not Found">
|
||||
<div class="not-found">
|
||||
<h1>Page Not Found</h1>
|
||||
<p>This page does not exist yet.</p>
|
||||
<p class="small-text">Stay tuned.</p>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
.not-found {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
text-align: center;
|
||||
background: #123425;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
h1 { font-size: 3rem; margin: 0.5em 0; }
|
||||
p { font-size: 1.2rem; margin: 0.5em 0; }
|
||||
.small-text { font-size: 1rem; margin-top: 0.5em; }
|
||||
</style>
|
||||
107
src/pages/blog/index.astro
Normal file
107
src/pages/blog/index.astro
Normal file
@ -0,0 +1,107 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
import GlitchBard from '../../components/GlitchBard.astro';
|
||||
import posts from '../../data/posts.json';
|
||||
---
|
||||
|
||||
<Base 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>
|
||||
|
||||
<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' })}
|
||||
</div>
|
||||
<div class="blog-post-content" set:html={post.content} />
|
||||
<div class="blog-post-image">
|
||||
<img src={post.image} alt={post.title} />
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
@import '../../styles/bard.css';
|
||||
|
||||
.page {
|
||||
padding: 20px 20px 40px;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-title, .back-link {
|
||||
margin: 20px auto 0;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.blogs-container {
|
||||
margin: 40px auto 0;
|
||||
max-width: 65em;
|
||||
width: 100%;
|
||||
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;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
}
|
||||
.blog-post-title {
|
||||
color: #ffff00;
|
||||
font-weight: bold;
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post-date {
|
||||
color: #aa95bd;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-post-content {
|
||||
color: #9d9aa4;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post-content :global(p) {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
.blog-post-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.blog-post-image img {
|
||||
max-width: 100%;
|
||||
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; }
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
324
src/pages/cv/index.astro
Normal file
324
src/pages/cv/index.astro
Normal file
@ -0,0 +1,324 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
---
|
||||
|
||||
<Base 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>
|
||||
</Base>
|
||||
|
||||
<style is:global>
|
||||
@import '../../styles/cv.css';
|
||||
</style>
|
||||
275
src/pages/cv/more-information.astro
Normal file
275
src/pages/cv/more-information.astro
Normal file
@ -0,0 +1,275 @@
|
||||
---
|
||||
import Base from '../../layouts/Base.astro';
|
||||
---
|
||||
|
||||
<Base 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>
|
||||
</Base>
|
||||
|
||||
<style is:global>
|
||||
@import '../../styles/cv.css';
|
||||
</style>
|
||||
154
src/pages/index.astro
Normal file
154
src/pages/index.astro
Normal file
@ -0,0 +1,154 @@
|
||||
---
|
||||
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' });
|
||||
---
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</Base>
|
||||
|
||||
<style>
|
||||
@import '../styles/bard.css';
|
||||
|
||||
.page {
|
||||
padding: 20px 20px 100px;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin: 10px auto 0;
|
||||
max-width: 400px;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user