Go to file
Justin 97de4bca88 fix: add favicon links and fonts.gstatic.com preconnect to both pages
Adds explicit favicon link tags for all sizes and the missing
fonts.gstatic.com crossorigin preconnect required by Google Fonts
for optimal font load performance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-20 20:09:36 -05:00
css feat: improve responsive design with tablet and small-screen breakpoints 2026-04-13 17:09:46 -05:00
Justin_Frasier_Resume.pdf docs: update Justin Frasier resume PDF 2026-04-14 09:46:21 -05:00
README.md docs: update README to reflect expansion to a two-page site including a ham radio dashboard 2026-04-14 09:11:18 -05:00
favicon-32x32.png feat: implement responsive site styling and add web design tag to index 2026-04-13 15:59:39 -05:00
favicon-64x64.png feat: implement responsive site styling and add web design tag to index 2026-04-13 15:59:39 -05:00
favicon-256x256.png feat: implement responsive site styling and add web design tag to index 2026-04-13 15:59:39 -05:00
favicon.ico feat: implement responsive site styling and add web design tag to index 2026-04-13 15:59:39 -05:00
index.html fix: add favicon links and fonts.gstatic.com preconnect to both pages 2026-04-20 20:09:36 -05:00
k5bss.html fix: add favicon links and fonts.gstatic.com preconnect to both pages 2026-04-20 20:09:36 -05:00

README.md

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.

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.