k5bss.com

Personal portfolio and ham radio station site for Justin Frasier — IT Support Analyst and amateur radio operator (K5BSS, General Class).

Live at: k5bss.com

---

Overview

Two static pages with a dark terminal aesthetic. No frameworks or build tools — just HTML, CSS, and vanilla JavaScript.

• index.html — Resume/portfolio page
• k5bss.html — Ham radio station dashboard and logbook

Structure

k5bss.com/
├── index.html                  # Resume/portfolio page
├── k5bss.html                  # Ham radio station dashboard
├── Justin_Frasier_Resume.pdf   # Downloadable resume
├── css/
│   └── style.css               # Styles for index.html
├── favicon.ico
├── favicon-32x32.png
├── favicon-64x64.png
└── favicon-256x256.png

Pages

Resume / Portfolio (index.html)

• About — summary, tags, and certifications at a glance
• Experience — work history (Margaritaville, Boomtown, xententLABS)
• Technical Skills — languages, OS, hardware, tools, networking, IT support, security
• Education — BPCC A.A.S. Cyber Technology, Northwood High School
• Certifications — CompTIA A+, PCPro, Udemy courses, amateur radio, locomotive
• Contact — email, phone, address, GitHub, LinkedIn, self-hosted Git

Fonts: IBM Plex Mono and IBM Plex Sans via Google Fonts. Sticky sidebar with scroll-spy nav via IntersectionObserver.

Ham Radio Station Dashboard (k5bss.html)

Three-tab single-page app for station stats and the contact logbook:

• Dashboard — QSO count, DXCC entities, states worked; bar charts for modes and bands; top countries list; monthly QSO activity canvas chart
• Logbook — searchable, filterable, paginated contact log (callsign, name, country, QTH, LoTW status)
• About — station info and operating preferences

Fonts: Share Tech Mono, Orbitron, and Barlow via Google Fonts. Styles and JavaScript are self-contained within the file.

Responsive Design

index.html adapts across three breakpoints defined in css/style.css:

Breakpoint	Behavior
≤1024px (tablet)	Sidebar narrows from 280px to 230px; main content padding reduced
≤768px (mobile)	Sidebar unsticks and stacks above content; nav links reflow into a horizontal wrapping row; contact grid collapses to one column
≤480px (small phone)	Tighter padding and font sizes; skills grid columns shrink to minmax(140px, 1fr)

All other components — tags, socials, and the skills grid — use flex-wrap or auto-fill and reflow fluidly without breakpoints.

Deployment

Static files — drop the repo contents onto any web server or host (Nginx, Apache, Caddy, GitHub Pages, etc.). No build step required.