Merge remote-tracking branch 'astro/astro'

# Conflicts:
#	.gitignore

.gitignore

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

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

ASTRO_CONVERSION_COMPLETE.md

@@ -0,0 +1,216 @@
+# dangrubb.net Astro Conversion - Complete ✅
+
+## Project Status
+**Conversion**: ✅ Complete  
+**Build**: ✅ Successful  
+**Serving**: ✅ Active on port 4321  
+**URL**: `http://macmini.local:4321` (or `http://localhost:4321` on the Mac Mini)
+
+---
+
+## Completed Tasks
+
+### 1. ✅ Astro Project Structure
+- Initialized clean Astro v6.1.9 project in the repo
+- Preserved `/music/` directory completely untouched
+- Maintained `.git/` for version control
+- Clean separation: source code in `src/`, output in `dist/`
+
+### 2. ✅ Pages Converted
+
+#### Landing Page (`/`)
+- **File**: `src/pages/index.astro`
+- **Features**:
+  - Glitch bard animation (all 17 strips with proper CSS animations)
+  - Site title and announcement link
+  - Blog preview showing latest post (Status)
+  - Bottom navigation with external links
+  - Fully mobile-responsive with media queries
+
+#### Blog Listing (`/blog`)
+- **File**: `src/pages/blog/index.astro`
+- **Features**:
+  - Dynamic post rendering from `src/data/posts.json`
+  - Currently displays 1 post (Status, dated 2026-02-28)
+  - Hash-based navigation to individual posts
+  - Responsive card layout with image, title, date, excerpt
+  - "Read more" link functionality
+
+#### CV Pages
+- **Main CV** (`/cv`): `src/pages/cv/index.astro`
+  - Left sidebar: Home, Profile, Education, Skills
+  - Right sidebar: Experience (3 roles), Certificates, References, Languages, Interests
+  - Experience has link to "More Information"
+  
+- **Extended Experience** (`/cv/more-information`): `src/pages/cv/more-information.astro`
+  - Full 6 job history entries
+  - Back link to main CV
+
+#### 404 Page
+- **File**: `src/pages/404.astro`
+- **Styling**: Dark green background with centered text
+
+### 3. ✅ Components
+- **GlitchBard** (`src/components/GlitchBard.astro`): Reusable glitch animation component with 17 animated strips
+
+### 4. ✅ Styling System
+
+#### Global Styles
+- **Base Layout** (`src/layouts/Base.astro`): Dark theme, monospace font (#9d9aa4 text on #0d0a14 background)
+- **Glitch Animations** (`src/styles/glitch.css`): 6 keyframe animations (glitch-5 through glitch-10)
+- **Bard Component** (`src/styles/bard.css`): Strip animation and responsive sizing
+
+#### Page-Specific Styles
+- **Landing Page** (`src/pages/index.astro`): Scoped styles for announcement, blog preview, navigation
+- **Blog Page** (`src/pages/blog/index.astro`): Card layouts, post styling
+- **CV Pages** (`src/styles/cv.css`): Comprehensive CV styling with responsive layout
+  - Light/dark theme toggle support
+  - PDF export scaling
+  - Mobile-first responsive design (media queries at 320px, 768px, 968px)
+
+### 5. ✅ Mobile Responsiveness
+
+**All pages include responsive design**:
+- **Mobile-first approach** with breakpoints at:
+  - 400px: Very small devices (adjust font sizes, bard aspect ratio)
+  - 768px: Tablets (adjust padding, navigation)
+  - 968px: Desktop (full 2-column CV layout)
+
+**Key responsive features**:
+- `.bard` scales with `font-size` and `aspect-ratio` adjustments
+- Announcement, blog previews, navigation adapt to viewport
+- CV uses fixed nav on mobile, hidden on desktop (shows at bottom)
+- All text sizes scale appropriately
+
+### 6. ✅ Data Management
+- **Posts Data**: `src/data/posts.json` (1 post currently)
+  - Structure: id, title, date, excerpt, content, image, slug
+  - Can be extended with more blog posts
+
+### 7. ✅ Build & Deployment
+
+```bash
+# Build
+npm run build
+# Output: dist/ (88KB, containing all static HTML/CSS/JS)
+
+# Serve
+npx serve dist -l 4321
+# Running: http://localhost:4321
+```
+
+---
+
+## Architecture
+
+```
+dangrubb.net/
+├── src/
+│   ├── pages/
+│   │   ├── index.astro           # Landing page
+│   │   ├── 404.astro             # 404 page
+│   │   ├── blog/
+│   │   │   └── index.astro       # Blog listing
+│   │   └── cv/
+│   │       ├── index.astro       # Main CV
+│   │       └── more-information.astro  # Extended experience
+│   ├── components/
+│   │   └── GlitchBard.astro      # Glitch animation component
+│   ├── layouts/
+│   │   └── Base.astro            # Base HTML layout
+│   ├── styles/
+│   │   ├── glitch.css            # Glitch animations
+│   │   ├── bard.css              # Bard styling
+│   │   └── cv.css                # CV styling (9.7KB)
+│   └── data/
+│       └── posts.json            # Blog posts data
+├── public/                        # Static assets (images, PDFs, JS libs)
+│   ├── src/img/                  # Favicon, logos
+│   ├── blog/src/img/             # Blog images
+│   └── cv/
+│       ├── assets/img/           # Profile, CV favicons
+│       ├── assets/pdf/           # Resume PDFs
+│       └── js/                   # html2pdf library
+├── dist/                         # Built output (static HTML/CSS/JS)
+├── astro.config.mjs              # Astro configuration
+├── package.json                  # Dependencies & scripts
+└── tsconfig.json                 # TypeScript config
+```
+
+---
+
+## Key Features Preserved
+
+✅ **Dark Aesthetic**: #0d0a14 background, #9d9aa4 text, cyan links (#6be1e9)  
+✅ **Glitch Animations**: All 17 strip animations with varying durations (5-10 seconds)  
+✅ **Monospace Font**: "Cascadia Code", "Source Code Pro", Menlo, Consolas fallbacks  
+✅ **Blog System**: JSON-driven, easily extensible  
+✅ **CV Functionality**:
+  - Theme toggle (light/dark)
+  - PDF export button (requires html2pdf.bundle.min.js in public/)
+  - Responsive mobile navigation
+  - Smooth scrolling with active link highlighting
+
+---
+
+## Important Notes
+
+### Missing Assets
+The following assets need to be restored from the original repo or re-created:
+- `public/src/img/favicon.ico`
+- `public/src/img/DanGrubbLogoWhite.png`
+- `public/blog/src/img/CannotConnect.JPEG`
+- `public/cv/assets/img/perfil-example.jpg`
+- `public/cv/assets/img/favicon.ico`
+- `public/cv/assets/pdf/DanGrubbResume.pdf`
+- `public/cv/assets/pdf/ResumeCv.pdf`
+- `public/cv/js/html2pdf.bundle.min.js` (for PDF generation)
+
+**Current Status**: Site serves without errors, but images won't load and PDF export won't function until assets are restored.
+
+### Music Directory
+✅ Completely untouched at `/music/`
+
+### Next Steps
+1. Restore asset files to `public/` directory
+2. Test all pages in browser
+3. Verify PDF export functionality
+4. Push to Gitea repo (`https://pi.dangrubb.net/dangit/dangrubbb/dangrubb.net`)
+
+---
+
+## Testing Commands
+
+```bash
+# Build
+npm run build
+
+# Verify pages
+curl -s http://localhost:4321/ | grep "dangrubb.net" | head -1
+curl -s http://localhost:4321/blog/ | grep "blog-post" | head -1
+curl -s http://localhost:4321/cv/ | grep "home__title" | head -1
+
+# Check all routes return 200
+curl -o /dev/null -w "%{http_code}" http://localhost:4321/
+curl -o /dev/null -w "%{http_code}" http://localhost:4321/blog/
+curl -o /dev/null -w "%{http_code}" http://localhost:4321/cv/
+curl -o /dev/null -w "%{http_code}" http://localhost:4321/cv/more-information
+```
+
+---
+
+## Summary
+
+✅ **Conversion Complete**: Plain HTML/CSS/JS → Astro project with component architecture  
+✅ **Mobile Responsive**: Properly designed for 320px to 1920px+ viewports  
+✅ **Dark Aesthetic Preserved**: All color scheme, fonts, animations intact  
+✅ **Build Successful**: npm run build completes with no errors  
+✅ **Serving**: Running on http://macmini.local:4321  
+✅ **All Pages Live**:
+- `/` - Landing page with glitch bard
+- `/blog` - Blog listing
+- `/cv` - Main CV
+- `/cv/more-information` - Extended experience
+- `/404` - Not found page
+
+**Ready for asset restoration and live deployment!**

astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  site: 'https://dangrubb.net',
+  output: 'static',
+  build: {
+    assets: 'assets'
+  }
+});

