sho/homelab-v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update placeholder portfolio website

Browse Source
This commit is contained in:
Sho Ishida 2026-07-16 11:11:04 +00:00
parent 4ffd19d92a
commit 3c2761d686
5 changed files with 974 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -26,3 +26,6 @@ terraform/*.tfvars.json
__pycache__/
*.py[cod]
*$py.class
# === Other ===
website/resume/

BIN
website/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

373
website/index.html
View File

@ -1 +1,372 @@
Hello World!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sho Ishida - Systems Architect & Infrastructure Engineer. Certified RHCSA Administrator specializing in AlmaLinux hypervisors, Ansible playbooks, Terraform, and secure Cloudflare/Playit tunnels.">
<title>Sho Ishida | Systems Architect &amp; Infrastructure Engineer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Hero Header -->
<header class="hero-section">
<h1 id="portfolio-title">Sho Ishida</h1>
<p class="subtitle">Systems Architect &amp; Infrastructure Engineer</p>
<!-- Badges indicating language proficiency and certifications -->
<div class="badge-container">
<span class="badge lang-badge" id="lang-english">English (Fluent)</span>
<span class="badge lang-badge" id="lang-japanese">日本語 (Native)</span>
<span class="badge lang-badge" id="lang-korean">한국어 (Native)</span>
<span class="badge" id="badge-rhcsa">RHCSA Certified</span>
<span class="badge" id="badge-sec">CompTIA Security+ Prep</span>
</div>
<!-- Primary Action Buttons for Resume Downloads -->
<div class="btn-group">
<a href="resume/Sho_Ishida_Resume.pdf" download="Sho_Ishida_Resume.pdf" id="download-pdf" class="btn btn-primary">
Download Resume (PDF)
</a>
<a href="resume/Sho_Ishida_Resume.docx" download="Sho_Ishida_Resume.docx" id="download-docx" class="btn btn-secondary">
Download Word (DOCX)
</a>
</div>
</header>
<!-- Two-Column Portfolio Grid -->
<div class="portfolio-grid">
<!-- LEFT COLUMN: Profile, Experience, Homelab Architecture -->
<main class="main-column">
<!-- Professional Summary Card -->
<section class="card-section" id="sec-summary">
<h2 class="section-title">Professional Summary</h2>
<div class="card">
<p class="profile-text">
Trilingual (English, Japanese, Korean) and RHCSA-certified Linux Systems Administrator with a strong foundation in cybersecurity (CompTIA Security+ in progress). Hands-on experience designing, provisioning, and automating enterprise-grade virtualization infrastructure using Infrastructure as Code (IaC) tools like Terraform and Ansible on Red Hat Enterprise Linux (RHEL) 10 downstreams.
</p>
<p class="profile-text">
Proven ability to automate server configuration management, troubleshoot containerized workloads, establish directory service domains, and secure hybrid network access utilizing tunnels with zero open inbound ports.
</p>
</div>
</section>
<!-- Homelab v3 Infrastructure Architecture -->
<section class="card-section" id="sec-homelab-infra">
<h2 class="section-title">Homelab v3 Infrastructure Topology</h2>
<div class="card">
<p class="profile-text" style="margin-bottom: 20px;">
A fully automated private cloud environment deployed from a bare-metal baseline. Virtual resources are provisioned on the AlmaLinux host using Terraform (KVM/Libvirt provider) and configured using containerized Ansible playbooks.
</p>
<div class="vm-nodes-grid">
<!-- VM Node 1 -->
<div class="vm-node-card" id="node-freeipa">
<div class="vm-node-header">
<h4>freeipa.lab.local</h4>
<span class="node-dot"></span>
</div>
<p class="vm-node-ip">172.30.1.85 [AlmaLinux 10]</p>
<p class="vm-node-role">Identity Provider, LDAP Authentication, BIND DNS Server, PKI CA Realm</p>
</div>
<!-- VM Node 2 -->
<div class="vm-node-card" id="node-portfolio">
<div class="vm-node-header">
<h4>portfolio.lab.local</h4>
<span class="node-dot"></span>
</div>
<p class="vm-node-ip">172.30.1.93 [Debian 12]</p>
<p class="vm-node-role">Nginx Web Server, Prometheus Metrics, Grafana Analytics, Cloudflared Tunnel</p>
</div>
<!-- VM Node 3 -->
<div class="vm-node-card" id="node-minecraft">
<div class="vm-node-header">
<h4>minecraft.lab.local</h4>
<span class="node-dot"></span>
</div>
<p class="vm-node-ip">172.30.1.91 [Debian 12]</p>
<p class="vm-node-role">Dedicated Minecraft Game Server, Playit.gg Secure Tunnel Agent</p>
</div>
<!-- VM Node 4 -->
<div class="vm-node-card" id="node-navidrome">
<div class="vm-node-header">
<h4>navidrome.lab.local</h4>
<span class="node-dot"></span>
</div>
<p class="vm-node-ip">172.30.1.92 [Debian 12]</p>
<p class="vm-node-role">Navidrome Music Streamer, Rclone Google Drive FUSE Mount Integration</p>
</div>
</div>
</div>
</section>
<!-- Systems Engineering Projects -->
<section class="card-section" id="sec-projects">
<h2 class="section-title">Systems Engineering Projects</h2>
<div class="card">
<div class="list-container">
<div class="list-item" style="border-bottom: none; padding-bottom: 0;">
<div class="list-item-header">
<h4 style="font-size: 1.15rem;">Enterprise Hybrid IaC Virtualization Homelab</h4>
<span class="date">Jul 2025 - Present</span>
</div>
<p class="subtitle-detail">Automated Private Cloud &amp; Infrastructure Deployment</p>
<ul class="bullets">
<li><strong>Bare-Metal Hypervisor &amp; IaC Provisioning:</strong> Deployed a headless AlmaLinux 10 KVM hypervisor on physical hardware with LVM storage optimization. Automated UEFI-based VM provisioning using Terraform and Libvirt, resolving x86-64-v3 CPU microarchitecture requirements via host-passthrough and IDE deprecation using custom virtio-scsi disk mappings.</li>
<li><strong>Configuration Management &amp; DevSecOps:</strong> Engineered Ansible playbooks to automate hypervisor setup, timezone sync, host preparation, user provisioning, and service lifecycles. Secured sensitive credentials using AES-256 encrypted Ansible Vault files and utilized SSH agent socket forwarding for keyless domain authentication.</li>
<li><strong>Centralized Identity &amp; DNS Management:</strong> Configured FreeIPA (LDAP, Kerberos, BIND DNS, PKI CA) on a dedicated VM, automatically enrolling all VM clients. Automated nmcli client DNS redirection and configured PAM automatic user home directory creation (--mkhomedir).</li>
<li><strong>Secure Ingress, Tunnels &amp; Observability:</strong> Deployed secure Cloudflare Tunnels to expose the portfolio web server and Grafana dashboard externally, and configured Playit.gg for secure Minecraft game tunneling. Orchestrated Node Exporter, Prometheus, and Grafana across all nodes for centralized cluster telemetry and monitoring.</li>
</ul>
<div style="margin-top: 15px;">
<a href="https://github.com/Isshi0417" target="_blank" id="git-project-link" class="btn btn-secondary" style="font-size: 0.75rem; padding: 8px 16px;">Source Repositories &rarr;</a>
</div>
</div>
</div>
</div>
</section>
<!-- Technical & Support Experience -->
<section class="card-section" id="sec-experience">
<h2 class="section-title">Technical &amp; Support Experience</h2>
<div class="card">
<div class="list-container">
<div class="list-item">
<div class="list-item-header">
<h4>Bilingual Customer Service Representative</h4>
<span class="date">Feb 2021 - May 2021</span>
</div>
<p class="subtitle-detail">HCL Technologies - Honolulu, HI</p>
<ul class="bullets">
<li>Provided bilingual technical support in Japanese and English to certification exam candidates, troubleshooting workstation configurations and local network connectivity issues during high-stakes testing.</li>
<li>Verified client identities and managed profile compliance in accordance with NDA guidelines and privacy regulations.</li>
<li>Utilized Microsoft Excel for post-examination session tracking, reporting, and logs.</li>
</ul>
</div>
<div class="list-item">
<div class="list-item-header">
<h4>Coach</h4>
<span class="date">Dec 2024 - Present</span>
</div>
<p class="subtitle-detail">Goeup Kendo Hall - Yangju, South Korea</p>
<p class="desc">Leadership and instruction for students and adults. Built team communication, safety standards, and structured drill sessions.</p>
</div>
<div class="list-item">
<div class="list-item-header">
<h4>Academic Tutor</h4>
<span class="date">Apr 2020 - Oct 2023</span>
</div>
<p class="subtitle-detail">Pacific Core Academy &amp; Independent - Honolulu, HI</p>
<p class="desc">Guided students through complex computer science and math concepts. Tracked learning sessions and compiled student growth profiles.</p>
</div>
</div>
</div>
</section>
</main>
<!-- RIGHT COLUMN: Skills, Certs, Specs, and Contact -->
<aside class="sidebar-column">
<!-- Technical Skill Matrix -->
<section class="card-section" id="sec-skills">
<h2 class="section-title">Skill Matrix</h2>
<div class="card">
<div class="skills-container">
<div class="skills-group">
<h4>Operating Systems</h4>
<div class="skill-tags">
<span class="skill-tag">AlmaLinux 10</span>
<span class="skill-tag">RHEL 9 / 10</span>
<span class="skill-tag">Debian 12</span>
<span class="skill-tag">Rocky Linux</span>
<span class="skill-tag">Fedora / Nobara</span>
<span class="skill-tag">Windows 11</span>
</div>
</div>
<div class="skills-group">
<h4>Automation &amp; IaC</h4>
<div class="skill-tags">
<span class="skill-tag">Ansible Core</span>
<span class="skill-tag">Ansible Navigator</span>
<span class="skill-tag">Ansible Vault</span>
<span class="skill-tag">Terraform</span>
<span class="skill-tag">Bash Scripting</span>
<span class="skill-tag">Python (sys)</span>
</div>
</div>
<div class="skills-group">
<h4>Virtualization &amp; Pods</h4>
<div class="skill-tags">
<span class="skill-tag">KVM / QEMU</span>
<span class="skill-tag">Libvirt</span>
<span class="skill-tag">Podman (Rootless)</span>
<span class="skill-tag">Docker Compose</span>
</div>
</div>
<div class="skills-group">
<h4>Networking &amp; Security</h4>
<div class="skill-tags">
<span class="skill-tag">BIND DNS</span>
<span class="skill-tag">Bridge (br0)</span>
<span class="skill-tag">NetworkManager (nmcli)</span>
<span class="skill-tag">Firewalld</span>
<span class="skill-tag">SELinux</span>
<span class="skill-tag">Cloudflare Tunnels</span>
<span class="skill-tag">Playit.gg Tunnels</span>
<span class="skill-tag">Kerberos / LDAP</span>
</div>
</div>
<div class="skills-group">
<h4>Monitoring</h4>
<div class="skill-tags">
<span class="skill-tag">Prometheus</span>
<span class="skill-tag">Grafana</span>
<span class="skill-tag">Node Exporter</span>
</div>
</div>
</div>
</div>
</section>
<!-- Certifications -->
<section class="card-section" id="sec-certs">
<h2 class="section-title">Certifications</h2>
<div class="card">
<div class="list-container">
<div class="list-item" style="border-bottom: none; padding-bottom: 0;">
<div class="list-item-header">
<h4>RHCSA Certificate</h4>
<span class="date">Active</span>
</div>
<p class="subtitle-detail">Red Hat Certified System Administrator</p>
<!-- Credly Badge Embed -->
<div class="credly-badge-container">
<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="ea1cfbb0-1d36-4090-b38d-f025088122b3" data-share-badge-host="https://www.credly.com"></div>
</div>
</div>
<div class="list-item" style="border-bottom: none; padding-bottom: 0; margin-top: 15px;">
<div class="list-item-header">
<h4>CompTIA Security+</h4>
<span class="date" style="color: var(--warning);">In Progress</span>
</div>
<p class="subtitle-detail">Target Exam: August 2026</p>
<p class="desc" style="font-size: 0.8rem; color: var(--text-muted);">Meets DoD 8570/8140 IAT Level II Baseline</p>
</div>
</div>
</div>
</section>
<!-- System Specifications -->
<section class="card-section" id="sec-specs">
<h2 class="section-title">Host Specifications</h2>
<div class="card">
<div class="specs-list">
<div class="spec-item">
<span class="label">Hardware</span>
<span class="val">BOSGAME P3 Lite</span>
</div>
<div class="spec-item">
<span class="label">CPU Type</span>
<span class="val">AMD Ryzen 7 6800H</span>
</div>
<div class="spec-item">
<span class="label">Memory</span>
<span class="val">32GB DDR5 RAM</span>
</div>
<div class="spec-item">
<span class="label">Storage</span>
<span class="val">1TB NVMe (Thin LVM)</span>
</div>
<div class="spec-item">
<span class="label">Host OS</span>
<span class="val">AlmaLinux 10</span>
</div>
<div class="spec-item">
<span class="label">Bridge LAN</span>
<span class="val">br0 (172.30.1.200)</span>
</div>
</div>
</div>
</section>
<!-- Contact Registry Section -->
<section class="card-section" id="sec-contact">
<h2 class="section-title">Contact Registry</h2>
<div class="card">
<div class="contact-grid">
<a href="mailto:shooey623@gmail.com" id="contact-email" class="contact-link">
<span class="label">Email</span> shooey623@gmail.com
</a>
<a href="https://gitea.shooey.xyz/sho" target="_blank" id="contact-gitea" class="contact-link">
<span class="label">Gitea</span> gitea.shooey.xyz/sho
</a>
<a href="https://github.com/Isshi0417" target="_blank" id="contact-github" class="contact-link">
<span class="label">GitHub</span> github.com/Isshi0417
</a>
</div>
</div>
</section>
</aside>
</div>
<!-- Education & accomplishments nested block -->
<div class="footer-row-grid" style="margin-top: 30px;">
<section class="card-section" id="sec-education" style="margin-bottom: 0;">
<h2 class="section-title">Education</h2>
<div class="card">
<div class="list-item" style="border-bottom: none; padding-bottom: 0;">
<h4 style="font-size: 0.95rem;">A.S. Computer Science</h4>
<p class="subtitle-detail">University of the People</p>
<p class="desc" style="font-size: 0.8rem;">Pasadena, CA (Remote environment)</p>
</div>
</div>
</section>
<section class="card-section" id="sec-accomplishments" style="margin-bottom: 0;">
<h2 class="section-title">Accomplishments &amp; Licenses</h2>
<div class="card">
<ul class="bullets" style="font-size: 0.82rem; padding-left: 15px;">
<li style="margin-bottom: 6px;">4-Dan Kendo (KKA/FIK Black Belt, instruction &amp; leadership)</li>
<li style="margin-bottom: 6px;">PADI Divemaster Professional safety license</li>
<li style="margin-bottom: 6px;">Ursinus College SIE &amp; Rice Memorial Scholarships</li>
<li>Consulate General of Korea Essay &amp; Speech Honors</li>
</ul>
</div>
</section>
</div>
<!-- Footer -->
<footer style="margin-top: 40px;">
<p class="footer-text">Sho Ishida | Red Hat Certified System Administrator</p>
</footer>
</div>
<script src="script.js"></script>
<!-- Credly script loader for badge verification -->
<script type="text/javascript" async src="//cdn.credly.com/assets/utilities/embed.js"></script>
</body>
</html>

44
website/script.js Normal file
View File

@ -0,0 +1,44 @@
// =========================================================================
// Sho Ishida - Developer Portfolio Interactions (Dracula Blade Edition)
// =========================================================================
// Copy to Clipboard Utility for contact registry items
function setupCopyHandlers() {
const contactLinks = document.querySelectorAll('.contact-link');
contactLinks.forEach(link => {
link.addEventListener('click', (e) => {
const href = link.getAttribute('href');
let textToCopy = '';
// If it's a mailto link, copy only the address, otherwise copy the link target URL
if (href.startsWith('mailto:')) {
e.preventDefault();
textToCopy = href.replace('mailto:', '');
} else {
textToCopy = link.getAttribute('href');
}
navigator.clipboard.writeText(textToCopy).then(() => {
const originalText = link.innerHTML;
const label = link.querySelector('.label').textContent;
// Show brief success feedback in the UI
link.innerHTML = `<span class="label" style="color: var(--success);">${label}</span> Copied to clipboard!`;
setTimeout(() => {
link.innerHTML = originalText;
}, 1800);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
});
});
}
// -------------------------------------------------------------------------
// Initialization
// -------------------------------------------------------------------------
document.addEventListener('DOMContentLoaded', () => {
setupCopyHandlers();
});

555
website/style.css Normal file
View File

@ -0,0 +1,555 @@
/* =========================================================================
Dracula Pro (Blade) Theme - Clean Professional Developer Portfolio
========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* Dracula Pro Blade Color Tokens */
--bg-darkest: #111615;
--bg-dark: #161D1C;
--bg-card: rgba(28, 37, 36, 0.65);
--bg-card-hover: rgba(38, 50, 48, 0.8);
--border-color: rgba(65, 88, 84, 0.3);
--border-accent: rgba(112, 169, 159, 0.6);
--border-glow: rgba(112, 169, 159, 0.15);
--brand-color: #70A99F;
--brand-glow: rgba(112, 169, 159, 0.15);
--link-color: #80FFEA;
--text-main: #F8F8F2;
--text-muted: #81BFB4;
--text-comment: #637d7a;
/* Status Colors */
--success: #8AFF80;
--warning: #FFFF80;
--danger: #FF9580;
--purple: #9580FF;
/* Transitions */
--transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Core Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg-darkest);
color: var(--text-main);
font-family: 'Inter', sans-serif;
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* Light frosted glass background overlay using body::before */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: radial-gradient(circle at 5% 5%, rgba(112, 169, 159, 0.04) 0%, transparent 35%),
radial-gradient(circle at 95% 95%, rgba(128, 255, 234, 0.02) 0%, transparent 35%),
url('bg.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(3px) brightness(85%) saturate(90%); /* Light blur (3px) and high brightness (85%) */
pointer-events: none;
transform: scale(1.02); /* Expands background slightly to hide blurred edges */
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--brand-color);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
}
/* Layout Containers */
.container {
max-width: 1160px;
margin: 0 auto;
padding: 80px 20px;
position: relative;
z-index: 10;
}
/* Sleek Minimalist Hero Section */
.hero-section {
text-align: center;
margin-bottom: 60px;
padding: 20px 0;
}
.hero-section h1 {
font-size: 3.8rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 12px;
background: linear-gradient(135deg, var(--text-main) 40%, var(--brand-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-section .subtitle {
color: var(--text-muted);
font-size: 1.2rem;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 25px;
}
/* Badge System */
.badge-container {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.badge {
background: rgba(112, 169, 159, 0.06);
border: 1px solid rgba(112, 169, 159, 0.2);
color: var(--brand-color);
font-family: 'Outfit', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 16px;
backdrop-filter: blur(4px);
transition: var(--transition-smooth);
}
.badge:hover {
background: rgba(112, 169, 159, 0.12);
border-color: var(--brand-color);
box-shadow: 0 0 10px rgba(112, 169, 159, 0.15);
}
.badge.lang-badge {
border-color: rgba(128, 255, 234, 0.2);
color: var(--link-color);
}
/* Call to Action Buttons */
.btn-group {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
border-radius: 6px;
transition: var(--transition-smooth);
cursor: pointer;
}
.btn-primary {
background: var(--brand-color);
color: var(--bg-darkest);
border: 1px solid var(--brand-color);
box-shadow: 0 4px 12px rgba(112, 169, 159, 0.25);
}
.btn-primary:hover {
background: #81BFB4;
border-color: #81BFB4;
box-shadow: 0 6px 16px rgba(112, 169, 159, 0.35);
transform: translateY(-1px);
}
.btn-secondary {
background: transparent;
color: var(--text-main);
border: 1px solid var(--border-color);
}
.btn-secondary:hover {
border-color: var(--border-accent);
background: rgba(112, 169, 159, 0.06);
color: var(--link-color);
transform: translateY(-1px);
}
/* Layout Grid */
.portfolio-grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: 30px;
align-items: start;
}
@media (max-width: 900px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
}
/* Sections */
.card-section {
margin-bottom: 35px;
}
.section-title {
font-size: 1.25rem;
color: var(--text-main);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1.5px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
background-color: var(--brand-color);
box-shadow: 0 0 8px var(--brand-color);
border-radius: 50%;
}
/* Glassmorphism Cards */
.card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 28px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px) saturate(120%);
position: relative;
transition: var(--transition-smooth);
}
.card:hover {
border-color: var(--border-accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 15px rgba(112, 169, 159, 0.08);
}
/* About Paragraphs */
.profile-text {
font-size: 0.92rem;
line-height: 1.7;
color: rgba(248, 248, 242, 0.85);
margin-bottom: 15px;
}
.profile-text:last-child {
margin-bottom: 0;
}
/* Skills Layout */
.skills-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.skills-group h4 {
font-size: 0.82rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
border-left: 2px solid var(--brand-color);
padding-left: 10px;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
background: rgba(16, 22, 21, 0.4);
border: 1px solid var(--border-color);
color: var(--text-main);
font-size: 0.8rem;
padding: 5px 11px;
border-radius: 4px;
transition: var(--transition-smooth);
}
.skill-tag:hover {
border-color: var(--border-accent);
background: rgba(112, 169, 159, 0.1);
color: var(--link-color);
}
/* Timelines / Standard Lists */
.list-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.list-item {
border-bottom: 1px solid var(--border-color);
padding-bottom: 20px;
}
.list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.list-item-header {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 4px;
}
.list-item h4 {
font-size: 1rem;
color: var(--text-main);
}
.list-item .date {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
color: var(--brand-color);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.list-item .subtitle-detail {
font-size: 0.85rem;
font-style: italic;
color: var(--text-muted);
margin-bottom: 10px;
}
.list-item .desc {
font-size: 0.88rem;
color: rgba(248, 248, 242, 0.8);
}
.list-item .bullets {
padding-left: 18px;
margin-top: 10px;
font-size: 0.86rem;
color: rgba(248, 248, 242, 0.8);
}
.list-item .bullets li {
margin-bottom: 8px;
}
/* Homelab VM Node Grid inside main page */
.vm-nodes-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
@media (max-width: 600px) {
.vm-nodes-grid {
grid-template-columns: 1fr;
}
}
.vm-node-card {
background: rgba(16, 22, 21, 0.4);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 15px;
transition: var(--transition-smooth);
}
.vm-node-card:hover {
background: rgba(28, 37, 36, 0.5);
border-color: var(--border-accent);
}
.vm-node-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.vm-node-header h4 {
font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem;
color: var(--text-main);
}
.vm-node-ip {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: var(--link-color);
margin-bottom: 4px;
}
.vm-node-role {
font-size: 0.8rem;
color: var(--text-muted);
}
.node-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--success);
box-shadow: 0 0 6px var(--success);
display: inline-block;
}
/* System Specifications Specs List */
.specs-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.spec-item {
display: flex;
justify-content: space-between;
border-bottom: 1px dashed var(--border-color);
padding-bottom: 6px;
}
.spec-item:last-child {
border-bottom: none;
}
.spec-item .label {
font-family: 'Outfit', sans-serif;
font-size: 0.82rem;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spec-item .val {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: var(--link-color);
}
/* Contact List */
.contact-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.contact-link {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-main);
text-decoration: none;
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid transparent;
background: rgba(16, 22, 21, 0.2);
transition: var(--transition-smooth);
}
.contact-link:hover {
background: rgba(112, 169, 159, 0.08);
border-color: var(--border-color);
color: var(--link-color);
transform: translateX(3px);
}
.contact-link .label {
font-family: 'Outfit', sans-serif;
font-size: 0.75rem;
font-weight: 600;
color: var(--brand-color);
text-transform: uppercase;
min-width: 80px;
}
/* Credly Embed container */
.credly-badge-container {
display: flex;
justify-content: center;
align-items: center;
background: rgba(16, 22, 21, 0.4);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 15px;
margin-top: 15px;
}
/* Responsive grid for footer cards */
.footer-row-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 600px) {
.footer-row-grid {
grid-template-columns: 1fr;
}
}
/* Footer text */
.footer-text {
text-align: center;
margin-top: 50px;
font-size: 0.8rem;
color: var(--text-comment);
letter-spacing: 0.5px;
text-transform: uppercase;
}