dangrubbb/dangrubb.net
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

base: dangrubbb:c4823cf2beaef6327a0e73a45d7434a24ccff0aa
Branches Tags
dangrubbb:main dangrubbb:radiance dangrubbb:astro dangrubbb:crush dangrubbb:OpenClaw dangrubbb:dev
...
compare: dangrubbb:main
Branches Tags
dangrubbb:main dangrubbb:radiance dangrubbb:astro dangrubbb:crush dangrubbb:OpenClaw dangrubbb:dev

57 Commits
c4823cf2be ... main

Author SHA1 Message Date
dangrubbb
d347df105a Vector logo: SVG logo in loader/menu/blog header; #ec9770 favicon set (svg, ico, apple-touch-icon) on every page 2026-10-24 10:55:03 -04:00
dangrubbb
a919fa38cb orb: startup self-check — verify float framebuffers complete and the simulation produces a sane particle, else fall back to the static layout with a console warning 2026-10-24 10:34:17 -04:00
dangrubbb
4b9ec8e395 music: automatic light theme via prefers-color-scheme (colours moved to CSS variables; dark unchanged) 2026-10-24 10:25:01 -04:00
dangrubbb
837adf433d Merge branch 'radiance': new single-screen home page (WebGL particle orb), restyled blog 2026-10-24 10:19:50 -04:00
dangrubbb
25a97bf982 radiance: slash-terminated music/CV links so relative CSS resolves everywhere; Git menu links straight to the repo 2026-10-24 10:19:49 -04:00
dangrubbb
c98bab9868 radiance: link CV as /cv/ so its relative stylesheet resolves without relying on a redirect 2026-10-24 10:14:17 -04:00
dangrubbb
f2f6bf7708 radiance: perf — spawn point and corona birth cached in particle state, adaptive quality governor, debounced resize 2026-10-24 10:06:33 -04:00
dangrubbb
1645ed76ca radiance: simulation clock x1.5 (currents, spin, lifecycles, fluid) and cursor force +30% 2026-10-24 09:46:18 -04:00
dangrubbb
ea3f061211 radiance: 20% fewer particles drawn 20% bigger; stronger cursor reaction inside the orb; idle spin and currents +50% 2026-10-24 09:43:29 -04:00
dangrubbb
cfd081abcd radiance: corona sparks now have a lifecycle — born on the rim, drift outward, shrink and fizzle out; cursor pushes carry them, nothing pulls them back 2026-10-24 09:41:32 -04:00
dangrubbb
fcc1326e86 radiance: margin inside the glass rim; haloed corona sparks and glints (oversized soft-falloff points) 2026-10-24 09:36:45 -04:00
dangrubbb
aac2bdf2e6 radiance: snow-globe containment — tangential cursor push, glass wall, radius cap 2026-10-24 09:32:17 -04:00
dangrubbb
a900c5f750 radiance: shaded coral body + deeper right rim, red mass weighted to lower latitudes, bigger flakes, crisper haloed glints and corona 2026-10-24 09:29:07 -04:00
dangrubbb
384cb7f7b8 radiance: 3D particle sim — curl-noise currents, ribbon density, depth scatter on stir, rolling respawn; ~100k particles 2026-10-24 09:22:12 -04:00
dangrubbb
d4bfc88be7 radiance: match reference colors (asymmetric pink sky, saturated orange base, translucent pink-rimmed shell); ambient curl-noise shimmer 2026-10-22 20:29:47 -04:00
dangrubbb
0cd5d4c27c radiance: pointer/touch-reactive particles 
Stable-fluids solver (velocity + dye) stirred by mouse/touch drives a GPU
spring system over all ~65k particles: they swirl with the flow, heat up
and flare while disturbed, then spring home. The sky shader leans and
washes with the flow. WebGL2; falls back to the static orb without float
render targets, and to a CSS orb without WebGL2.
 2026-10-22 20:23:09 -04:00
dangrubbb
20d848623f radiance: Private Search menu item (search.dangrubb.net); restyle blog with radiance colors and fonts 2026-10-22 20:10:52 -04:00
dangrubbb
ecaa3bbf6a radiance: new home page — WebGL orb hero, DG cube loader, white dropdown menu 
Replaces the Crush landing page with a single-screen hero (no scroll):
gradient sky, particle orb with corona, 'Welcome to dangrubb.net' title,
top-left DG logo and a numbered menu. Raw WebGL (no three.js), self-hosted
Instrument Sans + Geist Mono. ~10 KB of JS.
 2026-10-22 20:00:53 -04:00
dangrubbb
3a662c8498 CV: year-only dates for Forterra and Blue Tech 2026-09-18 19:52:48 -04:00
dangrubbb
ba11514dc9 CV: Blue Tech ends August 2026; correct stale ITG date on More Info page 2026-09-18 19:46:56 -04:00
dangrubbb
a68287e5af Add Forterra Service Desk Tech to CV experience 2026-09-18 19:40:00 -04:00
dangrubbb
ca85d297f3 Merge branch 'astro' 2026-05-31 15:18:21 -04:00
dangrubbb
bb65104fa5 Reorder DGDN tracks: move Dan Beat (bonus) to last 2026-05-31 15:11:06 -04:00
dangrubbb
ff2a284e64 Merge branch 'astro' 2026-05-31 09:18:17 -04:00
dangrubbb
7796792517 checkpoint: CV restored to original standalone files (bypass Astro) 2026-05-31 09:13:52 -04:00
dangrubbb
b3eabbd98f checkpoint: blog rethemed to crush (teal logo, white bg, teal accents) 2026-05-31 09:01:51 -04:00
dangrubbb
b38cd8ba52 checkpoint: music link, mobile nav 2-row layout, logo scaling fixes 2026-05-31 08:56:19 -04:00
dangrubbb
c264a2e979 checkpoint: splatter layout with centered logo, one-viewport fit, mobile nav rows 2026-05-31 08:33:11 -04:00
dangrubbb
bdd454e706 Merge remote-tracking branch 'origin/astro' 2026-04-23 21:52:51 -04:00
dangrubbb
de8ba59d59 Merge remote-tracking branch 'astro/astro' 
# Conflicts:
#	.gitignore
 2026-04-23 21:29:57 -04:00
dangrubbb
bd00d84ba4 Seperate CSS for music 2026-02-28 22:32:58 +00:00
dangrubbb
e17bfe884c Add thin yellow box outline around announcement 
- Add border and padding to .announcement class
- Makes 'EXCLUSIVE: Leaked mixtape' text stand out
 2026-02-28 22:10:02 +00:00
dangrubbb
f824e30dc0 Merge pull request 'Blog JSON system' (#1) from OpenClaw into main 
Reviewed-on: http://pi.dangrubb.net/dangit/dangrubbb/dangrubb.net/pulls/1
 2026-02-28 21:57:54 +00:00
dangrubbb
c1ab8e831b Minor Manual Fixes to Lobster's code 2026-02-28 16:52:01 -05:00
dangrubbb
447265f7ed Fix: Center blog post content properly 
- Use flexbox on blog-post container to center all children
- Set max-width on post container to constrain width
- Ensure content paragraph takes full width and centers text
 2026-02-28 16:45:00 -05:00
dangrubbb
e5b6d785ed Fix: Image path for homepage preview and center blog content 
- Use absolute path for image (/blog/src/img/...) so homepage preview loads correctly
- Center blog post content with max-width for better readability
 2026-02-28 16:42:56 -05:00
dangrubbb
73f6c462f8 Make blog page dynamic using JSON data 
- Blog posts now load from blog/posts.json
- Create blog/script.js to dynamically render posts
- Each post displays: title, date, content, image
- Support hash-based navigation to specific posts
- Updated blog/index.html to load posts dynamically
- Added styling for blog posts and containers
- First post is 'Status' matching the original content
 2026-02-28 16:38:42 -05:00
dangrubbb
a965274a31 Add dynamic blog preview to homepage 
- Create blog/posts.json for managing blog post metadata
- Add blog preview box (max 1/3 screen width) to homepage
- Fetch latest post dynamically with image and excerpt
- Updates automatically when new posts added to JSON
- Styled to fit no-scroll homepage layout
- Link to full blog page for each post
 2026-02-28 16:30:19 -05:00
dangrubbb
7e8727d1b5 Fixing OpenClaw's CSS formatting 2026-02-28 15:22:06 +00:00
dangrubbb
2293a3f566 Fixing OpenClaw's formatting 2026-02-28 15:21:43 +00:00
dangrubbb
a38d756f4b Add music platform with DGDN album player 
- Create /music landing page with artist grid
- Add /music/Darnea artist page with album listing
- Build /music/Darnea/DGDN album player with clickable tracklist
- Auto-play next track on completion
- Dangrubb-branded styling with cyan accent colors
- FLAC player pulls from /src/audio/DGDN
- Move landing page links to bottom with yellow announcement box
 2026-02-28 15:20:27 +00:00
dangrubbb
025fe8a80b Updated blog with image 2025-09-25 20:55:52 -04:00
dangrubbb
7b70740e46 Updated blog 2025-09-21 09:01:55 -04:00
dangrubbb
c5a6b90d7e Changed Blog Location 2025-09-21 08:32:48 -04:00
dangrubbb
b93c70542e Updated CV for 9/2025 2025-09-21 08:07:58 -04:00
dangrubbb
9b24e45c65 updated CV references 2025-06-13 03:45:08 -04:00
dangrubbb
5f32d340fd updated scaling for mobile 2025-06-12 12:07:19 -04:00
dangrubbb
f2db5f197a Initial CV PDF commit 2025-06-12 02:51:19 +01:00
dangrubbb
ab16fd6b00 Initial CV img commit 2025-06-12 02:50:46 +01:00
dangrubbb
8ecf3b38af CV js commit to js folder 2025-06-12 02:49:15 +01:00
dangrubbb
0806ee7a55 revert c64341ada9 
revert Initial CV js commit
 2025-06-12 02:48:32 +01:00
dangrubbb
c64341ada9 Initial CV js commit 2025-06-12 02:47:03 +01:00
dangrubbb
3fa5a4ab4e Initial CV styles commit 2025-06-12 02:46:31 +01:00
dangrubbb
a70f22dbfd Initial CV commit 2025-06-12 02:45:59 +01:00
dangrubbb
5dbb99d505 Upload files to "/" 
Created Custom 404 page
 2025-06-12 02:29:23 +01:00
dangrubbb
b01bc4a9a3 initial img commit 2025-06-12 02:26:18 +01:00
dangrubbb
b85e5f281b Upload files to "/" 
Initial Commit
 2025-06-12 02:25:29 +01:00
89 changed files with 6531 additions and 877 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
deploy_dangrubb.net.sh
node_modules/ node_modules/
dist/ dist/
.astro/ .astro/

255
blog/index.html Normal file
View File

@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>dangrubb.net</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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>

11
blog/posts.json Normal file
View File

@ -0,0 +1,11 @@
[
{
"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"
}
]

53
blog/script.js Normal file
View File

@ -0,0 +1,53 @@
"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' });
}
}
});

