1674 lines
87 KiB
HTML
1674 lines
87 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Daniel LaForce | Infrastructure & Systems Architect | DevOps Engineer</title>
|
||
<meta name="description" content="Expert in systems engineering, infrastructure architecture, DevOps automation, and secure cloud migrations. Specializing in virtualization, containerization, and network security.">
|
||
<meta name="keywords" content="infrastructure architect, systems engineer, DevOps automation, network security, virtualization, kubernetes, docker, cloud migration, IT consultant">
|
||
<meta name="author" content="Daniel LaForce">
|
||
|
||
<!-- Open Graph / Social Media Meta Tags -->
|
||
<meta property="og:title" content="Daniel LaForce | Infrastructure & Systems Architect">
|
||
<meta property="og:description" content="Expert in infrastructure architecture, DevOps automation, and secure cloud migrations. View my live lab dashboard and projects.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://laforceit.com">
|
||
<meta property="og:image" content="https://laforceit.com/images/og-preview.jpg">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="og:site_name" content="LaForceIT.com">
|
||
|
||
<!-- Twitter Card data -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Daniel LaForce | Infrastructure & Systems Architect">
|
||
<meta name="twitter:description" content="Expert in infrastructure architecture, DevOps automation, and secure cloud migrations.">
|
||
<meta name="twitter:image" content="https://laforceit.com/images/og-preview.jpg">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
|
||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||
<link rel="manifest" href="images/site.webmanifest">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="images/android-chrome-192x192.png">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="images/android-chrome-512x512.png">
|
||
|
||
<!-- CSS -->
|
||
<!-- Portfolio Specific Styles (Consider moving to styles.css) -->
|
||
<style>
|
||
/* Portfolio-specific styles */
|
||
.portfolio-header {
|
||
padding: 3rem 0;
|
||
background-color: var(--bg-secondary);
|
||
text-align: center;
|
||
}
|
||
|
||
.portfolio-title {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.portfolio-subtitle {
|
||
font-size: 1.25rem;
|
||
color: var(--text-secondary);
|
||
max-width: 800px;
|
||
margin: 0 auto 2rem;
|
||
}
|
||
|
||
.portfolio-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.portfolio-tab {
|
||
padding: 0.75rem 1.5rem;
|
||
background-color: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 0.5rem;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.portfolio-tab:hover {
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
color: var(--accent);
|
||
}
|
||
|
||
.portfolio-tab.active {
|
||
background-color: var(--accent);
|
||
color: white;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.portfolio-section {
|
||
padding: 2rem 0; /* Reduced padding-top from 4rem to 2rem */
|
||
}
|
||
|
||
/* Use existing section title styles or adapt if needed */
|
||
/* .section-title { ... } */
|
||
/* .section-description { ... } */
|
||
|
||
.projects-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
.project-card { /* Renamed from original projects section for clarity if needed */
|
||
background-color: var(--card-bg);
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
box-shadow: var(--card-shadow);
|
||
transition: transform 0.3s, box-shadow 0.3s;
|
||
height: 100%; /* Ensure cards align vertically */
|
||
display: flex; /* Use flexbox for column layout */
|
||
flex-direction: column; /* Stack content vertically */
|
||
width: 100%; /* Ensure card takes 100% of its grid cell */
|
||
}
|
||
|
||
.project-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: var(--card-shadow-hover);
|
||
}
|
||
|
||
.project-image {
|
||
position: relative;
|
||
height: 200px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.project-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.5s;
|
||
}
|
||
|
||
.project-card:hover .project-image img {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.project-content {
|
||
padding: 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1; /* Allow content to fill space */
|
||
}
|
||
|
||
.project-title { /* Renamed from original projects section or reuse if same style */
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.5rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.project-company {
|
||
font-size: 0.9rem;
|
||
color: var(--accent);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.project-period {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.project-description { /* Renamed from original projects section or reuse */
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
flex-grow: 1; /* Push skills/links down */
|
||
}
|
||
|
||
.project-skills {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
margin-bottom: 1.5rem; /* Space before links */
|
||
}
|
||
|
||
.skill-tag {
|
||
font-size: 0.75rem;
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
color: var(--accent);
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
.project-links {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-top: auto; /* Push links to bottom if content doesn't fill */
|
||
}
|
||
|
||
.project-link {
|
||
padding: 0.5rem 1rem;
|
||
background-color: var(--accent);
|
||
color: white;
|
||
border-radius: 0.5rem;
|
||
text-decoration: none;
|
||
font-size: 0.9rem;
|
||
transition: background-color 0.3s;
|
||
display: inline-flex; /* Align icon and text */
|
||
align-items: center;
|
||
}
|
||
|
||
.project-link i {
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.project-link:hover {
|
||
background-color: var(--accent-hover);
|
||
}
|
||
|
||
/* SOP Styles */
|
||
.sop-card {
|
||
background-color: var(--card-bg);
|
||
border-radius: 1rem;
|
||
overflow: hidden;
|
||
box-shadow: var(--card-shadow);
|
||
padding: 1.5rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.sop-title {
|
||
font-size: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.sop-description {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.sop-category {
|
||
font-size: 0.8rem;
|
||
color: var(--accent);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.sop-link {
|
||
color: var(--accent);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.sop-link:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.sop-grid { /* Assuming you might want a grid layout */
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
}
|
||
|
||
/* Portfolio CTA */
|
||
.portfolio-cta {
|
||
text-align: center;
|
||
margin-top: 3rem;
|
||
padding: 2rem 0;
|
||
background-color: var(--bg-secondary); /* Optional background */
|
||
}
|
||
.portfolio-cta p {
|
||
margin-bottom: 1.5rem;
|
||
font-size: 1.1rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* Modal Styles */
|
||
.modal {
|
||
display: none; /* Hidden by default */
|
||
position: fixed;
|
||
z-index: 1000; /* Sit on top */
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto; /* Enable scroll if needed */
|
||
background-color: rgba(0, 0, 0, 0.85); /* Black w/ opacity */
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: var(--card-bg); /* Use existing card background */
|
||
margin: 5% auto; /* 5% from the top and centered */
|
||
padding: 2rem;
|
||
border-radius: 1rem;
|
||
width: 80%; /* Could be more or less, depending on screen size */
|
||
max-width: 1200px; /* Maximum width */
|
||
position: relative;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.close-modal {
|
||
color: var(--text-secondary);
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1.5rem;
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.close-modal:hover,
|
||
.close-modal:focus {
|
||
color: var(--accent); /* Highlight on hover */
|
||
text-decoration: none;
|
||
}
|
||
|
||
.gallery-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.gallery-main {
|
||
width: 100%;
|
||
height: 60vh; /* Adjust as needed */
|
||
border-radius: 0.5rem;
|
||
overflow: hidden;
|
||
background-color: #000; /* Black background for images */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.gallery-main img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain; /* Show entire image */
|
||
}
|
||
|
||
.gallery-thumbnails {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.thumbnail {
|
||
width: 100px;
|
||
height: 70px;
|
||
object-fit: cover;
|
||
border-radius: 0.25rem;
|
||
cursor: pointer;
|
||
opacity: 0.6;
|
||
transition: opacity 0.3s, transform 0.3s, border-color 0.3s;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.thumbnail:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.thumbnail.active {
|
||
opacity: 1;
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important; /* Ensure hidden sections stay hidden */
|
||
}
|
||
|
||
/* Responsive adjustments for modals */
|
||
@media (max-width: 768px) {
|
||
.modal-content {
|
||
width: 95%;
|
||
padding: 1rem;
|
||
margin: 10% auto; /* Adjust vertical margin */
|
||
}
|
||
.gallery-main {
|
||
height: 40vh; /* Smaller height on small screens */
|
||
}
|
||
.thumbnail {
|
||
width: 70px;
|
||
height: 50px;
|
||
}
|
||
.close-modal {
|
||
top: 0.5rem;
|
||
right: 1rem;
|
||
font-size: 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="styles.css">
|
||
|
||
<!-- Font Awesome -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
||
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- Particles Container -->
|
||
<div class="particles-container" id="particles-container"></div>
|
||
|
||
<!-- Navigation Bar -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<div class="logo">
|
||
<a href="#home">
|
||
<span class="logo-text-glow">LaForceIT</span><span class="logo-dot-glow">.com</span>
|
||
</a>
|
||
</div>
|
||
<div class="nav-menu">
|
||
<a href="#home" class="nav-link active">Home</a>
|
||
<a href="#portfolio" class="nav-link">Portfolio</a>
|
||
<a href="#services" class="nav-link">Services</a>
|
||
<a href="https://www.argobox.com/blog" class="nav-link" target="_blank">Blog</a>
|
||
<a href="#lab" class="nav-link">Live Lab</a>
|
||
<a href="resume.html" class="nav-link">Resume</a>
|
||
</div>
|
||
<div class="nav-buttons">
|
||
<a href="https://argobox.com/dashboard" class="dashboard-link" target="_blank">
|
||
<span class="live-indicator"></span>
|
||
<span>Live Dashboard</span>
|
||
</a>
|
||
<button class="menu-toggle" aria-label="Toggle menu">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="home" class="hero">
|
||
<!-- Background elements -->
|
||
<div class="floating-icons" id="floating-icons"></div>
|
||
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="intro-section">
|
||
<div class="name-section">
|
||
<h2 class="name">Daniel LaForce</h2>
|
||
</div>
|
||
|
||
<h1 class="hero-title">
|
||
<span class="role-wrapper">
|
||
<span class="role active" data-role="admin" data-description="Building scalable infrastructure with optimized performance and bulletproof security — from server management to end-user support that keeps businesses running smoothly.">
|
||
<span class="highlight">Systems</span> <span class="highlight">Administrator</span> & IT Expert
|
||
</span>
|
||
<span class="role" data-role="cyber" data-description="Protecting your digital assets with cutting-edge security solutions and proactive threat detection — ensuring your business stays ahead of evolving cyber threats.">
|
||
<span class="highlight">Network</span> & <span class="highlight">Cyber Security</span> Professional
|
||
</span>
|
||
<span class="role" data-role="architect" data-description="Designing resilient infrastructure and automation solutions — from virtualization and containerization to secure network architecture and cloud migration strategies.">
|
||
<span class="highlight">Infrastructure</span> & <span class="highlight">Systems</span> Architect
|
||
</span>
|
||
<span class="role" data-role="devops" data-description="Streamlining development workflows with CI/CD pipelines and infrastructure as code — automating deployments and improving reliability across your entire technology stack.">
|
||
<span class="highlight">DevOps</span> & <span class="highlight">Automation</span> Expert
|
||
</span>
|
||
</span>
|
||
</h1>
|
||
|
||
<p class="hero-description" id="role-description">
|
||
Helping businesses run faster, safer, and smarter—through automated infrastructure, secure architecture, and real-world engineering.
|
||
</p>
|
||
|
||
<div class="inline-terminal">
|
||
<div id="terminal-text" class="terminal-text">> Ready for deployment...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="dashboard-section">
|
||
<div class="status-pill">
|
||
<div class="live-indicator"></div>
|
||
<span>Lab Status: Online</span>
|
||
</div>
|
||
|
||
<div class="tech-dashboard">
|
||
<div class="data-stream">
|
||
<div class="data-line"></div>
|
||
<div class="data-line"></div>
|
||
<div class="data-line"></div>
|
||
<div class="data-line"></div>
|
||
<div class="data-line"></div>
|
||
</div>
|
||
<div class="monitoring-terminal">
|
||
<div class="terminal-line">> Monitoring infrastructure...</div>
|
||
<div class="terminal-line success">> CPU load: Normal</div>
|
||
<div class="terminal-line success">> RAM usage: 42%</div>
|
||
<div class="terminal-line success">> Network: Stable</div>
|
||
<div class="terminal-line info">> Containers: 23 running</div>
|
||
<div class="terminal-line warning">> Backing up critical data...</div>
|
||
<div class="terminal-line">> Status: All systems operational</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-buttons">
|
||
<a href="#contact" class="btn btn-primary btn-featured">
|
||
<span class="pulse-ring"></span>
|
||
<span class="btn-text">Hire Me</span>
|
||
<span class="btn-icon"><i class="fas fa-arrow-right"></i></span>
|
||
</a>
|
||
|
||
<a href="https://www.argobox.com/homelab" class="btn btn-outline" target="_blank">
|
||
<span class="btn-text">Explore My Lab</span>
|
||
<span class="btn-icon"><i class="fas fa-server"></i></span>
|
||
</a>
|
||
|
||
<a href="resume.html" class="btn btn-outline" target="_blank">
|
||
<span class="btn-text">View Resume</span>
|
||
<span class="btn-icon"><i class="fas fa-file-alt"></i></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Solutions Showcase -->
|
||
<section class="solutions-showcase">
|
||
<div class="container">
|
||
<div class="solutions-header">
|
||
<h3 class="solutions-title">Solving Complex IT Challenges</h3>
|
||
</div>
|
||
|
||
<div class="solutions-carousel">
|
||
<div class="solution-slide active" id="solution-1">
|
||
<div class="solution-icon"><i class="fas fa-sync"></i></div>
|
||
<h4>Seamless Microsoft 365 Migrations</h4>
|
||
<p>Executed with 60% less downtime than industry average</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-2">
|
||
<div class="solution-icon"><i class="fas fa-shield-alt"></i></div>
|
||
<h4>Secure Remote Work Infrastructure</h4>
|
||
<p>Zero-trust architecture implementation for distributed teams</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-3">
|
||
<div class="solution-icon"><i class="fas fa-tachometer-alt"></i></div>
|
||
<h4>Automated DevOps Pipelines</h4>
|
||
<p>Reducing deployment times by up to 85% with CI/CD automation</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-4">
|
||
<div class="solution-icon"><i class="fas fa-cubes"></i></div>
|
||
<h4>Containerized Application Deployment</h4>
|
||
<p>Simplified scaling and maintenance with Kubernetes orchestration</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-5">
|
||
<div class="solution-icon"><i class="fas fa-users-cog"></i></div>
|
||
<h4>Enterprise-Level System Administration</h4>
|
||
<p>99.98% uptime across critical infrastructure components</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-6">
|
||
<div class="solution-icon"><i class="fas fa-network-wired"></i></div>
|
||
<h4>Network Infrastructure Optimization</h4>
|
||
<p>40% reduced latency and improved throughput for business applications</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-7">
|
||
<div class="solution-icon"><i class="fas fa-headset"></i></div>
|
||
<h4>Responsive Technical Support</h4>
|
||
<p>Average ticket resolution time reduced by 68% through process optimization</p>
|
||
</div>
|
||
|
||
<div class="solution-slide" id="solution-8">
|
||
<div class="solution-icon"><i class="fas fa-server"></i></div>
|
||
<h4>Server Consolidation & Virtualization</h4>
|
||
<p>35% cost reduction while improving redundancy and disaster recovery</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="slider-controls">
|
||
<button class="slider-dot active" data-slide="solution-1" aria-label="Solution 1"></button>
|
||
<button class="slider-dot" data-slide="solution-2" aria-label="Solution 2"></button>
|
||
<button class="slider-dot" data-slide="solution-3" aria-label="Solution 3"></button>
|
||
<button class="slider-dot" data-slide="solution-4" aria-label="Solution 4"></button>
|
||
<button class="slider-dot" data-slide="solution-5" aria-label="Solution 5"></button>
|
||
<button class="slider-dot" data-slide="solution-6" aria-label="Solution 6"></button>
|
||
<button class="slider-dot" data-slide="solution-7" aria-label="Solution 7"></button>
|
||
<button class="slider-dot" data-slide="solution-8" aria-label="Solution 8"></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- START: NEW PORTFOLIO SECTION -->
|
||
<section id="portfolio"> <!-- Added outer section wrapper with ID -->
|
||
|
||
<!-- Portfolio Header -->
|
||
<header class="portfolio-header">
|
||
<div class="container">
|
||
<h1 class="portfolio-title">Professional Portfolio</h1>
|
||
<p class="portfolio-subtitle">
|
||
A selection of my most impactful technical work across various domains and technologies.
|
||
</p>
|
||
|
||
<div class="portfolio-tabs">
|
||
<button class="portfolio-tab active" data-target="all">All Projects</button>
|
||
<button class="portfolio-tab" data-target="geospatial">Geospatial</button>
|
||
<button class="portfolio-tab" data-target="infrastructure">Infrastructure</button>
|
||
<button class="portfolio-tab" data-target="network">Network Engineering</button>
|
||
<button class="portfolio-tab" data-target="k8s">Kubernetes</button>
|
||
<button class="portfolio-tab" data-target="automation">Automation</button>
|
||
<button class="portfolio-tab" data-target="development">Development</button>
|
||
<button class="portfolio-tab" data-target="web">Development</button>
|
||
<button class="portfolio-tab" data-target="ml">Machine Learning</button>
|
||
<button class="portfolio-tab" data-target="electrical">Electrical</button>
|
||
<button class="portfolio-tab" data-target="linux">Linux</button>
|
||
<button class="portfolio-tab" data-target="sop">SOPs & Documentation</button>
|
||
<button class="portfolio-tab" data-target="m365">Microsoft 365</button>
|
||
<button class="portfolio-tab" data-target="cloud">Cloud</button>
|
||
<button class="portfolio-tab" data-target="sql">SQL</button>
|
||
<button class="portfolio-tab" data-target="docker">Docker</button>
|
||
<button class="portfolio-tab" data-target="sysadmin">Systems Administration</button>
|
||
<button class="portfolio-tab" data-target="webperf">High-Performance Websites</button>
|
||
<button class="portfolio-tab" data-target="servers">Dedicated Servers</button>
|
||
<button class="portfolio-tab" data-target="dbmigration">Database Migrations</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Portfolio Projects Section -->
|
||
<section id="projects-content" class="portfolio-section"> <!-- Changed ID to avoid conflict -->
|
||
<div class="container">
|
||
<div class="projects-grid">
|
||
<!-- Enterprise Data Center Deployment -->
|
||
<div class="project-card" data-categories="infrastructure network linux electrical">
|
||
<div class="project-image">
|
||
<img src="images/data-center/datacenter-cover.jpeg" alt="Data Center Deployment">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Enterprise Data Center Deployment</h3>
|
||
<div class="project-company">Novus Professional Services</div>
|
||
<div class="project-period">June 2023 - December 2023</div>
|
||
<p class="project-description">
|
||
Complete data center build-out from ground up, including rack design, power distribution, cooling optimization, precise cable management using CAD-designed pathways, and redundant network topology implementation. Integrated custom-fabricated components using mechanical engineering principles and 3D-printed mounting solutions for specialized equipment.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Infrastructure Design</span>
|
||
<span class="skill-tag">Network Engineering</span>
|
||
<span class="skill-tag">CAD/3D Modeling</span>
|
||
<span class="skill-tag">Linux</span>
|
||
<span class="skill-tag">Mechanical Engineering</span>
|
||
<span class="skill-tag">Soldering/Fabrication</span>
|
||
<span class="skill-tag">Thermal Management</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="#" class="project-link view-datacenter">View Gallery <i class="fas fa-images"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- TerraMappix Land Claim Mapping -->
|
||
<div class="project-card" data-categories="geospatial development web"> <!-- Added development -->
|
||
<div class="project-image">
|
||
<img src="images/terramappix/website.jpg" alt="TerraMappix Land Claim Mapping">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">TerraMappix Land Claim Mapping Service</h3>
|
||
<div class="project-company">Inovin LLC</div>
|
||
<div class="project-period">January 2023 - Present</div>
|
||
<p class="project-description">
|
||
Developed TerraTracer, a Python/Node.js geospatial engine powering TerraMappix.com. Converts BLM coordinates and legal metes-and-bounds into precise, GIS-ready property maps with accuracy down to 1.08 inches. Built for mining firms, prospectors, and land managers, featuring topo overlays and automated claim boundary validation.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Custom GIS Solutions</span>
|
||
<span class="skill-tag">Land Survey Data</span>
|
||
<span class="skill-tag">BLM Integration</span>
|
||
<span class="skill-tag">Geospatial Analysis</span>
|
||
<span class="skill-tag">Python</span>
|
||
<span class="skill-tag">Web Development</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://www.terramappix.com" class="project-link" target="_blank">Visit Website <i class="fas fa-external-link-alt"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SharePoint/M365 Migrations -->
|
||
<div class="project-card" data-categories="infrastructure automation m365 cloud sysadmin"> <!-- Added automation -->
|
||
<div class="project-image">
|
||
<img src="images/migrations/sharepoint-m365.jpg" alt="SharePoint and M365 Migrations">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">SharePoint & M365 Migrations</h3>
|
||
<div class="project-company">Enterprise Migrations</div>
|
||
<div class="project-period">March 2022 - November 2023</div>
|
||
<p class="project-description">
|
||
Seamless migration of enterprise data from legacy systems to Microsoft 365 environments. Successfully transitioned organizations from on-premises file servers, Dropbox, Google Workspace, and Egnyte to SharePoint Online and OneDrive for Business, with minimal disruption and comprehensive user adoption training. Utilized PowerShell automation for large-scale transfers.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">SharePoint Online</span>
|
||
<span class="skill-tag">OneDrive</span>
|
||
<span class="skill-tag">Teams</span>
|
||
<span class="skill-tag">Exchange Online</span>
|
||
<span class="skill-tag">PowerShell</span>
|
||
<span class="skill-tag">Migration Tools</span>
|
||
<span class="skill-tag">Systems Administration</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="casestudy.html" class="project-link">Case Study <i class="fas fa-book-open"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- TerraTracer -->
|
||
<div class="project-card" data-categories="geospatial development"> <!-- Added development, automation -->
|
||
<div class="project-image">
|
||
<img src="images/terratracer/claims.jpg" alt="TerraTracer">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">TerraTracer Geospatial Engine</h3>
|
||
<div class="project-company">Inovin LLC</div>
|
||
<div class="project-period">October 2023 - Present</div>
|
||
<p class="project-description">
|
||
A Python-based geospatial mapping solution focused on lode/placer claim mapping, property delineation, and GIS integration. Leveraging powerful libraries to provide efficient mapping capabilities for mining, civil engineering, and land management applications, automating complex coordinate transformations.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Python</span>
|
||
<span class="skill-tag">GeoPandas</span>
|
||
<span class="skill-tag">Matplotlib</span>
|
||
<span class="skill-tag">GIS</span>
|
||
<span class="skill-tag">GDAL/OGR</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://github.com/KeyArgo/TerraTracer" class="project-link" target="_blank">GitHub Repo <i class="fab fa-github"></i></a> <!-- Assuming public -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Full-Stack Web Development Solutions -->
|
||
<div class="project-card" data-categories="development infrastructure web sql docker k8s">
|
||
<div class="project-image">
|
||
<img src="images/full-stack/main.jpg" alt="Full-Stack Web Development">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Full-Stack Web Development Solutions</h3>
|
||
<div class="project-company">LaForceIT</div>
|
||
<div class="project-period">2021 - Present</div>
|
||
<p class="project-description">
|
||
End-to-end web solutions for businesses of all sizes, from responsive frontend designs to robust backend systems deployed on containerized infrastructure. Specializing in interactive dashboards, e-commerce platforms, and custom web applications with seamless API integrations.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">JavaScript/TypeScript</span>
|
||
<span class="skill-tag">React/Vue/Svelte</span>
|
||
<span class="skill-tag">Node.js/Python</span>
|
||
<span class="skill-tag">API Integration</span>
|
||
<span class="skill-tag">Docker</span>
|
||
<span class="skill-tag">SQL/NoSQL</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://argobox.com" class="project-link" target="_blank">Visit Example <i class="fas fa-external-link-alt"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- AI-Driven Used Car Price Prediction Model -->
|
||
<div class="project-card" data-categories="ml development"> <!-- Added development -->
|
||
<div class="project-image">
|
||
<img src="images/used-car-prediction/jupyter-notebook.jpg" alt="Car Price Prediction Model">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">AI-Driven Used Car Price Prediction Model</h3>
|
||
<div class="project-company">Western Governors University (Capstone)</div>
|
||
<div class="project-period">January 2023 - March 2023</div>
|
||
<p class="project-description">
|
||
An AI-powered car price estimator combining extensive data analysis with machine learning. Features comprehensive data preprocessing, a Random Forest Regression model with over 90% accuracy, and an interactive Jupyter Notebook interface for exploration and prediction.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Python</span>
|
||
<span class="skill-tag">Machine Learning</span>
|
||
<span class="skill-tag">Scikit-Learn</span>
|
||
<span class="skill-tag">Pandas</span>
|
||
<span class="skill-tag">Data Analysis</span>
|
||
<span class="skill-tag">Jupyter</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://github.com/KeyArgo/WGU-C965-Used-Car-Price-Estimator-and-Proposal" class="project-link" target="_blank">GitHub Repo <i class="fab fa-github"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ArgoBox Infrastructure Dashboard -->
|
||
<div class="project-card" data-categories="infrastructure development automation web k8s network"> <!-- Added development, automation -->
|
||
<div class="project-image">
|
||
<img src="images/argobox/dashboard.jpg" alt="ArgoBox Dashboard">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Infrastructure Monitoring Dashboard</h3>
|
||
<div class="project-company">Personal Project / Live Lab</div>
|
||
<div class="project-period">2022 - Present</div>
|
||
<p class="project-description">
|
||
A custom, real-time monitoring solution for my home lab infrastructure. Features metrics visualization (via Grafana), service status tracking, and resource allocation management, built with web technologies and pulling data from Prometheus/other sources.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Kubernetes (K3s)</span>
|
||
<span class="skill-tag">Prometheus</span>
|
||
<span class="skill-tag">Grafana</span>
|
||
<span class="skill-tag">JavaScript</span>
|
||
<span class="skill-tag">Docker</span>
|
||
<span class="skill-tag">Ansible</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://argobox.com/dashboard" class="project-link" target="_blank">Live Demo <i class="fas fa-tachometer-alt"></i></a> <!-- Update link if needed -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Ansible Automation Platform -->
|
||
<div class="project-card" data-categories="automation infrastructure k8s docker network">
|
||
<div class="project-image">
|
||
<img src="images/argobox/sandbox.jpg" alt="Ansible Automation"> <!-- Use a more specific image if possible -->
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Enterprise Ansible Automation</h3>
|
||
<div class="project-company">Infrastructure Automation Projects</div>
|
||
<div class="project-period">2021 - Present</div>
|
||
<p class="project-description">
|
||
Developing and managing comprehensive Ansible implementations. Designing reusable roles, complex playbooks, and integrating with CI/CD (GitLab CI, GitHub Actions) for automated infrastructure deployment, configuration management (Linux/Windows), and application orchestration.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Ansible</span>
|
||
<span class="skill-tag">AWX/Tower</span>
|
||
<span class="skill-tag">YAML</span>
|
||
<span class="skill-tag">GitLab CI/GitHub Actions</span>
|
||
<span class="skill-tag">Jinja2</span>
|
||
<span class="skill-tag">Infrastructure as Code</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://argobox.com/ansible-sandbox.html" class="project-link" target="_blank">Ansible Sandbox <i class="fas fa-code"></i></a> <!-- Update link if needed -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- CPE Vault Wiring Diagram -->
|
||
<div class="project-card" data-categories="infrastructure linux electrical network">
|
||
<div class="project-image">
|
||
<img src="images/cpe-vault/build.jpeg" alt="CPE Vault Dev Testing Prototype">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">CPE WiFi Firmware Test Bed Prototype</h3>
|
||
<div class="project-company">Infrastructure Engineering Project</div>
|
||
<div class="project-period">October 2022 - February 2023</div>
|
||
<p class="project-description">
|
||
Designed and built a sophisticated testing environment for customer premises equipment (CPE) with full remote access capabilities for firmware development and QA testing. Includes thermal safeguards, optimized wiring structure (Visio diagrams), and robust equipment integration with WAN-facing accessibility.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Visio/Diagramming</span>
|
||
<span class="skill-tag">Hardware Integration</span>
|
||
<span class="skill-tag">Network Engineering</span>
|
||
<span class="skill-tag">Systems Administration</span>
|
||
<span class="skill-tag">Linux</span>
|
||
<span class="skill-tag">Remote Access (VPN/SSH)</span>
|
||
<span class="skill-tag">Firmware Testing</span>
|
||
<span class="skill-tag">Electrical Engineering</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="#" class="project-link view-cpe-vault">View Diagrams <i class="fas fa-project-diagram"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End of CPE Vault Card -->
|
||
|
||
<!-- Dedicated Server & Hypervisor Management -->
|
||
<div class="project-card" data-categories="servers infrastructure sysadmin linux">
|
||
<div class="project-image">
|
||
<img src="images/dedi/dedi.jpeg" alt="Dedicated Server Management"> <!-- Relevant image -->
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Dedicated Server & Hypervisor Management</h3>
|
||
<div class="project-company">LaForceIT Infrastructure Services</div>
|
||
<div class="project-period">Ongoing</div>
|
||
<p class="project-description">
|
||
Expert setup, configuration, and management of dedicated servers on platforms like Hetzner, OVH, and Leaseweb. Proficient in deploying and managing hypervisors including VMware ESXi, Proxmox, Hyper-V, and XCP-ng for robust, secure, and high-performance virtualized environments.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Dedicated Servers</span>
|
||
<span class="skill-tag">Hetzner</span>
|
||
<span class="skill-tag">OVH</span>
|
||
<span class="skill-tag">ESXi</span>
|
||
<span class="skill-tag">Proxmox</span>
|
||
<span class="skill-tag">Hyper-V</span>
|
||
<span class="skill-tag">XCP-ng</span>
|
||
<span class="skill-tag">Server Hardening</span>
|
||
<span class="skill-tag">Virtualization</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<!-- Add link if applicable -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Database Migration & Optimization -->
|
||
<div class="project-card" data-categories="dbmigration sql infrastructure">
|
||
<div class="project-image">
|
||
<img src="images/migrations/sharepoint-m365.jpg" alt="Database Migration"> <!-- Relevant image -->
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">Database Migration & Optimization</h3>
|
||
<div class="project-company">LaForceIT Data Solutions</div>
|
||
<div class="project-period">Ongoing</div>
|
||
<p class="project-description">
|
||
Specializing in seamless and secure database migrations across various platforms including MySQL, PostgreSQL, MS SQL, MariaDB, and SQLite. Ensuring data integrity, minimal downtime during transition, and optimizing database performance post-migration for enhanced application speed and reliability.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Database Migration</span>
|
||
<span class="skill-tag">MySQL</span>
|
||
<span class="skill-tag">PostgreSQL</span>
|
||
<span class="skill-tag">MS SQL</span>
|
||
<span class="skill-tag">MariaDB</span>
|
||
<span class="skill-tag">SQLite</span>
|
||
<span class="skill-tag">Data Integrity</span>
|
||
<span class="skill-tag">Performance Tuning</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<!-- Add link if applicable -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End of Database Migration Card -->
|
||
|
||
|
||
<!-- High-Performance Websites & Blogs -->
|
||
<div class="project-card" data-categories="webperf development web">
|
||
<div class="project-image">
|
||
<img src="images/blog/blog.jpg" alt="High-Performance Website Development">
|
||
</div>
|
||
<div class="project-content">
|
||
<h3 class="project-title">High-Performance Websites & Blogs</h3>
|
||
<div class="project-company">LaForceIT Custom Development</div>
|
||
<div class="project-period">Ongoing</div>
|
||
<p class="project-description">
|
||
Building blazing-fast, SEO-optimized websites and blogs using modern frameworks and best practices. Expertise in Tailwind CSS, Astro, Nuxt.js, Next.js, Django, Hugo, PHP, and more to deliver exceptional user experiences and performance.
|
||
</p>
|
||
<div class="project-skills">
|
||
<span class="skill-tag">Tailwind CSS</span>
|
||
<span class="skill-tag">Astro</span>
|
||
<span class="skill-tag">Nuxt.js</span>
|
||
<span class="skill-tag">Next.js</span>
|
||
<span class="skill-tag">Django</span>
|
||
<span class="skill-tag">Hugo</span>
|
||
<span class="skill-tag">PHP</span>
|
||
<span class="skill-tag">Performance Optimization</span>
|
||
<span class="skill-tag">SEO</span>
|
||
</div>
|
||
<div class="project-links">
|
||
<a href="https://argobox.com/blog" class="project-link" target="_blank">View Example <i class="fas fa-external-link-alt"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- This is the closing div for projects-grid -->
|
||
</section>
|
||
|
||
<!-- SOPs Section -->
|
||
<section id="sops" class="portfolio-section hidden" data-section="sop">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Standard Operating Procedures</h2>
|
||
<p class="section-description">
|
||
Examples of comprehensive documentation and process guides for technical operations.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sop-grid">
|
||
<div class="sop-card">
|
||
<div class="sop-category">Infrastructure</div>
|
||
<h3 class="sop-title">Kubernetes Cluster Deployment & Maintenance</h3>
|
||
<p class="sop-description">
|
||
Complete guide to setting up, configuring, and maintaining production-grade Kubernetes clusters (e.g., K3s, RKE2), including security best practices (RBAC, NetworkPolicies), monitoring/logging setup, backup strategies, and upgrade procedures.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sop-card">
|
||
<div class="sop-category">Security</div>
|
||
<h3 class="sop-title">Zero Trust Network Implementation Guide</h3>
|
||
<p class="sop-description">
|
||
Step-by-step procedures for implementing zero trust security architecture using tools like Cloudflare Access/Tunnel or self-hosted alternatives. Covers identity verification (SSO/MFA), network segmentation (VLANs, Firewalls), least privilege access control, and device posture checks.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sop-card">
|
||
<div class="sop-category">Automation / DevOps</div>
|
||
<h3 class="sop-title">Ansible Playbook Development Standards</h3>
|
||
<p class="sop-description">
|
||
Guidelines and best practices for developing maintainable and scalable Ansible automation. Includes role structure conventions, variable management (inventory, group_vars, host_vars), secrets handling (Vault), idempotency checks, linting/testing (Molecule), and GitOps integration patterns.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sop-card">
|
||
<div class="sop-category">Cloud / Migration</div>
|
||
<h3 class="sop-title">M365 Tenant-to-Tenant Migration</h3>
|
||
<p class="sop-description">
|
||
Comprehensive workflow for planning and executing complex Microsoft 365 tenant-to-tenant migrations. Covers pre-migration assessment (data volume, dependencies), identity mapping, tool selection (e.g., BitTitan, ShareGate), phased execution strategy (mailboxes, OneDrive, SharePoint, Teams), communication plan, and post-migration validation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
<!-- END: NEW PORTFOLIO SECTION -->
|
||
|
||
<!-- Services Section -->
|
||
<section id="services" class="services">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Expert Services</h2>
|
||
<p class="section-description">
|
||
Comprehensive IT solutions tailored to your business needs, from network infrastructure to cloud migration.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="services-grid">
|
||
<!-- System Administration -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-server"></i>
|
||
</div>
|
||
<h3 class="service-title">System Administration</h3>
|
||
<p class="service-description">
|
||
Expert management of Windows & Linux servers, virtualization, and cloud infrastructure. Ensuring your systems remain secure, optimized and reliable.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Windows Server</span>
|
||
<span class="tech-badge">Linux</span>
|
||
<span class="tech-badge">VMware</span>
|
||
<span class="tech-badge">Proxmox</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Network Engineering -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-network-wired"></i>
|
||
</div>
|
||
<h3 class="service-title">Network Engineering</h3>
|
||
<p class="service-description">
|
||
Design and implementation of robust network infrastructures. Specializing in routing, switching, firewalls, and network security solutions.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">pfSense</span>
|
||
<span class="tech-badge">OPNsense</span>
|
||
<span class="tech-badge">VPN</span>
|
||
<span class="tech-badge">VLAN</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cloud & Virtualization -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-cloud"></i>
|
||
</div>
|
||
<h3 class="service-title">Cloud & Virtualization</h3>
|
||
<p class="service-description">
|
||
Implementation of virtualization technologies and cloud solutions. From VMware and Proxmox to containerization with Docker and Kubernetes.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Docker</span>
|
||
<span class="tech-badge">Kubernetes</span>
|
||
<span class="tech-badge">K3s</span>
|
||
<span class="tech-badge">Azure</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- M365 Migrations -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fab fa-microsoft"></i>
|
||
</div>
|
||
<h3 class="service-title">M365 Migrations</h3>
|
||
<p class="service-description">
|
||
Seamless migration to Microsoft 365 environments. From email and SharePoint to Teams and OneDrive, ensuring minimal disruption to your business.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Exchange</span>
|
||
<span class="tech-badge">SharePoint</span>
|
||
<span class="tech-badge">Azure AD</span>
|
||
<span class="tech-badge">Teams</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IT Security -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<h3 class="service-title">IT Security</h3>
|
||
<p class="service-description">
|
||
Comprehensive security solutions to protect your business. Including firewall configuration, VPN setup, security audits, and best practices implementation.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Zero Trust</span>
|
||
<span class="tech-badge">Cloudflare</span>
|
||
<span class="tech-badge">Endpoint Security</span>
|
||
<span class="tech-badge">Auditing</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DevOps & Automation -->
|
||
<div class="service-card">
|
||
<div class="service-icon">
|
||
<i class="fas fa-code-branch"></i>
|
||
</div>
|
||
<h3 class="service-title">DevOps & Automation</h3>
|
||
<p class="service-description">
|
||
Infrastructure as code, CI/CD pipelines, and automation solutions using industry-standard tools and best practices to streamline your operations.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Ansible</span>
|
||
<span class="tech-badge">Python</span>
|
||
<span class="tech-badge">PowerShell</span>
|
||
<span class="tech-badge">Bash</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Live Lab Section -->
|
||
<section id="lab" class="lab">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Live Infrastructure Lab</h2>
|
||
<p class="section-description">
|
||
I maintain a production-grade homelab that serves as both a testing ground and showcase for my technical skills.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="lab-grid">
|
||
<div class="lab-card">
|
||
<h3 class="lab-card-title">Lab Architecture</h3>
|
||
<p class="lab-card-description">
|
||
My lab consists of multiple physical and virtual machines running Proxmox, Docker, and Kubernetes (K3s), all secured behind Cloudflare Zero Trust.
|
||
</p>
|
||
|
||
<h4 class="lab-subtitle">Current Infrastructure:</h4>
|
||
<ul class="lab-list">
|
||
<li><span class="bullet"></span>Proxmox Hypervisor Cluster</li>
|
||
<li><span class="bullet"></span>OPNsense Router (Physical + VM)</li>
|
||
<li><span class="bullet"></span>K3s Kubernetes Cluster</li>
|
||
<li><span class="bullet"></span>Traefik Ingress Controller</li>
|
||
<li><span class="bullet"></span>Gitea, VSCode Server, NAS</li>
|
||
<li><span class="bullet"></span>Cloudflared Zero Trust Tunnel</li>
|
||
</ul>
|
||
|
||
<div class="lab-buttons">
|
||
<a href="https://argobox.com/dashboard" class="btn btn-primary" target="_blank">
|
||
<span class="flex-center">
|
||
<span class="live-indicator"></span>
|
||
<span>View Live Dashboard</span>
|
||
</span>
|
||
</a>
|
||
<a href="https://argobox.com/ansible-sandbox" class="btn btn-outline btn-offline" target="_blank">
|
||
<span class="flex-center">
|
||
<span class="offline-indicator"></span>
|
||
<span>Ansible Sandbox (Offline)</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lab-card lab-metrics-card">
|
||
<h3 class="lab-card-title">Real-Time Metrics</h3>
|
||
|
||
<div class="terminal-card">
|
||
<div class="terminal-card-header">
|
||
<span class="terminal-title">System Status</span>
|
||
<span class="terminal-status online">ONLINE</span>
|
||
</div>
|
||
<div class="terminal-card-content">
|
||
<div class="metric">
|
||
<div class="metric-header">
|
||
<span class="metric-name">CPU Usage</span>
|
||
<span class="metric-value">42%</span>
|
||
</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-progress" style="width: 42%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric">
|
||
<div class="metric-header">
|
||
<span class="metric-name">Memory</span>
|
||
<span class="metric-value">57%</span>
|
||
</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-progress" style="width: 57%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric">
|
||
<div class="metric-header">
|
||
<span class="metric-name">Storage</span>
|
||
<span class="metric-value">63%</span>
|
||
</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-progress" style="width: 63%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metric">
|
||
<div class="metric-header">
|
||
<span class="metric-name">Network</span>
|
||
<span class="metric-value">28%</span>
|
||
</div>
|
||
<div class="metric-bar">
|
||
<div class="metric-progress" style="width: 28%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h4 class="lab-subtitle">Active Services:</h4>
|
||
<div class="services-grid-small">
|
||
<div class="service-tag"><span class="status-dot active"></span>Gitea</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>VSCode Server</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>rTorrent</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>NAS</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Traefik</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>K3s</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Cloudflared</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>FileBrowser</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>OpenWebUI</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Ollama</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Obsidian Blog</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Obsidian Notes</div>
|
||
<div class="service-tag"><span class="status-dot error"></span>Ansible Sandbox</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Jellyfin</div>
|
||
<div class="service-tag"><span class="status-dot active"></span>Plex</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sample Docker configuration -->
|
||
<div class="code-card">
|
||
<h3 class="code-card-title">How I'm Running Services</h3>
|
||
<p class="code-card-description">
|
||
Here's a sample of how I deploy and manage services in my infrastructure:
|
||
</p>
|
||
|
||
<div class="code-block">
|
||
<code>
|
||
<span class="comment"># K3s deployment for Gitea with persistent storage</span><br>
|
||
<span class="keyword">apiVersion</span>: apps/v1<br>
|
||
<span class="keyword">kind</span>: Deployment<br>
|
||
<span class="keyword">metadata</span>:<br>
|
||
<span class="keyword">name</span>: gitea<br>
|
||
<span class="keyword">namespace</span>: argobox<br>
|
||
<span class="keyword">spec</span>:<br>
|
||
<span class="keyword">replicas</span>: 1<br>
|
||
<span class="function">selector</span>:<br>
|
||
<span class="function">matchLabels</span>:<br>
|
||
<span class="keyword">app</span>: gitea<br>
|
||
<span class="function">template</span>:<br>
|
||
<span class="function">metadata</span>:<br>
|
||
<span class="keyword">labels</span>:<br>
|
||
<span class="keyword">app</span>: gitea<br>
|
||
<span class="function">spec</span>:<br>
|
||
<span class="keyword">containers</span>:<br>
|
||
- <span class="keyword">name</span>: gitea<br>
|
||
<span class="keyword">image</span>: <span class="string">gitea/gitea:latest</span><br>
|
||
<span class="keyword">ports</span>:<br>
|
||
- <span class="keyword">containerPort</span>: 3000<br>
|
||
<span class="keyword">volumeMounts</span>:<br>
|
||
- <span class="keyword">name</span>: gitea-data<br>
|
||
<span class="keyword">mountPath</span>: <span class="string">/data</span><br>
|
||
</code>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Projects Section -->
|
||
<section id="projects" class="projects">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Featured Projects</h2>
|
||
<p class="section-description">
|
||
A showcase of technical solutions I've built and deployed.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="projects-grid">
|
||
<div class="project-card">
|
||
<div class="project-icon">
|
||
<i class="fas fa-map-marked-alt"></i>
|
||
</div>
|
||
<h3 class="project-title">TerraTracer</h3>
|
||
<p class="project-description">
|
||
A GIS mapping tool for prospectors to automate mining claim boundary plotting, terrain analysis, and compliance with BLM/state regulations.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Python</span>
|
||
<span class="tech-badge">Node.js</span>
|
||
<span class="tech-badge">JavaScript</span>
|
||
<span class="tech-badge">GIS</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-card">
|
||
<div class="project-icon">
|
||
<i class="fas fa-shield-alt"></i>
|
||
</div>
|
||
<h3 class="project-title">Zero Trust Lab</h3>
|
||
<p class="project-description">
|
||
A secure home lab infrastructure using Cloudflare Zero Trust tunnels, network segmentation, and security best practices.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Cloudflare</span>
|
||
<span class="tech-badge">OPNsense</span>
|
||
<span class="tech-badge">VLAN</span>
|
||
<span class="tech-badge">VPN</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="project-card">
|
||
<div class="project-icon">
|
||
<i class="fas fa-robot"></i>
|
||
</div>
|
||
<h3 class="project-title">Ansible Sandbox</h3>
|
||
<p class="project-description">
|
||
An interactive demo environment where users can spin up preconfigured services using Ansible automation.
|
||
</p>
|
||
<div class="tech-badges">
|
||
<span class="tech-badge">Ansible</span>
|
||
<span class="tech-badge">Proxmox</span>
|
||
<span class="tech-badge">Python</span>
|
||
<span class="tech-badge">Docker</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Experience Section -->
|
||
<section id="experience" class="experience">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Professional Experience</h2>
|
||
<p class="section-description">
|
||
A history of delivering reliable IT infrastructure and solutions.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h3 class="timeline-title">Inovin LLC</h3>
|
||
<h4 class="timeline-subtitle">Freelance Consultant – GIS, Infrastructure & Security Solutions</h4>
|
||
<div class="timeline-date">April 2023 – Present</div>
|
||
<p class="timeline-description">
|
||
Providing specialized consulting services in virtualization, containerization, network security, and custom GIS solutions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<div class="timeline-dot"></div>
|
||
<div class="timeline-content">
|
||
<h3 class="timeline-title">Previous Roles</h3>
|
||
<h4 class="timeline-subtitle">System & Network Engineering Positions</h4>
|
||
<div class="timeline-date">Prior Experience</div>
|
||
<p class="timeline-description">
|
||
Extensive experience in MSPs, network engineering, and diverse IT environments.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Let's Connect</h2>
|
||
<p class="section-description">
|
||
Have a project in mind? Reach out to discuss how I can help.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="contact-grid">
|
||
<div class="contact-info">
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fas fa-envelope"></i>
|
||
</div>
|
||
<h3 class="contact-title">Email</h3>
|
||
<a href="mailto:daniel@laforceit.com">daniel@laforceit.com</a>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fab fa-linkedin"></i>
|
||
</div>
|
||
<h3 class="contact-title">LinkedIn</h3>
|
||
<p><a href="https://www.linkedin.com/in/danlaforce" target="_blank">linkedin.com/in/danlaforce</a></p>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fab fa-github"></i>
|
||
</div>
|
||
<h3 class="contact-title">GitHub</h3>
|
||
<p><a href="https://github.com/keyargo" target="_blank">github.com/danlaforce</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form-container">
|
||
<form id="contact-form" class="contact-form">
|
||
<div class="form-group">
|
||
<label for="name">Name</label>
|
||
<input type="text" id="name" name="name" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" id="email" name="email" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="subject">Subject</label>
|
||
<input type="text" id="subject" name="subject" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="message">Message</label>
|
||
<textarea id="message" name="message" rows="5" required></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">
|
||
<i class="fas fa-paper-plane btn-icon"></i>
|
||
Send Message
|
||
</button>
|
||
</form>
|
||
<div id="form-notification" class="form-notification" style="display: none;">
|
||
<i class="fas fa-check-circle"></i>
|
||
<span class="notification-text">Message sent successfully! We'll get back to you soon.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<span class="logo-text-glow">LaForceIT</span>
|
||
<span class="logo-dot-glow">.com</span>
|
||
</div>
|
||
|
||
<div class="footer-links">
|
||
<a href="#home">Home</a>
|
||
<a href="#services">Services</a>
|
||
<a href="#lab">Live Lab</a>
|
||
<a href="#projects">Projects</a>
|
||
<a href="#experience">Experience</a>
|
||
<a href="#contact">Contact</a>
|
||
</div>
|
||
|
||
<div class="footer-social">
|
||
<a href="https://www.linkedin.com/in/danlaforce" target="_blank" title="LinkedIn">
|
||
<i class="fab fa-linkedin"></i>
|
||
</a>
|
||
<a href="https://github.com/keyargo" target="_blank" title="GitHub">
|
||
<i class="fab fa-github"></i>
|
||
</a>
|
||
<a href="mailto:daniel@laforceit.com" title="Email">
|
||
<i class="fas fa-envelope"></i>
|
||
</a>
|
||
<a href="https://git.argobox.com" target="_blank" title="Gitea">
|
||
<i class="fas fa-code-branch"></i>
|
||
</a>
|
||
<a href="https://www.argobox.com" target="_blank" title="ArgoBox Lab">
|
||
<i class="fas fa-flask"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="#home">Home</a>
|
||
<a href="#portfolio">Portfolio</a>
|
||
<a href="#services">Services</a>
|
||
<a href="#lab">Live Lab</a>
|
||
<a href="resume.html">Resume</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© All rights reserved. LaForceIT.com</p>
|
||
<p class="disclaimer">Custom-built with HTML, CSS, and JavaScript.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<!-- START: MODALS (Place near end of body) -->
|
||
<!-- CPE Vault Modal -->
|
||
<div id="cpeVaultModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</span>
|
||
<h2>CPE Vault Wiring Diagram & Build</h2>
|
||
|
||
<div class="gallery-container">
|
||
<div class="gallery-main">
|
||
<img src="images/cpe-vault/build.jpeg" alt="CPE Vault Build - Main View" id="galleryMainImage">
|
||
</div>
|
||
<div class="gallery-thumbnails">
|
||
<!-- Make sure these images exist in the correct path -->
|
||
<img src="images/cpe-vault/build.jpeg" alt="Build Main View" class="thumbnail active" data-img="images/cpe-vault/build.jpeg">
|
||
<img src="images/cpe-vault/cover.jpg" alt="Diagram Cover Page" class="thumbnail" data-img="images/cpe-vault/cover.jpg">
|
||
<img src="images/cpe-vault/page1.jpg" alt="Diagram Page 1" class="thumbnail" data-img="images/cpe-vault/page1.jpg">
|
||
<img src="images/cpe-vault/page2.jpg" alt="Diagram Page 2" class="thumbnail" data-img="images/cpe-vault/page2.jpg">
|
||
<img src="images/cpe-vault/page3.jpg" alt="Diagram Page 3" class="thumbnail" data-img="images/cpe-vault/page3.jpg">
|
||
<img src="images/cpe-vault/page4.jpg" alt="Diagram Page 4" class="thumbnail" data-img="images/cpe-vault/page4.jpg">
|
||
<img src="images/cpe-vault/page5.jpg" alt="Diagram Page 5" class="thumbnail" data-img="images/cpe-vault/page5.jpg">
|
||
<img src="images/cpe-vault/page6.jpg" alt="Diagram Page 6" class="thumbnail" data-img="images/cpe-vault/page6.jpg">
|
||
<img src="images/cpe-vault/page7.jpg" alt="Diagram Page 7" class="thumbnail" data-img="images/cpe-vault/page7.jpg">
|
||
<img src="images/cpe-vault/page8.jpg" alt="Diagram Page 8" class="thumbnail" data-img="images/cpe-vault/page8.jpg">
|
||
<img src="images/cpe-vault/page9.jpg" alt="Diagram Page 9" class="thumbnail" data-img="images/cpe-vault/page9.jpg">
|
||
<img src="images/cpe-vault/page10.jpg" alt="Diagram Page 10" class="thumbnail" data-img="images/cpe-vault/page10.jpg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Data Center Modal -->
|
||
<div id="dataCenterModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close-modal">×</span>
|
||
<h2>Enterprise Data Center Deployment Gallery</h2>
|
||
|
||
<div class="gallery-container">
|
||
<div class="gallery-main">
|
||
<img src="images/data-center/datacenter-cover.jpeg" alt="Data Center Build - Overview" id="dcGalleryMainImage">
|
||
</div>
|
||
<div class="gallery-thumbnails">
|
||
<!-- Make sure these images exist -->
|
||
<img src="images/data-center/datacenter-cover.jpeg" alt="Data Center Overview" class="thumbnail active" data-img="images/data-center/datacenter-cover.jpeg">
|
||
<img src="images/data-center/shipment.jpeg" alt="Rack Shipments Arriving" class="thumbnail" data-img="images/data-center/shipment.jpeg">
|
||
<img src="images/data-center/datacenter-before.jpeg" alt="Lab Equipment Before Move" class="thumbnail" data-img="images/data-center/datacenter-before.jpeg">
|
||
<img src="images/data-center/cages.jpeg" alt="Custom WiFi Faraday Cages" class="thumbnail" data-img="images/data-center/cages.jpeg">
|
||
<!-- Add more thumbnails for other data center images if available -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- END: MODALS -->
|
||
|
||
<!-- Main JavaScript (Original) -->
|
||
<script src="script.js"></script>
|
||
<!-- Added Portfolio Specific JavaScript -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// --- Portfolio Tabs Functionality ---
|
||
const tabs = document.querySelectorAll('.portfolio-tab');
|
||
const projectCards = document.querySelectorAll('#projects-content .project-card'); // Target specific project cards
|
||
const portfolioSections = document.querySelectorAll('.portfolio-section'); // Includes projects and SOPs sections
|
||
const sopsSection = document.getElementById('sops');
|
||
const projectsContentSection = document.getElementById('projects-content');
|
||
|
||
tabs.forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
const targetCategory = tab.dataset.target;
|
||
|
||
// Show/Hide SOPs section vs Projects section
|
||
if (targetCategory === 'sop') {
|
||
projectsContentSection.classList.add('hidden');
|
||
sopsSection.classList.remove('hidden');
|
||
} else {
|
||
sopsSection.classList.add('hidden');
|
||
projectsContentSection.classList.remove('hidden');
|
||
|
||
// Filter project cards
|
||
projectCards.forEach(card => {
|
||
const cardCategories = card.dataset.categories ? card.dataset.categories.split(' ') : [];
|
||
if (targetCategory === 'all' || cardCategories.includes(targetCategory)) {
|
||
card.style.display = ''; // Let CSS rule apply (should be flex)
|
||
} else {
|
||
card.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// --- Modal Functionality ---
|
||
|
||
const modals = document.querySelectorAll('.modal'); // Get all modals
|
||
const closeModalButtons = document.querySelectorAll('.close-modal');
|
||
|
||
// Function to open a modal
|
||
const openModal = (modalId) => {
|
||
const modal = document.getElementById(modalId);
|
||
if (modal) {
|
||
modal.style.display = "block";
|
||
document.body.style.overflow = 'hidden'; // Prevent background scrolling
|
||
}
|
||
};
|
||
|
||
// Function to close a modal
|
||
const closeModal = (modal) => {
|
||
if (modal) {
|
||
modal.style.display = "none";
|
||
document.body.style.overflow = ''; // Restore background scrolling
|
||
}
|
||
};
|
||
|
||
// Add click listeners to buttons that open modals
|
||
document.querySelectorAll('.view-datacenter').forEach(button => {
|
||
button.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
openModal('dataCenterModal');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.view-cpe-vault').forEach(button => {
|
||
button.addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
openModal('cpeVaultModal');
|
||
});
|
||
});
|
||
|
||
// Add click listeners to all close buttons
|
||
closeModalButtons.forEach(button => {
|
||
button.addEventListener('click', () => {
|
||
// Find the parent modal and close it
|
||
closeModal(button.closest('.modal'));
|
||
});
|
||
});
|
||
|
||
// Add click listener to window to close modal if clicked outside content
|
||
window.addEventListener('click', (event) => {
|
||
modals.forEach(modal => {
|
||
if (event.target === modal) {
|
||
closeModal(modal);
|
||
}
|
||
});
|
||
});
|
||
|
||
// --- Thumbnail Click Functionality for BOTH Modals ---
|
||
const setupGallery = (modalId, mainImageId) => {
|
||
const modal = document.getElementById(modalId);
|
||
if (!modal) return; // Exit if modal not found
|
||
|
||
const thumbnails = modal.querySelectorAll('.thumbnail');
|
||
const mainImage = modal.querySelector(`#${mainImageId}`); // Correctly select the main image within the modal
|
||
|
||
thumbnails.forEach(thumb => {
|
||
thumb.addEventListener('click', () => {
|
||
// Update active thumbnail style
|
||
thumbnails.forEach(t => t.classList.remove('active'));
|
||
thumb.classList.add('active');
|
||
|
||
// Update main image source and alt text
|
||
if (mainImage) {
|
||
mainImage.src = thumb.getAttribute('data-img');
|
||
mainImage.alt = thumb.alt;
|
||
}
|
||
});
|
||
});
|
||
};
|
||
|
||
// Set up galleries for each modal
|
||
setupGallery('cpeVaultModal', 'galleryMainImage');
|
||
setupGallery('dataCenterModal', 'dcGalleryMainImage');
|
||
|
||
// --- Add any dynamic metric updates here if needed ---
|
||
// Example (replace with actual data fetching):
|
||
// const updateMetrics = () => {
|
||
// document.getElementById('cpu-metric').textContent = `${Math.floor(Math.random() * 100)}%`;
|
||
// document.getElementById('cpu-progress').style.width = document.getElementById('cpu-metric').textContent;
|
||
// // ... update other metrics ...
|
||
// };
|
||
// setInterval(updateMetrics, 5000); // Update every 5 seconds
|
||
// updateMetrics(); // Initial call
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |