jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
jaeswift-website/index.html

572 lines
28 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAESWIFT // SYSTEMS ONLINE</title>
<link rel="stylesheet" href="/css/style.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=JetBrains+Mono:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<script src="https://unpkg.com/globe.gl@2.45.1/dist/globe.gl.min.js"></script>
</head>
<body>
<!-- Scanline overlay -->
<div class="scanline-overlay"></div>
<!-- Grid background -->
<div class="grid-bg"></div>
<!-- Particle canvas -->
<canvas id="particles"></canvas>
<!-- Navigation -->
<nav class="nav-main" id="navbar">
<div class="nav-container">
<a href="#" class="nav-logo">
<span class="logo-bracket">[</span>
<span class="logo-text">JAE<span class="logo-accent">SWIFT</span></span>
<span class="logo-bracket">]</span>
<span class="logo-status">● ONLINE</span>
</a>
<button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
<span></span><span></span><span></span>
</button>
<ul class="nav-menu" id="navMenu">
<!-- Loaded dynamically from /api/navigation -->
</ul>
<div class="nav-status">
<span class="nav-time" id="navTime">00:00:00</span>
<span class="nav-signal">▮▮▮▮▯</span>
</div>
</div>
</nav>
<!-- Status Bar -->
<div class="hud-bottom-bar">
<div class="hud-bottom-left">
<span class="hud-id">JAE-001X</span>
<span class="hud-dot-online">● ONLINE</span>
</div>
<div class="hud-bottom-stats">
<div class="hud-bstat">
<span class="hud-bstat-label">STATUS</span>
<span class="hud-bstat-value hud-online">● OPERATIONAL</span>
</div>
<div class="hud-bstat">
<span class="hud-bstat-label">UPTIME</span>
<span class="hud-bstat-value" id="uptime">0d 00h 00m</span>
</div>
<div class="hud-bstat">
<span class="hud-bstat-label">COORDS</span>
<span class="hud-bstat-value">53.48°N // 2.24°W</span>
</div>
</div>
<div class="hud-bottom-right">
<span class="hud-scan-label">SCANNING...</span>
<div class="hud-scan-bar"><div class="hud-scan-fill" id="scanFill"></div></div>
<span class="hud-scan-pct" id="scanPct">0%</span>
</div>
</div>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-hud-grid">
<!-- Left Column: Map + Identity -->
<div class="hud-col-left">
<div class="panel map-panel globe-panel">
<div class="panel-header">
<span class="panel-title">GLOBAL NETWORK MAP</span>
<span class="panel-status-dot status-green">● TRACKING</span>
</div>
<div class="globe-container" id="globeContainer">
<div id="globeViz"></div>
<div class="globe-data-overlay">
<div class="globe-coord-block">
<span class="coord-label">NODE</span>
<span class="coord-value">MANCHESTER</span>
</div>
<div class="globe-coord-block">
<span class="coord-label">LAT</span>
<span class="coord-value">+53.48°</span>
</div>
<div class="globe-coord-block">
<span class="coord-label">LONG</span>
<span class="coord-value">-2.24°</span>
</div>
</div>
</div>
</div>
<!-- Weather Panel -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">WEATHER</span>
<span class="panel-status-dot status-green">● LIVE</span>
</div>
<div class="panel-content weather-display">
<div class="weather-main">
<span class="weather-temp" id="weatherTemp">--°C</span>
<span class="weather-cond" id="weatherCond">LOADING...</span>
</div>
<div class="weather-details">
<span class="weather-detail" id="weatherFeels">FEELS --°C</span>
<span class="weather-detail" id="weatherWind">-- KPH</span>
<span class="weather-detail" id="weatherHumidity">--% RH</span>
</div>
</div>
</div>
<!-- Top Processes -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">TOP PROCESSES</span>
<span class="panel-status-dot status-green">● LIVE</span>
</div>
<div class="panel-content proc-display">
<table class="proc-table">
<thead>
<tr>
<th>PID</th>
<th>NAME</th>
<th>CPU</th>
<th>MEM</th>
</tr>
</thead>
<tbody id="procTableBody">
<tr><td colspan="4" class="proc-loading">SCANNING...</td></tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Middle Column: AI Chat Terminal -->
<div class="hud-col-center">
<div class="panel chat-terminal">
<div class="panel-header chat-header">
<span class="panel-title">JAE-AI <span class="chat-model">// VENICE-UNCENSORED</span></span>
<span class="panel-status-dot status-green chat-status" id="chatStatus">● ONLINE</span>
</div>
<div class="chat-messages" id="chatMessages">
<div class="chat-welcome">
<div class="chat-logo-text">
<span class="glitch" data-text="JAESWIFT">JAESWIFT</span>
</div>
<div class="chat-welcome-sub">SYSTEM IDENTIFICATION // AI TERMINAL</div>
<div class="chat-welcome-hint">Type a message to interact with JAE-AI</div>
</div>
</div>
<div class="chat-input-area">
<span class="chat-prompt-icon">&gt;_</span>
<input type="text" class="chat-input" id="chatInput" placeholder="ENTER TRANSMISSION..." autocomplete="off" spellcheck="false">
<button class="chat-send" id="chatSend" title="Send">
<span class="chat-send-icon">▶</span>
</button>
</div>
</div>
</div>
<!-- Right Column: Data Panels -->
<div class="hud-col-right">
<!-- Server Metrics -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">SERVER METRICS</span>
<span class="panel-pct" id="serverHealth">98%</span>
</div>
<div class="panel-content hud-metrics">
<div class="metric-row">
<span class="metric-label">CPU LOAD</span>
<div class="metric-bar"><div class="metric-fill" id="cpuBar"></div></div>
<span class="metric-val" id="cpuVal">23%</span>
</div>
<div class="metric-row">
<span class="metric-label">MEMORY</span>
<div class="metric-bar"><div class="metric-fill" id="memBar"></div></div>
<span class="metric-val" id="memVal">67%</span>
</div>
<div class="metric-row">
<span class="metric-label">DISK I/O</span>
<div class="metric-bar"><div class="metric-fill" id="diskBar"></div></div>
<span class="metric-val" id="diskVal">45%</span>
</div>
<div class="metric-row">
<span class="metric-label">BANDWIDTH</span>
<div class="metric-bar"><div class="metric-fill" id="bwBar"></div></div>
<span class="metric-val" id="bwVal">78%</span>
</div>
</div>
</div>
<!-- Battery / Power -->
<div class="panel hud-data-panel hud-row-panels">
<div class="hud-mini-panel">
<div class="panel-header">
<span class="panel-title">POWER</span>
<span class="panel-status-dot status-green">● ON MAINS</span>
</div>
<div class="panel-content power-display">
<div class="power-big" id="powerPct">98<span class="power-unit">%</span></div>
</div>
</div>
<div class="hud-mini-panel">
<div class="panel-header">
<span class="panel-title">CONTAINERS</span>
<span class="panel-icon">↗</span>
</div>
<div class="panel-content containers-display">
<div class="container-count"><span id="containerUp">8</span> / <span class="container-total">8</span></div>
<div class="container-bar"><div class="container-fill" id="containerBar"></div></div>
<span class="container-label">ALL RUNNING</span>
</div>
</div>
</div>
<!-- Now Playing -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">NOW PLAYING</span>
<span class="panel-status-dot" id="npStatus">● STREAMING</span>
</div>
<div class="panel-content np-display">
<div class="np-track" id="npTrack">---</div>
<div class="np-artist" id="npArtist">---</div>
<div class="np-album" id="npAlbum">---</div>
<div class="np-visualiser">
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span><span class="np-bar"></span>
<span class="np-bar"></span><span class="np-bar"></span>
</div>
</div>
</div>
<!-- Network Graph -->
<div class="panel hud-data-panel">
<div class="panel-header">
<span class="panel-title">NETWORK TRAFFIC</span>
<span class="panel-icon">↗</span>
</div>
<div class="panel-content graph-container">
<canvas id="networkGraph"></canvas>
<div class="graph-stats">
<div class="graph-stat">
<span class="graph-stat-label">DOWNLOAD</span>
<span class="graph-stat-value" id="dlSpeed">1.6 Gbps</span>
</div>
<div class="graph-stat">
<span class="graph-stat-label">UPLOAD</span>
<span class="graph-stat-value" id="ulSpeed">1.2 Gbps</span>
</div>
<div class="graph-stat">
<span class="graph-stat-label">PACKETS</span>
<span class="graph-stat-value" id="packetCount">12 / 1.012</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="scan-line"></div>
</section>
<!-- About Section -->
<section class="section" id="about">
<div class="section-container">
<div class="section-header">
<span class="section-tag">01</span>
<h2 class="section-title">ABOUT<span class="accent">_</span>ME</h2>
<div class="section-line"></div>
</div>
<div class="panels-grid">
<div class="panel panel-main" data-animate>
<div class="panel-header">
<span class="panel-title">OPERATOR PROFILE</span>
<span class="panel-icon">↗</span>
</div>
<div class="panel-content">
<p>Developer, tinkerer, and digital architect. I build things that live on the internet — from self-hosted infrastructure to custom web applications.</p>
<p>Passionate about open source, cybersecurity, and making technology work the way it should.</p>
<div class="panel-data">
<div class="data-row">
<span class="data-key">CODENAME</span>
<span class="data-val">JAE</span>
</div>
<div class="data-row">
<span class="data-key">DOMAIN</span>
<span class="data-val">JAESWIFT.XYZ</span>
</div>
<div class="data-row">
<span class="data-key">CLEARANCE</span>
<span class="data-val">ADMIN</span>
</div>
</div>
</div>
</div>
<div class="panel" data-animate>
<div class="panel-header">
<span class="panel-title">SKILL MATRIX</span>
<span class="panel-icon">↗</span>
</div>
<div class="panel-content">
<div class="skill-bar">
<span class="skill-name">LINUX / SYSADMIN</span>
<div class="bar-track"><div class="bar-fill" data-width="92"></div></div>
<span class="skill-pct">92%</span>
</div>
<div class="skill-bar">
<span class="skill-name">WEB DEVELOPMENT</span>
<div class="bar-track"><div class="bar-fill" data-width="85"></div></div>
<span class="skill-pct">85%</span>
</div>
<div class="skill-bar">
<span class="skill-name">PYTHON</span>
<div class="bar-track"><div class="bar-fill" data-width="88"></div></div>
<span class="skill-pct">88%</span>
</div>
<div class="skill-bar">
<span class="skill-name">DOCKER / INFRA</span>
<div class="bar-track"><div class="bar-fill" data-width="80"></div></div>
<span class="skill-pct">80%</span>
</div>
<div class="skill-bar">
<span class="skill-name">CYBERSECURITY</span>
<div class="bar-track"><div class="bar-fill" data-width="75"></div></div>
<span class="skill-pct">75%</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Blog Section -->
<section class="section" id="blog">
<div class="section-container">
<div class="section-header">
<span class="section-tag">02</span>
<h2 class="section-title">BLOG<span class="accent">_</span>FEED</h2>
<div class="section-line"></div>
</div>
<div class="blog-grid" id="blogGrid">
<!-- Posts loaded dynamically from API -->
<div class="blog-loading-placeholder">
<span class="loading-spinner"></span>
<span>LOADING TRANSMISSIONS...</span>
</div>
</div>
<div class="blog-view-all" style="text-align:center; margin-top:2rem;">
<a href="/blog" class="blog-view-all-link" style="font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:#00cc33; letter-spacing:2px; text-decoration:none; border:1px solid rgba(0,204,51,0.15); padding:0.6rem 2rem; transition:all 0.3s;">VIEW ALL TRANSMISSIONS →</a>
</div>
</div>
</section>
<!-- Development Section -->
<section class="section" id="development">
<div class="section-container">
<div class="section-header">
<span class="section-tag">03</span>
<h2 class="section-title">DEV<span class="accent">_</span>OPS</h2>
<div class="section-line"></div>
</div>
<div class="dev-grid">
<div class="dev-card" data-animate>
<div class="dev-card-top">
<span class="dev-icon">⬡</span>
<span class="dev-status">● ACTIVE</span>
</div>
<h3 class="dev-title">Agent Zero</h3>
<p class="dev-desc">Custom AI agent framework deployment with autonomous task execution capabilities.</p>
<div class="dev-tech">
<span class="tech-tag">Python</span>
<span class="tech-tag">Docker</span>
<span class="tech-tag">LLM</span>
</div>
<div class="dev-links">
<a href="https://git.jaeswift.xyz/jae" class="dev-link">REPO →</a>
</div>
</div>
<div class="dev-card" data-animate>
<div class="dev-card-top">
<span class="dev-icon">◈</span>
<span class="dev-status">● ACTIVE</span>
</div>
<h3 class="dev-title">Infrastructure Stack</h3>
<p class="dev-desc">Self-hosted services including Gitea, monitoring, reverse proxies, and automated deployments.</p>
<div class="dev-tech">
<span class="tech-tag">Linux</span>
<span class="tech-tag">Nginx</span>
<span class="tech-tag">Docker</span>
</div>
<div class="dev-links">
<a href="#" class="dev-link">DETAILS →</a>
</div>
</div>
<div class="dev-card" data-animate>
<div class="dev-card-top">
<span class="dev-icon">◉</span>
<span class="dev-status status-dev">◌ IN DEV</span>
</div>
<h3 class="dev-title">JAESWIFT.XYZ</h3>
<p class="dev-desc">This website — a sci-fi dashboard-inspired personal hub with custom animations and HUD elements.</p>
<div class="dev-tech">
<span class="tech-tag">HTML</span>
<span class="tech-tag">CSS</span>
<span class="tech-tag">JavaScript</span>
</div>
<div class="dev-links">
<a href="https://git.jaeswift.xyz/jae/jaeswift-website" class="dev-link">REPO →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Links Section -->
<section class="section" id="links">
<div class="section-container">
<div class="section-header">
<span class="section-tag">04</span>
<h2 class="section-title">EXT<span class="accent">_</span>LINKS</h2>
<div class="section-line"></div>
</div>
<div class="links-grid">
<a href="https://git.jaeswift.xyz/jae" target="_blank" class="link-card" data-animate>
<div class="link-icon">⟐</div>
<div class="link-info">
<span class="link-name">GITEA</span>
<span class="link-url">git.jaeswift.xyz</span>
</div>
<span class="link-arrow">→</span>
</a>
<a href="https://gitlab.com/jaeswift" target="_blank" class="link-card" data-animate>
<div class="link-icon">◈</div>
<div class="link-info">
<span class="link-name">GITLAB</span>
<span class="link-url">gitlab.com/jaeswift</span>
</div>
<span class="link-arrow">→</span>
</a>
<a href="https://reddit.com/u/jaeswift" target="_blank" class="link-card" data-animate>
<div class="link-icon">◎</div>
<div class="link-info">
<span class="link-name">REDDIT</span>
<span class="link-url">reddit.com/u/jaeswift</span>
</div>
<span class="link-arrow">→</span>
</a>
<a href="mailto:jae@jaeswift.xyz" class="link-card" data-animate>
<div class="link-icon">✉</div>
<div class="link-info">
<span class="link-name">EMAIL</span>
<span class="link-url">jae@jaeswift.xyz</span>
</div>
<span class="link-arrow">→</span>
</a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="section" id="contact">
<div class="section-container">
<div class="section-header">
<span class="section-tag">05</span>
<h2 class="section-title">COMMS<span class="accent">_</span>LINK</h2>
<div class="section-line"></div>
</div>
<div class="contact-grid">
<div class="panel contact-panel" data-animate>
<div class="panel-header">
<span class="panel-title">TRANSMIT MESSAGE</span>
<span class="panel-icon">◇</span>
</div>
<form class="contact-form" id="contactForm">
<div class="form-group">
<label class="form-label">CALLSIGN</label>
<input type="text" class="form-input" id="contactName" placeholder="Enter your name..." required>
</div>
<div class="form-group">
<label class="form-label">FREQUENCY</label>
<input type="email" class="form-input" id="contactEmail" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label class="form-label">SUBJECT</label>
<input type="text" class="form-input" id="contactSubject" placeholder="Transmission subject...">
</div>
<div class="form-group">
<label class="form-label">MESSAGE PAYLOAD</label>
<textarea class="form-input form-textarea" id="contactMessage" placeholder="Enter your message..." rows="5" required></textarea>
</div>
<button type="submit" class="form-submit">
<span class="submit-text">TRANSMIT</span>
<span class="submit-icon">▶</span>
</button>
</form>
</div>
<div class="contact-info" data-animate>
<div class="panel">
<div class="panel-header">
<span class="panel-title">SIGNAL INFO</span>
<span class="panel-icon">↗</span>
</div>
<div class="panel-content">
<div class="info-block">
<span class="info-label">PRIMARY CHANNEL</span>
<span class="info-value">jae@jaeswift.xyz</span>
</div>
<div class="info-block">
<span class="info-label">RESPONSE TIME</span>
<span class="info-value">~24 HOURS</span>
</div>
<div class="info-block">
<span class="info-label">ENCRYPTION</span>
<span class="info-value">PGP AVAILABLE</span>
</div>
</div>
</div>
<div class="panel terminal-panel">
<div class="panel-header">
<span class="panel-title">TERMINAL</span>
<span class="panel-icon">_</span>
</div>
<div class="terminal-content" id="terminal">
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cmd">whoami</span></div>
<div class="term-line term-output">jae</div>
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cmd">cat /etc/motd</span></div>
<div class="term-line term-output">Welcome to jaeswift.xyz</div>
<div class="term-line term-output">All systems operational.</div>
<div class="term-line"><span class="term-prompt">jae@swift:~$</span> <span class="term-cursor">█</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-container">
<div class="footer-left">
<span class="footer-logo">[JAE<span class="accent">SWIFT</span>]</span>
<span class="footer-copy">© 2026 // ALL SYSTEMS NOMINAL</span>
</div>
<div class="footer-right">
<span class="footer-coords">LAT: +51.5° // LONG: -0.1°</span>
<span class="footer-signal" id="footerSignal">SIGNAL: ████████░░ 80%</span>
</div>
</div>
<div class="footer-bar"></div>
</footer>
<script src="/js/main.js"></script>
<script src="/js/nav.js"></script>
<script src="/js/chat.js"></script>
<script src="/js/globe.js"></script>
<script src="/js/processes.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink