jae
ae1c7e0b71
- 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
78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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.
|