justin
/
Gamesite-ki5bhv.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

This commit is contained in:
Justin Frasier 2026-05-02 23:36:05 -05:00
commit 86e4e0ace2
2 changed files with 720 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

290
index.html Executable file
View File

@ -0,0 +1,290 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAAAIABkAQAAFgAAAIlQTkcNChoKAAAADUlIRFIAAAAQAAAAEAgGAAAAH/P/YQAAAStJREFUeJylk71KA0EUhb+d2RELUws2BotUKbRcXNFWfAXxFdKkCKQWt1ifQfQ9BH8WNFWIvRAhLyAiipOZWMy62WxWdNkDl7nMz7n3nMt46uxwRg34AFZJ/Dip9HDaDRHaOAI/TpAfX9VKxwm2EziCH/RPdJbfjQQ3jS1s2Mz2VHS7xCPwACVBSYx0EexAu+Vhtzcwe00QwkV6LwsPfGaANqAN0YUA4P36k4chsLaC3d1k9ehyWYJvYMaihN+ge/uu3WSMTF4KEmrCzzyYSnrHzkTtOS8Qjl+d50as5HwtenDQdqN8HMLbq4F1m2owJaVLPLgfySx/ehbQ+o+EHE6v1MKhaIxR0V8EOQ+KkIMJcjCZ686jzINKyHsw7YZQ5zMJbbCdoBKBSDv+BozrYnmzYq7rAAAAAElFTkSuQmCC">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj4KICA8cmVjdCB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIGZpbGw9IiMwYTBmMGEiLz4KICA8cmVjdCB4PSIxIiB5PSIxIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwZmY4OCIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjI2IiBoZWlnaHQ9IjI2IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDMzMjIiIHN0cm9rZS13aWR0aD0iMC41Ii8+CgogIDwhLS0gSiAtLT4KICA8cmVjdCB4PSI2IiB5PSI3IiB3aWR0aD0iNyIgaGVpZ2h0PSIyIiBmaWxsPSIjZmZjYzAwIi8+CiAgPHJlY3QgeD0iMTAiIHk9IjkiIHdpZHRoPSIzIiBoZWlnaHQ9IjEwIiBmaWxsPSIjZmZjYzAwIi8+CiAgPHJlY3QgeD0iNiIgeT0iMTciIHdpZHRoPSI0IiBoZWlnaHQ9IjIiIGZpbGw9IiNmZmNjMDAiLz4KICA8cmVjdCB4PSI2IiB5PSIxOSIgd2lkdGg9IjciIGhlaWdodD0iMiIgZmlsbD0iI2ZmY2MwMCIvPgoKICA8IS0tIEYgLS0+CiAgPHJlY3QgeD0iMTUiIHk9IjciIHdpZHRoPSI3IiBoZWlnaHQ9IjIiIGZpbGw9IiMwMGZmODgiLz4KICA8cmVjdCB4PSIxNSIgeT0iOSIgd2lkdGg9IjMiIGhlaWdodD0iMTQiIGZpbGw9IiMwMGZmODgiLz4KICA8cmVjdCB4PSIxOCIgeT0iMTMiIHdpZHRoPSI1IiBoZWlnaHQ9IjIiIGZpbGw9IiMwMGZmODgiLz4KCiAgPCEtLSBzY2FubGluZSBlZmZlY3QgLS0+CiAgPHJlY3QgeD0iMSIgeT0iOCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMGZmODgiIG9wYWNpdHk9IjAuMDQiLz4KICA8cmVjdCB4PSIxIiB5PSIxNiIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMGZmODgiIG9wYWNpdHk9IjAuMDQiLz4KICA8cmVjdCB4PSIxIiB5PSIyNCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjEiIGZpbGw9IiMwMGZmODgiIG9wYWNpdHk9IjAuMDQiLz4KCiAgPCEtLSBjb3JuZXIgcGlwcyAtLT4KICA8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBmaWxsPSIjMDBmZjg4IiBvcGFjaXR5PSIwLjUiLz4KICA8cmVjdCB4PSIyOCIgeT0iMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgZmlsbD0iIzAwZmY4OCIgb3BhY2l0eT0iMC41Ii8+CiAgPHJlY3QgeD0iMiIgeT0iMjgiIHdpZHRoPSIyIiBoZWlnaHQ9IjIiIGZpbGw9IiMwMGZmODgiIG9wYWNpdHk9IjAuNSIvPgogIDxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjIiIGhlaWdodD0iMiIgZmlsbD0iIzAwZmY4OCIgb3BhY2l0eT0iMC41Ii8+Cjwvc3ZnPgo=">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Justin Frasier — Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="crt-flicker">
<div class="scanline"></div>
<div class="container">
<!-- HEADER -->
<div class="header">
<div class="header-grid">
<div>
<div class="player-name">JUSTIN FRASIER</div>
<div class="player-class">> IT SUPPORT ANALYST // COMPTIA A+ CERTIFIED</div>
<div class="contact-line">📍 3243 Cottonwood St., Bossier City, LA 71111</div>
<div class="contact-line">📞 318-564-1918 &nbsp;|&nbsp; ✉ <a href="mailto:justin@ki5bhv.com">justin@ki5bhv.com</a></div>
<div class="contact-line">
<a href="https://linkedin.com/in/justin-frasier-bb29b8a9" target="_blank">linkedin</a>
&nbsp;|&nbsp;
<a href="https://github.com/cerealkiller1918" target="_blank">github</a>
&nbsp;|&nbsp;
<a href="https://git.ki5bhv.com/justin" target="_blank">selfhosted git</a>
&nbsp;|&nbsp;
<a href="https://k5bss.com" target="_blank">k5bss.com</a>
&nbsp;|&nbsp;
<a href="https://ki5bhv.com" target="_blank">ki5bhv.com</a>
</div>
<div class="cert-badges" style="margin-top:12px;">
<span class="badge badge-green">CompTIA A+</span>
<span class="badge badge-amber">PCPro</span>
<span class="badge badge-blue">AAS Cyber Tech</span>
<span class="badge badge-red">FCC K5BSS</span>
</div>
</div>
<div class="stats-box">
<div style="font-family:'Press Start 2P',monospace;font-size:7px;color:var(--amber);margin-bottom:8px;letter-spacing:1px;">STATS</div>
<div class="stat-row"><span>EXP</span><span class="stat-val">8+ YRS</span></div>
<div class="stat-row"><span>TIER</span><span class="stat-val">II</span></div>
<div class="stat-row"><span>CERTS</span><span class="stat-val">6+</span></div>
<div class="stat-row"><span>LANG</span><span class="stat-val">10+</span></div>
<div class="stat-row"><span>TOOLS</span><span class="stat-val">20+</span></div>
<div class="stat-row"><span>CLASS</span><span class="stat-val">IT Pro</span></div>
</div>
</div>
</div>
<!-- NAV -->
<div class="nav">
<button class="nav-btn active" onclick="showPanel('summary', this)">[ BRIEF ]</button>
<button class="nav-btn" onclick="showPanel('quests', this)">[ QUESTS ]</button>
<button class="nav-btn" onclick="showPanel('skills', this)">[ SKILL TREE ]</button>
<button class="nav-btn" onclick="showPanel('education', this)">[ LORE ]</button>
<button class="nav-btn" onclick="showPanel('certs', this)">[ UNLOCKS ]</button>
</div>
<!-- SUMMARY PANEL -->
<div class="panel visible" id="panel-summary">
<div class="panel-label">// PLAYER SUMMARY</div>
<div class="prompt-line">> <span>cat README.txt</span></div>
<div class="summary-text">
CompTIA A+ certified IT Support Analyst with 8+ years of hands-on technical support across high-volume,
fast-paced environments. Expert in diagnosing and resolving hardware, software, and network issues across
Windows 10, Windows 11, and Windows Server platforms with a strong focus on end-user satisfaction.
<br><br>
Proficient with Azure Active Directory, Office 365, VMware vSphere, PDQ Inventory &amp; Deploy, PRTG Network Monitor,
TeamViewer, Ansible, and Docker. Skilled in SSL certificate management, Cisco phone systems, web hosting,
and wired/wireless networking. Background in software development provides deeper understanding of systems
and infrastructure.
<br><br>
Holds an AAS in Cyber Technology from Bossier Parish Community College. Self-driven and committed to
continuous growth with a growing focus on enterprise networking, server administration, virtualization,
and infrastructure management.
</div>
<div class="cursor"></div>
</div>
<!-- QUESTS PANEL -->
<div class="panel" id="panel-quests">
<div class="panel-label">// QUEST LOG</div>
<div class="quest">
<span class="quest-date">MAR 2023 – PRESENT</span>
<div class="quest-title">IT SUPPORT ANALYST</div>
<div class="quest-location">Margaritaville Resort &amp; Casino — Bossier City, LA</div>
<div class="quest-item">Tier 1 &amp; 2 support across a large-scale resort/casino environment</div>
<div class="quest-item">Deploy &amp; maintain Windows 10/11 workstations with AD domain enrollment</div>
<div class="quest-item">Administer Windows Server, Azure AD, user provisioning &amp; group policies</div>
<div class="quest-item">Diagnose wired/wireless connectivity issues &amp; install network cabling</div>
<button class="quest-toggle" onclick="toggleDetail(this)">[ SHOW MORE ]</button>
<div class="quest-detail">
<div class="quest-item">Manage Office 365 — Outlook, Teams, SharePoint, OneDrive</div>
<div class="quest-item">Full help desk ticket lifecycle: log, prioritize, track, resolve</div>
<div class="quest-item">PDQ Inventory for asset tracking; PDQ Deploy for software rollouts</div>
<div class="quest-item">Administer VMware vSphere — VM provisioning &amp; maintenance</div>
<div class="quest-item">Cisco phone system: configuration, provisioning, troubleshooting</div>
<div class="quest-item">Remote support via TeamViewer; network monitoring via PRTG</div>
<div class="quest-item">SSL certificate management: procurement, installation, renewal</div>
<div class="quest-item">Hardware repair: RAM, HDD/SSD, PSU, motherboards, peripherals</div>
<div class="quest-item">Mobile device support: config, corporate email, secure connectivity</div>
<div class="quest-item">Technical documentation and knowledge base development</div>
<div class="quest-item">Lead cross-functional IT initiatives with department stakeholders</div>
</div>
</div>
<div class="quest">
<span class="quest-date">NOV 2017 – MAR 2023</span>
<div class="quest-title">SECURITY SUPERVISOR</div>
<div class="quest-location">Boomtown Casino &amp; Hotel — Bossier City, LA</div>
<div class="quest-item">Primary point of contact for guests and staff in a high-traffic environment</div>
<div class="quest-item">Supervised security operations ensuring safety of hundreds daily</div>
<div class="quest-item">Monitored multi-camera CCTV surveillance &amp; integrated alarm systems</div>
<div class="quest-item">Applied crisis management &amp; de-escalation in high-pressure situations</div>
<div class="quest-item">Trained &amp; mentored security personnel on protocols &amp; emergency response</div>
</div>
<div class="quest">
<span class="quest-date">JAN 2016 – MAY 2016</span>
<div class="quest-title">SOFTWARE DEVELOPMENT INTERN</div>
<div class="quest-location">xententLABS — Bossier City, LA</div>
<div class="quest-item">Agile development: sprint planning, stand-ups, iterative releases</div>
<div class="quest-item">Version control &amp; source code management best practices</div>
<div class="quest-item">Cross-platform software solutions &amp; relational database design</div>
<div class="quest-item">QA: test cases, functional testing, defect tracking through resolution</div>
</div>
</div>
<!-- SKILLS PANEL -->
<div class="panel" id="panel-skills">
<div class="panel-label">// SKILL TREE</div>
<div class="skill-category">
<div class="skill-cat-title">// PROGRAMMING LANGUAGES</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:85%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">Java</span><span class="skill-tag">C#</span><span class="skill-tag">C++</span>
<span class="skill-tag">C</span><span class="skill-tag">Python</span><span class="skill-tag">JavaScript</span>
<span class="skill-tag">Node.js</span><span class="skill-tag">HTML5/CSS3</span>
<span class="skill-tag">SQL</span><span class="skill-tag">Rust</span>
</div>
</div>
<div class="skill-category">
<div class="skill-cat-title">// OPERATING SYSTEMS</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:92%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">Windows 10</span><span class="skill-tag">Windows 11</span>
<span class="skill-tag">Windows Server</span><span class="skill-tag">Linux (Arch)</span>
<span class="skill-tag">Linux (Ubuntu)</span>
</div>
</div>
<div class="skill-category">
<div class="skill-cat-title">// TOOLS & PLATFORMS</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:90%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">Active Directory</span><span class="skill-tag">Azure AD</span>
<span class="skill-tag">Office 365</span><span class="skill-tag">PDQ Inventory</span>
<span class="skill-tag">PDQ Deploy</span><span class="skill-tag">VMware vSphere</span>
<span class="skill-tag">Cisco Phones</span><span class="skill-tag">TeamViewer</span>
<span class="skill-tag">PRTG Monitor</span><span class="skill-tag">Docker</span>
<span class="skill-tag">Ansible</span><span class="skill-tag">Proxmox VE</span>
<span class="skill-tag">Git</span><span class="skill-tag">Help Desk Ticketing</span>
<span class="skill-tag">System Imaging</span><span class="skill-tag">Web Hosting</span>
</div>
</div>
<div class="skill-category">
<div class="skill-cat-title">// NETWORKING</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:80%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">TCP/IP</span><span class="skill-tag">DNS</span>
<span class="skill-tag">DHCP</span><span class="skill-tag">IP Addressing</span>
<span class="skill-tag">SSL Certificates</span><span class="skill-tag">Wired & Wireless</span>
<span class="skill-tag">Patch Panels</span><span class="skill-tag">Switch Management</span>
</div>
</div>
<div class="skill-category">
<div class="skill-cat-title">// HARDWARE</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:88%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">RAM</span><span class="skill-tag">HDD/SSD</span>
<span class="skill-tag">Power Supplies</span><span class="skill-tag">Motherboards</span>
<span class="skill-tag">Peripherals</span><span class="skill-tag">Printers</span>
<span class="skill-tag">Laptops</span><span class="skill-tag">Desktops</span>
<span class="skill-tag">Component Diagnostics</span>
</div>
</div>
<div class="skill-category">
<div class="skill-cat-title">// DEVELOPMENT IDEs</div>
<div class="xp-bar-wrap"><div class="xp-bar"><div class="xp-fill" style="width:75%"></div></div></div>
<div class="skill-grid">
<span class="skill-tag">Vim</span><span class="skill-tag">NeoVim</span>
<span class="skill-tag">IntelliJ</span><span class="skill-tag">Visual Studio</span>
<span class="skill-tag">VS Code</span><span class="skill-tag">Unity</span>
</div>
</div>
</div>
<!-- EDUCATION PANEL -->
<div class="panel" id="panel-education">
<div class="panel-label">// LORE & BACKGROUND</div>
<div class="edu-card">
<div class="edu-title">ASSOCIATE OF APPLIED SCIENCE<br>CYBER TECHNOLOGY (PROGRAMMER-ANALYST)</div>
<div class="edu-place">Bossier Parish Community College — 2013–2016</div>
<div class="cert-badges" style="margin-bottom:10px;">
<span class="badge badge-amber">Dean's List</span>
<span class="badge badge-amber">Chancellor's List</span>
<span class="badge badge-blue">Phi Theta Kappa</span>
<span class="badge badge-green">Cyber Club</span>
</div>
<div style="font-size:10px;color:var(--muted);">
Coursework: C++, Advanced C++, Java, Advanced Java, C#, HTML5/CSS3,
Web Application Development, Web Design, Web Scripting, Relational Database Coding,
Computer Organization, Cyber Internship
</div>
</div>
<div class="edu-card">
<div class="edu-title">HIGH SCHOOL DIPLOMA</div>
<div class="edu-place">Northwood High School — 1999–2003</div>
</div>
</div>
<!-- CERTS PANEL -->
<div class="panel" id="panel-certs">
<div class="panel-label">// UNLOCKED ACHIEVEMENTS</div>
<div class="cert-group">
<div class="cert-group-title">// IT & COMPUTER</div>
<div class="cert-item">CompTIA A+ ce Certified</div>
<div class="cert-item">PCPro Certified</div>
<div class="cert-item">Technical Competency Area in Web Design — BPCC</div>
</div>
<div class="cert-group">
<div class="cert-group-title">// UDEMY</div>
<div class="cert-item">Master Microsoft PowerShell</div>
<div class="cert-item">PowerShell for Active Directory Administrators</div>
<div class="cert-item">IT Troubleshooting Skill Training</div>
<div class="cert-item">IT Help Desk Professional</div>
</div>
<div class="cert-group">
<div class="cert-group-title">// AMATEUR RADIO</div>
<div class="cert-item">FCC License: K5BSS — General Class</div>
</div>
<div class="cert-group">
<div class="cert-group-title">// LOCOMOTIVE</div>
<div class="cert-item">Locomotive Air Brake — Wabtec</div>
<div class="cert-item">Dash 2 / GP 38 Static / GP 9 / SW 1200 Electrical — Technical Training Consultants</div>
<div class="cert-item">EMD Locomotive Engines — Technical Training Consultants</div>
</div>
</div>
<div class="footer-bar">
<span>JUSTIN_FRASIER.EXE</span>
<span>v2026.1 // BOSSIER CITY, LA</span>
<span>READY<span class="cursor" style="width:6px;height:10px;"></span></span>
</div>
</div>
<script>
function showPanel(id, btn) {
document.querySelectorAll('.panel').forEach(p => p.classList.remove('visible'));
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
document.getElementById('panel-' + id).classList.add('visible');
btn.classList.add('active');
}
function toggleDetail(btn) {
const detail = btn.nextElementSibling;
detail.classList.toggle('open');
btn.textContent = detail.classList.contains('open') ? '[ SHOW LESS ]' : '[ SHOW MORE ]';
}
</script>
</body>
</html>

