Personal website for jaeswift.xyz - Sci-fi dashboard aesthetic
| api | ||
| armoury | ||
| comms | ||
| contraband | ||
| css | ||
| depot | ||
| hq | ||
| js | ||
| recon | ||
| transmissions | ||
| .gitignore | ||
| admin.html | ||
| AUDIT_REPORT.md | ||
| blog.html | ||
| index.html | ||
| post.html | ||
| README.md | ||
JAESWIFT.XYZ
Sci-fi dashboard-inspired personal website
Overview
A cyberpunk/sci-fi themed personal website inspired by satellite monitoring dashboards. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no bloat.
Features
- HUD-style navigation with dropdown menus and live clock
- Particle system with mouse interaction and connection lines
- Glitch text effect on hero title
- Typing animation cycling through descriptions
- Scroll-reveal animations for content sections
- Animated skill bars with glow effects
- Live terminal emulator with typed commands
- Panel hover glow tracking (follows cursor)
- Scanline overlay and grid background
- HUD data flickers for authentic dashboard feel
- Signal strength animation in footer
- Fully responsive — mobile hamburger menu with accordion dropdowns
Sections
| # | Section | Description |
|---|---|---|
| 00 | Hero | Animated HUD frame with glitch title, typing subtitle, status readouts |
| 01 | About | Operator profile panel + animated skill matrix bars |
| 02 | Blog | Card grid for blog posts with hover animations |
| 03 | Development | Project cards with tech tags and status indicators |
| 04 | Links | External links grid (Gitea, GitLab, Reddit, Email) |
| 05 | Contact | Transmission form + signal info + live terminal emulator |
Tech Stack
- HTML5 — Semantic markup
- CSS3 — Custom properties, grid, flexbox, animations, backdrop-filter
- Vanilla JS — Particle system, IntersectionObserver, typing effect
- Google Fonts — JetBrains Mono, Orbitron, Share Tech Mono
Palette
| Colour | Hex | Usage |
|---|---|---|
| Background | #060608 |
Primary background |
| Panel | #0c1018 |
Card/panel backgrounds |
| Accent | #00ffc8 |
Primary accent (cyan/teal) |
| Text | #c8d6e5 |
Primary text |
| Muted | #5a6a7a |
Secondary text |
| Border | #1a2a3a |
Panel borders |
| Danger | #ff3a5c |
Glitch/error accent |
Local Development
# Clone
git clone https://git.jaeswift.xyz/jae/jaeswift-website.git
cd jaeswift-website
# Serve (any static server works)
python3 -m http.server 8080
# or
npx serve .
Open http://localhost:8080 in your browser.
Deployment
Static files — deploy anywhere: Nginx, Apache, Caddy, Netlify, Cloudflare Pages, etc.
License
© 2026 jae — All rights reserved.