Personal website for jaeswift.xyz - Sci-fi dashboard aesthetic
jae
09ce4c4826
Added 4 new categories: unsolved-murders, landmark-cases, cold-cases, serial-killers 11 UK cases: Daniel Morgan, Claudia Lawrence, Jill Dando, Suzy Lamplugh, Stephen Lawrence, James Bulger, Damilola Taylor, Lee Rigby, Lord Lucan, Madeleine McCann, Jack the Ripper 57 indexed documents, 23 PDFs, 95 files deployed (28.2 MB) |
||
|---|---|---|
| api | ||
| armoury | ||
| comms | ||
| css | ||
| depot | ||
| hq | ||
| js | ||
| jupiterswap | ||
| recon | ||
| soldomains | ||
| tokenlauncher | ||
| transmissions | ||
| .gitignore | ||
| admin.html | ||
| AUDIT_REPORT.md | ||
| blog.html | ||
| download_all_docs.sh | ||
| download_v2.sh | ||
| index.html | ||
| post.html | ||
| README.md | ||
| redownload_missing.sh | ||
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.