Merge branch 'astro'
This commit is contained in:
dangrubbb
396
public/cv/index.html
Normal file
396
public/cv/index.html
Normal file
@ -0,0 +1,396 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles/index.css" />
|
||||
<title>Dan Grubb CV</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--========== HEADER ==========-->
|
||||
<header class="l-header" id="header">
|
||||
<nav class="nav bd-container">
|
||||
<a href="#" class="nav nav__logo">Dan</a>
|
||||
<div class="nav__menu" id="nav-menu">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="#home" class="nav__link active-link">
|
||||
<i class="bx bx-home nav__icon"></i>Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#profile" class="nav__link">
|
||||
<i class="bx bx-user nav__icon"></i>Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#education" class="nav__link">
|
||||
<i class="bx bx-book nav__icon"></i>Education
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#skills" class="nav__link">
|
||||
<i class="bx bx-receipt nav__icon"></i>Skills
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#experiencie" class="nav__link">
|
||||
<i class="bx bx-briefcase nav__icon"></i>Experience
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#certificates" class="nav__link">
|
||||
<i class="bx bx-briefcase nav__icon"></i>Certificates
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#references" class="nav__link">
|
||||
<i class="bx bx-link-external nav__icon"></i>References
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav__toggle" id="nav-toggle">
|
||||
<i class="bx bx-grid-alt nav__icon"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="l-main bd-container">
|
||||
<!-- All elements within this div, is generated in PDF -->
|
||||
<div class="resume" id="area-cv">
|
||||
<div class="resume__left">
|
||||
<!--========== HOME ==========-->
|
||||
<section class="home" id="home">
|
||||
<div class="home__container section bd-grid">
|
||||
<div class="home__data bd-grid">
|
||||
<img
|
||||
src="assets/img/perfil-example.jpg"
|
||||
alt="perfil"
|
||||
class="home__img"
|
||||
/>
|
||||
<h1 class="home__title">Dan <b>Grubb</b></h1>
|
||||
<h3 class="home__profession">IT Man</h3>
|
||||
|
||||
<div>
|
||||
<a
|
||||
download=""
|
||||
href="assets/pdf/DanGrubbResume.pdf"
|
||||
class="home__button-movil"
|
||||
>Download</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home__address bd-grid">
|
||||
<span class="home__information">
|
||||
<i class="bx bx-map home__icon"></i>Falls Church, VA
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-phone home__icon"></i> 703-649-1637
|
||||
</span>
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-planet home__icon"></i> dangrubb.net
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme change button -->
|
||||
<i
|
||||
class="bx bx-moon change-theme"
|
||||
title="Theme"
|
||||
id="theme-button"
|
||||
></i>
|
||||
<!-- Button to generate and download the pdf. Available for desktop. -->
|
||||
<i
|
||||
class="bx bx-download generate-pdf"
|
||||
title="Generate PDF"
|
||||
id="resume-button"
|
||||
></i>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!--========== PROFILE ==========-->
|
||||
<section class="profile section" id="profile">
|
||||
<h2 class="section-title">Profile</h2>
|
||||
<p class="profile__description">
|
||||
Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!--========== EDUCATION ==========-->
|
||||
<section class="education section" id="education">
|
||||
<h2 class="section-title">Education</h2>
|
||||
<div class="education__container">
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<span class="education__line"></span>
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Advanced Diploma</h3>
|
||||
<span class="education__studies">Patriot High School</span>
|
||||
<span class="education__year">2015 - 2019</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<span class="education__line"></span>
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Some College</h3>
|
||||
<!-- <span class="education__studies"></span> -->
|
||||
<span class="education__year">2020</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<!-- <span class="education__line"></span> -->
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Self-Study Certifications</h3>
|
||||
<!-- <span class="education__studies"></span> -->
|
||||
<span class="education__year">2020 - Present</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== SKILLS ==========-->
|
||||
<section class="skills section" id="skills">
|
||||
<h2 class="section-title">Skills</h2>
|
||||
<div class="skills__content bd-grid">
|
||||
<ul class="skills__data">
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Windows
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Mac
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Linux
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Networking
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="skills__data">
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Security
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Hardware
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Software
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="resume__right">
|
||||
|
||||
<!--========== EXPERIENCE ==========-->
|
||||
<section class="experience section" id="experience">
|
||||
<h2 class="section-title">Experience</h2>
|
||||
<div class="experience__container bd-grid">
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
<li>• Offer end-user support for both office-based and remote employees.</li>
|
||||
<li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
|
||||
<li>• Troubleshoot and resolve issues with the following technologies:</li>
|
||||
<li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
|
||||
<li>• Firewalls, Printer Servers, Office 365</li>
|
||||
<li>• Mac systems, workstation and network connectivity issues</li>
|
||||
<li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Technical Account Manager</h3>
|
||||
<span class="experience__company"
|
||||
>2023 to 2025 | ITG</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
|
||||
<li>• Manage client relationships and troubleshoot technical issues.</li>
|
||||
<li>• Deliver tailored solutions for business needs.</li>
|
||||
<li>• Find creative solutions for government and private clients.</li>
|
||||
<li>• Maintained 99% SLA compliance.</li>
|
||||
<li>• Streamlined and documented standard operating procedures.</li>
|
||||
<li>• Automated daily and repetitive tasks.</li>
|
||||
<li>• Created instructional media for field technicians.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line__last"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Field Technician</h3>
|
||||
<span class="experience__company">2023 | Dell</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Managed a workload of repairs in a ticketing system.</li>
|
||||
<li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
|
||||
<li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
|
||||
<li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
|
||||
<li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="moreInformation.html" class="more__information">
|
||||
<i class="bx bx-info-circle information__icon"></i>
|
||||
More Information
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== CERTIFICATES ==========-->
|
||||
<section class="certificate section" id="certificates">
|
||||
<h2 class="section-title">Certifications</h2>
|
||||
|
||||
<div class="certificate__container bd-grid">
|
||||
<div class="certificate__content">
|
||||
<h3 class="certificate__title">
|
||||
CompTIA A+, Network+ and Security+
|
||||
</h3>
|
||||
<p class="certificate__description">
|
||||
https://www.credly.com/users/dangrubbb
|
||||
</p>
|
||||
</div>
|
||||
<div class="certificate__content">
|
||||
<h3 class="certificate__title">
|
||||
Microsoft Office Specialist
|
||||
</h3>
|
||||
<p class="certificate__description">
|
||||
https://www.credly.com/users/dangrubbb
|
||||
</p>
|
||||
</div>
|
||||
<div class="certificate__content">
|
||||
<h3 class="certificate__title">
|
||||
Dell, Apple, Samsung Certified Repair Technician
|
||||
</h3>
|
||||
<p class="certificate__description">
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== REFERENCES ==========-->
|
||||
<section class="references section" id="references">
|
||||
<h2 class="section-title">References</h2>
|
||||
|
||||
<div class="references__container bd-grid">
|
||||
<div class="references__content bd-grid">
|
||||
<span class="references__subtitle">IT Engineer, ITG</span>
|
||||
<h3 class="references__title">Samuel Alpert</h3>
|
||||
<ul class="references__contact">
|
||||
<li>Details available upon request</li>
|
||||
<!-- <li>Email: user@email.com</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="references__content bd-grid">
|
||||
<span class="references__subtitle">Server Technician, AMD</span>
|
||||
<h3 class="references__title">Brian Oberoi</h3>
|
||||
<ul class="references__contact">
|
||||
<li>Details available upon request</li>
|
||||
<!-- <li>Email: user@email.com</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== LANGUAGES ==========-->
|
||||
<section class="languages section">
|
||||
<h2 class="section-title">Languages</h2>
|
||||
|
||||
<div class="languages__container">
|
||||
<ul class="languages__content bd-grid">
|
||||
<li class="languages__name">
|
||||
<span class="languages__circle"></span> English
|
||||
</li>
|
||||
<li class="languages__name">
|
||||
<span class="languages__circle"></span> Python
|
||||
</li>
|
||||
<li class="languages__name">
|
||||
<span class="languages__circle"></span> HTML
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== INTERESTS ==========-->
|
||||
<section class="interests section">
|
||||
<h2 class="section-title">Interests</h2>
|
||||
|
||||
<div class="interests__container bd-grid">
|
||||
<div class="interests__content">
|
||||
<i class="bx bx-headphone interests__icon"></i>
|
||||
<span class="interests__name">Music</span>
|
||||
</div>
|
||||
<div class="interests__content">
|
||||
<i class="bx bx-cog interests__icon"></i>
|
||||
<span class="interests__name">Tech</span>
|
||||
</div>
|
||||
<div class="interests__content">
|
||||
<i class="bx bx-walk interests__icon"></i>
|
||||
<span class="interests__name">Fitness</span>
|
||||
</div>
|
||||
|
||||
<div class="interests__content">
|
||||
<i class="bx bx-bible interests__icon"></i>
|
||||
<span class="interests__name">Christ</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!--========== SCROLL TOP ==========-->
|
||||
<a href="#" class="scrolltop" id="scroll-top">
|
||||
<i class="bx bx-up-arrow-alt scrolltop__icon"></i>
|
||||
</a>
|
||||
<!--========== HTML2PDF ==========-->
|
||||
<script src="js/html2pdf.bundle.min.js"></script>
|
||||
|
||||
<!--========== MAIN JS ==========-->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
179
public/cv/js/main.js
Normal file
179
public/cv/js/main.js
Normal file
@ -0,0 +1,179 @@
|
||||
/*==================== SHOW MENU ====================*/
|
||||
const showMenu = (toggleId, navId) => {
|
||||
const toggle = document.getElementById(toggleId),
|
||||
nav = document.getElementById(navId);
|
||||
//validate that variables exist
|
||||
if (toggle && nav) {
|
||||
toggle.addEventListener("click", () => {
|
||||
//we add the show menu class to the div tag with the nav__menu class
|
||||
nav.classList.toggle("show-menu");
|
||||
});
|
||||
}
|
||||
};
|
||||
showMenu("nav-toggle", "nav-menu");
|
||||
|
||||
/*==================== REMOVE MENU MOBILE ====================*/
|
||||
const navLink = document.querySelectorAll(".nav__link");
|
||||
function linkAction() {
|
||||
const navMenu = document.getElementById("nav-menu");
|
||||
//when we click on each nav__link, we remove the show-menu class
|
||||
navMenu.classList.remove("show-menu");
|
||||
}
|
||||
navLink.forEach((n) => n.addEventListener("click", linkAction));
|
||||
|
||||
/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
|
||||
const sections = document.querySelectorAll("section[id]");
|
||||
function scrollActive() {
|
||||
const scrollY = window.pageYOffset;
|
||||
sections.forEach((current) => {
|
||||
const sectionHeight = current.offsetHeight;
|
||||
const sectionTop = current.offsetTop - 50;
|
||||
sectionId = current.getAttribute("id");
|
||||
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
|
||||
document
|
||||
.querySelector(".nav__menu a[href*=" + sectionId + "]")
|
||||
.classList.add("active-link");
|
||||
} else {
|
||||
document
|
||||
.querySelector(".nav__menu a[href*=" + sectionId + "]")
|
||||
.classList.remove("active-link");
|
||||
}
|
||||
});
|
||||
}
|
||||
window.addEventListener("scroll", scrollActive);
|
||||
|
||||
/*==================== SHOW SCROLL TOP ====================*/
|
||||
function scrollTop() {
|
||||
const scrollTop = document.getElementById("scroll-top");
|
||||
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
|
||||
if (this.scrollY >= 200) scrollTop.classList.add("show-scroll");
|
||||
else scrollTop.classList.remove("show-scroll");
|
||||
}
|
||||
window.addEventListener("scroll", scrollTop);
|
||||
|
||||
/*==================== DARK LIGHT THEME ====================*/
|
||||
const themeButton = document.getElementById("theme-button");
|
||||
const darkTheme = "dark-theme";
|
||||
const iconTheme = "bx-sun";
|
||||
|
||||
// Previously selected topic (if user selected)
|
||||
const selectedTheme = localStorage.getItem("selected-theme");
|
||||
const selectedIcon = localStorage.getItem("selected-icon");
|
||||
|
||||
// We obtain the current theme that the interface has by validating the dark-theme class
|
||||
const getCurrentTheme = () =>
|
||||
document.body.classList.contains(darkTheme) ? "dark" : "light";
|
||||
const getCurrentIcon = () =>
|
||||
themeButton.classList.contains(iconTheme) ? "bx-moon" : "bx-sun";
|
||||
|
||||
// We validate if the user previously chose a topic
|
||||
if (selectedTheme) {
|
||||
// If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
|
||||
document.body.classList[selectedTheme === "dark" ? "add" : "remove"](
|
||||
darkTheme
|
||||
);
|
||||
themeButton.classList[selectedIcon === "bx-moon" ? "add" : "remove"](
|
||||
iconTheme
|
||||
);
|
||||
}
|
||||
|
||||
// Activate / deactivate the theme manually with the button
|
||||
themeButton.addEventListener("click", () => {
|
||||
// Add or remove the dark / icon theme
|
||||
document.body.classList.toggle(darkTheme);
|
||||
themeButton.classList.toggle(iconTheme);
|
||||
// We save the theme and the current icon that the user chose
|
||||
localStorage.setItem("selected-theme", getCurrentTheme());
|
||||
localStorage.setItem("selected-icon", getCurrentIcon());
|
||||
});
|
||||
|
||||
/*==================== REDUCE THE SIZE AND PRINT ON AN A4 SHEET ====================*/
|
||||
function scaleCv() {
|
||||
document.body.classList.add("scale-cv");
|
||||
}
|
||||
|
||||
/*==================== REMOVE THE SIZE WHEN THE CV IS DOWNLOADED ====================*/
|
||||
function removeScale() {
|
||||
document.body.classList.remove("scale-cv");
|
||||
}
|
||||
|
||||
/*==================== GENERATE PDF ====================*/
|
||||
// PDF generated area
|
||||
let areaCv = document.getElementById("area-cv");
|
||||
let resumeButton = document.getElementById("resume-button");
|
||||
|
||||
// Html2pdf options
|
||||
let opt = {
|
||||
margin: 0,
|
||||
filename: "DanGrubbResume.pdf",
|
||||
image: { type: "jpeg", quality: 0.98 },
|
||||
html2canvas: { scale: 2 },
|
||||
jsPDF: { format: "a4", orientation: "portrait" },
|
||||
};
|
||||
|
||||
// Function to call areaCv and Html2Pdf options
|
||||
function generateResume() {
|
||||
// Select the elements to hide
|
||||
const experienceLink = document.querySelector("#experience > div > a");
|
||||
const interestsSection = document.querySelector("#area-cv > div.resume__right > section.interests.section");
|
||||
|
||||
// Hide the elements before generating PDF
|
||||
if (experienceLink) {
|
||||
experienceLink.style.display = 'none'; // Hide the link
|
||||
}
|
||||
|
||||
if (interestsSection) {
|
||||
interestsSection.style.display = 'none'; // Hide the interests section
|
||||
}
|
||||
|
||||
// Generate the PDF
|
||||
html2pdf(areaCv, opt);
|
||||
|
||||
// Show the elements again after a timeout
|
||||
setTimeout(() => {
|
||||
if (experienceLink) {
|
||||
experienceLink.style.display = 'block'; // Show the link again
|
||||
}
|
||||
|
||||
if (interestsSection) {
|
||||
interestsSection.style.display = 'block'; // Show the interests section again
|
||||
}
|
||||
}, 2000); // Adjust the timeout if necessary
|
||||
}
|
||||
|
||||
// When the button is clicked, it executes the three functions
|
||||
resumeButton.addEventListener("click", () => {
|
||||
// 1. The class .scale-cv is added to the body, where it reduces the size of the elements
|
||||
scaleCv();
|
||||
// 2. The PDF is generated
|
||||
generateResume();
|
||||
// 3. The .scale-cv class is removed from the body after 5 seconds to return to normal size.
|
||||
setTimeout(removeScale, 5000);
|
||||
});
|
||||
|
||||
/*========== CONFIRMATION MESSAGE ==========*/
|
||||
const countdownElement = document.getElementById("countdown");
|
||||
// Date to countdown (July 1, 2023)
|
||||
const countdownDate = new Date("July 1, 2023 00:00:00").getTime();
|
||||
|
||||
// Update the countdown every second
|
||||
const countdownTimer = setInterval(() => {
|
||||
const now = new Date().getTime();
|
||||
const distance = countdownDate - now;
|
||||
// Calculate days, hours, minutes, and seconds remaining
|
||||
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
const hours = Math.floor(
|
||||
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// Update the countdown element
|
||||
countdownElement.innerHTML = `The remaining time is ${days} days, ${hours} hours, ${minutes} minutes, and ${seconds} seconds.`;
|
||||
|
||||
// If the target date is reached, stop the countdown
|
||||
if (distance < 0) {
|
||||
clearInterval(countdownTimer);
|
||||
countdownElement.innerHTML = "The day has arrived!";
|
||||
}
|
||||
}, 1000);
|
||||
366
public/cv/moreInformation.html
Normal file
366
public/cv/moreInformation.html
Normal file
@ -0,0 +1,366 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles/index.css" />
|
||||
<title>Dan Grubb CV</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--========== HEADER ==========-->
|
||||
<header class="l-header" id="header">
|
||||
<nav class="nav bd-container">
|
||||
<a href="#" class="nav nav__logo">Dan</a>
|
||||
<div class="nav__menu" id="nav-menu">
|
||||
<ul class="nav__list">
|
||||
<li class="nav__item">
|
||||
<a href="#home" class="nav__link active-link">
|
||||
<i class="bx bx-home nav__icon"></i>Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#profile" class="nav__link">
|
||||
<i class="bx bx-user nav__icon"></i>Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#education" class="nav__link">
|
||||
<i class="bx bx-book nav__icon"></i>Education
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#skills" class="nav__link">
|
||||
<i class="bx bx-receipt nav__icon"></i>Skills
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#experiencie" class="nav__link">
|
||||
<i class="bx bx-briefcase nav__icon"></i>Experience
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#certificates" class="nav__link">
|
||||
<i class="bx bx-briefcase nav__icon"></i>Certificates
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav__item">
|
||||
<a href="#references" class="nav__link">
|
||||
<i class="bx bx-link-external nav__icon"></i>References
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="nav__toggle" id="nav-toggle">
|
||||
<i class="bx bx-grid-alt nav__icon"></i>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="l-main bd-container">
|
||||
<!-- All elements within this div, is generated in PDF -->
|
||||
<div class="resume" id="area-cv">
|
||||
<div class="resume__left">
|
||||
<!--========== HOME ==========-->
|
||||
<section class="home" id="home">
|
||||
<div class="home__container section bd-grid">
|
||||
<div class="home__data bd-grid">
|
||||
<img
|
||||
src="assets/img/perfil-example.jpg"
|
||||
alt="perfil"
|
||||
class="home__img"
|
||||
/>
|
||||
<h1 class="home__title">Dan <b>Grubb</b></h1>
|
||||
<h3 class="home__profession">IT Man</h3>
|
||||
|
||||
<div>
|
||||
<a
|
||||
download=""
|
||||
href="assets/pdf/ResumeCv.pdf"
|
||||
class="home__button-movil"
|
||||
>Download</a
|
||||
>
|
||||
</div>
|
||||
<!--
|
||||
<div>
|
||||
<a href="contact.html" class="home__button-contact"
|
||||
>Contact Me</a
|
||||
>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div class="home__address bd-grid">
|
||||
<span class="home__information">
|
||||
<i class="bx bx-map home__icon"></i>Falls Church, VA
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-phone home__icon"></i> 703-649-1637
|
||||
</span>
|
||||
<span class="home__information">
|
||||
<i class="bx bx-planet home__icon"></i> dangrubb.net
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Theme change button -->
|
||||
<i
|
||||
class="bx bx-moon change-theme"
|
||||
title="Theme"
|
||||
id="theme-button"
|
||||
></i>
|
||||
<!-- Button to generate and download the pdf. Available for desktop. -->
|
||||
<i
|
||||
class="bx bx-download generate-pdf"
|
||||
title="Generate PDF"
|
||||
id="resume-button"
|
||||
></i>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!--========== PROFILE ==========-->
|
||||
<section class="profile section" id="profile">
|
||||
<h2 class="section-title">Profile</h2>
|
||||
<p class="profile__description">
|
||||
Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!--========== EDUCATION ==========-->
|
||||
<section class="education section" id="education">
|
||||
<h2 class="section-title">Education</h2>
|
||||
<div class="education__container">
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<span class="education__line"></span>
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Advanced Diploma</h3>
|
||||
<span class="education__studies">Patriot High School</span>
|
||||
<span class="education__year">2015 - 2019</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<span class="education__line"></span>
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Some College</h3>
|
||||
<!-- <span class="education__studies"></span> -->
|
||||
<span class="education__year">2020</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="education__content">
|
||||
<div class="education__time">
|
||||
<span class="education__rounder"></span>
|
||||
<!-- <span class="education__line"></span> -->
|
||||
</div>
|
||||
<div class="education__data bd-grid">
|
||||
<h3 class="education__title">Self-Study Certifications</h3>
|
||||
<!-- <span class="education__studies"></span> -->
|
||||
<span class="education__year">2020 - Present</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--========== SKILLS ==========-->
|
||||
<section class="skills section" id="skills">
|
||||
<h2 class="section-title">Skills</h2>
|
||||
<div class="skills__content bd-grid">
|
||||
<ul class="skills__data">
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Windows
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Mac
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Linux
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Networking
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="skills__data">
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Security
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Hardware
|
||||
</li>
|
||||
<li class="skills__name">
|
||||
<span class="skills__circle"></span>Software
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="resume__right">
|
||||
<!--========== EXPERIENCE ==========-->
|
||||
<section class="experience section" id="experience">
|
||||
<h2 class="section-title">Experience</h2>
|
||||
|
||||
<div class="experience__container bd-grid">
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">IT Consultant and Support Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2025 to Present | Blue Tech Innovation</span>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
|
||||
<li>• Offer end-user support for both office-based and remote employees.</li>
|
||||
<li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
|
||||
<li>• Troubleshoot and resolve issues with the following technologies:</li>
|
||||
<li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
|
||||
<li>• Firewalls, Printer Servers, Office 365</li>
|
||||
<li>• Mac systems, workstation and network connectivity issues</li>
|
||||
<li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Technical Account Manager</h3>
|
||||
<span class="experience__company"
|
||||
>2023 to Present | ITG</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
|
||||
<li>• Manage client relationships and troubleshoot technical issues.</li>
|
||||
<li>• Deliver tailored solutions for business needs.</li>
|
||||
<li>• Find creative solutions for government and private clients.</li>
|
||||
<li>• Maintained 99% SLA compliance.</li>
|
||||
<li>• Streamlined and documented standard operating procedures.</li>
|
||||
<li>• Automated daily and repetitive tasks.</li>
|
||||
<li>• Created instructional media for field technicians.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Field Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2023 | Dell</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Managed a workload of repairs in a ticketing system.</li>
|
||||
<li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
|
||||
<li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
|
||||
<li>• Maintained positive professional relations with Dell’s corporate, government, and consumer clients.</li>
|
||||
<li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">
|
||||
Lead Repair Technician
|
||||
</h3>
|
||||
<span class="experience__company"
|
||||
>2021 to 2022 | T-Mobile</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Diagnosed and repaired cellphones, tablets, laptops, and other mobile devices.</li>
|
||||
<li>• Efficiently diagnosed issues with customers' devices and performed all necessary repairs.</li>
|
||||
<li>• Handled inventory and parts returns while ensuring systems were up to date.</li>
|
||||
<li>• Exceeded SLA expectations completing 90% of repairs in under 90 minutes.</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Lead Technician</h3>
|
||||
<span class="experience__company"
|
||||
>2021 | Red Door Pro Wash</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Communicated with customers to perform soft wash services efficiently.</li>
|
||||
<li>• Created job plans for the team prior to arrival.</li>
|
||||
<li>• Maintained and drove the company vehicle.</li>
|
||||
</ul> </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="experience__content">
|
||||
<div class="experience__time">
|
||||
<span class="experience__rounder"></span>
|
||||
<span class="experience__line"></span>
|
||||
</div>
|
||||
<div class="experience__data bd-grid">
|
||||
<h3 class="experience__title">Night Shift Manager</h3>
|
||||
<span class="experience__company"
|
||||
>2020 to 2021 | Taco Bell</span
|
||||
>
|
||||
<p class="experience__description">
|
||||
<ul class="experience__description">
|
||||
<li>• Managed up to 10 staff during the night shift.</li>
|
||||
<li>• Trained new employees and handled customer issues.</li>
|
||||
<li>• Processed refunds, tracked inventory, and kept cash registers balanced.</li>
|
||||
</ul> </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="index.html" class="back__home">
|
||||
<i class="bx bx-arrow-back back__icon"></i>
|
||||
Back to Home
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!--========== SCROLL TOP ==========-->
|
||||
<a href="#" class="scrolltop" id="scroll-top">
|
||||
<i class="bx bx-up-arrow-alt scrolltop__icon"></i>
|
||||
</a>
|
||||
<!--========== HTML2PDF ==========-->
|
||||
<script src="js/html2pdf.bundle.min.js"></script>
|
||||
|
||||
<!--========== MAIN JS ==========-->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
692
public/cv/styles/index.css
Normal file
692
public/cv/styles/index.css
Normal file
@ -0,0 +1,692 @@
|
||||
/*===== GOOGLE FONTS =====*/
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
|
||||
|
||||
/*===== VARIABLES CSS =====*/
|
||||
:root {
|
||||
--header-height: 3rem;
|
||||
|
||||
/*========== Colors ==========*/
|
||||
--title-color: #0b0a0a;
|
||||
--text-color: #403a3a;
|
||||
--text-color-light: #707070;
|
||||
--container-color: #fafafa;
|
||||
--container-color-alt: #f0efef;
|
||||
--body-color: #fcfcfc;
|
||||
|
||||
/*========== Font and typography ==========*/
|
||||
--body-font: "Poppins", sans-serif;
|
||||
--h1-font-size: 1.5rem;
|
||||
--h2-font-size: 1.25rem;
|
||||
--h3-font-size: 1rem;
|
||||
--normal-font-size: 0.938rem;
|
||||
--small-font-size: 0.875rem;
|
||||
--smaller-font-size: 0.813rem;
|
||||
|
||||
/*========== Font weight ==========*/
|
||||
--font-medium: 500;
|
||||
--font-semi-bold: 600;
|
||||
|
||||
/*========== Margenes ==========*/
|
||||
--mb-1: 0.5rem;
|
||||
--mb-2: 1rem;
|
||||
--mb-3: 1.5rem;
|
||||
|
||||
/*========== z index ==========*/
|
||||
--z-tooltip: 10;
|
||||
--z-fixed: 100;
|
||||
}
|
||||
|
||||
/*========== BASE ==========*/
|
||||
|
||||
/*========== Variables Dark theme ==========*/
|
||||
body.dark-theme {
|
||||
--title-color: #f2f2f2;
|
||||
--text-color: #bfbfbf;
|
||||
--container-color: #212121;
|
||||
--container-color-alt: #181616;
|
||||
--body-color: #2b2b2b;
|
||||
}
|
||||
/*========== Button Dark/Light ==========*/
|
||||
.change-theme {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.2rem;
|
||||
display: flex;
|
||||
color: var(--text-color);
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.change-theme:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
/*========== Font size variables to scale cv ==========*/
|
||||
body.scale-cv {
|
||||
--h1-font-size: 0.938rem;
|
||||
--h2-font-size: 0.938rem;
|
||||
--h3-font-size: 0.875rem;
|
||||
--normal-font-size: 0.813rem;
|
||||
--small-font-size: 0.75rem;
|
||||
--smaller-font-size: 0.688rem;
|
||||
}
|
||||
/*========== Generate PDF button ==========*/
|
||||
.generate-pdf {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2.2rem;
|
||||
left: 0;
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.generate-pdf:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
/*========== Classes modified to reduce size and print on A4 sheet ==========*/
|
||||
.scale-cv .change-theme,
|
||||
.scale-cv .generate-pdf {
|
||||
display: none;
|
||||
}
|
||||
.scale-cv .bd-container {
|
||||
max-width: 595px;
|
||||
}
|
||||
.scale-cv .section {
|
||||
padding: 1.5rem 0 0.8rem;
|
||||
}
|
||||
.scale-cv .section-title {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.scale-cv .resume__left,
|
||||
.scale-cv .resume__right {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.scale-cv .home-img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
.scale-cv .home__container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.scale-cv .home__data {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.scale-cv .home__address,
|
||||
.scale-cv .social__container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.scale-cv .home__icon,
|
||||
.scale-cv .social__icon,
|
||||
.scale-cv .interests__icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.scale-cv .education__container,
|
||||
.scale-cv .experience__company,
|
||||
.scale-cv .certificate__container {
|
||||
gap: 1rem;
|
||||
}
|
||||
.scale-cv .education__time,
|
||||
.scale-cv .experience__time {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.scale-cv .education__rounder,
|
||||
.scale-cv .experience__rounder {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-top: 0.22rem;
|
||||
}
|
||||
.scale-cv .education__line,
|
||||
.scale-cv .experience__line {
|
||||
width: 1px;
|
||||
height: 110%;
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
.scale-cv .experience__line__last {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
.scale-cv .education__data,
|
||||
.scale-cv .experience__data {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.scale-cv .skills__name {
|
||||
margin-bottom: var(--mb-1);
|
||||
}
|
||||
.scale-cv .interests__container {
|
||||
column-gap: 2.5rem;
|
||||
}
|
||||
body {
|
||||
margin: 0 0 var(--header-height);
|
||||
padding: 0;
|
||||
font-family: var(--body-font);
|
||||
font-size: var(--normal-font-size);
|
||||
background-color: var(--body-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
ul,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
/*========== CLASS CSS ==========*/
|
||||
.section {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.section-title {
|
||||
font-size: var(--h2-font-size);
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-semi-bold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.35rem;
|
||||
text-align: center;
|
||||
margin-bottom: var(--mb-3);
|
||||
}
|
||||
/*========== LAYOUT ==========*/
|
||||
.bd-container {
|
||||
max-width: 968px;
|
||||
width: calc(100% - 3rem);
|
||||
margin-left: var(--mb-3);
|
||||
margin-right: var(--mb-3);
|
||||
}
|
||||
.bd-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.l-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: var(--z-fixed);
|
||||
background-color: var(--body-color);
|
||||
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.3s;
|
||||
}
|
||||
/*========== NAV ==========*/
|
||||
.nav {
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-width: 968px) {
|
||||
.nav__menu {
|
||||
position: fixed;
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 2rem 0rem;
|
||||
background-color: var(--body-color);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: var(--z-fixed);
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
.nav__logo,
|
||||
.nav__toggle {
|
||||
color: var(--title-color);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
.nav__toggle {
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav__item {
|
||||
text-align: center;
|
||||
}
|
||||
.nav__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2rem;
|
||||
}
|
||||
.nav__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: var(--smaller-font-size);
|
||||
color: var(--text-color-light);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
.nav__link:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
.nav__icon {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: var(--mb-1);
|
||||
}
|
||||
/* Show menu */
|
||||
.show-menu {
|
||||
bottom: var(--header-height);
|
||||
}
|
||||
/* Active menu link */
|
||||
.active-link {
|
||||
color: var(--title-color);
|
||||
}
|
||||
/*========== HOME ==========*/
|
||||
.home {
|
||||
position: relative;
|
||||
}
|
||||
.home__container {
|
||||
gap: 3rem;
|
||||
}
|
||||
.home__data {
|
||||
gap: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.home__img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
justify-self: center;
|
||||
margin-bottom: var(--mb-1);
|
||||
}
|
||||
.home__title {
|
||||
font-size: var(--h1-font-size);
|
||||
}
|
||||
.home__profession {
|
||||
font-size: var(--normal-font-size);
|
||||
margin-bottom: var(--mb-1);
|
||||
}
|
||||
.home__address {
|
||||
gap: 1rem;
|
||||
}
|
||||
.home__information {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: var(--small-font-size);
|
||||
}
|
||||
.home__icon {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.home__button-movil {
|
||||
display: inline-block;
|
||||
border: 2px solid var(--text-color);
|
||||
color: var(--title-color);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: 0.3s;
|
||||
font-weight: var(--font-medium);
|
||||
margin-top: var(--mb-3);
|
||||
}
|
||||
.home__button-movil:hover {
|
||||
background-color: var(--text-color);
|
||||
color: var(--container-color);
|
||||
}
|
||||
.home__button-contact {
|
||||
display: inline-block;
|
||||
border: 2px solid var(--text-color);
|
||||
color: var(--title-color);
|
||||
padding: 1rem 1.6rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: 0.3s;
|
||||
font-weight: var(--font-medium);
|
||||
margin-top: var(--mb-3);
|
||||
}
|
||||
.home__button-contact:hover {
|
||||
background-color: var(--text-color);
|
||||
color: var(--container-color);
|
||||
}
|
||||
.information__icon,
|
||||
.back__icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.information__icon:hover,
|
||||
.back__icon:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
.more__information,
|
||||
.back__home {
|
||||
font-size: var(--h3-font-size);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--font-medium);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.back__home {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.more__information:hover,
|
||||
.back__home:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
|
||||
/*========== SOCIAL ==========*/
|
||||
.social__container {
|
||||
grid-template-columns: max-content;
|
||||
gap: 1rem;
|
||||
}
|
||||
.social__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: var(--small-font-size);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.social__link:hover {
|
||||
color: var(--title-color);
|
||||
}
|
||||
.social__icon {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
/*========== PROFILE ==========*/
|
||||
.profile__description {
|
||||
text-align: center;
|
||||
}
|
||||
/*========== EDUCATION AND EXPERIENCE ==========*/
|
||||
.education__content,
|
||||
.experience__content {
|
||||
display: flex;
|
||||
}
|
||||
.education__time,
|
||||
.experience__time {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.education__rounder,
|
||||
.experience__rounder {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: var(--text-color-light);
|
||||
border-radius: 50%;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.education__line,
|
||||
.experience__line {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 109%;
|
||||
background-color: var(--text-color-light);
|
||||
transform: translate(7px, 0);
|
||||
}
|
||||
.experience__line__last {
|
||||
display: block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: var(--text-color-light);
|
||||
transform: translate(7px, 0);
|
||||
}
|
||||
.education__data,
|
||||
.experience__data {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.education__title,
|
||||
.experience__title {
|
||||
font-size: var(--h3-font-size);
|
||||
}
|
||||
.education__studies,
|
||||
.experience__company {
|
||||
font-size: var(--small-font-size);
|
||||
color: var(--title-color);
|
||||
}
|
||||
.education__year {
|
||||
font-size: var(--smaller-font-size);
|
||||
}
|
||||
|
||||
/*========== SKILLS AND LANGUAGES ==========*/
|
||||
.skills__content,
|
||||
.languages__content {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.skills__name,
|
||||
.languages__name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--mb-3);
|
||||
}
|
||||
.skills__circle,
|
||||
.languages__circle {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: var(--text-color);
|
||||
border-radius: 50%;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
/*========== CERTIFICATES ==========*/
|
||||
.certificate__title {
|
||||
font-size: var(--h3-font-size);
|
||||
margin-bottom: var(--mb-1);
|
||||
}
|
||||
/*========== REFERENCES ==========*/
|
||||
.references__content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.references__subtitle {
|
||||
color: var(--text-color-light);
|
||||
}
|
||||
.references__subtitle,
|
||||
.references__contact {
|
||||
font-size: var(--smaller-font-size);
|
||||
}
|
||||
.references__title {
|
||||
font-size: var(--h3-font-size);
|
||||
}
|
||||
/*========== INTERESTS ==========*/
|
||||
.interests__container {
|
||||
display: grid; /* Ensure the grid display is set */
|
||||
grid-template-columns: repeat(4, 1fr); /* Keep 4 columns with equal widths */
|
||||
gap: 1.5rem; /* Adjust gap if needed; this is value you can tweak */
|
||||
margin-top: var(--mb-2);
|
||||
}
|
||||
|
||||
.interests__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
/* You can add a fixed width here if necessary to avoid wrapping, but typically it's better to avoid fixed widths */
|
||||
}
|
||||
|
||||
.interests__icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-color-light);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
/*========== CONTACT ==========*/
|
||||
.contact__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.contact__info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3rem;
|
||||
align-items: center;
|
||||
font-size: var(--h3-font-size);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--font-medium);
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
.contact__icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.contact__phone,
|
||||
.contact__email {
|
||||
font-size: var(--h3-font-size);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--font-medium);
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.contact__form {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 3rem;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.contact__content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.contact__inputs {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.contact__input,
|
||||
.contact__textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: none;
|
||||
background-color: #e5e5e5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact__textarea {
|
||||
resize: none;
|
||||
height: 150px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.contact__button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
margin-top: 1.5rem;
|
||||
border: none;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact__button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
/* Scroll top */
|
||||
.scrolltop {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: -20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.3rem;
|
||||
background-color: var(--container-color-alt);
|
||||
border-radius: 0.4rem;
|
||||
z-index: var(--z-tooltip);
|
||||
transition: 0.4s;
|
||||
visibility: hidden;
|
||||
}
|
||||
.scrolltop__icon {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.show-scroll {
|
||||
visibility: visible;
|
||||
bottom: 5rem;
|
||||
}
|
||||
/*========== CONFIRMATION MESSAGE ==========*/
|
||||
.confirmation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.confirmation h2 {
|
||||
font-size: var(--h1-font-size);
|
||||
color: var(--title-color);
|
||||
margin-bottom: var(--mb-2);
|
||||
}
|
||||
|
||||
.confirmation p {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#countdown {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/*========== MEDIA QUERIES ==========*/
|
||||
/* For small devices, menu two columns */
|
||||
@media screen and (max-width: 320px) {
|
||||
.nav__list {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem 0.5rem;
|
||||
}
|
||||
}
|
||||
/* Classes modified for large screen size */
|
||||
@media screen and (min-width: 968px) {
|
||||
body {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
.bd-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.home__button-contact {
|
||||
margin-top: 0;
|
||||
}
|
||||
.l-header,
|
||||
.scrolltop {
|
||||
display: none;
|
||||
}
|
||||
.resume {
|
||||
display: grid;
|
||||
grid-template-columns: 0.5fr 1fr;
|
||||
background-color: var(--container-color);
|
||||
box-shadow: 0 0 8px rgba(13, 12, 12, 15);
|
||||
}
|
||||
.resume__left {
|
||||
background-color: var(--container-color-alt);
|
||||
}
|
||||
.resume__left,
|
||||
.resume__right {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.generate-pdf {
|
||||
display: inline-block;
|
||||
}
|
||||
.section-title,
|
||||
.profile__description {
|
||||
text-align: initial;
|
||||
}
|
||||
.home__container {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.home__button-movil {
|
||||
display: none;
|
||||
}
|
||||
.references__container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.languages__content {
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
column-gap: 3.5rem;
|
||||
}
|
||||
.interests__container {
|
||||
grid-template-columns: repeat(4, max-content);
|
||||
column-gap: 3.5rem;
|
||||
}
|
||||
}
|
||||
BIN
public/src/img/DanGrubbLogoTeal.png
Normal file
BIN
public/src/img/DanGrubbLogoTeal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
BIN
public/src/img/crush-splatter.png
Normal file
BIN
public/src/img/crush-splatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
public/src/img/pack-splatter-padded.png
Normal file
BIN
public/src/img/pack-splatter-padded.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
public/src/img/pack-splatter.png
Normal file
BIN
public/src/img/pack-splatter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
58
src/layouts/CrushBase.astro
Normal file
58
src/layouts/CrushBase.astro
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</Base>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user