jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
jaeswift-website/index.html
jae ae1c7e0b71 🚀 Initial build: sci-fi dashboard website 
- HUD-style navbar with dropdown menus (HOME, BLOG, DEV, LINKS, CONTACT)
- Particle system with mouse interaction
- Glitch text + typing animation hero
- Scroll-reveal animations
- Animated skill bars
- Blog cards, dev project cards, link cards
- Contact form with transmission effect
- Live terminal emulator
- Scanline overlay + grid background
- Responsive mobile layout
- Live clock + uptime counter + signal animation
2026-03-31 19:23:47 +00:00

443 lines
22 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">
</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">
<li class="nav-item">
<a href="#home" class="nav-link active">HOME</a>
<ul class="dropdown">
<li><a href="#home">Dashboard</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#status">System Status</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#blog" class="nav-link">BLOG</a>
<ul class="dropdown">
<li><a href="#blog">Latest Posts</a></li>
<li><a href="#blog">Tutorials</a></li>
<li><a href="#blog">Write-ups</a></li>
<li><a href="#blog">Archive</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#development" class="nav-link">DEVELOPMENT</a>
<ul class="dropdown">
<li><a href="#development">Projects</a></li>
<li><a href="#development">Repositories</a></li>
<li><a href="#development">Tech Stack</a></li>
<li><a href="#development">Contributions</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#links" class="nav-link">LINKS</a>
<ul class="dropdown">
<li><a href="https://git.jaeswift.xyz/jae" target="_blank">Gitea</a></li>
<li><a href="https://gitlab.com/jaeswift" target="_blank">GitLab</a></li>
<li><a href="https://reddit.com/u/jaeswift" target="_blank">Reddit</a></li>
<li><a href="#links">All Links</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">CONTACT</a>
<ul class="dropdown">
<li><a href="#contact">Send Message</a></li>
<li><a href="mailto:jae@jaeswift.xyz">Email</a></li>
</ul>
</li>
</ul>
<div class="nav-status">
<span class="nav-time" id="navTime">00:00:00</span>
<span class="nav-signal">▮▮▮▮▯</span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-hud">
<div class="hud-corner hud-tl"></div>
<div class="hud-corner hud-tr"></div>
<div class="hud-corner hud-bl"></div>
<div class="hud-corner hud-br"></div>
<div class="hero-content">
<div class="hero-label">SYSTEM IDENTIFICATION</div>
<h1 class="hero-title">
<span class="glitch" data-text="JAESWIFT">JAESWIFT</span>
</h1>
<div class="hero-subtitle">
<span class="typing-prefix">&gt; </span>
<span class="typing-text" id="typingText"></span>
<span class="typing-cursor">█</span>
</div>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-label">STATUS</span>
<span class="stat-value stat-online">● OPERATIONAL</span>
</div>
<div class="stat-item">
<span class="stat-label">UPTIME</span>
<span class="stat-value" id="uptime">0d 00h 00m</span>
</div>
<div class="stat-item">
<span class="stat-label">LOCATION</span>
<span class="stat-value">EARTH // LEO</span>
</div>
</div>
</div>
<!-- Scanning animation -->
<div class="scan-line"></div>
</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">
<article class="blog-card" data-animate>
<div class="blog-card-header">
<span class="blog-date">2026.03.31</span>
<span class="blog-tag">INFRASTRUCTURE</span>
</div>
<h3 class="blog-title">Self-Hosting Everything: A Complete Guide</h3>
<p class="blog-excerpt">How I migrated away from cloud services and built a fully self-hosted infrastructure stack...</p>
<div class="blog-footer">
<span class="blog-read-time">◷ 8 MIN READ</span>
<a href="#" class="blog-link">READ →</a>
</div>
</article>
<article class="blog-card" data-animate>
<div class="blog-card-header">
<span class="blog-date">2026.03.28</span>
<span class="blog-tag">SECURITY</span>
</div>
<h3 class="blog-title">Hardening Your VPS: Beyond the Basics</h3>
<p class="blog-excerpt">Essential security configurations that most tutorials skip — from kernel parameters to network isolation...</p>
<div class="blog-footer">
<span class="blog-read-time">◷ 12 MIN READ</span>
<a href="#" class="blog-link">READ →</a>
</div>
</article>
<article class="blog-card" data-animate>
<div class="blog-card-header">
<span class="blog-date">2026.03.22</span>
<span class="blog-tag">DEV</span>
</div>
<h3 class="blog-title">Building AI Agents That Actually Work</h3>
<p class="blog-excerpt">My journey deploying Agent Zero and customising autonomous AI assistants for real-world tasks...</p>
<div class="blog-footer">
<span class="blog-read-time">◷ 10 MIN READ</span>
<a href="#" class="blog-link">READ →</a>
</div>
</article>
</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" placeholder="Enter your name..." required>
</div>
<div class="form-group">
<label class="form-label">FREQUENCY</label>
<input type="email" class="form-input" placeholder="your@email.com" required>
</div>
<div class="form-group">
<label class="form-label">SUBJECT</label>
<input type="text" class="form-input" placeholder="Transmission subject...">
</div>
<div class="form-group">
<label class="form-label">MESSAGE PAYLOAD</label>
<textarea class="form-input form-textarea" 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>
</body>
</html>
Reference in a new issue View git blame Copy permalink