blog/index.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>dangrubb.net</title>
+      <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="bard">
+  <div class="strip" style="
+    --glitch-x-1: -2em;
+    --glitch-hue-1: -16deg;
+    --glitch-x-2: 2em;
+    --glitch-hue-2: 13deg;
+
+    background-position: 0 -0em;
+    height: 5em; 
+    animation-name: glitch-9;
+    animation-duration: 9000ms; 
+    animation-delay: 2s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -1em;
+    --glitch-hue-1: -42deg;
+    --glitch-x-2: -6em;
+    --glitch-hue-2: -23deg;
+
+    background-position: 0 -5em;
+    height: 3em; 
+    animation-name: glitch-5;
+    animation-duration: 5000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -10em;
+    --glitch-hue-1: -42deg;
+    --glitch-x-2: -9em;
+    --glitch-hue-2: 45deg;
+
+    background-position: 0 -8em;
+    height: 3em; 
+    animation-name: glitch-7;
+    animation-duration: 7000ms; 
+    animation-delay: 0s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -6em;
+    --glitch-hue-1: -11deg;
+    --glitch-x-2: 2em;
+    --glitch-hue-2: 29deg;
+
+    background-position: 0 -11em;
+    height: 5em; 
+    animation-name: glitch-8;
+    animation-duration: 8000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 0em;
+    --glitch-hue-1: 42deg;
+    --glitch-x-2: 2em;
+    --glitch-hue-2: -28deg;
+
+    background-position: 0 -16em;
+    height: 5em; 
+    animation-name: glitch-6;
+    animation-duration: 6000ms; 
+    animation-delay: 0s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -3em;
+    --glitch-hue-1: -45deg;
+    --glitch-x-2: -5em;
+    --glitch-hue-2: -15deg;
+
+    background-position: 0 -21em;
+    height: 2em; 
+    animation-name: glitch-7;
+    animation-duration: 7000ms; 
+    animation-delay: 0s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -5em;
+    --glitch-hue-1: 35deg;
+    --glitch-x-2: 9em;
+    --glitch-hue-2: 35deg;
+
+    background-position: 0 -23em;
+    height: 2em; 
+    animation-name: glitch-6;
+    animation-duration: 6000ms; 
+    animation-delay: 0s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 10em;
+    --glitch-hue-1: 39deg;
+    --glitch-x-2: -8em;
+    --glitch-hue-2: 24deg;
+
+    background-position: 0 -25em;
+    height: 6em; 
+    animation-name: glitch-7;
+    animation-duration: 7000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -6em;
+    --glitch-hue-1: -46deg;
+    --glitch-x-2: -3em;
+    --glitch-hue-2: 18deg;
+
+    background-position: 0 -31em;
+    height: 6em; 
+    animation-name: glitch-10;
+    animation-duration: 10000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -8em;
+    --glitch-hue-1: -37deg;
+    --glitch-x-2: -6em;
+    --glitch-hue-2: 15deg;
+
+    background-position: 0 -37em;
+    height: 1em; 
+    animation-name: glitch-9;
+    animation-duration: 9000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -1em;
+    --glitch-hue-1: 16deg;
+    --glitch-x-2: 2em;
+    --glitch-hue-2: 25deg;
+
+    background-position: 0 -38em;
+    height: 2em; 
+    animation-name: glitch-5;
+    animation-duration: 5000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 5em;
+    --glitch-hue-1: 32deg;
+    --glitch-x-2: 10em;
+    --glitch-hue-2: -3deg;
+
+    background-position: 0 -40em;
+    height: 2em; 
+    animation-name: glitch-9;
+    animation-duration: 9000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 10em;
+    --glitch-hue-1: -26deg;
+    --glitch-x-2: 6em;
+    --glitch-hue-2: -45deg;
+
+    background-position: 0 -42em;
+    height: 4em; 
+    animation-name: glitch-6;
+    animation-duration: 6000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -7em;
+    --glitch-hue-1: -45deg;
+    --glitch-x-2: -8em;
+    --glitch-hue-2: 45deg;
+
+    background-position: 0 -46em;
+    height: 3em; 
+    animation-name: glitch-5;
+    animation-duration: 5000ms; 
+    animation-delay: 2s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 4em;
+    --glitch-hue-1: 40deg;
+    --glitch-x-2: -8em;
+    --glitch-hue-2: 29deg;
+
+    background-position: 0 -49em;
+    height: 3em; 
+    animation-name: glitch-6;
+    animation-duration: 6000ms; 
+    animation-delay: 1s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: -4em;
+    --glitch-hue-1: 26deg;
+    --glitch-x-2: -6em;
+    --glitch-hue-2: -3deg;
+
+    background-position: 0 -52em;
+    height: 6em; 
+    animation-name: glitch-10;
+    animation-duration: 10000ms; 
+    animation-delay: 0s;
+  "></div>
+
+  <div class="strip" style="
+    --glitch-x-1: 6em;
+    --glitch-hue-1: 43deg;
+    --glitch-x-2: -1em;
+    --glitch-hue-2: -1deg;
+
+    background-position: 0 -58em;
+    height: 4em; 
+    animation-name: glitch-8;
+    animation-duration: 8000ms; 
+    animation-delay: 0s;
+  "></div>
+</div>
+<p>
+  dangrubb.net/blog
+</p>
+
+<p>
+  <a href="../index.html"><-- back to home</a>
+</p>
+
+<div id="blogsContainer" class="blogs-container">
+  <p style="color: #9d9aa4;">Loading blog posts...</p>
+</div>
+
+<!-- partial -->
+  <script src="./script.js"></script>
+
+
+</body>
+</html>

