Update to be anupdate resume

This commit is contained in:
Justin 2026-04-13 15:18:12 -05:00
parent 7561b6eafd
commit 387af6347c
5 changed files with 821 additions and 60 deletions

View File

@ -1,39 +0,0 @@
body{
background-image: url("../images/Shreveport.jpg");
background-color: black;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.title{
font-family: "Press Start 2P", system-ui;
text-align: center;
font-size: 3.5em;
padding-top: 1em;
font-weight: 600;
}
.off-white-title{
background-color: rgb(245,245,245,0.8);
width: 80%;
margin: 0.5em auto;
padding: 0.5em;
border-radius: 0.25em;
max-width: 10em;
}
.off-white-body{
background-color: rgb(245,245,245,0.8);
width: 80%;
margin: 0.5em auto;
padding: 0.5em;
border-radius: 0.25em;
max-width: 50em;
}
.intro{
text-align: center;
font-size: 1.2em;
}

489
css/style.css Normal file
View File

@ -0,0 +1,489 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0c10;
--bg2: #0f1218;
--bg3: #151a22;
--border: #1e2530;
--accent: #00d4aa;
--accent2: #0088ff;
--dim: #4a5568;
--mid: #8892a4;
--text: #c9d1e0;
--bright: #e8edf5;
--red: #ff4d6a;
--yellow: #ffd166;
--font-mono: 'IBM Plex Mono', monospace;
--font-sans: 'IBM Plex Sans', sans-serif;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.7;
min-height: 100vh;
}
/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* ── Layout ── */
.layout {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
/* ── Sidebar ── */
aside {
position: sticky;
top: 0;
height: 100vh;
background: var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
padding: 2.5rem 1.8rem;
overflow-y: auto;
}
.profile-photo {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid var(--accent);
object-fit: cover;
margin-bottom: 1rem;
}
.profile-name {
font-family: var(--font-mono);
font-size: 1.15rem;
font-weight: 600;
color: var(--bright);
letter-spacing: -0.02em;
}
.profile-title {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: 0.25rem;
}
.profile-loc {
font-size: 0.78rem;
color: var(--dim);
margin-top: 0.5rem;
}
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 1.5rem 0;
}
nav { flex: 1; }
nav a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.6rem;
border-radius: 4px;
color: var(--mid);
text-decoration: none;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
transition: color 0.15s, background 0.15s;
margin-bottom: 0.1rem;
}
nav a:hover, nav a.active {
color: var(--accent);
background: rgba(0, 212, 170, 0.07);
}
nav a .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
transition: background 0.15s;
}
nav a:hover .dot, nav a.active .dot { background: var(--accent); }
.socials {
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 1.5rem;
}
.socials a {
color: var(--dim);
text-decoration: none;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.05em;
transition: color 0.15s;
border: 1px solid var(--border);
padding: 0.2rem 0.5rem;
border-radius: 3px;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); }
/* ── Main Content ── */
main {
padding: 3rem 3.5rem;
max-width: 860px;
}
/* ── Prompt header ── */
.prompt {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--dim);
margin-bottom: 0.4rem;
}
.prompt span { color: var(--accent); }
/* ── Section ── */
section {
margin-bottom: 4rem;
scroll-margin-top: 2rem;
}
.section-label {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
margin-bottom: 0.5rem;
}
h1 {
font-family: var(--font-mono);
font-size: 2.4rem;
font-weight: 600;
color: var(--bright);
line-height: 1.15;
letter-spacing: -0.03em;
}
h2 {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 500;
color: var(--bright);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
h2 .hash { color: var(--accent); margin-right: 0.3rem; }
.hero-sub {
font-size: 1.05rem;
color: var(--mid);
max-width: 540px;
margin-top: 1.2rem;
line-height: 1.8;
}
.hero-sub strong { color: var(--text); font-weight: 500; }
/* ── Tags ── */
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.2rem;
}
.tag {
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 0.25rem 0.7rem;
border-radius: 3px;
border: 1px solid var(--border);
color: var(--mid);
letter-spacing: 0.04em;
background: var(--bg2);
}
.tag.accent { border-color: rgba(0,212,170,0.4); color: var(--accent); }
.tag.blue { border-color: rgba(0,136,255,0.35); color: var(--accent2); }
/* ── Experience cards ── */
.exp-item {
border-left: 2px solid var(--border);
padding: 0 0 2rem 1.5rem;
position: relative;
transition: border-color 0.2s;
}
.exp-item:last-child { padding-bottom: 0; }
.exp-item::before {
content: '';
position: absolute;
left: -5px;
top: 6px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--border);
border: 2px solid var(--bg);
transition: background 0.2s;
}
.exp-item:hover { border-color: var(--accent); }
.exp-item:hover::before { background: var(--accent); }
.exp-role {
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 600;
color: var(--bright);
}
.exp-company {
font-size: 0.85rem;
color: var(--accent2);
margin-top: 0.1rem;
}
.exp-meta {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--dim);
margin: 0.3rem 0 0.8rem;
}
.exp-list {
list-style: none;
font-size: 0.86rem;
color: var(--mid);
}
.exp-list li {
padding: 0.2rem 0;
padding-left: 1.1rem;
position: relative;
}
.exp-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--dim);
font-size: 0.75rem;
}
/* ── Skills grid ── */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1px;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
background: var(--border);
margin-bottom: 1.5rem;
}
.skill-cell {
background: var(--bg2);
padding: 0.9rem 1.1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--mid);
transition: background 0.15s, color 0.15s;
cursor: default;
}
.skill-cell:hover { background: var(--bg3); color: var(--text); }
.skill-cell .skill-icon { color: var(--accent); margin-right: 0.4rem; font-size: 0.7rem; }
/* ── Education ── */
.edu-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.2rem 1.4rem;
margin-bottom: 1rem;
transition: border-color 0.2s;
}
.edu-card:hover { border-color: rgba(0,212,170,0.3); }
.edu-school {
font-family: var(--font-mono);
font-size: 0.88rem;
font-weight: 600;
color: var(--bright);
}
.edu-degree {
font-size: 0.84rem;
color: var(--mid);
margin-top: 0.2rem;
}
.edu-meta {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--dim);
margin-top: 0.4rem;
}
.edu-honor {
display: inline-block;
margin-top: 0.5rem;
font-family: var(--font-mono);
font-size: 0.68rem;
padding: 0.15rem 0.5rem;
border: 1px solid rgba(255, 209, 102, 0.4);
color: var(--yellow);
border-radius: 3px;
}
/* ── Certs ── */
.cert-group { margin-bottom: 1.5rem; }
.cert-group-title {
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--dim);
margin-bottom: 0.7rem;
}
.cert-list { list-style: none; }
.cert-list li {
font-size: 0.84rem;
color: var(--mid);
padding: 0.3rem 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.5rem;
}
.cert-list li:last-child { border-bottom: none; }
.cert-list li::before {
content: '✓';
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--accent);
}
/* ── Contact ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.contact-item {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1rem 1.2rem;
transition: border-color 0.2s;
}
.contact-item:hover { border-color: rgba(0,212,170,0.35); }
.contact-label {
font-family: var(--font-mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--dim);
margin-bottom: 0.3rem;
}
.contact-val {
font-size: 0.85rem;
color: var(--text);
}
.contact-val a {
color: var(--accent2);
text-decoration: none;
}
.contact-val a:hover { text-decoration: underline; }
/* ── Footer ── */
footer {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--dim);
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* ── Blinking cursor ── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor {
display: inline-block;
width: 2px; height: 1.1em;
background: var(--accent);
vertical-align: middle;
animation: blink 1.1s step-end infinite;
margin-left: 3px;
}
/* ── Mobile ── */
@media (max-width: 768px) {
.layout { grid-template-columns: 1fr; }
aside {
position: relative;
height: auto;
border-right: none;
border-bottom: 1px solid var(--border);
}
main { padding: 2rem 1.5rem; }
h1 { font-size: 1.7rem; }
.contact-grid { grid-template-columns: 1fr; }
}
/* ── Fade-in animation ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
section { animation: fadeUp 0.5s ease both; }
section:nth-child(2) { animation-delay: 0.05s; }
section:nth-child(3) { animation-delay: 0.1s; }
section:nth-child(4) { animation-delay: 0.15s; }
section:nth-child(5) { animation-delay: 0.2s; }
section:nth-child(6) { animation-delay: 0.25s; }
/* ── Skills subheading ── */
.skills-subheading {
margin-bottom: 0.6rem;
font-family: var(--font-mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--dim);
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 MiB

View File

@ -1,25 +1,336 @@
<html>
<head>
<meta charset="UTF-8">
<title>K5BSS</title>
<link type="text/css" rel="stylesheet" href="css/main.css">
<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=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<body>
<div class="title">
<div class="off-white-title">
K5BSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Justin Frasier | IT Support Analyst</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layout">
<!-- ── Sidebar ── -->
<aside>
<img class="profile-photo" src="https://ki5bhv.com/photo/justin1.jpg" alt="Justin Frasier"
onerror="this.style.display='none'">
<div class="profile-name">Justin Frasier</div>
<div class="profile-title">IT Support Analyst</div>
<div class="profile-loc">📍 Bossier City, LA</div>
<hr class="divider">
<nav>
<a href="#about" class="active"><span class="dot"></span>about</a>
<a href="#experience"><span class="dot"></span>experience</a>
<a href="#skills"><span class="dot"></span>technical skills</a>
<a href="#education"><span class="dot"></span>education</a>
<a href="#certifications"><span class="dot"></span>certifications</a>
<a href="#contact"><span class="dot"></span>contact</a>
</nav>
<div class="socials">
<a href="https://github.com/cerealkiller1918" target="_blank">github</a>
<a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9" target="_blank">linkedin</a>
<a href="https://git.ki5bhv.com/justin" target="_blank">gitea</a>
<a href="https://twitter.com/Cerealkiller191" target="_blank">twitter</a>
<a href="https://www.facebook.com/cerealkiller1918" target="_blank">facebook</a>
</div>
</div>
<div class="intro">
<div class="off-white-body">
I am a ham radio operator.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</aside>
<!-- ── Main ── -->
<main>
<!-- About -->
<section id="about">
<div class="prompt"><span>~/k5bss</span> $ whoami</div>
<h1>Justin<br>Frasier<span class="cursor"></span></h1>
<p class="hero-sub">
<strong>IT Support Analyst</strong> with a background in computer systems, infrastructure, and security.
CompTIA A+ certified with hands-on experience in <strong>Azure Active Directory</strong>,
Windows Server, networking, and self-hosted services.
Amateur radio operator <strong>(K5BSS — General Class)</strong>.
</p>
<div class="tags">
<span class="tag accent">CompTIA A+</span>
<span class="tag accent">PCPro Certified</span>
<span class="tag blue">Azure AD</span>
<span class="tag blue">Docker</span>
<span class="tag blue">Proxmox VE</span>
<span class="tag">Self-hosted Infrastructure</span>
<span class="tag">FCC K5BSS</span>
</div>
</div>
</body>
</section>
<!-- Experience -->
<section id="experience">
<h2><span class="hash">#</span>experience</h2>
</html>
<div class="exp-item">
<div class="exp-role">IT Support Analyst</div>
<div class="exp-company">Margaritaville Resort &amp; Casino</div>
<div class="exp-meta">Mar 2023 — Present &nbsp;·&nbsp; Bossier City, LA</div>
<ul class="exp-list">
<li>Install and image Windows OS; onboard machines to Active Directory</li>
<li>Troubleshoot hardware, software, and networking issues in a high-availability environment</li>
<li>Punch down networking cable to patch panels and keystones</li>
<li>Author troubleshooting documentation and lead projects</li>
<li>Administer and support Windows Server environments</li>
</ul>
</div>
<div class="exp-item">
<div class="exp-role">Security Supervisor</div>
<div class="exp-company">Boomtown Casino &amp; Hotel</div>
<div class="exp-meta">Nov 2017 — Mar 2023 &nbsp;·&nbsp; Bossier City, LA</div>
<ul class="exp-list">
<li>Monitored CCTV systems and alarm infrastructure across the facility</li>
<li>Led security operations and managed incident response</li>
<li>Patrolled facility and enforced physical security protocols</li>
<li>De-escalation, crisis management, and customer service</li>
</ul>
</div>
<div class="exp-item">
<div class="exp-role">Software Development Intern</div>
<div class="exp-company">xententLABS</div>
<div class="exp-meta">Jan 2016 — May 2016 &nbsp;·&nbsp; Bossier City, LA</div>
<ul class="exp-list">
<li>Agile development practices and sprint workflows</li>
<li>Source code management and cross-platform software development</li>
<li>Database design, management, and software quality assurance</li>
</ul>
</div>
</section>
<!-- Skills -->
<section id="skills">
<h2><span class="hash">#</span>technical skills</h2>
<div class="skills-subheading">Languages</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Python</div>
<div class="skill-cell"><span class="skill-icon"></span>Java</div>
<div class="skill-cell"><span class="skill-icon"></span>C# / .NET</div>
<div class="skill-cell"><span class="skill-icon"></span>C++</div>
<div class="skill-cell"><span class="skill-icon"></span>C</div>
<div class="skill-cell"><span class="skill-icon"></span>JavaScript</div>
<div class="skill-cell"><span class="skill-icon"></span>Node.js</div>
<div class="skill-cell"><span class="skill-icon"></span>HTML5 / CSS3</div>
<div class="skill-cell"><span class="skill-icon"></span>Rust</div>
<div class="skill-cell"><span class="skill-icon"></span>SQL</div>
</div>
<div class="skills-subheading">Operating Systems</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Linux (Arch, Ubuntu)</div>
<div class="skill-cell"><span class="skill-icon"></span>Windows Server</div>
<div class="skill-cell"><span class="skill-icon"></span>Windows 10/11</div>
</div>
<div class="skills-subheading">Hardware</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>RAM</div>
<div class="skill-cell"><span class="skill-icon"></span>HDD/SSD</div>
<div class="skill-cell"><span class="skill-icon"></span>Power Supplies</div>
<div class="skill-cell"><span class="skill-icon"></span>Motherboards</div>
<div class="skill-cell"><span class="skill-icon"></span>Peripherals</div>
<div class="skill-cell"><span class="skill-icon"></span>Printers</div>
<div class="skill-cell"><span class="skill-icon"></span>Laptop</div>
<div class="skill-cell"><span class="skill-icon"></span>Desktops</div>
<div class="skill-cell"><span class="skill-icon"></span>Component Diagnostics</div>
</div>
<div class="skills-subheading">Tools &amp; Platforms</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Active Directory</div>
<div class="skill-cell"><span class="skill-icon"></span>Azure AD</div>
<div class="skill-cell"><span class="skill-icon"></span>Office 365</div>
<div class="skill-cell"><span class="skill-icon"></span>Mobile Device Support </div>
<div class="skill-cell"><span class="skill-icon"></span>Printer Support</div>
<div class="skill-cell"><span class="skill-icon"></span>System Imaging & Deployment</div>
<div class="skill-cell"><span class="skill-icon"></span>Docker</div>
<div class="skill-cell"><span class="skill-icon"></span>Proxmox VE</div>
<div class="skill-cell"><span class="skill-icon"></span>Git</div>
<div class="skill-cell"><span class="skill-icon"></span>Help Desk Ticketing Systems</div>
</div>
<div class="skills-subheading">Development IDEs</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Vim</div>
<div class="skill-cell"><span class="skill-icon"></span>NeoVim</div>
<div class="skill-cell"><span class="skill-icon"></span>IntelliJ</div>
<div class="skill-cell"><span class="skill-icon"></span>Visual Studio</div>
<div class="skill-cell"><span class="skill-icon"></span>VS Codes</div>
<div class="skill-cell"><span class="skill-icon"></span>Antigravity</div>
<div class="skill-cell"><span class="skill-icon"></span>Unity</div>
</div>
<div class="skills-subheading">Networking</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>TCP/IP</div>
<div class="skill-cell"><span class="skill-icon"></span>DNS</div>
<div class="skill-cell"><span class="skill-icon"></span>DHCP</div>
<div class="skill-cell"><span class="skill-icon"></span>IP Addressing</div>
<div class="skill-cell"><span class="skill-icon"></span>Wire &amp; Wireless Connectivity</div>
<div class="skill-cell"><span class="skill-icon"></span>Patch panels</div>
<div class="skill-cell"><span class="skill-icon"></span>Keystones</div>
<div class="skill-cell"><span class="skill-icon"></span>Switch Managemet</div>
<div class="skill-cell"><span class="skill-icon"></span>Troubleshooting</div>
</div>
<div class="skills-subheading">IT Support</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Customer Service</div>
<div class="skill-cell"><span class="skill-icon"></span>Issue Escalation</div>
<div class="skill-cell"><span class="skill-icon"></span>Asset Tracking</div>
<div class="skill-cell"><span class="skill-icon"></span>Equipment Moves</div>
<div class="skill-cell"><span class="skill-icon"></span>End-User Training</div>
<div class="skill-cell"><span class="skill-icon"></span>Technical Documentation</div>
<div class="skill-cell"><span class="skill-icon"></span>De-escalation</div>
</div>
<div class="skills-subheading">Security</div>
<div class="skills-grid">
<div class="skill-cell"><span class="skill-icon"></span>Corporate Security</div>
<div class="skill-cell"><span class="skill-icon"></span>CCTV</div>
<div class="skill-cell"><span class="skill-icon"></span>Physical Security</div>
<div class="skill-cell"><span class="skill-icon"></span>Crisis Management</div>
</div>
</section>
<!-- Education -->
<section id="education">
<h2><span class="hash">#</span>education</h2>
<div class="edu-card">
<div class="edu-school">Bossier Parish Community College</div>
<div class="edu-degree">A.A.S. Cyber Technology — Programmer-Analyst</div>
<div class="edu-meta">2013 2016</div>
<span class="edu-honor">Dean's List &amp; Chancellor's List</span>
<div class="tags" style="margin-top:0.8rem;">
<span class="tag">C++ / Java / C#</span>
<span class="tag">Web Design</span>
<span class="tag">Database Coding</span>
<span class="tag">Web App Dev</span>
<span class="tag">Cyber Internship</span>
<span class="tag">Phi Theta Kappa</span>
<span class="tag">Cyber Club</span>
</div>
</div>
<div class="edu-card">
<div class="edu-school">Northwood High School</div>
<div class="edu-meta">1999 2003</div>
</div>
</section>
<!-- Certifications -->
<section id="certifications">
<h2><span class="hash">#</span>certifications</h2>
<div class="cert-group">
<div class="cert-group-title">Computer</div>
<ul class="cert-list">
<li>CompTIA A+ ce Certified</li>
<li>PCPro Certified</li>
<li>Technical Competency Area in Web Design — BPCC</li>
</ul>
</div>
<div class="cert-group">
<div class="cert-group-title">Udemy</div>
<ul class="cert-list">
<li>Master Microsoft PowerShell</li>
<li>PowerShell for Active Directory Administrators</li>
<li>IT Troubleshooting Skill Training</li>
<li>IT Help Desk Professional</li>
</ul>
</div>
<div class="cert-group">
<div class="cert-group-title">Amateur Radio</div>
<ul class="cert-list">
<li>FCC License — Callsign: K5BSS &nbsp;|&nbsp; General Class</li>
</ul>
</div>
<div class="cert-group">
<div class="cert-group-title">Locomotive</div>
<ul class="cert-list">
<li>LocoMotive Air Brake — Wabtec</li>
<li>Dash 2 / GP 38 Static / GP 9 / SW 1200 Electrical — TTC</li>
<li>EMD Locomotive Engines — Technical Training Consultants</li>
</ul>
</div>
</section>
<!-- Contact -->
<section id="contact">
<h2><span class="hash">#</span>contact</h2>
<div class="contact-grid">
<div class="contact-item">
<div class="contact-label">Email</div>
<div class="contact-val"><a href="mailto:justin@ki5bhv.com">justin@ki5bhv.com</a></div>
</div>
<div class="contact-item">
<div class="contact-label">Phone</div>
<div class="contact-val"><a href="tel:13185641918">(318) 564-1918</a></div>
</div>
<div class="contact-item">
<div class="contact-label">Location</div>
<div class="contact-val">3243 Cottonwood St.<br>Bossier City, LA 71111</div>
</div>
<div class="contact-item">
<div class="contact-label">GitHub</div>
<div class="contact-val"><a href="https://github.com/cerealkiller1918" target="_blank">cerealkiller1918</a>
</div>
</div>
<div class="contact-item">
<div class="contact-label">LinkedIn</div>
<div class="contact-val"><a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9"
target="_blank">justin-frasier</a></div>
</div>
<div class="contact-item">
<div class="contact-label">Self-hosted Git</div>
<div class="contact-val"><a href="https://git.ki5bhv.com/justin" target="_blank">git.ki5bhv.com</a></div>
</div>
</div>
</section>
<footer>
<span style="color:var(--accent)">$</span> site built by Justin Frasier &nbsp;·&nbsp; k5bss.com &nbsp;·&nbsp;
2025
</footer>
</main>
</div>
<script>
// Highlight active nav link on scroll
const sections = document.querySelectorAll('section[id]');
const links = document.querySelectorAll('nav a');
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
links.forEach(l => l.classList.remove('active'));
const active = document.querySelector(`nav a[href="#${e.target.id}"]`);
if (active) active.classList.add('active');
}
});
}, { threshold: 0.3 });
sections.forEach(s => observer.observe(s));
</script>
</body>
</html>