BIN
blog/src/img/CannotConnect.JPEG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 MiB

290
blog/style.css Normal file
View File

File diff suppressed because one or more lines are too long

39
custom_404.html Normal file
View File

@ -0,0 +1,39 @@
<!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>

BIN
cv/assets/img/107.175.222.134 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
cv/assets/img/dangrubb.net Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
cv/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
cv/assets/img/perfil-example.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 381 KiB

BIN
cv/assets/pdf/DanGrubbResume.pdf Normal file
View File

Binary file not shown.

BIN
cv/assets/pdf/ResumeCv.pdf Normal file
View File

Binary file not shown.

414
cv/index.html Normal file
View File

@ -0,0 +1,414 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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">Service Desk Tech</h3>
<span class="experience__company"
>2026 to Present | Forterra</span>
<p class="experience__description">
<ul class="experience__description">
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</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">IT Consultant and Support Technician</h3>
<span class="experience__company"
>2025 to 2026 | 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 Normal file
View File

File diff suppressed because one or more lines are too long

179
cv/js/main.js Normal file
View 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);

385
cv/moreInformation.html Normal file
View File

@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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">Service Desk Tech</h3>
<span class="experience__company"
>2026 to Present | Forterra</span>
<p class="experience__description">
<ul class="experience__description">
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</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">IT Consultant and Support Technician</h3>
<span class="experience__company"
>2025 to 2026 | 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"></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
cv/styles/index.css Normal file
View 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;
}
}

273
index.html Normal file
View File

@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>dangrubb.net</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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>

20
package-lock.json generated
View File

@ -8,6 +8,8 @@
"name": "dangrubb-astro", "name": "dangrubb-astro",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@fontsource/geist-mono": "^5.3.0",
"@fontsource/instrument-sans": "^5.3.0",
"astro": "^6.1.9" "astro": "^6.1.9"
}, },
"engines": { "engines": {
@ -593,6 +595,24 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/@fontsource/geist-mono": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource/geist-mono/-/geist-mono-5.3.0.tgz",
"integrity": "sha512-UtJ1BBBCVpMYdIcW7nEB45UAoAw5M53ZXs2t0ciPW+IokuAAIc56M8+kW5tXbRJCTpDw4XTtU7proT6NdQAHTg==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@fontsource/instrument-sans": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@fontsource/instrument-sans/-/instrument-sans-5.3.0.tgz",
"integrity": "sha512-QwXc4hb/px3XvSPS2CPAOgey8nyrQFxgxrmXQQ+pN+P51hKdAcchxpg8rSbjANFfPu6VKXhDqkVDucXMZ9CM5g==",
"license": "OFL-1.1",
"funding": {
"url": "https://github.com/sponsors/ayuhito"
}
},
"node_modules/@img/colour": { "node_modules/@img/colour": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz", "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",

2
package.json
View File

@ -12,6 +12,8 @@
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@fontsource/geist-mono": "^5.3.0",
"@fontsource/instrument-sans": "^5.3.0",
"astro": "^6.1.9" "astro": "^6.1.9"
} }
} }

BIN
public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
public/cv/assets/img/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 15 KiB

414
public/cv/index.html Normal file
View File

@ -0,0 +1,414 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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">Service Desk Tech</h3>
<span class="experience__company"
>2026 to Present | Forterra</span>
<p class="experience__description">
<ul class="experience__description">
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</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">IT Consultant and Support Technician</h3>
<span class="experience__company"
>2025 to 2026 | 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
View 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);

385
public/cv/moreInformation.html Normal file
View File

@ -0,0 +1,385 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<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">Service Desk Tech</h3>
<span class="experience__company"
>2026 to Present | Forterra</span>
<p class="experience__description">
<ul class="experience__description">
<li>• Deliver customer-focused IT support as part of Forterra’s Enterprise Services team, helping maintain reliable day-to-day operations across Linux, Windows, macOS, and Microsoft 365 environments.</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">IT Consultant and Support Technician</h3>
<span class="experience__company"
>2025 to 2026 | 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"></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
View 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/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 655 B

After

Width:  |  Height:  |  Size: 15 KiB

10
public/favicon.svg
View File