blog/posts.json

@@ -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"
+  }
+]

blog/script.js

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

cv/index.html

@@ -201,14 +201,36 @@
             </div>
           </section>
         </div>
-
         <div class="resume__right">
+          
           <!--========== EXPERIENCE ==========-->
           <section class="experience section" id="experience">
             <h2 class="section-title">Experience</h2>
-
             <div class="experience__container bd-grid">
               <div class="experience__content">
+                <div class="experience__time">
+                  <span class="experience__rounder"></span>
+                  <span class="experience__line"></span>
+                </div>
+                <div class="experience__data bd-grid">
+                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
+                  <span class="experience__company"
+                    >2025 to Present | Blue Tech Innovation</span>
+                  <p class="experience__description">
+                    <ul class="experience__description">
+                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
+                      <li>• Offer end-user support for both office-based and remote employees.</li>
+                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
+                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
+                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
+                      <li>• Firewalls, Printer Servers, Office 365</li>
+                      <li>• Mac systems, workstation and network connectivity issues</li>
+                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
+                  </ul>       
+                 </p>
+                </div>
+                </div>
+                <div class="experience__content">
                 <div class="experience__time">
                   <span class="experience__rounder"></span>
                   <span class="experience__line"></span>
@@ -216,8 +238,7 @@
                 <div class="experience__data bd-grid">
                   <h3 class="experience__title">Technical Account Manager</h3>
                   <span class="experience__company"
-                    >2023 to Present | ITG</span
+                    >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>
@@ -232,49 +253,26 @@
                  </p>
                 </div>
               </div>
-              <div class="experience__content">
+            <div class="experience__content">
-                <div class="experience__time">
+                    <div class="experience__time">
-                  <span class="experience__rounder"></span>
+                        <span class="experience__rounder"></span>
-                  <span class="experience__line"></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>
-                <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>
               <a href="moreInformation.html" class="more__information">
                 <i class="bx bx-info-circle information__icon"></i>
                 More Information
@@ -284,7 +282,7 @@
 
           <!--========== CERTIFICATES ==========-->
           <section class="certificate section" id="certificates">
-            <h2 class="section-title">Certificates</h2>
+            <h2 class="section-title">Certifications</h2>
 
             <div class="certificate__container bd-grid">
               <div class="certificate__content">

cv/moreInformation.html

@@ -214,11 +214,37 @@
             <h2 class="section-title">Experience</h2>
 
             <div class="experience__container bd-grid">
+
               <div class="experience__content">
                 <div class="experience__time">
                   <span class="experience__rounder"></span>
                   <span class="experience__line"></span>
                 </div>
+                <div class="experience__data bd-grid">
+                  <h3 class="experience__title">IT Consultant and Support Technician</h3>
+                  <span class="experience__company"
+                    >2025 to Present | Blue Tech Innovation</span>
+                  <p class="experience__description">
+                    <ul class="experience__description">
+                      <li>• Provide administration and internal support for company systems, including PCs, Macs, phones, printers, servers, and other related equipment.</li>
+                      <li>• Offer end-user support for both office-based and remote employees.</li>
+                      <li>• Ensure the health, stability, and best practices configuration of client infrastructures.</li>
+                      <li>• Troubleshoot and resolve issues with the following technologies:</li>
+                      <li>• Windows Server, VPN Clients, Group Policy, Folder Permissions</li>
+                      <li>• Firewalls, Printer Servers, Office 365</li>
+                      <li>• Mac systems, workstation and network connectivity issues</li>
+                      <li>• Exchange Server, Microsoft Office Applications, and the latest Microsoft Office suite versions</li>
+                  </ul>       
+                 </p>
+                </div>
+                </div>
+
+              <div class="experience__content">
+                <div class="experience__time">
+                  <span class="experience__rounder"></span>
+                  <span class="experience__line"></span>
+                </div>
+                
                 <div class="experience__data bd-grid">
                   <h3 class="experience__title">Technical Account Manager</h3>
                   <span class="experience__company"

cv/styles/index.css

