9dd8fae16e
Two conflicting <meta> CSP tags in index.html (plus a separate _headers policy) meant the browser enforced their intersection, which blocked the Cloudflare Insights beacon script and its inline bootstrap. k5bss.html had the same gap in its own CSP. Consolidated to one consistent policy per surface that allows static.cloudflareinsights.com / cloudflareinsights.com, and moved index.html's inline script and onerror handler into js/main.js so script-src no longer needs 'unsafe-inline' there. Also added the missing fonts/ibm-plex-mono-400.woff2 that style.css has referenced since it was wired up, which was 404ing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> |
||
|---|---|---|
| css | ||
| fonts | ||
| js | ||
| photo | ||
| .ignore | ||
| Justin_Frasier_Resume.pdf | ||
| README.md | ||
| _headers | ||
| favicon-32x32.png | ||
| favicon-64x64.png | ||
| favicon-256x256.png | ||
| favicon.ico | ||
| favicon.svg | ||
| index.html | ||
| k5bss.html | ||
| robots.txt | ||
| security.txt | ||
| sitemap.xml | ||
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.
- 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.