Compare commits
1 Commits
ff2a284e64
...
astro
| Author | SHA1 | Date | |
|---|---|---|---|
| bb65104fa5 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,4 +1,3 @@
|
|||||||
deploy_dangrubb.net.sh
|
|
||||||
node_modules/
|
node_modules/
|
||||||
dist/
|
dist/
|
||||||
.astro/
|
.astro/
|
||||||
|
|||||||
254
blog/index.html
254
blog/index.html
@ -1,254 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en" >
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>dangrubb.net</title>
|
|
||||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="./style.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- partial:index.partial.html -->
|
|
||||||
<div class="bard">
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -2em;
|
|
||||||
--glitch-hue-1: -16deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 13deg;
|
|
||||||
|
|
||||||
background-position: 0 -0em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 2s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -1em;
|
|
||||||
--glitch-hue-1: -42deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: -23deg;
|
|
||||||
|
|
||||||
background-position: 0 -5em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -10em;
|
|
||||||
--glitch-hue-1: -42deg;
|
|
||||||
--glitch-x-2: -9em;
|
|
||||||
--glitch-hue-2: 45deg;
|
|
||||||
|
|
||||||
background-position: 0 -8em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -6em;
|
|
||||||
--glitch-hue-1: -11deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 29deg;
|
|
||||||
|
|
||||||
background-position: 0 -11em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-8;
|
|
||||||
animation-duration: 8000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 0em;
|
|
||||||
--glitch-hue-1: 42deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: -28deg;
|
|
||||||
|
|
||||||
background-position: 0 -16em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -3em;
|
|
||||||
--glitch-hue-1: -45deg;
|
|
||||||
--glitch-x-2: -5em;
|
|
||||||
--glitch-hue-2: -15deg;
|
|
||||||
|
|
||||||
background-position: 0 -21em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -5em;
|
|
||||||
--glitch-hue-1: 35deg;
|
|
||||||
--glitch-x-2: 9em;
|
|
||||||
--glitch-hue-2: 35deg;
|
|
||||||
|
|
||||||
background-position: 0 -23em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 10em;
|
|
||||||
--glitch-hue-1: 39deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 24deg;
|
|
||||||
|
|
||||||
background-position: 0 -25em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -6em;
|
|
||||||
--glitch-hue-1: -46deg;
|
|
||||||
--glitch-x-2: -3em;
|
|
||||||
--glitch-hue-2: 18deg;
|
|
||||||
|
|
||||||
background-position: 0 -31em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-10;
|
|
||||||
animation-duration: 10000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -8em;
|
|
||||||
--glitch-hue-1: -37deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: 15deg;
|
|
||||||
|
|
||||||
background-position: 0 -37em;
|
|
||||||
height: 1em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -1em;
|
|
||||||
--glitch-hue-1: 16deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 25deg;
|
|
||||||
|
|
||||||
background-position: 0 -38em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 5em;
|
|
||||||
--glitch-hue-1: 32deg;
|
|
||||||
--glitch-x-2: 10em;
|
|
||||||
--glitch-hue-2: -3deg;
|
|
||||||
|
|
||||||
background-position: 0 -40em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 10em;
|
|
||||||
--glitch-hue-1: -26deg;
|
|
||||||
--glitch-x-2: 6em;
|
|
||||||
--glitch-hue-2: -45deg;
|
|
||||||
|
|
||||||
background-position: 0 -42em;
|
|
||||||
height: 4em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -7em;
|
|
||||||
--glitch-hue-1: -45deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 45deg;
|
|
||||||
|
|
||||||
background-position: 0 -46em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 2s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 4em;
|
|
||||||
--glitch-hue-1: 40deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 29deg;
|
|
||||||
|
|
||||||
background-position: 0 -49em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -4em;
|
|
||||||
--glitch-hue-1: 26deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: -3deg;
|
|
||||||
|
|
||||||
background-position: 0 -52em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-10;
|
|
||||||
animation-duration: 10000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 6em;
|
|
||||||
--glitch-hue-1: 43deg;
|
|
||||||
--glitch-x-2: -1em;
|
|
||||||
--glitch-hue-2: -1deg;
|
|
||||||
|
|
||||||
background-position: 0 -58em;
|
|
||||||
height: 4em;
|
|
||||||
animation-name: glitch-8;
|
|
||||||
animation-duration: 8000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
dangrubb.net/blog
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
<a href="../index.html"><-- back to home</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div id="blogsContainer" class="blogs-container">
|
|
||||||
<p style="color: #9d9aa4;">Loading blog posts...</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- partial -->
|
|
||||||
<script src="./script.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"id": "01",
|
|
||||||
"title": "Status",
|
|
||||||
"date": "2026-02-28",
|
|
||||||
"excerpt": "dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.",
|
|
||||||
"content": "<p>dangrubb.net is fully functional and operating at 18% of potential. When Blog updates are posted, this score will increase to 19%.</p>",
|
|
||||||
"image": "/blog/src/img/CannotConnect.JPEG",
|
|
||||||
"slug": "status"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
// Load and display blog posts from JSON
|
|
||||||
async function loadBlogPosts() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('./posts.json');
|
|
||||||
const posts = await response.json();
|
|
||||||
|
|
||||||
const blogsContainer = document.getElementById('blogsContainer');
|
|
||||||
|
|
||||||
if (posts.length === 0) {
|
|
||||||
blogsContainer.innerHTML = '<div class="no-posts"><p>No blog posts yet.</p></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create HTML for each post
|
|
||||||
const postsHTML = posts.map(post => `
|
|
||||||
<article class="blog-post" id="${post.slug}">
|
|
||||||
<h2 class="blog-post-title">${post.title}</h2>
|
|
||||||
<div class="blog-post-date">${new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
|
|
||||||
<div class="blog-post-content">
|
|
||||||
${post.content}
|
|
||||||
</div>
|
|
||||||
<div class="blog-post-image">
|
|
||||||
<img src="${post.image}" alt="${post.title}" />
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
`).join('');
|
|
||||||
|
|
||||||
blogsContainer.innerHTML = postsHTML;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading blog posts:', error);
|
|
||||||
document.getElementById('blogsContainer').innerHTML = '<div class="error"><p>Error loading blog posts.</p></div>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load blog posts when page is ready
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', loadBlogPosts);
|
|
||||||
} else {
|
|
||||||
loadBlogPosts();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle hash-based navigation to specific posts
|
|
||||||
window.addEventListener('hashchange', () => {
|
|
||||||
const postId = window.location.hash.slice(1);
|
|
||||||
if (postId) {
|
|
||||||
const element = document.getElementById(postId);
|
|
||||||
if (element) {
|
|
||||||
element.scrollIntoView({ behavior: 'smooth' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 MiB |
290
blog/style.css
290
blog/style.css
File diff suppressed because one or more lines are too long
@ -1,39 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Page Not Found</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-color: #123425;
|
|
||||||
color: white;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin: 0.5em 0;
|
|
||||||
}
|
|
||||||
.small-text {
|
|
||||||
font-size: 1rem;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Page Not Found</h1>
|
|
||||||
<p>This page does not exist yet.</p>
|
|
||||||
<p class="small-text">Stay tuned.</p>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 381 KiB |
Binary file not shown.
Binary file not shown.
396
cv/index.html
396
cv/index.html
@ -1,396 +0,0 @@
|
|||||||
<!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>
|
|
||||||
3
cv/js/html2pdf.bundle.min.js
vendored
3
cv/js/html2pdf.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
179
cv/js/main.js
179
cv/js/main.js
@ -1,179 +0,0 @@
|
|||||||
/*==================== 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);
|
|
||||||
@ -1,366 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,692 +0,0 @@
|
|||||||
/*===== 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
272
index.html
272
index.html
@ -1,272 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
|
|
||||||
<html lang="en" >
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>dangrubb.net</title>
|
|
||||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
|
|
||||||
<link rel="stylesheet" href="./style.css">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- partial:index.partial.html -->
|
|
||||||
<div class="bard">
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -2em;
|
|
||||||
--glitch-hue-1: -16deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 13deg;
|
|
||||||
|
|
||||||
background-position: 0 -0em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 2s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -1em;
|
|
||||||
--glitch-hue-1: -42deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: -23deg;
|
|
||||||
|
|
||||||
background-position: 0 -5em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -10em;
|
|
||||||
--glitch-hue-1: -42deg;
|
|
||||||
--glitch-x-2: -9em;
|
|
||||||
--glitch-hue-2: 45deg;
|
|
||||||
|
|
||||||
background-position: 0 -8em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -6em;
|
|
||||||
--glitch-hue-1: -11deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 29deg;
|
|
||||||
|
|
||||||
background-position: 0 -11em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-8;
|
|
||||||
animation-duration: 8000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 0em;
|
|
||||||
--glitch-hue-1: 42deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: -28deg;
|
|
||||||
|
|
||||||
background-position: 0 -16em;
|
|
||||||
height: 5em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -3em;
|
|
||||||
--glitch-hue-1: -45deg;
|
|
||||||
--glitch-x-2: -5em;
|
|
||||||
--glitch-hue-2: -15deg;
|
|
||||||
|
|
||||||
background-position: 0 -21em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -5em;
|
|
||||||
--glitch-hue-1: 35deg;
|
|
||||||
--glitch-x-2: 9em;
|
|
||||||
--glitch-hue-2: 35deg;
|
|
||||||
|
|
||||||
background-position: 0 -23em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 10em;
|
|
||||||
--glitch-hue-1: 39deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 24deg;
|
|
||||||
|
|
||||||
background-position: 0 -25em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-7;
|
|
||||||
animation-duration: 7000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -6em;
|
|
||||||
--glitch-hue-1: -46deg;
|
|
||||||
--glitch-x-2: -3em;
|
|
||||||
--glitch-hue-2: 18deg;
|
|
||||||
|
|
||||||
background-position: 0 -31em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-10;
|
|
||||||
animation-duration: 10000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -8em;
|
|
||||||
--glitch-hue-1: -37deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: 15deg;
|
|
||||||
|
|
||||||
background-position: 0 -37em;
|
|
||||||
height: 1em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -1em;
|
|
||||||
--glitch-hue-1: 16deg;
|
|
||||||
--glitch-x-2: 2em;
|
|
||||||
--glitch-hue-2: 25deg;
|
|
||||||
|
|
||||||
background-position: 0 -38em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 5em;
|
|
||||||
--glitch-hue-1: 32deg;
|
|
||||||
--glitch-x-2: 10em;
|
|
||||||
--glitch-hue-2: -3deg;
|
|
||||||
|
|
||||||
background-position: 0 -40em;
|
|
||||||
height: 2em;
|
|
||||||
animation-name: glitch-9;
|
|
||||||
animation-duration: 9000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 10em;
|
|
||||||
--glitch-hue-1: -26deg;
|
|
||||||
--glitch-x-2: 6em;
|
|
||||||
--glitch-hue-2: -45deg;
|
|
||||||
|
|
||||||
background-position: 0 -42em;
|
|
||||||
height: 4em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -7em;
|
|
||||||
--glitch-hue-1: -45deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 45deg;
|
|
||||||
|
|
||||||
background-position: 0 -46em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-5;
|
|
||||||
animation-duration: 5000ms;
|
|
||||||
animation-delay: 2s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 4em;
|
|
||||||
--glitch-hue-1: 40deg;
|
|
||||||
--glitch-x-2: -8em;
|
|
||||||
--glitch-hue-2: 29deg;
|
|
||||||
|
|
||||||
background-position: 0 -49em;
|
|
||||||
height: 3em;
|
|
||||||
animation-name: glitch-6;
|
|
||||||
animation-duration: 6000ms;
|
|
||||||
animation-delay: 1s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: -4em;
|
|
||||||
--glitch-hue-1: 26deg;
|
|
||||||
--glitch-x-2: -6em;
|
|
||||||
--glitch-hue-2: -3deg;
|
|
||||||
|
|
||||||
background-position: 0 -52em;
|
|
||||||
height: 6em;
|
|
||||||
animation-name: glitch-10;
|
|
||||||
animation-duration: 10000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
|
|
||||||
<div class="strip" style="
|
|
||||||
--glitch-x-1: 6em;
|
|
||||||
--glitch-hue-1: 43deg;
|
|
||||||
--glitch-x-2: -1em;
|
|
||||||
--glitch-hue-2: -1deg;
|
|
||||||
|
|
||||||
background-position: 0 -58em;
|
|
||||||
height: 4em;
|
|
||||||
animation-name: glitch-8;
|
|
||||||
animation-duration: 8000ms;
|
|
||||||
animation-delay: 0s;
|
|
||||||
"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
dangrubb.net
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="announcement">
|
|
||||||
<a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="blog-preview-container">
|
|
||||||
<div class="blog-preview" id="latestBlogPreview">
|
|
||||||
<p style="color: #9d9aa4;">Loading latest post...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="debug">
|
|
||||||
<div class="code"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Navigation Links (now pinned to bottom via CSS) -->
|
|
||||||
<nav class="bottom-nav">
|
|
||||||
<p>
|
|
||||||
<a target="_parent" href="https://ai.dangrubb.net">ai</a>
|
|
||||||
<a target="_parent" href="https://dangrubb.net/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="https://dangrubb.net/cv">cv</a>
|
|
||||||
<a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
|
|
||||||
</p>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- partial -->
|
|
||||||
<script src="./script.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,14 +1,14 @@
|
|||||||
// Album player for DGDN
|
// Album player for DGDN
|
||||||
|
|
||||||
const tracks = [
|
const tracks = [
|
||||||
{ title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" },
|
|
||||||
{ title: "Neigh V3", filename: "Neigh V3.flac" },
|
{ title: "Neigh V3", filename: "Neigh V3.flac" },
|
||||||
{ title: "On Ice", filename: "On Ice.flac" },
|
{ title: "On Ice", filename: "On Ice.flac" },
|
||||||
{ title: "Otish", filename: "Otish.flac" },
|
{ title: "Otish", filename: "Otish.flac" },
|
||||||
{ title: "Scan V2", filename: "Scan V2.flac" },
|
{ title: "Scan V2", filename: "Scan V2.flac" },
|
||||||
{ title: "balance v2", filename: "balance v2.flac" },
|
{ title: "balance v2", filename: "balance v2.flac" },
|
||||||
{ title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
|
{ title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
|
||||||
{ title: "held v3", filename: "held v3.flac" }
|
{ title: "held v3", filename: "held v3.flac" },
|
||||||
|
{ title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const audioPlayer = document.getElementById('audio-player');
|
const audioPlayer = document.getElementById('audio-player');
|
||||||
|
|||||||
166
script.js
166
script.js
@ -1,166 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
const random = (min, max) => {
|
|
||||||
return Math.round(Math.random() * (max - min)) + min;
|
|
||||||
};
|
|
||||||
const getKeyFrames = (name, glitchPercentageDuration, steps = 3, tick = 0.1) => {
|
|
||||||
const percentageStep = 100 / steps;
|
|
||||||
const keyframes = [];
|
|
||||||
// First keyframe
|
|
||||||
const baseKeys = [0];
|
|
||||||
for (let i = 1; i < steps; i++) {
|
|
||||||
const p = i * percentageStep;
|
|
||||||
baseKeys.push(p);
|
|
||||||
baseKeys.push(p + glitchPercentageDuration);
|
|
||||||
}
|
|
||||||
// Last keyframe
|
|
||||||
baseKeys.push(100);
|
|
||||||
keyframes.push({
|
|
||||||
keys: baseKeys,
|
|
||||||
css: {
|
|
||||||
transform: "none",
|
|
||||||
filter: "hue-rotate(0) drop-shadow(0 0 0 transparent)" // Hack to force animation in Safari
|
|
||||||
}
|
|
||||||
});
|
|
||||||
for (let i = 1; i < steps; i++) {
|
|
||||||
const p = i * percentageStep;
|
|
||||||
// Blue / red shadow
|
|
||||||
const color = Math.random() > 0.5 ? "rgb(255 0 0 / 0.1)" : "rgb(0 0 255 / 0.1)";
|
|
||||||
const shadowX = random(-4, 4);
|
|
||||||
const shadowY = random(-4, 4);
|
|
||||||
keyframes.push({
|
|
||||||
keys: [p + tick, p + glitchPercentageDuration - tick],
|
|
||||||
css: {
|
|
||||||
transform: `translateX(var(--glitch-x-${i}))`,
|
|
||||||
filter: `hue-rotate(var(--glitch-hue-${i})) drop-shadow(${shadowX}px ${shadowY}px 0 ${color})`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const css = keyframes
|
|
||||||
.map((keyframe) => {
|
|
||||||
const keys = keyframe.keys
|
|
||||||
.map((key) => `${key.toFixed(2)}%`)
|
|
||||||
.join(",\n ");
|
|
||||||
const content = Object.entries(keyframe.css)
|
|
||||||
.map(([key, value]) => ` ${key}: ${value};`)
|
|
||||||
.join("\n ");
|
|
||||||
return [keys, "{", content, "}"].join("\n ");
|
|
||||||
})
|
|
||||||
.join("\n\n ");
|
|
||||||
return `@keyframes ${name} {\n ${css}\n}`;
|
|
||||||
};
|
|
||||||
const getStripHTML = (top, stripHeight) => {
|
|
||||||
const duration = random(5, 10);
|
|
||||||
const name = `glitch-${duration}`;
|
|
||||||
return `<div
|
|
||||||
class="strip"
|
|
||||||
style="
|
|
||||||
--glitch-x-1: ${random(-10, 10)}em;
|
|
||||||
--glitch-hue-1: ${random(-50, 50)}deg;
|
|
||||||
--glitch-x-2: ${random(-10, 10)}em;
|
|
||||||
--glitch-hue-2: ${random(-50, 50)}deg;
|
|
||||||
|
|
||||||
background-position: 0 -${top}em;
|
|
||||||
height: ${stripHeight}em;
|
|
||||||
animation-name: ${name};
|
|
||||||
animation-duration: ${duration * 1000}ms;
|
|
||||||
animation-delay: ${random(0, 2)}s;
|
|
||||||
"
|
|
||||||
></div>`;
|
|
||||||
};
|
|
||||||
const getGlitchHTML = (height) => {
|
|
||||||
let i = 0;
|
|
||||||
const html = [];
|
|
||||||
while (1) {
|
|
||||||
const stripHeight = random(1, 6);
|
|
||||||
if (i + stripHeight < height) {
|
|
||||||
const strip = getStripHTML(i, stripHeight);
|
|
||||||
html.push(strip);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Last strip
|
|
||||||
const strip = getStripHTML(i, height - i);
|
|
||||||
html.push(strip);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
i = i + stripHeight;
|
|
||||||
}
|
|
||||||
return html;
|
|
||||||
};
|
|
||||||
/*
|
|
||||||
|
|
||||||
If you want to generate new CSS/HTML dinamically,
|
|
||||||
uncomment the code below.
|
|
||||||
|
|
||||||
*/
|
|
||||||
// const html = getGlitchHTML(62);
|
|
||||||
// // HTML
|
|
||||||
// const $glitch = document.querySelector(".bard") as HTMLElement;
|
|
||||||
// $glitch.innerHTML = html.join("\n");
|
|
||||||
// // CSS
|
|
||||||
// const css = [5,6,7,8,9,10].map((n) => {
|
|
||||||
// const glitchDurationMS = 500;
|
|
||||||
// const glitchPercentageDuration = (glitchDurationMS * 100) / (n * 1000);
|
|
||||||
// return getKeyFrames(`glitch-${n}`, glitchPercentageDuration);
|
|
||||||
// });
|
|
||||||
// // Add generated CSS to the page
|
|
||||||
// const $style = document.createElement("style");
|
|
||||||
// $style.innerHTML = css.join("\n");
|
|
||||||
// document.head.appendChild($style);
|
|
||||||
// // ----- Debug -------------- //
|
|
||||||
// // Not used for the animation //
|
|
||||||
// const $code = document.querySelector(".code");
|
|
||||||
// const escape = (html) => {
|
|
||||||
// return html
|
|
||||||
// .replace(/&/g, "&")
|
|
||||||
// .replace(/</g, "<")
|
|
||||||
// .replace(/>/g, ">")
|
|
||||||
// .replace(/"/g, """)
|
|
||||||
// .replace(/'/g, "'");
|
|
||||||
// };
|
|
||||||
// $code.innerHTML = `
|
|
||||||
// <div class="column">
|
|
||||||
// <div class="heading">HTML</div>
|
|
||||||
// <pre>${escape(html.join("\n\n"))}</pre>
|
|
||||||
// </div>
|
|
||||||
// <div class="column">
|
|
||||||
// <div class="heading">CSS</div>
|
|
||||||
// <pre>${css.join("\n\n")}</pre>
|
|
||||||
// </div>
|
|
||||||
// `;
|
|
||||||
|
|
||||||
// Load latest blog post preview
|
|
||||||
async function loadLatestBlogPost() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('./blog/posts.json');
|
|
||||||
const posts = await response.json();
|
|
||||||
|
|
||||||
if (posts.length === 0) {
|
|
||||||
document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">No blog posts yet.</p>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get the latest post (first in the array)
|
|
||||||
const latestPost = posts[0];
|
|
||||||
|
|
||||||
// Create the preview HTML
|
|
||||||
const previewHTML = `
|
|
||||||
<a href="./blog/#${latestPost.slug}" class="blog-preview-title">${latestPost.title}</a>
|
|
||||||
<div class="blog-preview-date">${new Date(latestPost.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>
|
|
||||||
<img src="${latestPost.image}" alt="${latestPost.title}" />
|
|
||||||
<p class="blog-preview-excerpt">${latestPost.excerpt}</p>
|
|
||||||
<a href="./blog/#${latestPost.slug}" class="blog-preview-link">Read more →</a>
|
|
||||||
`;
|
|
||||||
|
|
||||||
document.getElementById('latestBlogPreview').innerHTML = previewHTML;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error loading blog posts:', error);
|
|
||||||
document.getElementById('latestBlogPreview').innerHTML = '<p style="color: #9d9aa4;">Error loading blog posts.</p>';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load blog preview when page is ready
|
|
||||||
if (document.readyState === 'loading') {
|
|
||||||
document.addEventListener('DOMContentLoaded', loadLatestBlogPost);
|
|
||||||
} else {
|
|
||||||
loadLatestBlogPost();
|
|
||||||
}
|
|
||||||
BIN
src/audio/._DGDN
BIN
src/audio/._DGDN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Reference in New Issue
Block a user