@@ -139,6 +139,11 @@ body.scale-cv {
   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;
@@ -410,7 +415,14 @@ img {
 .experience__line {
   display: block;
   width: 2px;
-  height: 110%;
+  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);
 }
@@ -430,6 +442,7 @@ img {
 .education__year {
   font-size: var(--smaller-font-size);
 }
+
 /*========== SKILLS AND LANGUAGES ==========*/
 .skills__content,
 .languages__content {

index.html

@@ -238,16 +238,33 @@
 <p>
   dangrubb.net
 </p>
-<p>
+
-  <a target="_parent" href="https://ai.dangrubb.net">ai</a>
+<p class="announcement">
-  <a target="_parent" href="https://ghost.dangrubb.net">blog</a>
+  <a href="https://dangrubb.net/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
-  <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
+</p>
-  <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
+
-  <a target="_parent" href="https://dangrubb.net/cv">cv</a>
+<div class="blog-preview-container">
-  <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a></p>
+  <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>
 

music/Darnea/DGDN/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>DGDN - Darnea | dangrubb.net</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="../../music.css">
+  <link rel="stylesheet" href="./player.css">
+</head>
+<body>
+  <div class="music-container">
+    <div class="music-header">
+      <h1><a href="/music">Music</a> / <a href="/music/Darnea">Darnea</a> / DGDN</h1>
+    </div>
+
+    <div class="album-player">
+      <div class="album-header">
+        <div class="album-artwork">🔥</div>
+        <div class="album-info">
+          <h2>DGDN</h2>
+          <p class="artist-name">Darnea</p>
+          <p class="album-desc">Leaked from the vault</p>
+        </div>
+      </div>
+
+      <div class="player-section">
+        <div id="now-playing" class="now-playing">
+          <p>Select a track to play</p>
+        </div>
+
+        <audio id="audio-player" controls></audio>
+      </div>
+
+      <div class="tracklist">
+        <h3>Tracklist</h3>
+        <ol id="tracks-list"></ol>
+      </div>
+    </div>
+
+    <div class="music-footer">
+      <p><a href="/music/Darnea">← back to artist</a></p>
+    </div>
+  </div>
+
+  <script src="./player.js"></script>
+</body>
+</html>

music/Darnea/DGDN/player.css

@@ -0,0 +1,139 @@
+/* Album Player */
+
+.album-player {
+  margin: 40px 0;
+}
+
+.album-header {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 40px;
+  padding: 30px;
+  background: rgba(107, 225, 233, 0.05);
+  border-radius: 8px;
+  align-items: center;
+}
+
+.album-artwork {
+  font-size: 5rem;
+  min-width: 150px;
+  text-align: center;
+}
+
+.album-info h2 {
+  margin: 0 0 5px 0;
+  font-size: 2rem;
+  color: #9d9aa4;
+}
+
+.album-info .artist-name {
+  margin: 0 0 5px 0;
+  color: #6be1e9;
+  font-size: 1.1rem;
+}
+
+.album-info .album-desc {
+  margin: 0;
+  color: #6be1e9;
+  font-size: 0.9rem;
+  font-style: italic;
+}
+
+/* Now Playing */
+.now-playing {
+  text-align: center;
+  padding: 20px;
+  background: rgba(107, 225, 233, 0.1);
+  border: 1px solid rgba(107, 225, 233, 0.3);
+  border-radius: 6px;
+  margin-bottom: 20px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.now-playing p {
+  margin: 0;
+  color: #9d9aa4;
+}
+
+.now-playing.playing p {
+  color: #6be1e9;
+  font-weight: bold;
+}
+
+/* Audio Player */
+#audio-player {
+  width: 100%;
+  margin-bottom: 30px;
+  accent-color: #6be1e9;
+}
+
+/* Tracklist */
+.tracklist {
+  margin-top: 40px;
+}
+
+.tracklist h3 {
+  margin: 0 0 20px 0;
+  font-size: 1.3rem;
+  color: #9d9aa4;
+}
+
+.tracklist ol {
+  list-style-position: inside;
+  padding: 0;
+  margin: 0;
+}
+
+.tracklist li {
+  padding: 12px;
+  margin-bottom: 8px;
+  background: rgba(157, 154, 164, 0.05);
+  border: 1px solid rgba(107, 225, 233, 0.2);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: #9d9aa4;
+}
+
+.tracklist li:hover {
+  background: rgba(107, 225, 233, 0.1);
+  border-color: rgba(107, 225, 233, 0.5);
+}
+
+.tracklist li.active {
+  background: rgba(107, 225, 233, 0.2);
+  border-color: #6be1e9;
+  color: #6be1e9;
+  font-weight: bold;
+}
+
+.track-duration {
+  float: right;
+  color: #6be1e9;
+  font-size: 0.9rem;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .album-header {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+  }
+
+  .album-artwork {
+    font-size: 3rem;
+  }
+
+  .album-info h2 {
+    font-size: 1.5rem;
+  }
+
+  .tracklist li {
+    padding: 10px;
+    font-size: 0.9rem;
+  }
+}

music/Darnea/DGDN/player.js

@@ -0,0 +1,71 @@
+// Album player for DGDN
+
+const tracks = [
+  { title: "Dan Beat (bonus)", filename: "Dan Beat (bonus).flac" },
+  { title: "Neigh V3", filename: "Neigh V3.flac" },
+  { title: "On Ice", filename: "On Ice.flac" },
+  { title: "Otish", filename: "Otish.flac" },
+  { title: "Scan V2", filename: "Scan V2.flac" },
+  { title: "balance v2", filename: "balance v2.flac" },
+  { title: "eh ee uhn V2", filename: "eh ee uhn V2.flac" },
+  { title: "held v3", filename: "held v3.flac" }
+];
+
+const audioPlayer = document.getElementById('audio-player');
+const tracksList = document.getElementById('tracks-list');
+const nowPlaying = document.getElementById('now-playing');
+
+let currentTrackIndex = 0;
+
+// Build tracklist
+function initTracklist() {
+  tracks.forEach((track, index) => {
+    const li = document.createElement('li');
+    li.textContent = track.title;
+    li.dataset.index = index;
+    li.addEventListener('click', () => playTrack(index));
+    tracksList.appendChild(li);
+  });
+}
+
+// Play track
+function playTrack(index) {
+  currentTrackIndex = index;
+  const track = tracks[index];
+  
+  // Update audio source
+  audioPlayer.src = `/src/audio/DGDN/${track.filename}`;
+  audioPlayer.play();
+  
+  // Update UI
+  updateNowPlaying(track.title);
+  updateActiveTrack();
+}
+
+// Update now playing display
+function updateNowPlaying(title) {
+  nowPlaying.classList.add('playing');
+  nowPlaying.innerHTML = `<p>▶ Now playing: ${title}</p>`;
+}
+
+// Update active track in list
+function updateActiveTrack() {
+  document.querySelectorAll('.tracklist li').forEach((li, i) => {
+    li.classList.toggle('active', i === currentTrackIndex);
+  });
+}
+
+// Auto-play next track when current ends
+audioPlayer.addEventListener('ended', () => {
+  if (currentTrackIndex < tracks.length - 1) {
+    playTrack(currentTrackIndex + 1);
+  }
+});
+
+// Update active track when manually seeking/playing
+audioPlayer.addEventListener('play', () => {
+  updateActiveTrack();
+});
+
+// Initialize
+initTracklist();

music/Darnea/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Darnea - dangrubb.net</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="../music.css">
+</head>
+<body>
+  <div class="music-container">
+    <div class="music-header">
+      <h1><a href="/music">Music</a> / Darnea</h1>
+    </div>
+
+    <div class="artist-detail">
+      <div class="artist-banner">🎤</div>
+      <h2>Darnea</h2>
+    </div>
+
+    <div class="albums-grid">
+      <div class="album-card">
+        <div class="album-cover">🔥</div>
+        <h3><a href="/music/Darnea/DGDN">DGDN</a></h3>
+        <p class="album-meta">8 tracks</p>
+      </div>
+    </div>
+
+    <div class="music-footer">
+      <p><a href="/music">← back to music</a></p>
+    </div>
+  </div>
+</body>
+</html>

music/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>dangrubb.net Music</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="./music.css">
+</head>
+<body>
+  <div class="music-container">
+    <div class="music-header">
+      <h1><a href="/">dangrubb</a>.net/music</h1>
+    </div>
+
+    <div class="artists-grid">
+      <div class="artist-card">
+        <div class="artist-cover">🎤</div>
+        <h2><a href="/music/Darnea">Darnea</a></h2>
+        <p class="artist-meta">1 album</p>
+      </div>
+    </div>
+
+    <div class="music-footer">
+      <p><a href="/">← back home</a></p>
+    </div>
+  </div>
+</body>
+</html>

music/music.css

@@ -0,0 +1,212 @@
+/* --- BASE STYLES (Merged from style.css) --- */
+body {
+  background: #0d0a14;
+  padding: 40px 20px;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  color: #9d9aa4;
+  /* Fixed the no-scroll issue here: */
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow-y: auto; 
+}
+
+a {
+  color: #6be1e9;
+  text-decoration: none;
+}
+
+a:focus,
+a:hover,
+a:visited {
+  opacity: 0.8;
+}
+
+/* --- MUSIC PLATFORM STYLING --- */
+.music-container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 20px;
+  flex: 1; /* Allows container to grow and push footer down */
+}
+
+.music-header {
+  text-align: center;
+  margin-bottom: 50px;
+  border-bottom: 2px solid rgba(107, 225, 233, 0.3);
+  padding-bottom: 20px;
+}
+
+.music-header h1 {
+  margin: 0;
+  font-size: 2rem;
+  color: #9d9aa4;
+  font-weight: bold;
+}
+
+.music-header h1 a {
+  color: #6be1e9;
+}
+
+/* Artists/Albums Grid */
+.artists-grid,
+.albums-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 30px;
+  margin: 40px 0;
+}
+
+.artist-card,
+.album-card {
+  text-align: center;
+  padding: 20px;
+  background: rgba(157, 154, 164, 0.05);
+  border: 1px solid rgba(107, 225, 233, 0.2);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.artist-card:hover,
+.album-card:hover {
+  background: rgba(107, 225, 233, 0.1);
+  border-color: rgba(107, 225, 233, 0.5);
+  transform: translateY(-4px);
+}
+
+.artist-cover,
+.album-cover {
+  font-size: 4rem;
+  margin-bottom: 15px;
+}
+
+.artist-card h2,
+.album-card h3 {
+  margin: 10px 0;
+  font-size: 1.3rem;
+  color: #9d9aa4;
+}
+
+.artist-meta,
+.album-meta {
+  color: #6be1e9;
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+/* Artist Detail */
+.artist-detail {
+  text-align: center;
+  margin: 40px 0;
+  padding: 40px 20px;
+  background: rgba(107, 225, 233, 0.05);
+  border-radius: 8px;
+}
+
+.artist-banner {
+  font-size: 5rem;
+  margin-bottom: 20px;
+}
+
+.artist-detail h2 {
+  margin: 0;
+  font-size: 2.5rem;
+  color: #9d9aa4;
+}
+
+/* Footer / Bottom Nav */
+.music-footer {
+  text-align: center;
+  margin-top: 60px;
+  padding: 20px 0;
+  border-top: 2px solid rgba(107, 225, 233, 0.3);
+}
+
+.bottom-nav {
+  margin-top: auto;
+  width: 100%;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.bottom-nav a {
+  margin: 0 10px;
+  display: inline-block;
+}
+
+/* --- BARD / IMAGE STYLES --- */
+.bard {
+  margin: 0 auto 30px;
+  width: 100%;
+  max-width: 65em;
+  height: auto;
+  aspect-ratio: 1 / 0.95;
+  font-size: 2px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.bard img {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+/* --- ANNOUNCEMENT & BLOG PREVIEW --- */
+.announcement {
+  margin: 20px auto;
+  display: block;
+  border: 1px solid #ffff00;
+  padding: 10px 15px;
+  border-radius: 3px;
+  text-align: center;
+  max-width: 400px;
+}
+
+.announcement a {
+  color: #ffff00;
+  font-weight: bold;
+}
+
+.blog-preview-container {
+  margin: 30px auto;
+  max-width: 600px; 
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.blog-preview {
+  border: 1px solid rgba(155, 169, 180, 0.3);
+  border-radius: 4px;
+  padding: 15px;
+  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* --- RESPONSIVE MEDIA QUERIES --- */
+@media (max-width: 768px) {
+  .music-container {
+    padding: 20px 10px;
+  }
+  .music-header h1 {
+    font-size: 1.5rem;
+  }
+  .artists-grid,
+  .albums-grid {
+    grid-template-columns: 1fr;
+  }
+  .artist-banner {
+    font-size: 3rem;
+  }
+  .artist-detail h2 {
+    font-size: 1.8rem;
+  }
+  .bard {
+    font-size: 3px;
+  }
+}

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dangrubb-astro",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^6.1.9"
+  }
+}

public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <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" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

script.js

@@ -127,3 +127,40 @@ uncomment the code below.
 //     <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();
+}

src/components/GlitchBard.astro

@@ -0,0 +1,100 @@
+---
+const strips = [
+  { top: 0, h: 5, x1: -2, hue1: -16, x2: 2, hue2: 13, anim: "glitch-9", dur: 9000, delay: 2 },
+  { top: 5, h: 3, x1: -1, hue1: -42, x2: -6, hue2: -23, anim: "glitch-5", dur: 5000, delay: 1 },
+  { top: 8, h: 3, x1: -10, hue1: -42, x2: -9, hue2: 45, anim: "glitch-7", dur: 7000, delay: 0 },
+  { top: 11, h: 5, x1: -6, hue1: -11, x2: 2, hue2: 29, anim: "glitch-8", dur: 8000, delay: 1 },
+  { top: 16, h: 5, x1: 0, hue1: 42, x2: 2, hue2: -28, anim: "glitch-6", dur: 6000, delay: 0 },
+  { top: 21, h: 2, x1: -3, hue1: -45, x2: -5, hue2: -15, anim: "glitch-7", dur: 7000, delay: 0 },
+  { top: 23, h: 2, x1: -5, hue1: 35, x2: 9, hue2: 35, anim: "glitch-6", dur: 6000, delay: 0 },
+  { top: 25, h: 6, x1: 10, hue1: 39, x2: -8, hue2: 24, anim: "glitch-7", dur: 7000, delay: 1 },
+  { top: 31, h: 6, x1: -6, hue1: -46, x2: -3, hue2: 18, anim: "glitch-10", dur: 10000, delay: 1 },
+  { top: 37, h: 1, x1: -8, hue1: -37, x2: -6, hue2: 15, anim: "glitch-9", dur: 9000, delay: 1 },
+  { top: 38, h: 2, x1: -1, hue1: 16, x2: 2, hue2: 25, anim: "glitch-5", dur: 5000, delay: 1 },
+  { top: 40, h: 2, x1: 5, hue1: 32, x2: 10, hue2: -3, anim: "glitch-9", dur: 9000, delay: 1 },
+  { top: 42, h: 4, x1: 10, hue1: -26, x2: 6, hue2: -45, anim: "glitch-6", dur: 6000, delay: 1 },
+  { top: 46, h: 3, x1: -7, hue1: -45, x2: -8, hue2: 45, anim: "glitch-5", dur: 5000, delay: 2 },
+  { top: 49, h: 3, x1: 4, hue1: 40, x2: -8, hue2: 29, anim: "glitch-6", dur: 6000, delay: 1 },
+  { top: 52, h: 6, x1: -4, hue1: 26, x2: -6, hue2: -3, anim: "glitch-10", dur: 10000, delay: 0 },
+  { top: 58, h: 4, x1: 6, hue1: 43, x2: -1, hue2: -1, anim: "glitch-8", dur: 8000, delay: 0 },
+];
+---
+
+<div class="bard">
+  {strips.map(s => (
+    <div class="strip" style={`
+      --glitch-x-1: ${s.x1}em;
+      --glitch-hue-1: ${s.hue1}deg;
+      --glitch-x-2: ${s.x2}em;
+      --glitch-hue-2: ${s.hue2}deg;
+      background-position: 0 -${s.top}em;
+      height: ${s.h}em;
+      animation-name: ${s.anim};
+      animation-duration: ${s.dur}ms;
+      animation-delay: ${s.delay}s;
+    `}></div>
+  ))}
+</div>
+
+<style>
+  .bard {
+    margin: 0 auto 30px;
+    width: 100%;
+    max-width: 65em;
+    height: auto;
+    aspect-ratio: 1 / 0.95;
+    font-size: 2px;
+    flex-shrink: 0;
+  }
+
+  .strip {
+    overflow: hidden;
+    position: relative;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-timing-function: linear;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-size: 100% auto;
+    background-image: url('/src/img/bard.png');
+  }
+
+  @keyframes glitch-5 {
+    0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 43.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1)); }
+    66.77%, 76.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1)); }
+  }
+  @keyframes glitch-6 {
+    0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 41.57% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1)); }
+    66.77%, 74.90% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1)); }
+  }
+  @keyframes glitch-7 {
+    0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 40.38% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1)); }
+    66.77%, 73.71% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1)); }
+  }
+  @keyframes glitch-8 {
+    0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 39.48% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1)); }
+    66.77%, 72.82% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1)); }
+  }
+  @keyframes glitch-9 {
+    0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 38.79% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1)); }
+    66.77%, 72.12% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1)); }
+  }
+  @keyframes glitch-10 {
+    0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+    33.43%, 38.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1)); }
+    66.77%, 71.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1)); }
+  }
+
+  @media (max-width: 768px) {
+    .bard { font-size: 3px; }
+  }
+  @media (max-width: 400px) {
+    .bard { aspect-ratio: 1 / 1; }
+  }
+</style>