430
style.css Executable file
View File

@ -0,0 +1,430 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--green: #00ff88;
--green-dim: #00aa55;
--green-dark: #003322;
--amber: #ffcc00;
--red: #ff4455;
--blue: #44aaff;
--bg: #0a0f0a;
--panel: #0d150d;
--border: #1a3a1a;
--text: #00ff88;
--muted: #44774a;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'Share Tech Mono', monospace;
font-size: 13px;
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
}
.scanline {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
pointer-events: none; z-index: 1000;
}
.crt-flicker { animation: flicker 8s infinite; }
@keyframes flicker {
0%, 95%, 100% { opacity: 1; }
96% { opacity: 0.92; }
97% { opacity: 1; }
98% { opacity: 0.95; }
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 4px var(--green); }
50% { box-shadow: 0 0 12px var(--green), 0 0 20px rgba(0,255,136,0.3); }
}
.container {
max-width: 860px;
margin: 0 auto;
padding: 20px 16px 40px;
}
/* HEADER */
.header {
border: 1px solid var(--green);
padding: 20px 24px;
margin-bottom: 16px;
position: relative;
background: var(--panel);
animation: pulse 4s infinite;
}
.header::before {
content: '[ PLAYER PROFILE ]';
position: absolute;
top: -9px; left: 16px;
background: var(--bg);
padding: 0 8px;
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--amber);
letter-spacing: 2px;
}
.header-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: start;
}
.player-name {
font-family: 'Press Start 2P', monospace;
font-size: 18px;
color: var(--amber);
margin-bottom: 6px;
text-shadow: 0 0 10px rgba(255,204,0,0.5);
line-height: 1.4;
}
.player-class {
font-size: 11px;
color: var(--green-dim);
margin-bottom: 10px;
letter-spacing: 1px;
}
.contact-line {
font-size: 11px;
color: var(--muted);
margin: 2px 0;
}
.contact-line a {
color: var(--blue);
text-decoration: none;
}
.contact-line a:hover { text-decoration: underline; }
.stats-box {
border: 1px solid var(--border);
padding: 10px 14px;
background: rgba(0,255,136,0.04);
min-width: 160px;
}
.stat-row {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 10px;
margin: 4px 0;
color: var(--muted);
}
.stat-val {
color: var(--amber);
font-family: 'Press Start 2P', monospace;
font-size: 9px;
}
.cert-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.badge {
font-size: 9px;
padding: 3px 8px;
border: 1px solid;
letter-spacing: 1px;
}
.badge-green { border-color: var(--green); color: var(--green); background: rgba(0,255,136,0.08); }
.badge-amber { border-color: var(--amber); color: var(--amber); background: rgba(255,204,0,0.08); }
.badge-blue { border-color: var(--blue); color: var(--blue); background: rgba(68,170,255,0.08); }
.badge-red { border-color: var(--red); color: var(--red); background: rgba(255,68,85,0.08); }
/* NAV */
.nav {
display: flex;
gap: 4px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.nav-btn {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
padding: 8px 12px;
background: var(--panel);
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
letter-spacing: 1px;
transition: all 0.1s;
}
.nav-btn:hover, .nav-btn.active {
border-color: var(--green);
color: var(--green);
background: rgba(0,255,136,0.07);
}
.nav-btn.active { box-shadow: 0 0 8px rgba(0,255,136,0.3); }
/* PANELS */
.panel {
border: 1px solid var(--border);
background: var(--panel);
padding: 20px 22px;
margin-bottom: 12px;
position: relative;
display: none;
animation: slideIn 0.2s ease-out;
}
.panel.visible { display: block; }
.panel-label {
position: absolute;
top: -9px; left: 16px;
background: var(--panel);
padding: 0 8px;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
color: var(--green-dim);
letter-spacing: 2px;
}
/* QUEST LOG */
.quest {
border-left: 2px solid var(--green);
padding: 10px 0 10px 16px;
margin-bottom: 20px;
position: relative;
}
.quest::before {
content: '>';
position: absolute;
left: -8px;
color: var(--green);
font-family: 'Press Start 2P', monospace;
font-size: 8px;
top: 12px;
}
.quest-title {
font-family: 'Press Start 2P', monospace;
font-size: 9px;
color: var(--amber);
margin-bottom: 2px;
}
.quest-location {
font-size: 11px;
color: var(--green-dim);
margin-bottom: 8px;
}
.quest-date {
font-size: 10px;
color: var(--muted);
float: right;
margin-top: -18px;
}
.quest-item {
font-size: 11px;
color: var(--muted);
margin: 3px 0;
padding-left: 12px;
position: relative;
}
.quest-item::before {
content: '·';
position: absolute;
left: 2px;
color: var(--green);
}
.quest-toggle {
background: none;
border: 1px solid var(--border);
color: var(--green-dim);
font-family: 'Share Tech Mono', monospace;
font-size: 10px;
padding: 3px 10px;
cursor: pointer;
margin-top: 8px;
display: inline-block;
}
.quest-toggle:hover { border-color: var(--green); color: var(--green); }
.quest-detail { display: none; margin-top: 8px; }
.quest-detail.open { display: block; }
/* SKILL TREE */
.skill-category { margin-bottom: 20px; }
.skill-cat-title {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--amber);
margin-bottom: 10px;
padding-bottom: 4px;
border-bottom: 1px solid var(--border);
letter-spacing: 1px;
}
.skill-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-tag {
font-size: 10px;
padding: 4px 10px;
border: 1px solid var(--border);
color: var(--green-dim);
background: rgba(0,255,136,0.03);
cursor: default;
transition: all 0.15s;
}
.skill-tag:hover {
border-color: var(--green);
color: var(--green);
background: rgba(0,255,136,0.08);
}
/* XP BAR */
.xp-bar-wrap { margin: 6px 0 12px; }
.xp-bar {
height: 6px;
background: var(--border);
border: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.xp-fill {
height: 100%;
background: var(--green);
position: relative;
transition: width 1s ease-out;
}
.xp-fill::after {
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 3px;
background: white;
opacity: 0.8;
animation: blink 1s infinite;
}
/* EDUCATION */
.edu-card {
border: 1px solid var(--border);
padding: 14px 16px;
margin-bottom: 12px;
background: rgba(0,255,136,0.02);
}
.edu-title {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--amber);
margin-bottom: 6px;
line-height: 1.6;
}
.edu-place {
font-size: 11px;
color: var(--green-dim);
margin-bottom: 6px;
}
/* CERTS */
.cert-group { margin-bottom: 18px; }
.cert-group-title {
font-family: 'Press Start 2P', monospace;
font-size: 8px;
color: var(--amber);
margin-bottom: 8px;
letter-spacing: 1px;
}
.cert-item {
font-size: 11px;
color: var(--muted);
padding: 4px 0;
border-bottom: 1px solid rgba(26,58,26,0.5);
display: flex;
align-items: center;
gap: 8px;
}
.cert-item::before {
content: '✓';
color: var(--green);
font-size: 12px;
}
/* SUMMARY */
.summary-text {
font-size: 12px;
color: var(--muted);
line-height: 1.8;
border-left: 2px solid var(--green-dim);
padding-left: 14px;
}
.cursor {
display: inline-block;
width: 8px; height: 14px;
background: var(--green);
animation: blink 1s infinite;
vertical-align: middle;
margin-left: 2px;
}
.prompt-line {
font-size: 12px;
color: var(--green-dim);
margin-bottom: 14px;
}
.prompt-line span { color: var(--green); }
.footer-bar {
border-top: 1px solid var(--border);
margin-top: 24px;
padding-top: 12px;
display: flex;
justify-content: space-between;
font-family: 'Press Start 2P', monospace;
font-size: 7px;
color: var(--muted);
}
@media (max-width: 600px) {
.header-grid { grid-template-columns: 1fr; }
.player-name { font-size: 13px; }
.nav-btn { font-size: 7px; padding: 6px 8px; }
.quest-date { float: none; margin-top: 0; display: block; margin-bottom: 6px; }
}