@ -1,9 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 460 460">
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" /> <path fill="#EC9770" stroke="#EC9770" stroke-width="14" stroke-linejoin="miter" stroke-miterlimit="6" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
<style>
path { fill: #000; }
@media (prefers-color-scheme: dark) {
path { fill: #FFF; }
}
</style>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 749 B

After

Width:  |  Height:  |  Size: 1.4 KiB

8
public/music/Darnea/DGDN/index.html
View File

@ -4,14 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DGDN - Darnea | dangrubb.net</title> <title>DGDN - Darnea | dangrubb.net</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="../../music.css"> <link rel="stylesheet" href="../../music.css">
<link rel="stylesheet" href="./player.css"> <link rel="stylesheet" href="./player.css">
</head> </head>
<body> <body>
<div class="music-container"> <div class="music-container">
<div class="music-header"> <div class="music-header">
<h1><a href="/music">Music</a> / <a href="/music/Darnea">Darnea</a> / DGDN</h1> <h1><a href="/music/">Music</a> / <a href="/music/Darnea/">Darnea</a> / DGDN</h1>
</div> </div>
<div class="album-player"> <div class="album-player">
@ -39,7 +41,7 @@
</div> </div>
<div class="music-footer"> <div class="music-footer">
<p><a href="/music/Darnea">← back to artist</a></p> <p><a href="/music/Darnea/">← back to artist</a></p>
</div> </div>
</div> </div>

38
public/music/Darnea/DGDN/player.css
View File

@ -9,7 +9,7 @@
gap: 30px; gap: 30px;
margin-bottom: 40px; margin-bottom: 40px;
padding: 30px; padding: 30px;
background: rgba(107, 225, 233, 0.05); background: rgb(var(--accent-rgb) / 0.05);
border-radius: 8px; border-radius: 8px;
align-items: center; align-items: center;
} }
@ -23,18 +23,18 @@
.album-info h2 { .album-info h2 {
margin: 0 0 5px 0; margin: 0 0 5px 0;
font-size: 2rem; font-size: 2rem;
color: #9d9aa4; color: var(--text);
} }
.album-info .artist-name { .album-info .artist-name {
margin: 0 0 5px 0; margin: 0 0 5px 0;
color: #6be1e9; color: var(--accent);
font-size: 1.1rem; font-size: 1.1rem;
} }
.album-info .album-desc { .album-info .album-desc {
margin: 0; margin: 0;
color: #6be1e9; color: var(--accent);
font-size: 0.9rem; font-size: 0.9rem;
font-style: italic; font-style: italic;
} }
@ -43,8 +43,8 @@
.now-playing { .now-playing {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
background: rgba(107, 225, 233, 0.1); background: rgb(var(--accent-rgb) / 0.1);
border: 1px solid rgba(107, 225, 233, 0.3); border: 1px solid rgb(var(--accent-rgb) / 0.3);
border-radius: 6px; border-radius: 6px;
margin-bottom: 20px; margin-bottom: 20px;
min-height: 60px; min-height: 60px;
@ -55,11 +55,11 @@
.now-playing p { .now-playing p {
margin: 0; margin: 0;
color: #9d9aa4; color: var(--text);
} }
.now-playing.playing p { .now-playing.playing p {
color: #6be1e9; color: var(--accent);
font-weight: bold; font-weight: bold;
} }
@ -67,7 +67,7 @@
#audio-player { #audio-player {
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 30px;
accent-color: #6be1e9; accent-color: var(--accent);
} }
/* Tracklist */ /* Tracklist */
@ -78,7 +78,7 @@
.tracklist h3 { .tracklist h3 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
font-size: 1.3rem; font-size: 1.3rem;
color: #9d9aa4; color: var(--text);
} }
.tracklist ol { .tracklist ol {
@ -90,29 +90,29 @@
.tracklist li { .tracklist li {
padding: 12px; padding: 12px;
margin-bottom: 8px; margin-bottom: 8px;
background: rgba(157, 154, 164, 0.05); background: rgb(var(--text-rgb) / 0.05);
border: 1px solid rgba(107, 225, 233, 0.2); border: 1px solid rgb(var(--accent-rgb) / 0.2);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
color: #9d9aa4; color: var(--text);
} }
.tracklist li:hover { .tracklist li:hover {
background: rgba(107, 225, 233, 0.1); background: rgb(var(--accent-rgb) / 0.1);
border-color: rgba(107, 225, 233, 0.5); border-color: rgb(var(--accent-rgb) / 0.5);
} }
.tracklist li.active { .tracklist li.active {
background: rgba(107, 225, 233, 0.2); background: rgb(var(--accent-rgb) / 0.2);
border-color: #6be1e9; border-color: var(--accent);
color: #6be1e9; color: var(--accent);
font-weight: bold; font-weight: bold;
} }
.track-duration { .track-duration {
float: right; float: right;
color: #6be1e9; color: var(--accent);
font-size: 0.9rem; font-size: 0.9rem;
} }

4
public/music/Darnea/DGDN/player.js
View File

@ -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');

10
public/music/Darnea/index.html
View File

@ -4,13 +4,15 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Darnea - dangrubb.net</title> <title>Darnea - dangrubb.net</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="../music.css"> <link rel="stylesheet" href="../music.css">
</head> </head>
<body> <body>
<div class="music-container"> <div class="music-container">
<div class="music-header"> <div class="music-header">
<h1><a href="/music">Music</a> / Darnea</h1> <h1><a href="/music/">Music</a> / Darnea</h1>
</div> </div>
<div class="artist-detail"> <div class="artist-detail">
@ -21,13 +23,13 @@
<div class="albums-grid"> <div class="albums-grid">
<div class="album-card"> <div class="album-card">
<div class="album-cover">🔥</div> <div class="album-cover">🔥</div>
<h3><a href="/music/Darnea/DGDN">DGDN</a></h3> <h3><a href="/music/Darnea/DGDN/">DGDN</a></h3>
<p class="album-meta">8 tracks</p> <p class="album-meta">8 tracks</p>
</div> </div>
</div> </div>
<div class="music-footer"> <div class="music-footer">
<p><a href="/music">← back to music</a></p> <p><a href="/music/">← back to music</a></p>
</div> </div>
</div> </div>
</body> </body>

6
public/music/index.html
View File

@ -4,7 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>dangrubb.net Music</title> <title>dangrubb.net Music</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="./music.css"> <link rel="stylesheet" href="./music.css">
</head> </head>
<body> <body>
@ -16,7 +18,7 @@
<div class="artists-grid"> <div class="artists-grid">
<div class="artist-card"> <div class="artist-card">
<div class="artist-cover">🎤</div> <div class="artist-cover">🎤</div>
<h2><a href="/music/Darnea">Darnea</a></h2> <h2><a href="/music/Darnea/">Darnea</a></h2>
<p class="artist-meta">1 album</p> <p class="artist-meta">1 album</p>
</div> </div>
</div> </div>

69
public/music/music.css
View File

@ -1,9 +1,38 @@
/* --- THEME ---
Dark is the default; a light palette switches on automatically with the visitor's system setting. */
:root {
color-scheme: dark light;
--bg: #0d0a14;
--text: #9d9aa4;
--accent: #6be1e9;
--text-rgb: 157 154 164;
--accent-rgb: 107 225 233;
--warn: #ffff00;
--panel-a: rgb(13 10 20 / 0.6);
--panel-b: rgb(50 30 80 / 0.3);
--shadow: rgb(0 0 0 / 0.4);
}
@media (prefers-color-scheme: light) {
:root {
--bg: #faf6f2;
--text: #4a4553;
--accent: #0a727c;
--text-rgb: 74 69 83;
--accent-rgb: 10 114 124;
--warn: #8a5a00;
--panel-a: rgb(255 255 255 / 0.7);
--panel-b: rgb(250 214 190 / 0.35);
--shadow: rgb(74 69 83 / 0.18);
}
}
/* --- BASE STYLES (Merged from style.css) --- */ /* --- BASE STYLES (Merged from style.css) --- */
body { body {
background: #0d0a14; background: var(--bg);
padding: 40px 20px; padding: 40px 20px;
font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
color: #9d9aa4; color: var(--text);
/* Fixed the no-scroll issue here: */ /* Fixed the no-scroll issue here: */
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
@ -14,7 +43,7 @@ body {
} }
a { a {
color: #6be1e9; color: var(--accent);
text-decoration: none; text-decoration: none;
} }
@ -35,19 +64,19 @@ a:visited {
.music-header { .music-header {
text-align: center; text-align: center;
margin-bottom: 50px; margin-bottom: 50px;
border-bottom: 2px solid rgba(107, 225, 233, 0.3); border-bottom: 2px solid rgb(var(--accent-rgb) / 0.3);
padding-bottom: 20px; padding-bottom: 20px;
} }
.music-header h1 { .music-header h1 {
margin: 0; margin: 0;
font-size: 2rem; font-size: 2rem;
color: #9d9aa4; color: var(--text);
font-weight: bold; font-weight: bold;
} }
.music-header h1 a { .music-header h1 a {
color: #6be1e9; color: var(--accent);
} }
/* Artists/Albums Grid */ /* Artists/Albums Grid */
@ -63,16 +92,16 @@ a:visited {
.album-card { .album-card {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
background: rgba(157, 154, 164, 0.05); background: rgb(var(--text-rgb) / 0.05);
border: 1px solid rgba(107, 225, 233, 0.2); border: 1px solid rgb(var(--accent-rgb) / 0.2);
border-radius: 8px; border-radius: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.artist-card:hover, .artist-card:hover,
.album-card:hover { .album-card:hover {
background: rgba(107, 225, 233, 0.1); background: rgb(var(--accent-rgb) / 0.1);
border-color: rgba(107, 225, 233, 0.5); border-color: rgb(var(--accent-rgb) / 0.5);
transform: translateY(-4px); transform: translateY(-4px);
} }
@ -86,12 +115,12 @@ a:visited {
.album-card h3 { .album-card h3 {
margin: 10px 0; margin: 10px 0;
font-size: 1.3rem; font-size: 1.3rem;
color: #9d9aa4; color: var(--text);
} }
.artist-meta, .artist-meta,
.album-meta { .album-meta {
color: #6be1e9; color: var(--accent);
font-size: 0.9rem; font-size: 0.9rem;
margin: 0; margin: 0;
} }
@ -101,7 +130,7 @@ a:visited {
text-align: center; text-align: center;
margin: 40px 0; margin: 40px 0;
padding: 40px 20px; padding: 40px 20px;
background: rgba(107, 225, 233, 0.05); background: rgb(var(--accent-rgb) / 0.05);
border-radius: 8px; border-radius: 8px;
} }
@ -113,7 +142,7 @@ a:visited {
.artist-detail h2 { .artist-detail h2 {
margin: 0; margin: 0;
font-size: 2.5rem; font-size: 2.5rem;
color: #9d9aa4; color: var(--text);
} }
/* Footer / Bottom Nav */ /* Footer / Bottom Nav */
@ -121,7 +150,7 @@ a:visited {
text-align: center; text-align: center;
margin-top: 60px; margin-top: 60px;
padding: 20px 0; padding: 20px 0;
border-top: 2px solid rgba(107, 225, 233, 0.3); border-top: 2px solid rgb(var(--accent-rgb) / 0.3);
} }
.bottom-nav { .bottom-nav {
@ -160,7 +189,7 @@ a:visited {
.announcement { .announcement {
margin: 20px auto; margin: 20px auto;
display: block; display: block;
border: 1px solid #ffff00; border: 1px solid var(--warn);
padding: 10px 15px; padding: 10px 15px;
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
@ -168,7 +197,7 @@ a:visited {
} }
.announcement a { .announcement a {
color: #ffff00; color: var(--warn);
font-weight: bold; font-weight: bold;
} }
@ -181,11 +210,11 @@ a:visited {
} }
.blog-preview { .blog-preview {
border: 1px solid rgba(155, 169, 180, 0.3); border: 1px solid rgb(var(--text-rgb) / 0.3);
border-radius: 4px; border-radius: 4px;
padding: 15px; padding: 15px;
background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3)); background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); box-shadow: 0 4px 12px var(--shadow);
} }
/* --- RESPONSIVE MEDIA QUERIES --- */ /* --- RESPONSIVE MEDIA QUERIES --- */

BIN
public/src/img/DanGrubbLogoDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

3
public/src/img/DanGrubbLogoDark.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 444">
<path fill="#090B11" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
public/src/img/DanGrubbLogoWhite.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 444">
<path fill="#FFFFFF" d="M5.59 376.00 L72.55 277.00 L105.59 277.00 L53.36 349.85 L70.87 349.85 C92.57 349.85 115.47 349.34 134.74 340.19 C154.00 331.04 169.62 313.53 180.23 294.15 C190.84 274.77 196.44 253.52 196.03 231.92 C195.62 210.31 189.19 188.34 178.01 169.66 C166.83 150.99 150.90 135.61 132.45 123.77 C113.99 111.93 93.02 105.30 70.92 105.30 L25.89 105.30 L6.10 80.00 L70.57 80.00 C96.81 80.00 122.87 86.78 145.14 100.38 C167.40 113.98 185.87 132.97 198.54 155.81 C211.21 178.64 218.08 205.34 218.28 231.30 C218.49 257.27 212.03 282.51 199.70 305.82 C187.36 329.13 169.17 350.52 146.44 362.36 C123.71 374.20 96.46 376.00 70.41 376.00 L5.59 376.00 Z M438.41 376.00 L371.45 277.00 L338.41 277.00 L390.64 349.85 L373.13 349.85 C351.43 349.85 328.53 349.34 309.26 340.19 C290.00 331.04 274.38 313.53 263.77 294.15 C253.16 274.77 247.56 253.52 247.97 231.92 C248.38 210.31 254.81 188.34 265.99 169.66 C277.17 150.99 293.10 135.61 311.55 123.77 C330.01 111.93 350.98 105.30 373.08 105.30 L418.11 105.30 L437.90 80.00 L373.43 80.00 C347.19 80.00 321.13 86.78 298.86 100.38 C276.60 113.98 258.13 132.97 245.46 155.81 C232.79 178.64 225.92 205.34 225.72 231.30 C225.51 257.27 231.97 282.51 244.30 305.82 C256.64 329.13 274.83 350.52 297.56 362.36 C320.29 374.20 347.54 376.00 373.59 376.00 L438.41 376.00 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/src/img/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/src/img/pack-splatter-padded.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/src/img/pack-splatter.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 311 KiB

After

Width:  |  Height:  |  Size: 636 KiB

166
script.js Normal file
View File

@ -0,0 +1,166 @@
"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, "&amp;")
// .replace(/</g, "&lt;")
// .replace(/>/g, "&gt;")
// .replace(/"/g, "&quot;")
// .replace(/'/g, "&#039;");
// };
// $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 Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Dan Beat (bonus).flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Dan Beat (bonus).flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Neigh V3.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Neigh V3.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._On Ice.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._On Ice.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Otish.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Otish.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Scan V2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._Scan V2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._balance v2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._balance v2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._eh ee uhn V2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._eh ee uhn V2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._held v3.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/._held v3.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Dan Beat (bonus).flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Dan Beat (bonus).flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Neigh V3.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Neigh V3.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/On Ice.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/On Ice.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Otish.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Otish.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Scan V2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/Scan V2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/balance v2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/balance v2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/eh ee uhn V2.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/eh ee uhn V2.flac.asd Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/held v3.flac Normal file
View File

Binary file not shown.

BIN
src/audio/DGDN/held v3.flac.asd Normal file
View File

Binary file not shown.

BIN
src/img/DanGrubbLogoWhite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

4
src/layouts/Base.astro
View File

@ -8,7 +8,9 @@ const { title } = Astro.props;
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title> <title>{title}</title>
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head> </head>
<body> <body>
<slot /> <slot />

4
src/layouts/CVBase.astro
View File

@ -8,7 +8,9 @@ const { title } = Astro.props;
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title> <title>{title}</title>
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
</head> </head>
<body> <body>

4
src/layouts/CrushBase.astro
View File

@ -8,7 +8,9 @@ const { title } = Astro.props;
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title> <title>{title}</title>
<link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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"> <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Barlow:wght@400;600;700&display=swap" rel="stylesheet">

44
src/layouts/RadianceBase.astro Normal file
View File

@ -0,0 +1,44 @@
---
import '@fontsource/instrument-sans/latin-400.css';
import '@fontsource/instrument-sans/latin-500.css';
import '@fontsource/geist-mono/latin-500.css';
const { title } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<meta name="theme-color" content="#fff6f4" />
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<slot />
</body>
</html>
<style is:global>
:root {
--ink: 9 11 17;
--ease: cubic-bezier(0.33, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
background-color: #f9d9b3;
background-image:
radial-gradient(115% 80% at 50% 30%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
linear-gradient(180deg, #fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 55%, #f3c19e 78%, #ee9972 92%, #ef815c 100%);
background-attachment: fixed;
color: rgb(var(--ink) / 0.8);
font-family: 'Instrument Sans', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
</style>

146
src/pages/blog/index.astro
View File

@ -1,22 +1,25 @@
--- ---
import Base from '../../layouts/Base.astro'; import RadianceBase from '../../layouts/RadianceBase.astro';
import GlitchBard from '../../components/GlitchBard.astro';
import posts from '../../data/posts.json'; import posts from '../../data/posts.json';
--- ---
<Base title="dangrubb.net/blog"> <RadianceBase title="dangrubb.net/blog">
<div class="page"> <div class="page">
<GlitchBard /> <header class="blog-header">
<a class="header-logo" href="/">
<p class="page-title">dangrubb.net/blog</p> <span class="sr-only">dangrubb.net home</span>
<p class="back-link"><a href="/">← back to home</a></p> <img src="/src/img/DanGrubbLogoDark.svg" alt="" width="64" height="64" />
</a>
<h1 class="page-title">Blog</h1>
<p class="back-link"><a href="/">← Home</a></p>
</header>
<div class="blogs-container"> <div class="blogs-container">
{posts.map(post => ( {posts.map(post => (
<article class="blog-post" id={post.slug}> <article class="blog-post" id={post.slug}>
<h2 class="blog-post-title">{post.title}</h2> <h2 class="blog-post-title">{post.title}</h2>
<div class="blog-post-date"> <div class="blog-post-date">
{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })} {new Date(post.date + 'T12:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
</div> </div>
<div class="blog-post-content" set:html={post.content} /> <div class="blog-post-content" set:html={post.content} />
<div class="blog-post-image"> <div class="blog-post-image">
@ -25,83 +28,100 @@ import posts from '../../data/posts.json';
</article> </article>
))} ))}
</div> </div>
<footer class="blog-footer">
<a href="/">← Home</a>
</footer>
</div> </div>
</Base> </RadianceBase>
<style> <style>
@import '../../styles/bard.css'; .page { min-height: 100vh; display: flex; flex-direction: column; }
.sr-only {
.page { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
padding: 20px 20px 40px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
min-height: 100vh;
box-sizing: border-box;
} }
.page-title, .back-link { .blog-header { text-align: center; padding: 28px 20px 8px; }
margin: 20px auto 0; .header-logo { display: inline-block; margin-bottom: 18px; }
max-width: 400px; .header-logo img { width: 56px; height: 56px; }
text-align: center;
line-height: 1.3; .page-title {
font-size: 0.875rem; margin: 0 0 12px;
font-weight: 400;
font-size: clamp(30px, 3.34vw, 56px);
line-height: 1;
letter-spacing: -0.03em;
} }
.back-link, .blog-footer a {
font-family: 'Geist Mono', ui-monospace, monospace;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.back-link { margin: 0; }
.back-link a, .blog-footer a {
position: relative; display: inline-block; overflow: hidden;
}
.back-link a::after, .blog-footer a::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
}
.back-link a:hover::after, .blog-footer a:hover::after { transform: none; }
.blogs-container { .blogs-container {
margin: 40px auto 0; margin: 32px auto;
max-width: 65em; max-width: 700px;
width: 100%; width: 100%;
padding: 0 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.blog-post { .blog-post {
margin: 40px auto; margin-bottom: 32px;
padding: 20px; padding: 28px;
border: 1px solid rgba(155, 169, 180, 0.2); background: #fff;
border-radius: 4px;
background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
scroll-margin-top: 100px;
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
} }
.blog-post-title { .blog-post-title {
color: #ffff00; margin: 0 0 8px;
font-weight: bold; font-weight: 500;
font-size: 1.8rem; font-size: 1.6rem;
letter-spacing: -0.03em;
text-align: center; text-align: center;
} }
.blog-post-date {
color: #aa95bd; .blog-post-date {
font-size: 0.9rem; font-family: 'Geist Mono', ui-monospace, monospace;
text-align: center; font-weight: 500;
margin-bottom: 20px; font-size: 12px;
} text-transform: uppercase;
.blog-post-content { letter-spacing: 0.02em;
color: #9d9aa4; text-align: center;
font-size: 0.95rem; margin-bottom: 22px;
line-height: 1.6; padding-bottom: 14px;
text-align: center; border-bottom: 1px solid rgb(var(--ink) / 0.15);
} color: rgb(var(--ink) / 0.6);
.blog-post-content :global(p) { }
margin: 0 0 15px;
} .blog-post-content { font-size: 1rem; line-height: 1.55; text-align: center; }
.blog-post-image { .blog-post-content :global(p) { margin: 0 0 15px; }
display: flex; .blog-post-content :global(a) { text-decoration: underline; text-underline-offset: 3px; }
justify-content: center;
margin-top: 20px; .blog-post-image { display: flex; justify-content: center; margin-top: 20px; }
} .blog-post-image img { max-width: 100%; height: auto; max-height: 60vh; }
.blog-post-image img {
max-width: 100%; .blog-footer { text-align: center; padding: 16px 20px 44px; margin-top: auto; }
height: auto;
max-height: 60vh;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
@media (max-width: 768px) { @media (max-width: 768px) {
.page { padding: 20px 10px 40px; } .blogs-container { padding: 0 12px; }
.page-title, .back-link { font-size: 0.8rem; max-width: 320px; } .blog-post { padding: 18px; margin-bottom: 20px; }
.blog-post { padding: 15px; margin: 20px auto; } .blog-post-title { font-size: 1.35rem; }
.blog-post-title { font-size: 1.4rem; }
} }
</style> </style>

324
src/pages/cv/index.astro
View File

@ -1,324 +0,0 @@
---
import CVBase from '../../layouts/CVBase.astro';
---
<CVBase title="Dan Grubb CV">
<div class="cv-page">
<!-- HEADER -->
<header class="l-header" id="header">
<nav class="nav bd-container">
<a href="#" class="nav__logo">Dan</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link active-link"><i class="bx bx-home nav__icon"></i>Home</a></li>
<li class="nav__item"><a href="#profile" class="nav__link"><i class="bx bx-user nav__icon"></i>Profile</a></li>
<li class="nav__item"><a href="#education" class="nav__link"><i class="bx bx-book nav__icon"></i>Education</a></li>
<li class="nav__item"><a href="#skills" class="nav__link"><i class="bx bx-receipt nav__icon"></i>Skills</a></li>
<li class="nav__item"><a href="#experiencie" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Experience</a></li>
<li class="nav__item"><a href="#certificates" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Certificates</a></li>
<li class="nav__item"><a href="#references" class="nav__link"><i class="bx bx-link-external nav__icon"></i>References</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle"><i class="bx bx-grid-alt nav__icon"></i></div>
</nav>
</header>
<main class="l-main bd-container">
<div class="resume" id="area-cv">
<div class="resume__left">
<!-- HOME -->
<section class="home" id="home">
<div class="home__container section bd-grid">
<div class="home__data bd-grid">
<img src="/cv/assets/img/perfil-example.jpg" alt="perfil" class="home__img" />
<h1 class="home__title">Dan <b>Grubb</b></h1>
<h3 class="home__profession">IT Man</h3>
<div>
<a download="" href="/cv/assets/pdf/DanGrubbResume.pdf" class="home__button-movil">Download</a>
</div>
</div>
<div class="home__address bd-grid">
<span class="home__information"><i class="bx bx-map home__icon"></i>Falls Church, VA</span>
<span class="home__information"><i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net</span>
<span class="home__information"><i class="bx bx-phone home__icon"></i> 703-649-1637</span>
<span class="home__information"><i class="bx bx-planet home__icon"></i> dangrubb.net</span>
</div>
</div>
<i class="bx bx-moon change-theme" title="Theme" id="theme-button"></i>
<i class="bx bx-download generate-pdf" title="Generate PDF" id="resume-button"></i>
</section>
<!-- PROFILE -->
<section class="profile section" id="profile">
<h2 class="section-title">Profile</h2>
<p class="profile__description">
Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
</p>
</section>
<!-- EDUCATION -->
<section class="education section" id="education">
<h2 class="section-title">Education</h2>
<div class="education__container">
<div class="education__content">
<div class="education__time">
<span class="education__rounder"></span>
<span class="education__line"></span>
</div>
<div class="education__data bd-grid">
<h3 class="education__title">Advanced Diploma</h3>
<span class="education__studies">Patriot High School</span>
<span class="education__year">2015 - 2019</span>
</div>
</div>
<div class="education__content">
<div class="education__time">
<span class="education__rounder"></span>
<span class="education__line"></span>
</div>
<div class="education__data bd-grid">
<h3 class="education__title">Some College</h3>
<span class="education__year">2020</span>
</div>
</div>
<div class="education__content">
<div class="education__time">
<span class="education__rounder"></span>
</div>
<div class="education__data bd-grid">
<h3 class="education__title">Self-Study Certifications</h3>
<span class="education__year">2020 - Present</span>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content bd-grid">
<ul class="skills__data">
<li class="skills__name"><span class="skills__circle"></span>Windows</li>
<li class="skills__name"><span class="skills__circle"></span>Mac</li>
<li class="skills__name"><span class="skills__circle"></span>Linux</li>
<li class="skills__name"><span class="skills__circle"></span>Networking</li>
</ul>
<ul class="skills__data">
<li class="skills__name"><span class="skills__circle"></span>Security</li>
<li class="skills__name"><span class="skills__circle"></span>Hardware</li>
<li class="skills__name"><span class="skills__circle"></span>Software</li>
</ul>
</div>
</section>
</div>
<div class="resume__right">
<!-- EXPERIENCE -->
<section class="experience section" id="experience">
<h2 class="section-title">Experience</h2>
<div class="experience__container bd-grid">
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">IT Consultant and Support Technician</h3>
<span class="experience__company">2025 to Present | Blue Tech Innovation</span>
<ul class="experience__description">
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
<li>• Offer end-user support for both office-based and remote employees.</li>
<li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
<li>• Troubleshoot and resolve issues with the following technologies:</li>
<li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
<li>• Firewalls, Printer Servers, Office 365</li>
<li>• Mac systems, workstation and network connectivity issues</li>
<li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Technical Account Manager</h3>
<span class="experience__company">2023 to 2025 | ITG</span>
<ul class="experience__description">
<li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
<li>• Manage client relationships and troubleshoot technical issues.</li>
<li>• Deliver tailored solutions for business needs.</li>
<li>• Find creative solutions for government and private clients.</li>
<li>• Maintained 99% SLA compliance.</li>
<li>• Streamlined and documented standard operating procedures.</li>
<li>• Automated daily and repetitive tasks.</li>
<li>• Created instructional media for field technicians.</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line__last"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Field Technician</h3>
<span class="experience__company">2023 | Dell</span>
<ul class="experience__description">
<li>• Managed a workload of repairs in a ticketing system.</li>
<li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
<li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
<li>• Maintained positive professional relations with Dell's corporate, government, and consumer clients.</li>
<li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
</ul>
</div>
</div>
<a href="/cv/more-information" class="more__information">
<i class="bx bx-info-circle information__icon"></i> More Information
</a>
</div>
</section>
<!-- CERTIFICATES -->
<section class="certificate section" id="certificates">
<h2 class="section-title">Certifications</h2>
<div class="certificate__container bd-grid">
<div class="certificate__content">
<h3 class="certificate__title">CompTIA A+, Network+ and Security+</h3>
<p class="certificate__description">https://www.credly.com/users/dangrubbb</p>
</div>
<div class="certificate__content">
<h3 class="certificate__title">Microsoft Office Specialist</h3>
<p class="certificate__description">https://www.credly.com/users/dangrubbb</p>
</div>
<div class="certificate__content">
<h3 class="certificate__title">Dell, Apple, Samsung Certified Repair Technician</h3>
</div>
</div>
</section>
<!-- REFERENCES -->
<section class="references section" id="references">
<h2 class="section-title">References</h2>
<div class="references__container bd-grid">
<div class="references__content bd-grid">
<span class="references__subtitle">IT Engineer, ITG</span>
<h3 class="references__title">Samuel Alpert</h3>
<ul class="references__contact"><li>Details available upon request</li></ul>
</div>
<div class="references__content bd-grid">
<span class="references__subtitle">Server Technician, AMD</span>
<h3 class="references__title">Brian Oberoi</h3>
<ul class="references__contact"><li>Details available upon request</li></ul>
</div>
</div>
</section>
<!-- LANGUAGES -->
<section class="languages section">
<h2 class="section-title">Languages</h2>
<div class="languages__container">
<ul class="languages__content bd-grid">
<li class="languages__name"><span class="languages__circle"></span> English</li>
<li class="languages__name"><span class="languages__circle"></span> Python</li>
<li class="languages__name"><span class="languages__circle"></span> HTML</li>
</ul>
</div>
</section>
<!-- INTERESTS -->
<section class="interests section">
<h2 class="section-title">Interests</h2>
<div class="interests__container bd-grid">
<div class="interests__content"><i class="bx bx-headphone interests__icon"></i><span class="interests__name">Music</span></div>
<div class="interests__content"><i class="bx bx-cog interests__icon"></i><span class="interests__name">Tech</span></div>
<div class="interests__content"><i class="bx bx-walk interests__icon"></i><span class="interests__name">Fitness</span></div>
<div class="interests__content"><i class="bx bx-bible interests__icon"></i><span class="interests__name">Christ</span></div>
</div>
</section>
</div>
</div>
</main>
<a href="#" class="scrolltop" id="scroll-top">
<i class="bx bx-up-arrow-alt scrolltop__icon"></i>
</a>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
<script is:inline src="/cv/js/html2pdf.bundle.min.js"></script>
<script>
// Menu toggle
const toggle = document.getElementById('nav-toggle');
const nav = document.getElementById('nav-menu');
if (toggle && nav) {
toggle.addEventListener('click', () => nav.classList.toggle('show-menu'));
}
document.querySelectorAll('.nav__link').forEach(l => {
l.addEventListener('click', () => nav?.classList.remove('show-menu'));
});
// Scroll active
const sections = document.querySelectorAll('section[id]');
window.addEventListener('scroll', () => {
const scrollY = window.pageYOffset;
sections.forEach(current => {
const h = current.offsetHeight;
const top = current.offsetTop - 50;
const id = current.getAttribute('id');
const link = document.querySelector(`.nav__menu a[href*="${id}"]`);
if (link) {
if (scrollY > top && scrollY <= top + h) link.classList.add('active-link');
else link.classList.remove('active-link');
}
});
// Scroll top
const scrollTopEl = document.getElementById('scroll-top');
if (scrollTopEl) {
if (scrollY >= 200) scrollTopEl.classList.add('show-scroll');
else scrollTopEl.classList.remove('show-scroll');
}
});
// Theme toggle
const themeButton = document.getElementById('theme-button');
if (themeButton) {
const darkTheme = 'dark-theme';
const iconTheme = 'bx-sun';
const selectedTheme = localStorage.getItem('selected-theme');
const selectedIcon = localStorage.getItem('selected-icon');
if (selectedTheme) {
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme);
}
themeButton.addEventListener('click', () => {
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(iconTheme);
localStorage.setItem('selected-theme', document.body.classList.contains(darkTheme) ? 'dark' : 'light');
localStorage.setItem('selected-icon', themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun');
});
}
// PDF generation
const resumeButton = document.getElementById('resume-button');
if (resumeButton) {
// @ts-ignore
resumeButton.addEventListener('click', () => {
document.body.classList.add('scale-cv');
const areaCv = document.getElementById('area-cv');
const expLink = document.querySelector('#experience > div > a');
const interests = document.querySelector('.interests.section');
if (expLink) (expLink as HTMLElement).style.display = 'none';
if (interests) (interests as HTMLElement).style.display = 'none';
// @ts-ignore
html2pdf(areaCv, {
margin: 0, filename: 'DanGrubbResume.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { format: 'a4', orientation: 'portrait' },
});
setTimeout(() => {
document.body.classList.remove('scale-cv');
if (expLink) (expLink as HTMLElement).style.display = '';
if (interests) (interests as HTMLElement).style.display = '';
}, 5000);
});
}
</script>
</CVBase>
<style is:global>
@import '../../styles/cv.css';
</style>

275
src/pages/cv/more-information.astro
View File

@ -1,275 +0,0 @@
---
import CVBase from '../../layouts/CVBase.astro';
---
<CVBase title="Dan Grubb CV - More Information">
<div class="cv-page">
<header class="l-header" id="header">
<nav class="nav bd-container">
<a href="/cv/" class="nav__logo">Dan</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item"><a href="/cv/#home" class="nav__link"><i class="bx bx-home nav__icon"></i>Home</a></li>
<li class="nav__item"><a href="/cv/#profile" class="nav__link"><i class="bx bx-user nav__icon"></i>Profile</a></li>
<li class="nav__item"><a href="/cv/#education" class="nav__link"><i class="bx bx-book nav__icon"></i>Education</a></li>
<li class="nav__item"><a href="/cv/#skills" class="nav__link"><i class="bx bx-receipt nav__icon"></i>Skills</a></li>
<li class="nav__item"><a href="/cv/#experience" class="nav__link active-link"><i class="bx bx-briefcase nav__icon"></i>Experience</a></li>
<li class="nav__item"><a href="/cv/#certificates" class="nav__link"><i class="bx bx-briefcase nav__icon"></i>Certificates</a></li>
<li class="nav__item"><a href="/cv/#references" class="nav__link"><i class="bx bx-link-external nav__icon"></i>References</a></li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle"><i class="bx bx-grid-alt nav__icon"></i></div>
</nav>
</header>
<main class="l-main bd-container">
<div class="resume" id="area-cv">
<div class="resume__left">
<section class="home" id="home">
<div class="home__container section bd-grid">
<div class="home__data bd-grid">
<img src="/cv/assets/img/perfil-example.jpg" alt="perfil" class="home__img" />
<h1 class="home__title">Dan <b>Grubb</b></h1>
<h3 class="home__profession">IT Man</h3>
<div>
<a download="" href="/cv/assets/pdf/ResumeCv.pdf" class="home__button-movil">Download</a>
</div>
</div>
<div class="home__address bd-grid">
<span class="home__information"><i class="bx bx-map home__icon"></i>Falls Church, VA</span>
<span class="home__information"><i class="bx bx-envelope home__icon"></i> Dan@DanGrubb.Net</span>
<span class="home__information"><i class="bx bx-phone home__icon"></i> 703-649-1637</span>
<span class="home__information"><i class="bx bx-planet home__icon"></i> dangrubb.net</span>
</div>
</div>
<i class="bx bx-moon change-theme" title="Theme" id="theme-button"></i>
<i class="bx bx-download generate-pdf" title="Generate PDF" id="resume-button"></i>
</section>
<section class="profile section" id="profile">
<h2 class="section-title">Profile</h2>
<p class="profile__description">
Dynamic and detail-oriented IT professional with a proven track record in both independent and collaborative environments. Skilled in prioritizing tasks and adept at diagnosing and resolving complex technical issues to ensure optimal performance and customer satisfaction.
</p>
</section>
<section class="education section" id="education">
<h2 class="section-title">Education</h2>
<div class="education__container">
<div class="education__content">
<div class="education__time"><span class="education__rounder"></span><span class="education__line"></span></div>
<div class="education__data bd-grid">
<h3 class="education__title">Advanced Diploma</h3>
<span class="education__studies">Patriot High School</span>
<span class="education__year">2015 - 2019</span>
</div>
</div>
<div class="education__content">
<div class="education__time"><span class="education__rounder"></span><span class="education__line"></span></div>
<div class="education__data bd-grid">
<h3 class="education__title">Some College</h3>
<span class="education__year">2020</span>
</div>
</div>
<div class="education__content">
<div class="education__time"><span class="education__rounder"></span></div>
<div class="education__data bd-grid">
<h3 class="education__title">Self-Study Certifications</h3>
<span class="education__year">2020 - Present</span>
</div>
</div>
</div>
</section>
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content bd-grid">
<ul class="skills__data">
<li class="skills__name"><span class="skills__circle"></span>Windows</li>
<li class="skills__name"><span class="skills__circle"></span>Mac</li>
<li class="skills__name"><span class="skills__circle"></span>Linux</li>
<li class="skills__name"><span class="skills__circle"></span>Networking</li>
</ul>
<ul class="skills__data">
<li class="skills__name"><span class="skills__circle"></span>Security</li>
<li class="skills__name"><span class="skills__circle"></span>Hardware</li>
<li class="skills__name"><span class="skills__circle"></span>Software</li>
</ul>
</div>
</section>
</div>
<div class="resume__right">
<section class="experience section" id="experience">
<h2 class="section-title">Experience</h2>
<div class="experience__container bd-grid">
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">IT Consultant and Support Technician</h3>
<span class="experience__company">2025 to Present | Blue Tech Innovation</span>
<ul class="experience__description">
<li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
<li>• Offer end-user support for both office-based and remote employees.</li>
<li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
<li>• Troubleshoot and resolve issues with the following technologies:</li>
<li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
<li>• Firewalls, Printer Servers, Office 365</li>
<li>• Mac systems, workstation and network connectivity issues</li>
<li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Technical Account Manager</h3>
<span class="experience__company">2023 to Present | ITG</span>
<ul class="experience__description">
<li>• Ensure customer success with technical consulting and implementation of adaptive software and hardware.</li>
<li>• Manage client relationships and troubleshoot technical issues.</li>
<li>• Deliver tailored solutions for business needs.</li>
<li>• Find creative solutions for government and private clients.</li>
<li>• Maintained 99% SLA compliance.</li>
<li>• Streamlined and documented standard operating procedures.</li>
<li>• Automated daily and repetitive tasks.</li>
<li>• Created instructional media for field technicians.</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Field Technician</h3>
<span class="experience__company">2023 | Dell</span>
<ul class="experience__description">
<li>• Managed a workload of repairs in a ticketing system.</li>
<li>• Scheduled, routed, and completed all tickets in a timely manner.</li>
<li>• Found solutions to complex hardware/firmware issues and ensured systems were up and running efficiently.</li>
<li>• Maintained positive professional relations with Dell's corporate, government, and consumer clients.</li>
<li>• Exceeded ticket completion standards handling all tickets in the Falls Church - Arlington area.</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Lead Repair Technician</h3>
<span class="experience__company">2021 to 2022 | T-Mobile</span>
<ul class="experience__description">
<li>• Diagnosed and repaired cellphones, tablets, laptops, and other mobile devices.</li>
<li>• Efficiently diagnosed issues with customers' devices and performed all necessary repairs.</li>
<li>• Handled inventory and parts returns while ensuring systems were up to date.</li>
<li>• Exceeded SLA expectations completing 90% of repairs in under 90 minutes.</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Lead Technician</h3>
<span class="experience__company">2021 | Red Door Pro Wash</span>
<ul class="experience__description">
<li>• Communicated with customers to perform soft wash services efficiently.</li>
<li>• Created job plans for the team prior to arrival.</li>
<li>• Maintained and drove the company vehicle.</li>
</ul>
</div>
</div>
<div class="experience__content">
<div class="experience__time"><span class="experience__rounder"></span><span class="experience__line"></span></div>
<div class="experience__data bd-grid">
<h3 class="experience__title">Night Shift Manager</h3>
<span class="experience__company">2020 to 2021 | Taco Bell</span>
<ul class="experience__description">
<li>• Managed up to 10 staff during the night shift.</li>
<li>• Trained new employees and handled customer issues.</li>
<li>• Processed refunds, tracked inventory, and kept cash registers balanced.</li>
</ul>
</div>
</div>
<a href="/cv/" class="back__home">
<i class="bx bx-arrow-back back__icon"></i> Back to Home
</a>
</div>
</section>
</div>
</div>
</main>
<a href="#" class="scrolltop" id="scroll-top">
<i class="bx bx-up-arrow-alt scrolltop__icon"></i>
</a>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
<script is:inline src="/cv/js/html2pdf.bundle.min.js"></script>
<script>
// Menu toggle
const nav = document.getElementById('nav-menu');
if (toggle && nav) {
toggle.addEventListener('click', () => nav.classList.toggle('show-menu'));
}
document.querySelectorAll('.nav__link').forEach(l => {
l.addEventListener('click', () => nav?.classList.remove('show-menu'));
});
const sections = document.querySelectorAll('section[id]');
window.addEventListener('scroll', () => {
const scrollY = window.pageYOffset;
sections.forEach(current => {
const h = current.offsetHeight;
const top = current.offsetTop - 50;
const id = current.getAttribute('id');
const link = document.querySelector(`.nav__menu a[href*="${id}"]`);
if (link) {
if (scrollY > top && scrollY <= top + h) link.classList.add('active-link');
else link.classList.remove('active-link');
}
});
const scrollTopEl = document.getElementById('scroll-top');
if (scrollTopEl) {
if (scrollY >= 200) scrollTopEl.classList.add('show-scroll');
else scrollTopEl.classList.remove('show-scroll');
}
});
const themeButton = document.getElementById('theme-button');
if (themeButton) {
const darkTheme = 'dark-theme';
const iconTheme = 'bx-sun';
const selectedTheme = localStorage.getItem('selected-theme');
const selectedIcon = localStorage.getItem('selected-icon');
if (selectedTheme) {
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
themeButton.classList[selectedIcon === 'bx-moon' ? 'add' : 'remove'](iconTheme);
}
themeButton.addEventListener('click', () => {
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(iconTheme);
localStorage.setItem('selected-theme', document.body.classList.contains(darkTheme) ? 'dark' : 'light');
localStorage.setItem('selected-icon', themeButton.classList.contains(iconTheme) ? 'bx-moon' : 'bx-sun');
});
}
const resumeButton = document.getElementById('resume-button');
if (resumeButton) {
resumeButton.addEventListener('click', () => {
document.body.classList.add('scale-cv');
const areaCv = document.getElementById('area-cv');
// @ts-ignore
html2pdf(areaCv, {
margin: 0, filename: 'DanGrubbResume.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { format: 'a4', orientation: 'portrait' },
});
setTimeout(() => document.body.classList.remove('scale-cv'), 5000);
});
}
</script>
</CVBase>
<style is:global>
@import '../../styles/cv.css';
</style>

244
src/pages/index.astro
View File

@ -1,161 +1,99 @@
--- ---
import CrushBase from '../layouts/CrushBase.astro'; import '@fontsource/instrument-sans/latin-400.css';
import '@fontsource/instrument-sans/latin-500.css';
import '@fontsource/geist-mono/latin-500.css';
import '../styles/radiance.css';
const nav = [
{ label: 'Intelligence Platform', href: 'https://ai.dangrubb.net' },
{ label: 'Exclusive Music', href: '/music/' },
{ label: 'Multimedia Entertainment', href: 'https://pi.dangrubb.net/jellyfin' },
{ label: 'Private Search', href: 'https://search.dangrubb.net' },
{ label: 'Storage Solutions', href: 'https://pi.dangrubb.net/nextcloud' },
];
const links = [
{ label: 'Blog', href: '/blog' },
{ label: 'CV', href: '/cv/' },
{ label: 'Git', href: 'https://pi.dangrubb.net/dangit/dangrubbb/dangrubb.net' },
];
--- ---
<CrushBase title="dangrubb.net"> <!doctype html>
<div class="crush-page"> <html lang="en">
<header class="top-banner"> <head>
<div class="brand"> <meta charset="UTF-8" />
<span class="brand-name">dangrubb</span><span class="brand-dot">.</span><span class="brand-tld">net</span> <meta name="viewport" content="width=device-width, initial-scale=1" />
</div> <title>dangrubb.net</title>
<p class="tagline">OFFICIAL SITE</p> <meta name="description" content="Welcome to dangrubb.net" />
</header> <meta name="theme-color" content="#fff6f4" />
<link rel="icon" href="/favicon.ico" sizes="48x48">
<main class="logo-section"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
<div class="logo-wrapper"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
<img src="/src/img/pack-splatter.png" alt="" class="splatter-img"> <link rel="preload" as="image" href="/src/img/DanGrubbLogoWhite.svg" type="image/svg+xml" />
<div class="logo-overlay"> </head>
<img src="/src/img/DanGrubbLogoTeal.png" alt="DanGrubb" class="logo-img"> <body class="is-loading">
<div class="loader" id="loader" aria-hidden="true">
<div class="loader__stage">
<div class="scene">
<div class="cube">
<div class="cube__face cube__face--front"><img src="/src/img/DanGrubbLogoWhite.svg" alt="" width="140" height="140" /></div>
<div class="cube__face cube__face--back"><img src="/src/img/DanGrubbLogoWhite.svg" alt="" width="140" height="140" /></div>
<div class="cube__face cube__face--right"></div>
<div class="cube__face cube__face--left"></div>
<div class="cube__face cube__face--top"></div>
<div class="cube__face cube__face--bottom"></div>
</div>
</div> </div>
</div> </div>
<p class="loader__count" id="loader-count">000%</p>
</div>
<header class="bar">
<a class="bar__logo" href="/">
<span class="sr-only">dangrubb.net home</span>
<img src="/src/img/DanGrubbLogoDark.svg" alt="" width="48" height="48" />
</a>
<nav class="menu" id="menu" aria-label="Site">
<button class="menu__btn" id="menu-btn" type="button" aria-expanded="false" aria-controls="menu-panel">
<span class="sr-only">Site navigation</span>
<svg class="menu__icon menu__icon--open" viewBox="0 0 18 14" width="18" height="14" aria-hidden="true">
<path d="M0 1h2M5 1h13M0 7h10M13 7h5M0 13h2M5 13h13" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<svg class="menu__icon menu__icon--close" viewBox="0 0 18 18" width="18" height="18" aria-hidden="true">
<path d="M1 1l16 16M17 1L1 17" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
<div class="menu__panel" id="menu-panel">
<ul class="menu__list">
{nav.map((item, i) => (
<li>
<a href={item.href}>
<span class="menu__num">{String(i + 1).padStart(2, '0')}</span>
<span class="menu__label">{item.label}</span>
</a>
</li>
))}
</ul>
<div class="menu__links">
{links.map((l) => (
<a class="menu__link" href={l.href}><span>{l.label}</span></a>
))}
</div>
</div>
</nav>
</header>
<main class="hero">
<canvas class="hero__orb" id="orb" aria-hidden="true"></canvas>
<h1 class="hero__title" id="title">Welcome to dangrubb.net</h1>
</main> </main>
<footer class="bottom-nav"> <script>
<a href="https://ai.dangrubb.net" class="nav-item">AI</a> import { startOrb } from '../scripts/orb.js';
<span class="nav-dot">•</span> import { initUI } from '../scripts/ui.js';
<a href="/blog" class="nav-item">BLOG</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> initUI(startOrb);
.crush-page { </script>
min-height: 100vh; </body>
display: flex; </html>
flex-direction: column;
background: var(--crush-white);
}
.top-banner {
text-align: center;
padding: 40px 20px 20px;
background: linear-gradient(180deg, #e8f5f5 0%, transparent 100%);
border-bottom: 3px solid var(--crush-teal);
}
.brand {
font-family: 'Alfa Slab One', 'Georgia', serif;
font-size: clamp(3rem, 10vw, 5rem);
color: var(--crush-teal);
letter-spacing: -2px;
line-height: 1;
}
.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;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 20px;
}
.logo-wrapper {
position: relative;
width: 450px;
height: 450px;
}
.splatter-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.logo-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.logo-img {
width: 38%;
height: 38%;
object-fit: contain;
filter: drop-shadow(0 3px 8px rgba(0, 102, 102, 0.3));
}
.bottom-nav {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
padding: 40px 20px 60px;
background: linear-gradient(0deg, #e8f5f5 0%, transparent 100%);
border-top: 3px solid var(--crush-teal);
}
.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;
}
.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: 768px) {
.top-banner { padding: 30px 15px 15px; }
.logo-section { padding: 50px 15px; }
.logo-wrapper { width: 320px; height: 320px; }
.nav-item { font-size: 15px; padding: 6px 12px; }
}
@media (max-width: 480px) {
.brand { font-size: 2.5rem; }
.logo-wrapper { width: 240px; height: 240px; }
.bottom-nav { flex-direction: column; gap: 4px; }
.nav-dot { display: none; }
}
</style>

1095
src/scripts/orb.js Normal file
View File

File diff suppressed because it is too large Load Diff

80
src/scripts/ui.js Normal file
View File

@ -0,0 +1,80 @@
// Loader, title reveal and menu behaviour for the home page.
export function initUI(startOrb) {
const body = document.body;
const loader = document.getElementById('loader');
const count = document.getElementById('loader-count');
const title = document.getElementById('title');
const canvas = document.getElementById('orb');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
// --- title: split into letters (each wrapped per word so lines break cleanly)
const text = title.textContent.trim();
title.setAttribute('aria-label', text);
title.textContent = '';
let n = 0;
text.split(' ').forEach((word, wi, words) => {
const w = document.createElement('span');
w.className = 'word';
w.setAttribute('aria-hidden', 'true');
for (const ch of word) {
const mask = document.createElement('span');
mask.className = 'ch';
const inner = document.createElement('span');
inner.textContent = ch;
inner.style.transitionDelay = `${0.04 * n++}s`;
mask.appendChild(inner);
w.appendChild(mask);
}
title.appendChild(w);
if (wi < words.length - 1) title.appendChild(document.createTextNode(' '));
});
// --- loader: counts up while fonts and the first orb frame get ready
let orbReady = false;
let fontsReady = false;
let shown = 0;
const started = performance.now();
const minimum = reduced ? 0 : 1100;
const webgl = startOrb(canvas, { onReady: () => { orbReady = true; } });
if (!webgl) { document.documentElement.classList.add('no-webgl'); orbReady = true; }
(document.fonts ? document.fonts.ready : Promise.resolve()).then(() => { fontsReady = true; });
function tick(now) {
const elapsed = now - started;
const real = (orbReady ? 0.5 : 0.1) + (fontsReady ? 0.5 : 0.15);
const timed = Math.min(1, elapsed / (minimum || 1));
const target = Math.min(real, timed) * 100;
shown += (target - shown) * 0.2;
if (target - shown < 0.5) shown = target;
count.textContent = String(Math.round(shown)).padStart(3, '0') + '%';
if (shown >= 99.5 && orbReady && fontsReady && elapsed >= minimum) return done();
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
function done() {
count.textContent = '100%';
body.classList.remove('is-loading');
body.classList.add('is-ready');
setTimeout(() => loader.remove(), 900);
}
// --- menu
const menu = document.getElementById('menu');
const btn = document.getElementById('menu-btn');
const panel = document.getElementById('menu-panel');
function setOpen(open) {
menu.classList.toggle('is-open', open);
btn.setAttribute('aria-expanded', String(open));
panel.toggleAttribute('inert', !open);
}
setOpen(false);
btn.addEventListener('click', () => setOpen(!menu.classList.contains('is-open')));
addEventListener('keydown', (e) => { if (e.key === 'Escape') { setOpen(false); btn.focus(); } });
document.addEventListener('pointerdown', (e) => {
if (menu.classList.contains('is-open') && !menu.contains(e.target)) setOpen(false);
});
}

196
src/styles/radiance.css Normal file
View File

@ -0,0 +1,196 @@
/* Radiance home page. Sizes are written in --u units (1u = 1px on a 1600px-wide design). */
:root {
--ink: 9 11 17;
--u: clamp(0.5px, 0.0625vw, 1.25px);
--ease: cubic-bezier(0.33, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
overflow: hidden;
background: #fff6f4;
color: rgb(var(--ink) / 0.8);
font-family: 'Instrument Sans', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }
.sr-only {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid rgb(var(--ink) / 0.7); outline-offset: 2px; }
/* ---------- hero ---------- */
.hero {
touch-action: none;
position: fixed; inset: 0;
background:
radial-gradient(115% 80% at 50% 40%, transparent 45%, rgb(251 188 166 / 0.65) 100%),
linear-gradient(180deg,
#fbddb7 0%, #f9e6bc 14%, #f9ebbc 30%, #f9d9b3 52%,
#f7cfac 62%, #f3c19e 70%, #eeae8a 79%, #ee9972 87%, #eb8b63 94%, #ef815c 100%);
}
.hero__orb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__title {
position: absolute; left: 0; right: 0; top: 24%;
margin: 0; padding: 0 24px;
text-align: center;
font-weight: 400;
font-size: clamp(30px, 3.34vw, 64px);
line-height: 1;
letter-spacing: -0.03em;
color: rgb(var(--ink) / 0.8);
pointer-events: none;
}
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.ch > span {
display: inline-block;
transform: translateY(110%);
transition: transform 0.9s var(--ease);
}
.is-ready .ch > span { transform: none; }
/* fallback when WebGL is unavailable: a flat glowing sphere */
.no-webgl .hero::after {
content: ''; position: absolute; left: 50%; top: 52%;
width: 52.5vw; max-width: 1100px; aspect-ratio: 1; transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fdd29a, #fb9a63 60%, #f06a4a);
box-shadow: 0 0 0 2px rgb(255 235 230 / 0.8), 0 0 80px rgb(255 245 220 / 0.7);
}
/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 10; inset: 0 0 auto 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar__logo {
position: absolute; left: calc(14 * var(--u)); top: calc(14 * var(--u));
opacity: 0; transition: opacity 0.8s var(--ease) 0.2s;
}
.bar__logo img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); min-width: 48px; min-height: 48px; }
.is-ready .bar__logo { opacity: 1; }
/* ---------- menu ---------- */
.menu {
position: absolute; right: calc(20 * var(--u)); top: calc(30 * var(--u));
opacity: 0; transition: opacity 0.8s var(--ease) 0.3s;
}
.is-ready .menu { opacity: 1; }
.menu__btn {
position: relative; z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
background: #fff;
}
@media (min-width: 768px) { .menu__btn { width: calc(64 * var(--u)); height: calc(64 * var(--u)); min-width: 40px; min-height: 40px; } }
.menu__icon { position: absolute; transition: opacity 0.25s, transform 0.4s var(--ease); }
.menu__icon--close { opacity: 0; transform: rotate(-45deg); }
.is-open .menu__icon--open { opacity: 0; transform: rotate(45deg); }
.is-open .menu__icon--close { opacity: 1; transform: none; }
.menu__panel {
position: absolute; top: 0; right: 0; z-index: 1;
background: #fff;
width: max-content; max-width: calc(100vw - 24px);
padding: calc(50 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
clip-path: inset(0 0 100% 0);
visibility: hidden;
transition: clip-path 0.5s var(--ease), visibility 0s 0.5s;
}
.is-open .menu__panel { clip-path: inset(0); visibility: visible; transition: clip-path 0.5s var(--ease); }
@media (max-width: 767px) { .menu__panel { width: calc(100vw - 24px); padding: 64px 16px 16px; } }
.menu__list li { border-bottom: 1px solid rgb(var(--ink) / 0.15); }
.menu__list a {
display: flex; align-items: baseline;
padding: calc(6.5 * var(--u)) calc(60 * var(--u)) calc(6.5 * var(--u)) 0;
font-weight: 500; font-size: calc(18 * var(--u)); line-height: 1.2; white-space: nowrap;
transition: opacity 0.3s;
}
.menu__num {
margin-right: calc(16 * var(--u));
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
font-size: calc(14 * var(--u)); text-transform: uppercase; letter-spacing: 0.02em;
}
.menu__list:hover a:not(:hover), .menu__list:focus-within a:not(:focus-visible):not(:hover) { opacity: 0.45; }
.menu__list li, .menu__links { transform: translateY(8px); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.4s; }
.is-open .menu__list li, .is-open .menu__links { transform: none; opacity: 1; }
.is-open .menu__list li:nth-child(1) { transition-delay: 0.10s; }
.is-open .menu__list li:nth-child(2) { transition-delay: 0.14s; }
.is-open .menu__list li:nth-child(3) { transition-delay: 0.18s; }
.is-open .menu__list li:nth-child(4) { transition-delay: 0.22s; }
.is-open .menu__list li:nth-child(5) { transition-delay: 0.26s; }
.is-open .menu__links { transition-delay: 0.32s; }
.menu__links { display: flex; gap: calc(24 * var(--u)); padding-top: calc(39 * var(--u)); }
.menu__link {
position: relative; display: inline-block; overflow: hidden;
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
font-size: calc(14 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em;
}
.menu__link::after {
content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
background: rgb(var(--ink) / 0.3); transform: translateX(-101%); transition: transform 0.4s;
}
.menu__link:hover::after, .menu__link:focus-visible::after { transform: none; }
@media (max-width: 767px) {
.menu__list a { padding: 10px 40px 10px 0; font-size: 18px; }
.menu__num { font-size: 12px; margin-right: 14px; }
.menu__links { gap: 20px; padding-top: 28px; }
.menu__link { font-size: 12px; }
.bar__logo { left: 12px; top: 12px; }
.bar__logo img { width: 44px; height: 44px; }
.menu { right: 12px; top: 12px; }
}
/* ---------- loader ---------- */
.loader {
position: fixed; inset: 0; z-index: 1000;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 32px;
background: #fff6f4;
transition: opacity 0.7s var(--ease) 0.1s, visibility 0s 0.8s;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader__stage { flex-grow: 1; display: flex; align-items: center; }
.scene { margin: 80px; width: 140px; height: 140px; perspective: 400px; transform: translateZ(0); }
.cube {
position: relative; width: 140px; height: 140px;
transform-style: preserve-3d; transform: translateZ(-100px);
animation: spin 3s var(--ease) infinite;
}
.cube__face {
position: absolute; width: 140px; height: 140px;
background: rgb(var(--ink)); border: 2px solid rgb(var(--ink));
display: flex; align-items: center; justify-content: center;
}
.cube__face img { width: 100%; height: 100%; padding: 14px; }
.cube__face--front { transform: rotateY(0) translateZ(70px); }
.cube__face--right { transform: rotateY(90deg) translateZ(70px); }
.cube__face--back { transform: rotateY(180deg) translateZ(70px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(70px); }
.cube__face--top { transform: rotateX(90deg) translateZ(70px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(70px); }
.is-ready .cube { animation: none; }
@keyframes spin {
0% { transform: translateZ(-100px) rotateY(0); }
40%, 50% { transform: translateZ(-100px) rotateY(-180deg); }
90%, 100% { transform: translateZ(-100px) rotateY(-360deg); }
}
.loader__count {
margin: 0; flex-shrink: 0;
font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500;
font-size: 16px; line-height: 1; text-transform: uppercase; color: rgb(var(--ink) / 0.8);
}
@media (prefers-reduced-motion: reduce) {
.cube { animation: none; }
.ch > span { transform: none; transition: none; }
* { transition-duration: 0.01s !important; }
}

386
style.css Normal file
View File

File diff suppressed because one or more lines are too long