src/data/posts.json

@@ -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"
+  }
+]

src/layouts/Base.astro

@@ -0,0 +1,37 @@
+---
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+
+  body {
+    background: #0d0a14;
+    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+    color: #9d9aa4;
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+  }
+
+  a {
+    color: #6be1e9;
+    text-decoration: none;
+  }
+  a:hover, a:visited { opacity: 0.8; }
+  a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+</style>

src/pages/404.astro

@@ -0,0 +1,28 @@
+---
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Page Not Found">
+  <div class="not-found">
+    <h1>Page Not Found</h1>
+    <p>This page does not exist yet.</p>
+    <p class="small-text">Stay tuned.</p>
+  </div>
+</Base>
+
+<style>
+  .not-found {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    text-align: center;
+    background: #123425;
+    color: white;
+    font-family: Arial, sans-serif;
+  }
+  h1 { font-size: 3rem; margin: 0.5em 0; }
+  p { font-size: 1.2rem; margin: 0.5em 0; }
+  .small-text { font-size: 1rem; margin-top: 0.5em; }
+</style>

src/pages/blog/index.astro

@@ -0,0 +1,107 @@
+---
+import Base from '../../layouts/Base.astro';
+import GlitchBard from '../../components/GlitchBard.astro';
+import posts from '../../data/posts.json';
+---
+
+<Base title="dangrubb.net/blog">
+  <div class="page">
+    <GlitchBard />
+
+    <p class="page-title">dangrubb.net/blog</p>
+    <p class="back-link"><a href="/">← back to home</a></p>
+
+    <div class="blogs-container">
+      {posts.map(post => (
+        <article class="blog-post" id={post.slug}>
+          <h2 class="blog-post-title">{post.title}</h2>
+          <div class="blog-post-date">
+            {new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+          </div>
+          <div class="blog-post-content" set:html={post.content} />
+          <div class="blog-post-image">
+            <img src={post.image} alt={post.title} />
+          </div>
+        </article>
+      ))}
+    </div>
+  </div>
+</Base>
+
+<style>
+  @import '../../styles/bard.css';
+
+  .page {
+    padding: 20px 20px 40px;
+    min-height: 100vh;
+    box-sizing: border-box;
+  }
+
+  .page-title, .back-link {
+    margin: 20px auto 0;
+    max-width: 400px;
+    text-align: center;
+    line-height: 1.3;
+    font-size: 0.875rem;
+  }
+
+  .blogs-container {
+    margin: 40px auto 0;
+    max-width: 65em;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .blog-post {
+    margin: 40px auto;
+    padding: 20px;
+    border: 1px solid rgba(155, 169, 180, 0.2);
+    border-radius: 4px;
+    background: linear-gradient(135deg, rgba(13, 10, 20, 0.4), rgba(50, 30, 80, 0.2));
+    scroll-margin-top: 100px;
+    max-width: 700px;
+    width: 100%;
+  }
+  .blog-post-title {
+    color: #ffff00;
+    font-weight: bold;
+    font-size: 1.8rem;
+    text-align: center;
+  }
+  .blog-post-date {
+    color: #aa95bd;
+    font-size: 0.9rem;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .blog-post-content {
+    color: #9d9aa4;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    text-align: center;
+  }
+  .blog-post-content :global(p) {
+    margin: 0 0 15px;
+  }
+  .blog-post-image {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  .blog-post-image img {
+    max-width: 100%;
+    height: auto;
+    max-height: 60vh;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  @media (max-width: 768px) {
+    .page { padding: 20px 10px 40px; }
+    .page-title, .back-link { font-size: 0.8rem; max-width: 320px; }
+    .blog-post { padding: 15px; margin: 20px auto; }
+    .blog-post-title { font-size: 1.4rem; }
+  }
+</style>

src/pages/cv/index.astro

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

src/pages/cv/more-information.astro

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

src/pages/index.astro

@@ -0,0 +1,154 @@
+---
+import Base from '../layouts/Base.astro';
+import GlitchBard from '../components/GlitchBard.astro';
+import posts from '../data/posts.json';
+
+const latest = posts[0];
+const formattedDate = new Date(latest.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+---
+
+<Base title="dangrubb.net">
+  <div class="page">
+    <GlitchBard />
+
+    <p class="site-title">dangrubb.net</p>
+
+    <p class="announcement">
+      <a href="/music">EXCLUSIVE: Leaked mixtape from Darnea's vault</a>
+    </p>
+
+    <div class="blog-preview-container">
+      <div class="blog-preview">
+        <a href={`/blog/#${latest.slug}`} class="blog-preview-title">{latest.title}</a>
+        <div class="blog-preview-date">{formattedDate}</div>
+        <img src={latest.image} alt={latest.title} />
+        <p class="blog-preview-excerpt">{latest.excerpt}</p>
+        <a href={`/blog/#${latest.slug}`} class="blog-preview-link">Read more →</a>
+      </div>
+    </div>
+
+    <nav class="bottom-nav">
+      <a target="_parent" href="https://ai.dangrubb.net">ai</a>
+      <a target="_parent" href="/blog">blog</a>
+      <a target="_parent" href="https://pi.dangrubb.net/jellyfin">media</a>
+      <a target="_parent" href="https://pi.dangrubb.net/nextcloud">storage</a>
+      <a target="_parent" href="/cv">cv</a>
+      <a target="_parent" href="https://pi.dangrubb.net/dangit">git</a>
+    </nav>
+  </div>
+</Base>
+
+<style>
+  @import '../styles/bard.css';
+
+  .page {
+    padding: 20px 20px 100px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .site-title {
+    margin: 10px auto 0;
+    max-width: 400px;
+    text-align: center;
+    line-height: 1.3;
+    font-size: 0.875rem;
+  }
+
+  .announcement {
+    margin: 20px auto 0;
+    display: inline-block;
+    border: 1px solid #ffff00;
+    padding: 10px 15px;
+    border-radius: 3px;
+    font-size: 0.875rem;
+    text-align: center;
+  }
+  .announcement a {
+    color: #ffff00;
+    font-weight: bold;
+  }
+  .announcement a:hover { text-decoration: underline; }
+
+  .blog-preview-container {
+    margin: 30px auto 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .blog-preview {
+    border: 1px solid rgba(155, 169, 180, 0.3);
+    border-radius: 4px;
+    padding: 15px;
+    background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    max-width: 350px;
+    width: 100%;
+  }
+  .blog-preview img {
+    width: 100%;
+    height: auto;
+    max-height: 150px;
+    object-fit: cover;
+    border-radius: 3px;
+    margin: 10px 0;
+  }
+  .blog-preview-title {
+    color: #ffff00;
+    font-weight: bold;
+    font-size: 0.95rem;
+    margin: 10px 0 5px;
+    display: block;
+  }
+  .blog-preview-title:hover { text-decoration: underline; }
+  .blog-preview-date {
+    color: #aa95bd;
+    font-size: 0.8rem;
+    margin-bottom: 8px;
+  }
+  .blog-preview-excerpt {
+    color: #9d9aa4;
+    font-size: 0.85rem;
+    line-height: 1.4;
+    margin: 8px 0 10px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .blog-preview-link {
+    display: inline-block;
+    color: #6be1e9;
+    font-size: 0.8rem;
+  }
+  .blog-preview-link:hover { text-decoration: underline; }
+
+  .bottom-nav {
+    margin-top: auto;
+    width: 100%;
+    text-align: center;
+    padding: 20px 10px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px 20px;
+  }
+  .bottom-nav a {
+    color: #6be1e9;
+    font-size: 0.875rem;
+  }
+
+  @media (max-width: 768px) {
+    .page { padding: 20px 10px 80px; }
+    .site-title { font-size: 0.8rem; max-width: 320px; }
+    .blog-preview { max-width: 300px; }
+  }
+  @media (max-width: 400px) {
+    .site-title { font-size: 0.75rem; }
+    .blog-preview-container { margin-top: 20px; }
+  }
+</style>

src/styles/bard.css

@@ -0,0 +1,30 @@
+/* ===== Glitch Bard Component ===== */
+.bard {
+  margin: 0 auto 30px;
+  width: 100%;
+  max-width: 65em;
+  height: auto;
+  aspect-ratio: 1 / 0.95;
+  font-size: 2px;
+  flex-shrink: 0;
+}
+
+.strip {
+  overflow: hidden;
+  position: relative;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: linear;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  background-size: 100% auto;
+  background-image: url('/src/img/bard.png');
+}
+
+@media (max-width: 768px) {
+  .bard { font-size: 3px; }
+}
+@media (max-width: 400px) {
+  .bard { aspect-ratio: 1 / 1; }
+}

src/styles/cv.css

@@ -0,0 +1,214 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+
+:root {
+  --header-height: 3rem;
+  --title-color: #0b0a0a;
+  --text-color: #403a3a;
+  --text-color-light: #707070;
+  --container-color: #fafafa;
+  --container-color-alt: #f0efef;
+  --body-color: #fcfcfc;
+  --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-medium: 500;
+  --font-semi-bold: 600;
+  --mb-1: 0.5rem;
+  --mb-2: 1rem;
+  --mb-3: 1.5rem;
+  --z-tooltip: 10;
+  --z-fixed: 100;
+}
+
+body.dark-theme {
+  --title-color: #f2f2f2;
+  --text-color: #bfbfbf;
+  --container-color: #212121;
+  --container-color-alt: #181616;
+  --body-color: #2b2b2b;
+}
+
+.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); }
+
+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 {
+  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); }
+.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; }
+
+.cv-page 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);
+}
+
+.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);
+}
+
+.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 { 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 0; 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 { bottom: var(--header-height); }
+.active-link { color: var(--title-color); }
+
+.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); }
+
+.profile__description { text-align: center; }
+
+.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); }
+.experience__description { list-style: none; padding: 0; margin: 0; }
+.experience__description li { font-size: var(--normal-font-size); color: var(--text-color); }
+
+.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;
+}
+
+.certificate__title { font-size: var(--h3-font-size); margin-bottom: var(--mb-1); }
+
+.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__container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: var(--mb-2); }
+.interests__content { display: flex; flex-direction: column; align-items: center; }
+.interests__icon { font-size: 1.5rem; color: var(--text-color-light); margin-bottom: 0.25rem; }
+
+.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; }
+
+@media screen and (max-width: 320px) {
+  .nav__list { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.5rem; }
+}
+
+@media screen and (min-width: 968px) {
+  .cv-page 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; }
+}

