547 lines
28 KiB
HTML
547 lines
28 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 Engineer</title>
|
||
<meta name="description" content="Expert in systems administration, network engineering, and infrastructure solutions. Specializing in virtualization, containerization, and secure cloud migrations.">
|
||
<meta name="keywords" content="system administrator, network engineer, infrastructure, virtualization, kubernetes, docker, cloud migration">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
|
||
|
||
<!-- CSS -->
|
||
<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&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation Bar -->
|
||
<nav class="navbar">
|
||
<div class="container">
|
||
<div class="logo">
|
||
<span class="logo-text">Argobox</span>
|
||
<span class="logo-dot">.com</span>
|
||
</div>
|
||
<div class="nav-menu">
|
||
<a href="#home" class="nav-link active">Home</a>
|
||
<a href="#services" class="nav-link">Services</a>
|
||
<a href="#lab" class="nav-link">Live Lab</a>
|
||
<a href="#projects" class="nav-link">Projects</a>
|
||
<a href="#experience" class="nav-link">Experience</a>
|
||
<a href="#contact" class="nav-link">Contact</a>
|
||
</div>
|
||
<div class="nav-buttons">
|
||
<a href="https://dashboard.argobox.com" class="dashboard-link">
|
||
<span class="live-indicator"></span>
|
||
<span>Live Dashboard</span>
|
||
</a>
|
||
<button class="menu-toggle">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="home" class="hero">
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<h1 class="hero-title">
|
||
<span class="highlight">Infrastructure</span> & <span class="highlight">Systems</span> Architect
|
||
</h1>
|
||
<div class="status-indicator">
|
||
<div class="live-indicator"></div>
|
||
<span>Lab Status: Online</span>
|
||
</div>
|
||
<p class="hero-description">
|
||
I build resilient infrastructure and automation solutions — from virtualization and containerization to secure network architecture and cloud migration.
|
||
</p>
|
||
<div class="command-line">
|
||
<span class="typing-animation">> Ready for deployment...</span>
|
||
</div>
|
||
<div class="hero-buttons">
|
||
<a href="#contact" class="btn btn-primary">Hire Me</a>
|
||
<a href="#lab" class="btn btn-outline">Explore My Lab</a>
|
||
<a href="resume.pdf" class="btn btn-outline" target="_blank">View Resume</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="data-stream">
|
||
<div class="data-line" style="left: 10%; width: 80%; animation-duration: 3s;"></div>
|
||
<div class="data-line" style="left: 15%; width: 60%; animation-duration: 4s;"></div>
|
||
<div class="data-line" style="left: 25%; width: 30%; animation-duration: 2.5s;"></div>
|
||
<div class="data-line" style="left: 40%; width: 50%; animation-duration: 3.5s;"></div>
|
||
<div class="data-line" style="left: 55%; width: 35%; animation-duration: 4.5s;"></div>
|
||
<div class="data-line" style="left: 70%; width: 25%; animation-duration: 2s;"></div>
|
||
<div class="data-line" style="left: 85%; width: 10%; animation-duration: 3.8s;"></div>
|
||
</div>
|
||
<div class="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: 16 running </div>
|
||
<div class="terminal-line warning"> > Backing up critical data... </div>
|
||
<div class="terminal-line"> > Status: All systems operational </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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://dashboard.argobox.com" 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://sandbox.argobox.com" class="btn btn-outline" target="_blank">Try Ansible Sandbox</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lab-card">
|
||
<h3 class="lab-card-title">Real-Time Metrics</h3>
|
||
|
||
<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>
|
||
|
||
<h4 class="lab-subtitle">Active Services:</h4>
|
||
<div class="services-grid-small">
|
||
<div class="service-tag"><span class="status-dot"></span>Gitea</div>
|
||
<div class="service-tag"><span class="status-dot"></span>VSCode Server</div>
|
||
<div class="service-tag"><span class="status-dot"></span>rTorrent</div>
|
||
<div class="service-tag"><span class="status-dot"></span>NAS</div>
|
||
<div class="service-tag"><span class="status-dot"></span>Traefik</div>
|
||
<div class="service-tag"><span class="status-dot"></span>K3s</div>
|
||
<div class="service-tag"><span class="status-dot"></span>Cloudflared</div>
|
||
<div class="service-tag"><span class="status-dot"></span>FileBrowser</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 (Optional) -->
|
||
<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-item-title">Email</h3>
|
||
<p><a href="mailto:contact@argobox.com">contact@argobox.com</a></p>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fab fa-linkedin"></i>
|
||
</div>
|
||
<h3 class="contact-item-title">LinkedIn</h3>
|
||
<p><a href="https://linkedin.com/in/yourprofile" target="_blank">Connect on LinkedIn</a></p>
|
||
</div>
|
||
|
||
<div class="contact-item">
|
||
<div class="contact-icon">
|
||
<i class="fab fa-github"></i>
|
||
</div>
|
||
<h3 class="contact-item-title">GitHub</h3>
|
||
<p><a href="https://github.com/yourusername" target="_blank">View My Projects</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">Send Message</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<span class="logo-text">Argobox</span>
|
||
<span class="logo-dot">.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://linkedin.com/in/yourprofile" target="_blank"><i class="fab fa-linkedin"></i></a>
|
||
<a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i></a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© <span id="current-year">2025</span> Argobox.com. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html> |