Ceds-HomeLab/ceds-noc
1
1
Fork 0
mirror of https://github.com/ced4568/ceds-noc.git synced 2026-08-12 21:04:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade portfolio to elite v2 systems layout

Browse Source
This commit is contained in:
ced4568
2026-04-25 01:56:11 -05:00
parent 6f31f7e109
commit d84450b61b
2 changed files with 394 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+192 -38
View File
@@ -3,19 +3,25 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chase Dumphord | Digital Systems & Infrastructure</title>
<meta
name="description"
content="Chase Dumphord portfolio - digital systems, infrastructure, networking, automation, and real-world technical projects."
content="Chase Dumphord portfolio - digital systems, infrastructure, networking, automation, homelab engineering, and real-world technical projects."
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<div class="container nav">
<a href="#top" class="logo">Chase Dumphord</a>
<nav>
<ul class="nav-links">
<li><a href="#snapshot">Snapshot</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#resume">Resume</a></li>
@@ -29,11 +35,14 @@
<section class="hero">
<div class="container hero-grid">
<div class="hero-text">
<p class="eyebrow">Digital Systems • Infrastructure • Networking • Automation</p>
<h1>I build real-world systems that connect hardware, networks, software, and operations.</h1>
<p class="eyebrow">Digital Systems • Infrastructure • Networking • Automation • Edge Systems</p>
<h1>I build practical systems that connect hardware, networks, software, and operations.</h1>
<p class="lead">
I’m Chase Dumphord. My work spans digital systems, Linux infrastructure, homelab engineering,
Raspberry Pi deployments, networking, automation, and practical technical problem solving.
I’m Chase Dumphord — a hands-on systems builder focused on digital infrastructure,
Linux systems, homelab engineering, Raspberry Pi deployments, networking, automation,
and real-world technical problem solving.
</p>
<div class="hero-actions">
@@ -42,14 +51,82 @@
</div>
<ul class="quick-facts">
<li>Based in Oxford, MS</li>
<li>GitHub: <a href="https://github.com/ced4568" target="_blank" rel="noopener noreferrer">ced4568</a></li>
<li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li>Oxford, MS</li>
<li>
GitHub:
<a href="https://github.com/ced4568" target="_blank" rel="noopener noreferrer">ced4568</a>
</li>
<li>
Email:
<a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
</div>
<div class="hero-image-card">
<img src="assets/images/ChaseD_headshot.jpg" alt="Headshot of Chase Dumphord" class="hero-image" />
<div class="hero-panel">
<img
src="assets/images/ChaseD_headshot.jpg"
alt="Headshot of Chase Dumphord"
class="hero-image"
/>
<div class="terminal-card">
<div class="terminal-top">
<span></span>
<span></span>
<span></span>
</div>
<pre><code>$ whoami
systems_builder
$ focus
infrastructure
networking
automation
edge_systems
$ status
building_real_systems</code></pre>
</div>
</div>
</div>
</section>
<section id="snapshot" class="section section-alt">
<div class="container">
<div class="section-heading">
<p class="section-label">Environment</p>
<h2>Systems Snapshot</h2>
<p class="section-intro">
A quick look at the infrastructure and systems I’m actively building and documenting.
</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<h3>12+</h3>
<p>Nodes</p>
<span>K3s cluster environment</span>
</div>
<div class="stat-card">
<h3>10+</h3>
<p>Services</p>
<span>Self-hosted stack</span>
</div>
<div class="stat-card">
<h3>4</h3>
<p>VLANs</p>
<span>Segmented network design</span>
</div>
<div class="stat-card">
<h3>2</h3>
<p>iGate Nodes</p>
<span>Home + mobile APRS</span>
</div>
</div>
</div>
</section>
@@ -64,19 +141,22 @@
<div class="content-grid">
<div class="card">
<p>
I’m a technical professional focused on digital systems, infrastructure, networking, automation,
and hands-on system integration. I enjoy building systems that are practical, reliable, and well documented —
from homelab services and dashboards to Raspberry Pi deployments, APRS iGates, and troubleshooting workflows.
I’m a technical professional focused on digital systems, infrastructure, networking,
automation, and hands-on system integration. I enjoy building systems that are practical,
reliable, and well documented — from homelab services and dashboards to Raspberry Pi
deployments, APRS iGates, and troubleshooting workflows.
</p>
<p>
My background blends field engineering, industrial technology, software-oriented thinking, and infrastructure
problem solving. I’m especially interested in projects that connect the physical and digital worlds through
monitoring, networking, automation, and resilient design.
My background blends field engineering, industrial technology, software-oriented thinking,
and infrastructure problem solving. I’m especially interested in projects that connect the
physical and digital worlds through monitoring, networking, automation, and resilient design.
</p>
</div>
<div class="card">
<h3>Core Focus Areas</h3>
<ul class="clean-list">
<li>Digital systems and infrastructure</li>
<li>Linux systems and service management</li>
@@ -89,64 +169,95 @@
</div>
</section>
<section id="projects" class="section">
<section id="projects" class="section section-alt">
<div class="container">
<div class="section-heading">
<p class="section-label">Projects</p>
<h2>🔧 Infrastructure & Systems Projects</h2>
<p class="section-intro">
These projects are built around real systems, networking, Linux services, edge devices,
and practical documentation.
</p>
</div>
<div class="projects-grid">
<div class="project-card">
<article class="project-card featured-project">
<div class="project-top">
<h3>🧠 Ced’s HomeLab Infrastructure</h3>
<span class="status-pill">Flagship</span>
</div>
<p class="tags">Infrastructure • Networking • Virtualization • Monitoring • Self-Hosting</p>
<p>
Personal infrastructure lab focused on networking, monitoring, virtualization,
service hosting, and systems documentation.
<p class="project-impact">
Designed as a practical infrastructure environment for networking, monitoring,
service hosting, and documentation.
</p>
<ul>
<p>
Personal infrastructure lab focused on network segmentation, virtualization,
self-hosted services, monitoring, and architecture documentation.
</p>
<ul class="clean-list">
<li>VLAN segmentation and network design</li>
<li>Proxmox virtualization</li>
<li>Self-hosted services and monitoring</li>
<li>System architecture documentation</li>
</ul>
<a href="https://github.com/ced4568/ceds-homelab" target="_blank" class="project-link">
<a href="https://github.com/ced4568/ceds-homelab" target="_blank" rel="noopener noreferrer" class="project-link">
View Project →
</a>
</article>
<article class="project-card">
<div class="project-top">
<h3>☸️ K3s Kubernetes Cluster</h3>
<span class="status-pill">Infrastructure</span>
</div>
<div class="project-card">
<h3>☸️ K3s Kubernetes Cluster</h3>
<p class="tags">Kubernetes • Containers • Linux • Infrastructure • Automation</p>
<p class="project-impact">
Built to simulate distributed infrastructure, container orchestration, and scalable service deployment.
</p>
<p>
Multi-node K3s cluster built for container orchestration, service deployment,
and infrastructure experimentation.
</p>
<ul>
<ul class="clean-list">
<li>Multi-node cluster setup</li>
<li>Containerized workloads</li>
<li>Service deployment</li>
<li>Infrastructure automation</li>
</ul>
<a href="https://github.com/ced4568/ced-k3s-homelab" target="_blank" class="project-link">
<a href="https://github.com/ced4568/ced-k3s-homelab" target="_blank" rel="noopener noreferrer" class="project-link">
View Project →
</a>
</article>
<article class="project-card">
<div class="project-top">
<h3>📡 APRS iGate System</h3>
<span class="status-pill">Edge System</span>
</div>
<div class="project-card">
<h3>📡 APRS iGate System</h3>
<p class="tags">RF • Linux • Raspberry Pi • Networking • APRS-IS • Edge Systems</p>
<p class="project-impact">
Bridges RF communication into IP-based infrastructure using Linux, Direwolf, and APRS-IS.
</p>
<p>
Operational dual-node APRS iGate system built with Raspberry Pi, Direwolf, APRS-IS,
RF radios, HomeLab network integration, and planned mobile GPS support.
</p>
<ul>
<ul class="clean-list">
<li>RF packet decoding with Direwolf</li>
<li>APRS-IS uplink verified on aprs.fi</li>
<li>HomeLab WiFi + mobile hotspot failover</li>
@@ -154,11 +265,39 @@
<li>Documented configs, architecture, and troubleshooting</li>
</ul>
<a href="https://github.com/ced4568/ceds-aprs-igate" target="_blank" class="project-link">
<a href="https://github.com/ced4568/ceds-aprs-igate" target="_blank" rel="noopener noreferrer" class="project-link">
View Project →
</a>
</article>
</div>
</div>
</section>
<section class="section noc-section">
<div class="container">
<div class="section-heading">
<p class="section-label">Future Buildout</p>
<h2>📊 Ced’s NOC Vision</h2>
<p class="section-intro">
The long-term goal is to bring these systems together into a unified network operations view.
</p>
</div>
<div class="noc-grid">
<div class="noc-card">
<h3>Monitoring</h3>
<p>Grafana, Prometheus, Uptime Kuma, and service-level visibility.</p>
</div>
<div class="noc-card">
<h3>Infrastructure</h3>
<p>HomeLab services, K3s nodes, VLANs, and self-hosted systems.</p>
</div>
<div class="noc-card">
<h3>Edge Systems</h3>
<p>APRS iGate nodes, Raspberry Pi devices, and field/mobile deployments.</p>
</div>
</div>
</div>
</section>
@@ -173,6 +312,7 @@
<div class="content-grid">
<div class="card">
<h3>What I Bring</h3>
<ul class="clean-list">
<li>Industrial and field-service technical experience</li>
<li>Linux, Raspberry Pi, and systems administration work</li>
@@ -183,10 +323,13 @@
<div class="card">
<h3>Current Direction</h3>
<p>
I’m positioning myself around digital systems, infrastructure, networking, automation, and technical operations —
especially roles where hands-on problem solving and system integration matter.
I’m positioning myself around digital systems, infrastructure, networking,
automation, and technical operations — especially roles where hands-on problem
solving and system integration matter.
</p>
<p>
More detailed resume content will be added here as the portfolio grows.
</p>
@@ -198,15 +341,21 @@
<section class="section section-alt personal-section">
<div class="container personal-grid">
<div class="personal-image-wrap">
<img src="assets/images/lakephotopinkpants.png" alt="Chase Dumphord standing by a fence with a lake view in the background" class="personal-image" />
<img
src="assets/images/lakephotopinkpants.png"
alt="Chase Dumphord standing by a fence with a lake view in the background"
class="personal-image"
/>
</div>
<div class="card">
<p class="section-label">Personal Note</p>
<h2>Technical, curious, and always building</h2>
<p>
Outside of work, I enjoy electronics, self-hosting, coding, drones, radio, and hands-on technical projects that
push me to learn something useful. That curiosity carries directly into the way I build and document systems.
Outside of work, I enjoy electronics, self-hosting, coding, drones, radio, and
hands-on technical projects that push me to learn something useful. That curiosity
carries directly into the way I build and document systems.
</p>
</div>
</div>
@@ -222,14 +371,19 @@
<div class="contact-grid">
<div class="card">
<h3>Contact Info</h3>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: <a href="tel:+16622142231">662-214-2231</a></p>
<p>Location: Oxford, MS</p>
<p>GitHub: <a href="https://github.com/ced4568" target="_blank" rel="noopener noreferrer">github.com/ced4568</a></p>
<p>
GitHub:
<a href="https://github.com/ced4568" target="_blank" rel="noopener noreferrer">github.com/ced4568</a>
</p>
</div>
<div class="card">
<h3>What I’m Open To</h3>
<ul class="clean-list">
<li>Digital systems and infrastructure roles</li>
<li>Networking and technical operations work</li>
style.css
+200 -89
View File
@@ -1,13 +1,16 @@
:root {
--bg: #0b1220;
--bg-soft: #121a2b;
--card: #172235;
--text: #e8eefc;
--muted: #a9b6d3;
--line: rgba(255, 255, 255, 0.08);
--accent: #66b3ff;
--bg: #070b12;
--bg-soft: #0d1422;
--bg-alt: #101827;
--card: #111c2e;
--card-2: #0f1726;
--text: #e7edf7;
--muted: #a8b3c7;
--line: rgba(255, 255, 255, 0.1);
--accent: #58a6ff;
--accent-2: #8ef0cf;
--shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
--warning: #f2cc60;
--shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
--radius: 18px;
--max: 1120px;
}
@@ -24,10 +27,11 @@ body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background:
radial-gradient(circle at top left, rgba(102, 179, 255, 0.08), transparent 30%),
linear-gradient(180deg, #0b1220 0%, #0d1424 100%);
radial-gradient(circle at top left, rgba(88, 166, 255, 0.14), transparent 28%),
radial-gradient(circle at 80% 20%, rgba(142, 240, 207, 0.08), transparent 26%),
linear-gradient(180deg, var(--bg) 0%, #0b1220 100%);
color: var(--text);
line-height: 1.6;
line-height: 1.65;
}
img {
@@ -53,40 +57,44 @@ a:hover {
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(12px);
background: rgba(11, 18, 32, 0.82);
backdrop-filter: blur(14px);
background: rgba(7, 11, 18, 0.86);
border-bottom: 1px solid var(--line);
}
.nav {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
}
.logo {
color: var(--text);
font-weight: 700;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.logo::after {
content: " >";
color: var(--accent-2);
}
.logo:hover {
text-decoration: none;
}
.nav-links {
display: flex;
gap: 1.1rem;
list-style: none;
gap: 1.2rem;
margin: 0;
padding: 0;
margin: 0;
}
.nav-links a {
color: var(--muted);
font-size: 0.96rem;
font-size: 0.95rem;
}
.nav-links a:hover {
@@ -100,7 +108,7 @@ a:hover {
.hero-grid {
display: grid;
grid-template-columns: 1.35fr 0.9fr;
grid-template-columns: 1.25fr 0.85fr;
gap: 2rem;
align-items: center;
}
@@ -110,36 +118,36 @@ a:hover {
color: var(--accent-2);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 0.9rem;
font-size: 0.78rem;
font-weight: 800;
margin: 0 0 0.85rem;
}
.hero h1 {
margin: 0 0 1rem;
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: 1.1;
font-size: clamp(2.25rem, 4vw, 4.2rem);
line-height: 1.08;
}
.lead {
color: var(--muted);
font-size: 1.05rem;
max-width: 60ch;
font-size: 1.07rem;
max-width: 62ch;
}
.hero-actions {
display: flex;
gap: 1rem;
margin: 1.75rem 0 1.25rem;
flex-wrap: wrap;
gap: 1rem;
margin: 1.8rem 0 1.25rem;
}
.btn {
display: inline-block;
padding: 0.9rem 1.2rem;
border-radius: 999px;
font-weight: 700;
transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
font-weight: 800;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:hover {
@@ -155,7 +163,7 @@ a:hover {
.btn-secondary {
border: 1px solid var(--line);
color: var(--text);
background: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.035);
}
.quick-facts {
@@ -168,10 +176,20 @@ a:hover {
color: var(--muted);
}
.hero-panel {
display: grid;
gap: 1rem;
}
.hero-image-card,
.terminal-card,
.card,
.project-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025));
.project-card,
.stat-card,
.noc-card,
.personal-image-wrap {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
@@ -187,29 +205,72 @@ a:hover {
object-fit: cover;
}
.terminal-card {
overflow: hidden;
}
.terminal-top {
display: flex;
gap: 0.45rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--line);
background: rgba(0, 0, 0, 0.22);
}
.terminal-top span {
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--accent);
}
.terminal-top span:nth-child(2) {
background: var(--warning);
}
.terminal-top span:nth-child(3) {
background: var(--accent-2);
}
.terminal-card pre {
margin: 0;
padding: 1rem;
overflow: auto;
color: var(--accent-2);
font-size: 0.88rem;
}
.section {
padding: 4rem 0;
padding: 4.2rem 0;
}
.section-alt {
background: rgba(255, 255, 255, 0.02);
background: rgba(255, 255, 255, 0.025);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.section-heading {
margin-bottom: 1.5rem;
margin-bottom: 1.6rem;
}
.section h2 {
margin: 0;
font-size: clamp(1.7rem, 2.6vw, 2.5rem);
font-size: clamp(1.7rem, 2.6vw, 2.6rem);
line-height: 1.15;
}
.section-intro {
color: var(--muted);
max-width: 70ch;
}
.content-grid,
.projects-grid,
.contact-grid,
.personal-grid {
.personal-grid,
.noc-grid,
.stats-grid {
display: grid;
gap: 1.25rem;
}
@@ -219,60 +280,117 @@ a:hover {
}
.projects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contact-grid,
.personal-grid {
grid-template-columns: 0.95fr 1.05fr;
align-items: center;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stats-grid,
.noc-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.noc-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card,
.project-card {
.project-card,
.stat-card,
.noc-card {
padding: 1.35rem;
}
.card h3,
.project-card h3,
.noc-card h3 {
margin-top: 0;
}
.project-card {
position: relative;
}
.featured-project {
border-color: rgba(142, 240, 207, 0.28);
}
.project-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
align-items: flex-start;
}
.project-card h3,
.card h3 {
margin-top: 0;
}
.tag {
.status-pill {
display: inline-block;
padding: 0.35rem 0.7rem;
padding: 0.34rem 0.65rem;
border-radius: 999px;
background: rgba(102, 179, 255, 0.12);
border: 1px solid rgba(102, 179, 255, 0.22);
background: rgba(88, 166, 255, 0.12);
border: 1px solid rgba(88, 166, 255, 0.24);
color: var(--accent);
font-size: 0.8rem;
font-size: 0.76rem;
font-weight: 800;
white-space: nowrap;
}
.tags {
color: var(--accent-2);
font-size: 0.9rem;
font-weight: 700;
margin: 0.25rem 0 1rem;
}
.project-impact {
color: var(--text);
border-left: 3px solid var(--accent-2);
padding-left: 0.8rem;
margin: 1rem 0;
font-weight: 700;
}
.clean-list {
margin: 0.8rem 0 0;
padding-left: 1.2rem;
padding-left: 1.15rem;
}
.project-links {
.project-link {
display: inline-block;
margin-top: 1rem;
color: var(--accent);
font-weight: 800;
}
.stat-card h3 {
margin: 0;
font-size: 2.2rem;
color: var(--accent-2);
}
.stat-card p {
margin: 0.25rem 0;
font-weight: 800;
color: var(--text);
}
.stat-card span {
color: var(--muted);
font-size: 0.92rem;
}
.noc-section {
background:
linear-gradient(135deg, rgba(88, 166, 255, 0.08), rgba(142, 240, 207, 0.04));
}
.personal-grid {
align-items: center;
}
.personal-image-wrap {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.025));
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1rem;
}
@@ -289,9 +407,8 @@ a:hover {
.footer-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
align-items: center;
color: var(--muted);
}
@@ -304,12 +421,19 @@ a:hover {
text-decoration: none;
}
@media (max-width: 1050px) {
.projects-grid,
.stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.hero-grid,
.content-grid,
.projects-grid,
.contact-grid,
.personal-grid {
.personal-grid,
.noc-grid {
grid-template-columns: 1fr;
}
@@ -317,7 +441,7 @@ a:hover {
flex-direction: column;
justify-content: center;
padding: 0.85rem 0;
gap: 0.75rem;
gap: 0.8rem;
}
.nav-links {
@@ -330,7 +454,12 @@ a:hover {
}
}
@media (max-width: 560px) {
@media (max-width: 620px) {
.projects-grid,
.stats-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2rem;
}
@@ -346,24 +475,6 @@ a:hover {
.footer-content {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
}
.project-link {
display: inline-block;
margin-top: 10px;
color: #4ea1ff;
font-weight: bold;
text-decoration: none;
}
.project-link:hover {
text-decoration: underline;
}
.tags {
color: #8ef0cf;
font-size: 0.9rem;
font-weight: 600;
margin: 0.25rem 0 1rem;
}