src/styles/glitch.css

@@ -0,0 +1,31 @@
+/* ===== Glitch Bard Animations ===== */
+@keyframes glitch-5 {
+  0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 43.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1)); }
+  66.77%, 76.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1)); }
+}
+@keyframes glitch-6 {
+  0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 41.57% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1)); }
+  66.77%, 74.90% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1)); }
+}
+@keyframes glitch-7 {
+  0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 40.38% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1)); }
+  66.77%, 73.71% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1)); }
+}
+@keyframes glitch-8 {
+  0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 39.48% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1)); }
+  66.77%, 72.82% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1)); }
+}
+@keyframes glitch-9 {
+  0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 38.79% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1)); }
+  66.77%, 72.12% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1)); }
+}
+@keyframes glitch-10 {
+  0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
+  33.43%, 38.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1)); }
+  66.77%, 71.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1)); }
+}

style.css

@@ -1,18 +1,23 @@
 body {
   background: #0d0a14;
-  padding: 40px 20px;
+  padding: 20px 20px 100px 20px;
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   color: #9d9aa4;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
 .bard {
-  margin: 0 auto 40px;
+  margin: 0 auto 30px;
   /* Remove fixed width in pixels */
   width: 100%;
   max-width: 65em; /* Keep the same max size for desktop */
   height: auto;
   aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
   font-size: 2px;
+  flex-shrink: 0;
 }
 
 /* Adjust media queries for better scaling */
@@ -148,7 +153,7 @@ body {
   }
 }
 p {
-  margin: 20px auto 0;
+  margin: 10px auto 0;
   position: relative;
   max-width: 400px;
   text-align: center;
@@ -156,6 +161,56 @@ p {
   font-size: 0.875rem;
 }
 
+.announcement {
+  margin: 10px auto 0;
+  position: relative;
+  max-width: 400px;
+  text-align: center;
+  line-height: 1.3;
+  font-size: 0.875rem;
+}
+
+.announcement a {
+  color: #ffeb3b;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.announcement a:hover,
+.announcement a:focus {
+  text-decoration: underline;
+  opacity: 0.85;
+}
+
+.debug {
+  margin: 40px auto 0;
+  position: relative;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+}
+
+.links-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px;
+  text-align: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  background: linear-gradient(to top, rgba(13, 10, 20, 0.95), rgba(13, 10, 20, 0.8));
+  backdrop-filter: blur(4px);
+}
+
+.links-bottom a {
+  color: #6be1e9;
+}
+
 a {
   color: #6be1e9;
 }
@@ -209,3 +264,123 @@ a:focus-visible {
 .column + .column {
   color: #aa95bd;
 }
+
+/* Make body use flexbox to push nav to bottom */
+body {
+  background: #0d0a14;
+  padding: 40px 20px;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  color: #9d9aa4;
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden; /* Prevents scrollbar */
+}
+
+/* Color the announcement link yellow */
+.announcement {
+  margin: 20px auto 0;
+  display: inline-block;
+  border: 1px solid #ffff00;
+  padding: 10px 15px;
+  border-radius: 3px;
+}
+
+.announcement a {
+  color: #ffff00;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.announcement a:hover {
+  text-decoration: underline;
+}
+
+/* Blog Preview Box */
+.blog-preview-container {
+  margin: 30px auto 0;
+  max-width: 33%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.blog-preview {
+  border: 1px solid rgba(155, 169, 180, 0.3);
+  border-radius: 4px;
+  padding: 15px;
+  background: linear-gradient(135deg, rgba(13, 10, 20, 0.6), rgba(50, 30, 80, 0.3));
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.blog-preview img {
+  width: 100%;
+  height: auto;
+  max-height: 150px;
+  object-fit: cover;
+  border-radius: 3px;
+  margin-bottom: 10px;
+}
+
+.blog-preview-title {
+  color: #ffff00;
+  font-weight: bold;
+  font-size: 0.95rem;
+  margin: 10px 0 5px;
+  text-decoration: none;
+  display: block;
+}
+
+.blog-preview-title:hover {
+  text-decoration: underline;
+}
+
+.blog-preview-date {
+  color: #aa95bd;
+  font-size: 0.8rem;
+  margin-bottom: 8px;
+}
+
+.blog-preview-excerpt {
+  color: #9d9aa4;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  margin: 8px 0 10px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.blog-preview-link {
+  display: inline-block;
+  color: #6be1e9;
+  font-size: 0.8rem;
+  text-decoration: none;
+}
+
+.blog-preview-link:hover {
+  text-decoration: underline;
+}
+
+/* Push the navigation to the bottom using flexbox spacer */
+.bottom-nav {
+  margin-top: auto;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bottom-nav p {
+  margin: 0;
+  text-align: center;
+}
+
+.bottom-nav a {
+  margin: 0 10px;
+  display: inline-block;
+}

tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}