adding vsphere to vmare vsphere

- Drop the embedded 20-contact RAW_DATA sample; the logbook now comes
  only from data/k5bss-log.json
- Show a banner and table message when the log fails to load, and
  display "—" for the header stats
- Skip building the dashboard when there is no data (it crashed on an
  empty log) and guard the activity chart redraw on resize
- Compute the QSO count from the log instead of hardcoding it

Co-Authored-By: Claude Opus 5.5 <[email protected]>

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "static-site",
+      "runtimeExecutable": "python",
+      "runtimeArgs": ["-m", "http.server", "8123"],
+      "port": 8123
+    }
+  ]
+}

.ignore

@@ -0,0 +1,2 @@
+./vs
+./.claude

README.md

@@ -1,6 +1,6 @@
 # k5bss.com
 
-Personal portfolio and resume site for Justin Frasier — IT Support Analyst and amateur radio operator (K5BSS, General Class).
+Personal portfolio and ham radio station site for Justin Frasier — IT Support Analyst and amateur radio operator (K5BSS, General Class).
 
 Live at: [k5bss.com](https://k5bss.com)
 
@@ -8,22 +8,29 @@ Live at: [k5bss.com](https://k5bss.com)
 
 ## Overview
 
-A static, single-page resume site with a dark terminal aesthetic. No frameworks or build tools — just HTML and CSS.
+Two static pages with a dark terminal aesthetic. No frameworks or build tools — just HTML, CSS, and vanilla JavaScript.
+
+- **[index.html](index.html)** — Resume/portfolio page
+- **[k5bss.html](k5bss.html)** — Ham radio station dashboard and logbook
 
 ## Structure
 
 ```
 k5bss.com/
-├── index.html          # Main page (all content)
+├── index.html                  # Resume/portfolio page
+├── k5bss.html                  # Ham radio station dashboard
+├── Justin_Frasier_Resume.pdf   # Downloadable resume
 ├── css/
-│   └── style.css       # All styles
+│   └── style.css               # Styles for index.html
 ├── favicon.ico
 ├── favicon-32x32.png
 ├── favicon-64x64.png
 └── favicon-256x256.png
 ```
 
-## Sections
+## Pages
+
+### Resume / Portfolio (`index.html`)
 
 - **About** — summary, tags, and certifications at a glance
 - **Experience** — work history (Margaritaville, Boomtown, xententLABS)
@@ -32,12 +39,29 @@ k5bss.com/
 - **Certifications** — CompTIA A+, PCPro, Udemy courses, amateur radio, locomotive
 - **Contact** — email, phone, address, GitHub, LinkedIn, self-hosted Git
 
-## Tech
+Fonts: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans) via Google Fonts. Sticky sidebar with scroll-spy nav via `IntersectionObserver`.
 
-- Plain HTML5 / CSS3 — no JavaScript frameworks or build step
+### Ham Radio Station Dashboard (`k5bss.html`)
-- Fonts: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) and [IBM Plex Sans](https://fonts.google.com/specimen/IBM+Plex+Sans) via Google Fonts
+
-- Sticky sidebar with scroll-spy nav via `IntersectionObserver`
+Three-tab single-page app for station stats and the contact logbook:
-- Responsive at 768px breakpoint (sidebar stacks above content on mobile)
+
+- **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](https://fonts.google.com/specimen/Share+Tech+Mono), [Orbitron](https://fonts.google.com/specimen/Orbitron), and [Barlow](https://fonts.google.com/specimen/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
 

_headers

@@ -0,0 +1,9 @@
+/*
+  Content-Security-Policy: default-src 'self'; script-src 'self' https://static.cloudflareinsights.com; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self' https://cloudflareinsights.com; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  Referrer-Policy: strict-origin-when-cross-origin
+  Permissions-Policy: accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Resource-Policy: same-origin
+  X-Permitted-Cross-Domain-Policies: none

css/k5bss.css

@@ -0,0 +1,576 @@
+ :root {
+    --bg: #0a0c10;
+    --surface: #111418;
+    --surface2: #181c22;
+    --border: #1e2530;
+    --green: #00ff88;
+    --green2: #00cc6a;
+    --amber: #ffaa00;
+    --red: #ff4455;
+    --blue: #4499ff;
+    --cyan: #00ddff;
+    --text: #c8d8e8;
+    --muted: #5a7080;
+    --font-mono: 'Share Tech Mono', monospace;
+    --font-display: 'Orbitron', sans-serif;
+    --font-body: 'Barlow', sans-serif;
+  }
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-body);
+    font-weight: 300;
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+
+  /* Scanline overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0px,
+      transparent 2px,
+      rgba(0,0,0,0.07) 2px,
+      rgba(0,0,0,0.07) 4px
+    );
+    pointer-events: none;
+    z-index: 9999;
+  }
+
+  /* ─── HEADER ─── */
+  header {
+    position: relative;
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 0 2rem;
+    overflow: hidden;
+  }
+
+  header::after {
+    content: '';
+    position: absolute;
+    bottom: 0; left: 0; right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--green), var(--cyan), transparent);
+    animation: scanH 4s linear infinite;
+  }
+
+  @keyframes scanH {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+
+  .header-inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 0;
+    gap: 2rem;
+    flex-wrap: wrap;
+  }
+
+  .callsign-block {
+    display: flex;
+    align-items: baseline;
+    gap: 1rem;
+  }
+
+  .callsign {
+    font-family: var(--font-display);
+    font-size: clamp(2.5rem, 5vw, 4rem);
+    font-weight: 900;
+    color: var(--green);
+    text-shadow: 0 0 30px rgba(0,255,136,0.5), 0 0 60px rgba(0,255,136,0.2);
+    letter-spacing: 0.05em;
+    line-height: 1;
+  }
+
+  .op-name {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    color: var(--muted);
+    letter-spacing: 0.15em;
+  }
+
+  .header-status {
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+  }
+
+  .status-item {
+    text-align: center;
+  }
+
+  .status-val {
+    font-family: var(--font-display);
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--amber);
+    text-shadow: 0 0 20px rgba(255,170,0,0.4);
+    display: block;
+  }
+
+  .status-lbl {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    color: var(--muted);
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+  }
+
+  .online-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--green);
+    padding: 0.4rem 1rem;
+    border: 1px solid var(--green);
+    border-radius: 2px;
+    background: rgba(0,255,136,0.05);
+    letter-spacing: 0.1em;
+  }
+
+  .pulse-dot {
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--green);
+    box-shadow: 0 0 8px var(--green);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.4; transform: scale(0.7); }
+  }
+
+  /* ─── NAV ─── */
+  nav {
+    background: var(--surface2);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .nav-inner {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    gap: 0;
+    padding: 0 2rem;
+  }
+
+  .nav-btn {
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--muted);
+    padding: 0.9rem 1.5rem;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+  }
+
+  .nav-btn:hover { color: var(--text); }
+  .nav-btn.active { color: var(--green); border-bottom-color: var(--green); }
+
+  /* ─── MAIN ─── */
+  main {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .log-error {
+    background: var(--surface);
+    border: 1px solid var(--red);
+    border-radius: 4px;
+    color: var(--red);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    letter-spacing: 0.1em;
+    padding: 1rem 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+  .log-error[hidden] { display: none; }
+
+  .section { display: none; }
+  .section.active { display: block; }
+
+  /* ─── DASHBOARD ─── */
+  .dash-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 1.5rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 2px;
+  }
+
+  .card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
+  .card.amber::before { background: linear-gradient(90deg, var(--amber), transparent); }
+  .card.blue::before { background: linear-gradient(90deg, var(--blue), transparent); }
+  .card.cyan::before { background: linear-gradient(90deg, var(--cyan), transparent); }
+  .card.red::before { background: linear-gradient(90deg, var(--red), transparent); }
+
+  .card-title {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    letter-spacing: 0.2em;
+    color: var(--muted);
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+  }
+
+  .bar-chart { display: flex; flex-direction: column; gap: 0.5rem; }
+
+  .bar-row {
+    display: grid;
+    grid-template-columns: 80px 1fr 40px;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .bar-label {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text);
+    text-align: right;
+  }
+
+  .bar-track {
+    height: 16px;
+    background: var(--surface2);
+    border-radius: 2px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 1s cubic-bezier(0.4,0,0.2,1);
+  }
+
+  .bar-count {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--muted);
+  }
+
+  .country-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+    max-height: 220px;
+    overflow-y: auto;
+  }
+
+  .country-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.3rem 0;
+    border-bottom: 1px solid var(--border);
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+  }
+
+  .country-name { color: var(--text); }
+  .country-count {
+    color: var(--amber);
+    background: rgba(255,170,0,0.1);
+    padding: 0.1rem 0.4rem;
+    border-radius: 2px;
+    font-size: 0.7rem;
+  }
+
+  /* ─── ACTIVITY CHART ─── */
+  .activity-card { grid-column: 1 / -1; }
+
+  #activityCanvas {
+    width: 100%;
+    height: 120px;
+    display: block;
+  }
+
+  /* ─── LOGBOOK TABLE ─── */
+  .log-controls {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .search-input {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    color: var(--text);
+    padding: 0.5rem 1rem;
+    flex: 1;
+    min-width: 200px;
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .search-input:focus { border-color: var(--green); }
+  .search-input::placeholder { color: var(--muted); }
+
+  .filter-select {
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    color: var(--text);
+    padding: 0.5rem 0.75rem;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .filter-select option { background: var(--surface2); }
+
+  .log-meta {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--muted);
+    margin-left: auto;
+    white-space: nowrap;
+  }
+
+  .table-wrap {
+    overflow-x: auto;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+  }
+
+  thead th {
+    background: var(--surface2);
+    padding: 0.75rem 1rem;
+    text-align: left;
+    color: var(--muted);
+    letter-spacing: 0.15em;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--border);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: color 0.2s;
+  }
+
+  thead th:hover { color: var(--green); }
+  thead th.sort-asc::after { content: ' ▲'; font-size: 0.6rem; }
+  thead th.sort-desc::after { content: ' ▼'; font-size: 0.6rem; }
+
+  tbody tr {
+    border-bottom: 1px solid rgba(30,37,48,0.5);
+    transition: background 0.15s;
+  }
+
+  tbody tr:hover { background: rgba(0,255,136,0.03); }
+
+  tbody td {
+    padding: 0.6rem 1rem;
+    color: var(--text);
+    white-space: nowrap;
+  }
+
+  .call-cell {
+    color: var(--cyan);
+    font-weight: 700;
+    font-size: 0.9rem;
+    letter-spacing: 0.05em;
+  }
+
+  .band-badge {
+    display: inline-block;
+    padding: 0.15rem 0.5rem;
+    border-radius: 2px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+  }
+
+  .band-20M, .band-20m { background: rgba(68,153,255,0.15); color: var(--blue); }
+  .band-40M, .band-40m { background: rgba(0,255,136,0.12); color: var(--green); }
+  .band-80M, .band-80m { background: rgba(255,68,85,0.12); color: var(--red); }
+  .band-10M, .band-10m { background: rgba(0,221,255,0.12); color: var(--cyan); }
+  .band-default { background: rgba(90,112,128,0.2); color: var(--muted); }
+
+  .mode-cell { color: var(--amber); font-size: 0.75rem; letter-spacing: 0.1em; }
+
+  .lotw-y { color: var(--green); }
+  .lotw-n { color: var(--muted); }
+
+  .rst-cell { color: var(--text); font-size: 0.75rem; }
+
+  .dist-cell { color: var(--muted); font-size: 0.75rem; }
+
+  /* Pagination */
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    flex-wrap: wrap;
+  }
+
+  .page-btn {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 0.4rem 0.8rem;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .page-btn:hover { border-color: var(--green); color: var(--green); }
+  .page-btn.active { background: rgba(0,255,136,0.1); border-color: var(--green); color: var(--green); }
+  .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+  .page-info { color: var(--muted); padding: 0.4rem 0.5rem; }
+
+  /* ─── ABOUT ─── */
+  .about-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+
+  @media (max-width: 768px) {
+    .about-grid { grid-template-columns: 1fr; }
+  }
+
+  .info-block { margin-bottom: 1.5rem; }
+
+  .info-label {
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.2em;
+    color: var(--muted);
+    text-transform: uppercase;
+    margin-bottom: 0.3rem;
+  }
+
+  .info-value {
+    font-family: var(--font-body);
+    font-size: 1.1rem;
+    color: var(--text);
+    font-weight: 600;
+  }
+
+  .info-value a { color: var(--cyan); text-decoration: none; }
+  .info-value a:hover { text-decoration: underline; }
+
+  .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .tag {
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    letter-spacing: 0.1em;
+    padding: 0.3rem 0.7rem;
+    border: 1px solid var(--border);
+    border-radius: 2px;
+    color: var(--text);
+    background: var(--surface2);
+  }
+
+  /* ─── SCROLLBAR ─── */
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: var(--surface2); }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+
+  /* ─── FOOTER ─── */
+  footer {
+    text-align: center;
+    padding: 2rem;
+    font-family: var(--font-mono);
+    font-size: 0.7rem;
+    color: var(--muted);
+    border-top: 1px solid var(--border);
+    margin-top: 3rem;
+    letter-spacing: 0.15em;
+  }
+
+  footer span { color: var(--green); }
+
+  /* ─── LOADING ─── */
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    gap: 0.5rem;
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    color: var(--muted);
+  }
+
+  .spinner {
+    width: 16px; height: 16px;
+    border: 2px solid var(--border);
+    border-top-color: var(--green);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin { to { transform: rotate(360deg); } }
+
+  @media (max-width: 600px) {
+    .header-inner { padding: 1rem 0; }
+    .callsign { font-size: 2rem; }
+    .status-val { font-size: 1.2rem; }
+    main { padding: 1rem; }
+    .log-controls { gap: 0.5rem; }
+    .nav-btn { padding: 0.75rem 1rem; font-size: 0.7rem; }
+  }
+

css/style.css

@@ -1,5 +1,13 @@
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
+}
+
 :root {
   --bg:        #0a0c10;
   --bg2:       #0f1218;
@@ -455,20 +463,56 @@ footer {
   margin-left: 3px;
 }
 
+/* ── Tablet ── */
+@media (max-width: 1024px) {
+  .layout { grid-template-columns: 230px 1fr; }
+  main { padding: 2.5rem 2rem; }
+}
+
 /* ── Mobile ── */
 @media (max-width: 768px) {
   .layout { grid-template-columns: 1fr; }
+
   aside {
     position: relative;
     height: auto;
     border-right: none;
     border-bottom: 1px solid var(--border);
+    padding: 1.5rem 1.2rem;
   }
+
+  /* Flatten the nav into a horizontal wrapping row to save vertical space */
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    flex: none;
+    margin: 0.8rem 0;
+  }
+
+  nav a {
+    display: inline-flex;
+    font-size: 0.72rem;
+    padding: 0.3rem 0.6rem;
+    margin-bottom: 0;
+  }
+
+  .socials { padding-top: 1rem; }
+
   main { padding: 2rem 1.5rem; }
   h1 { font-size: 1.7rem; }
   .contact-grid { grid-template-columns: 1fr; }
 }
 
+/* ── Small mobile (≤480 px) ── */
+@media (max-width: 480px) {
+  main { padding: 1.5rem 1rem; }
+  h1 { font-size: 1.4rem; }
+  section { margin-bottom: 2.5rem; }
+  .hero-sub { font-size: 0.92rem; }
+  .skills-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+}
+
 /* ── Fade-in animation ── */
 @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
 section { animation: fadeUp 0.5s ease both; }

favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="4" fill="#0f1218"/>
+  <text x="3" y="11" font-family="'IBM Plex Mono','Courier New',monospace" font-size="6" fill="#4a5568">~$</text>
+  <text x="2" y="27" font-family="'IBM Plex Mono','Courier New',monospace" font-size="19" font-weight="600" fill="#22c55e">jf</text>
+</svg>

fonts/css2@family=IBM+Plex+Mono%3Awght@300;400;500;600&family=IBM+Plex+Sans%3Awght@300;400;500&display=swap

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3oQI8lc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n5ig.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJ8lc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAO8lc.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 300;
+  font-stretch: normal;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSDtFlzAA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSD6llzAA.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: normal;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/ibmplexsans/v23/zYXGKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1swZSAXcomDVmadSD2FlzAA.ttf) format('truetype');
+}

index.html

@@ -4,11 +4,17 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Justin Frasier | IT Support Analyst</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="referrer" content="strict-origin-when-cross-origin" />
+  <title>Justin Frasier | Infrastructure Administrator</title>
+  <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%230f1218'/%3E%3Ctext x='3' y='11' font-family='IBM Plex Mono,Courier New,monospace' font-size='6' fill='%234a5568'%3E~$%3C/text%3E%3Ctext x='2' y='27' font-family='IBM Plex Mono,Courier New,monospace' font-size='19' font-weight='600' fill='%2322c55e'%3Ejf%3C/text%3E%3C/svg%3E" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png" />
+  <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500&display=swap"
-    rel="stylesheet">
   <link rel="stylesheet" href="css/style.css">
 </head>
 
@@ -18,10 +24,9 @@
 
     <!-- ── Sidebar ── -->
     <aside>
-      <img class="profile-photo" src="https://ki5bhv.com/photo/justin1.jpg" alt="Justin Frasier"
+      <img class="profile-photo" src="./photo/justin1.jpg" alt="Justin Frasier">
-        onerror="this.style.display='none'">
       <div class="profile-name">Justin Frasier</div>
-      <div class="profile-title">IT Support Analyst</div>
+      <div class="profile-title">Infrastructure Administrator</div>
       <div class="profile-loc">📍 Bossier City, LA</div>
 
       <hr class="divider">
@@ -37,10 +42,13 @@
 
       <div class="socials">
         <a href="https://github.com/cerealkiller1918" target="_blank" rel="noopener noreferrer">github</a>
-        <a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9" target="_blank" rel="noopener noreferrer">linkedin</a>
+        <a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9" target="_blank"
+          rel="noopener noreferrer">linkedin</a>
         <a href="https://git.ki5bhv.com/justin" target="_blank" rel="noopener noreferrer">gitea</a>
         <a href="https://twitter.com/Cerealkiller191" target="_blank" rel="noopener noreferrer">twitter</a>
         <a href="https://www.facebook.com/cerealkiller1918" target="_blank" rel="noopener noreferrer">facebook</a>
+        <a href="Justin_Frasier_Resume.pdf" target="_blank" rel="noopener noreferrer">resume</a>
+        <a href="https://ki5bhv.com" target="_blank" rel="noopener noreferrer">ki5bhv.com</a>
       </div>
     </aside>
 
@@ -52,7 +60,7 @@
         <div class="prompt"><span>~/k5bss</span> $ whoami</div>
         <h1>Justin<br>Frasier<span class="cursor"></span></h1>
         <p class="hero-sub">
-          <strong>IT Support Analyst</strong> with a background in computer systems, infrastructure, and security.
+          <strong>Infrastructure Administrator</strong> with a background in computer systems, infrastructure, and security.
           CompTIA A+ certified with hands-on experience in <strong>Azure Active Directory</strong>,
           Windows Server, networking, and self-hosted services.
           Amateur radio operator <strong>(K5BSS — General Class)</strong>.
@@ -63,6 +71,7 @@
           <span class="tag blue">Azure AD</span>
           <span class="tag blue">Docker</span>
           <span class="tag blue">Proxmox VE</span>
+          <span class="tag blue">VMware VSphere</span>
           <span class="tag blue">Web Design</span>
           <span class="tag">Self-hosted Infrastructure</span>
           <span class="tag">FCC K5BSS</span>
@@ -74,15 +83,35 @@
         <h2><span class="hash">#</span>experience</h2>
 
         <div class="exp-item">
+          <div class="exp-role">Infrastructure Administrator</div>
+          <div class="exp-meta">Aug 2026 — Present</div>
           <div class="exp-role">IT Support Analyst</div>
+          <div class="exp-meta">Mar 2023 — Aug 2026</div>
           <div class="exp-company">Margaritaville Resort &amp; Casino</div>
-          <div class="exp-meta">Mar 2023 — Present &nbsp;·&nbsp; Bossier City, LA</div>
+          <div class="exp-meta">Bossier City, LA</div>
           <ul class="exp-list">
-            <li>Install and image Windows OS; onboard machines to Active Directory</li>
+            <li>Provide comprehensive Tier 1 and Tier 2 technical support across a large-scale resort and casino environment, diagnosing and resolving hardware, software, and network issues to minimize downtime and maintain seamless business operations.</li>
-            <li>Troubleshoot hardware, software, and networking issues in a high-availability environment</li>
+            <li>Deploy, configure, and maintain Windows 10 and Windows 11 workstations, managing domain enrollment through Active Directory to uphold a secure, well-organized network infrastructure.</li>
-            <li>Punch down networking cable to patch panels and keystones</li>
+            <li>Administer Windows Server environments and Azure Active Directory, overseeing user provisioning, group policy management, and access controls to enforce security and compliance standards</li>
-            <li>Author troubleshooting documentation and lead projects</li>
+            <li>Diagnose and remediate wired and wireless connectivity issues — including network drops, Wi-Fi interference, and misconfigured settings — restoring reliable access for end users with minimal disruption.</li>
-            <li>Administer and support Windows Server environments</li>
+            <li>Install, terminate, and test network cabling across patch panels and keystones, ensuring robust and reliable infrastructure connectivity throughout the facility.</li>
+            <li>Troubleshoot, repair, and replace hardware components — including RAM, HDDs, SSDs, power supplies, motherboards, and peripherals — returning systems to full operational status efficiently.</li>
+            <li>Administer and support Office 365 applications — including Outlook, Teams, SharePoint, and OneDrive — enabling consistent productivity and collaboration across the organization.</li>
+            <li>Provide end-to-end mobile device support for smartphones and tablets, handling configuration, corporate email integration, and secure connectivity to organizational systems.</li>
+            <li>Manage the full help desk ticket lifecycle — logging, prioritizing, tracking, and resolving requests — ensuring timely support delivery and adherence to service-level expectations.</li>
+            <li>Utilize PDQ Inventory to maintain up-to-date hardware and software asset tracking across all endpoints, enabling informed decision-making for procurement, audits, and lifecycle management.</li>
+            <li>Leverage PDQ Deploy to automate software deployments and updates across the organization, reducing manual effort and ensuring consistent, timely rollouts enterprise wide.</li>
+            <li>Converting PDQ Deploy & Invertory to PDQ Connent. Using PDQ Connent to manage and push packages and update to workstations and laptopps.</li>
+            <li>Administer VMware vSphere environments, managing virtual machine provisioning, configuration, and maintenance to support reliable and scalable infrastructure operations.</li>
+            <li>Manage and support the Cisco phone system, handling configuration, provisioning, and troubleshooting of IP phones to ensure reliable communication across the organization.</li>
+            <li>Utilize TeamViewer to provide remote technical support, enabling efficient diagnosis and resolution of end-user issues without requiring an on-site visit.</li>
+            <li>Monitor network infrastructure and system health using PRTG Network Monitor, proactively identifying and addressing performance issues and outages to maintain high availability.</li>
+            <li>Manage SSL certificates across organizational systems, overseeing procurement, installation, renewal, and troubleshooting to ensure secure and uninterrupted encrypted communications.</li>
+            <li>Deliver clear, patient, and customer-focused technical support to users of all skill levels, translating complex issues into understandable solutions to maximize satisfaction and reduce repeat incidents.</li>
+            <li>Maintain accurate IT asset inventory, tracking hardware assignments, lifecycle status, and equipment locations to support informed procurement and audit readiness.</li>
+            <li>Plan and execute equipment moves and workstation relocations with precision, coordinating logistics to ensure business continuity throughout transitions.</li>
+            <li>Produce comprehensive technical documentation and troubleshooting guides, building an accessible knowledge base that improves team efficiency and accelerates issue resolution.</li>
+            <li>Lead cross-functional IT initiatives, collaborating with department stakeholders to scope, plan, and deliver technology solutions on time and within budget.</li>
           </ul>
         </div>
 
@@ -91,10 +120,14 @@
           <div class="exp-company">Boomtown Casino &amp; Hotel</div>
           <div class="exp-meta">Nov 2017 — Mar 2023 &nbsp;·&nbsp; Bossier City, LA</div>
           <ul class="exp-list">
-            <li>Monitored CCTV systems and alarm infrastructure across the facility</li>
+            <li>Supervised facility-wide security operations, ensuring the safety of hundreds of guests and employees
-            <li>Led security operations and managed incident response</li>
+              daily while serving as the primary point of contact for guests and staff.</li>
-            <li>Patrolled facility and enforced physical security protocols</li>
+            <li>Conducted foot and vehicle patrols; monitored a multi-camera CCTV network and alarm systems to
-            <li>De-escalation, crisis management, and customer service</li>
+              proactively identify risks and coordinate rapid incident response.</li>
+            <li>Applied crisis management and de-escalation techniques to resolve high-pressure situations with minimal
+              operational disruption.</li>
+            <li>Trained and mentored security personnel on protocols, emergency response, and customer interaction
+              standards.</li>
           </ul>
         </div>
 
@@ -103,9 +136,12 @@
           <div class="exp-company">xententLABS</div>
           <div class="exp-meta">Jan 2016 — May 2016 &nbsp;·&nbsp; Bossier City, LA</div>
           <ul class="exp-list">
-            <li>Agile development practices and sprint workflows</li>
+            <li>Participated in full-cycle Agile development — sprint planning, stand-ups, and iterative releases —
-            <li>Source code management and cross-platform software development</li>
+              while managing source code repositories using version control best practices.</li>
-            <li>Database design, management, and software quality assurance</li>
+            <li>Engineered cross-platform software solutions and collaborated on relational database design, applying
+              normalization principles and optimized query structures.</li>
+            <li>Developed test cases and executed functional tests, tracking defects through resolution to ensure
+              stable, production-ready releases.</li>
           </ul>
         </div>
       </section>
@@ -158,8 +194,23 @@
           <div class="skill-cell"><span class="skill-icon">▸</span>System Imaging &amp; Deployment</div>
           <div class="skill-cell"><span class="skill-icon">▸</span>Docker</div>
           <div class="skill-cell"><span class="skill-icon">▸</span>Proxmox VE</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>VMware vSphere</div>
           <div class="skill-cell"><span class="skill-icon">▸</span>Git</div>
           <div class="skill-cell"><span class="skill-icon">▸</span>Help Desk Ticketing Systems</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>PDQ Deploy</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>PDQ Inventory</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>PDQ Connent</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Cisco Systems</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>TeamViewer</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>PRTG Network Monitor</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Web Hosting</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Ansible</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Rubrik Backup</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Proxmox Backup Server</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Nginx Proxy Manager</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Nginx Web Server</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Windows server DNS</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Windows server DHCP</div>
         </div>
 
         <div class="skills-subheading">Development IDEs</div>
@@ -205,8 +256,14 @@
           <div class="skill-cell"><span class="skill-icon">▸</span>Crisis Management</div>
         </div>
 
+      <!--  <div class="skills-subheading">Home Lab</div>
+        <div class="skills-grid">
+          <div class="skill-cell"><span class="skill-icon">▸</span>Docker</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span></div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Corporate Security</div>
+          <div class="skill-cell"><span class="skill-icon">▸</span>Corporate Security</div>
       </section>
-
+    -->
       <!-- Education -->
       <section id="education">
         <h2><span class="hash">#</span>education</h2>
@@ -291,47 +348,27 @@
           </div>
           <div class="contact-item">
             <div class="contact-label">GitHub</div>
-            <div class="contact-val"><a href="https://github.com/cerealkiller1918" target="_blank" rel="noopener noreferrer">cerealkiller1918</a>
+            <div class="contact-val"><a href="https://github.com/cerealkiller1918" target="_blank"
+                rel="noopener noreferrer">cerealkiller1918</a>
             </div>
           </div>
           <div class="contact-item">
             <div class="contact-label">LinkedIn</div>
-            <div class="contact-val"><a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9"
+            <div class="contact-val"><a href="https://www.linkedin.com/in/justin-frasier-bb29b8a9" target="_blank"
-                target="_blank" rel="noopener noreferrer">justin-frasier</a></div>
+                rel="noopener noreferrer">justin-frasier</a></div>
           </div>
           <div class="contact-item">
             <div class="contact-label">Self-hosted Git</div>
-            <div class="contact-val"><a href="https://git.ki5bhv.com/justin" target="_blank" rel="noopener noreferrer">git.ki5bhv.com</a></div>
+            <div class="contact-val"><a href="https://git.ki5bhv.com/justin" target="_blank"
+                rel="noopener noreferrer">git.ki5bhv.com</a></div>
           </div>
         </div>
       </section>
-
       <footer>
-        <span style="color:var(--accent)">$</span> site built by Justin Frasier &nbsp;·&nbsp; k5bss.com &nbsp;·&nbsp;
+        <span style="color:var(--accent)">$</span> site built by Justin Frasier &nbsp;·&nbsp; k5bss.com &nbsp;·&nbsp; 2026
-        2026
       </footer>
-
     </main>
   </div>
-
+  <script src="js/main.js" defer></script>
-  <script>
-    // Highlight active nav link on scroll
-    const sections = document.querySelectorAll('section[id]');
-    const links = document.querySelectorAll('nav a');
-
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(e => {
-        if (e.isIntersecting) {
-          links.forEach(l => l.classList.remove('active'));
-          const active = document.querySelector(`nav a[href="#${e.target.id}"]`);
-          if (active) active.classList.add('active');
-        }
-      });
-    }, { threshold: 0.3 });
-
-    sections.forEach(s => observer.observe(s));
-  </script>
-
 </body>
-
 </html>

js/k5bss.js

@@ -0,0 +1,318 @@
+// ─── DATA ───────────────────────────────────────────────────
+let ALL_DATA = [];
+let filteredData = [];
+let sortKey = 'date';
+let sortDir = -1; // -1 = desc
+let currentPage = 1;
+const PAGE_SIZE = 50;
+let logUnavailable = false;
+
+// ─── FULL LOG ────────────────────────────────────────────────
+const FULL_LOG_URL = 'data/k5bss-log.json';
+
+async function loadFullLog() {
+  try {
+    const res = await fetch(FULL_LOG_URL);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    return await res.json();
+  } catch (err) {
+    console.warn('Could not load full log:', err);
+    return null;
+  }
+}
+
+async function init() {
+  const log = await loadFullLog();
+  logUnavailable = !log;
+  ALL_DATA = log || [];
+  filteredData = [...ALL_DATA];
+
+  if (logUnavailable) {
+    document.getElementById('log-error').hidden = false;
+    renderTable();
+    return;
+  }
+
+  // Update stats
+  const countries = new Set(ALL_DATA.map(r => r.country).filter(Boolean));
+  const states = new Set(ALL_DATA.filter(r => r.country === 'United States').map(r => r.state).filter(Boolean));
+  document.getElementById('stat-qso').textContent = ALL_DATA.length.toLocaleString();
+  document.getElementById('stat-dxcc').textContent = countries.size;
+  document.getElementById('stat-states').textContent = states.size;
+
+  buildDashboard();
+  populateFilters();
+  renderTable();
+}
+
+// ─── DASHBOARD ───────────────────────────────────────────────
+function buildDashboard() {
+  // Modes
+  const modes = countBy(ALL_DATA, 'mode');
+  const topModes = Object.entries(modes).sort((a,b)=>b[1]-a[1]).slice(0,7);
+  const maxMode = topModes[0][1];
+  const modesEl = document.getElementById('modes-chart');
+  const modeColors = { FT8:'#ffaa00', FT4:'#ffcc44', DIG:'#ff8800', USB:'#4499ff', LSB:'#66aaff', SSB:'#88bbff', RTTY:'#ff4455' };
+  modesEl.innerHTML = topModes.map(([m, c]) => `
+    <div class="bar-row">
+      <div class="bar-label">${m}</div>
+      <div class="bar-track"><div class="bar-fill" style="width:0%;background:${modeColors[m]||'#888'}" data-target="${(c/maxMode*100).toFixed(1)}"></div></div>
+      <div class="bar-count">${c}</div>
+    </div>`).join('');
+
+  // Bands
+  const bands = countBy(ALL_DATA, 'band');
+  const topBands = Object.entries(bands).sort((a,b)=>b[1]-a[1]).slice(0,8);
+  const maxBand = topBands[0][1];
+  const bandEl = document.getElementById('bands-chart');
+  const bandColors = { '20M':'#4499ff','40M':'#00ff88','80M':'#ff4455','10M':'#00ddff','30M':'#88aaff','17M':'#aaddff','15M':'#ffaaff','12M':'#ffdd88' };
+  bandEl.innerHTML = topBands.map(([b, c]) => `
+    <div class="bar-row">
+      <div class="bar-label">${b}</div>
+      <div class="bar-track"><div class="bar-fill" style="width:0%;background:${bandColors[b]||'#888'}" data-target="${(c/maxBand*100).toFixed(1)}"></div></div>
+      <div class="bar-count">${c}</div>
+    </div>`).join('');
+
+  // Countries
+  const countries = countBy(ALL_DATA, 'country');
+  const topCountries = Object.entries(countries).sort((a,b)=>b[1]-a[1]).slice(0,20);
+  const ctEl = document.getElementById('countries-list');
+  ctEl.innerHTML = topCountries.map(([c,n]) => `
+    <div class="country-row">
+      <span class="country-name">${c||'Unknown'}</span>
+      <span class="country-count">${n}</span>
+    </div>`).join('');
+
+  // Animate bars after a tick
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      document.querySelectorAll('.bar-fill').forEach(el => {
+        el.style.width = el.dataset.target + '%';
+      });
+    }, 100);
+  });
+
+  // Activity chart
+  drawActivityChart();
+}
+
+function drawActivityChart() {
+  if (!ALL_DATA.length) return;
+  const canvas = document.getElementById('activityCanvas');
+  const dpr = window.devicePixelRatio || 1;
+  const W = canvas.parentElement.offsetWidth - 48;
+  const H = 120;
+  canvas.width = W * dpr;
+  canvas.height = H * dpr;
+  canvas.style.width = W + 'px';
+  canvas.style.height = H + 'px';
+  const ctx = canvas.getContext('2d');
+  ctx.scale(dpr, dpr);
+
+  // Group by year-month
+  const monthly = {};
+  ALL_DATA.forEach(r => {
+    if (!r.date) return;
+    const key = r.date.slice(0,7);
+    monthly[key] = (monthly[key]||0) + 1;
+  });
+  const keys = Object.keys(monthly).sort();
+  const vals = keys.map(k => monthly[k]);
+  const max = Math.max(...vals);
+
+  const pad = { l: 10, r: 10, t: 15, b: 30 };
+  const chartW = W - pad.l - pad.r;
+  const chartH = H - pad.t - pad.b;
+  const barW = Math.max(2, (chartW / keys.length) - 1);
+
+  ctx.clearRect(0,0,W,H);
+
+  // Grid line
+  ctx.strokeStyle = 'rgba(30,37,48,0.8)';
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(pad.l, pad.t + chartH);
+  ctx.lineTo(W - pad.r, pad.t + chartH);
+  ctx.stroke();
+
+  // Bars
+  keys.forEach((k, i) => {
+    const x = pad.l + i * (chartW / keys.length);
+    const h = (vals[i] / max) * chartH;
+    const y = pad.t + chartH - h;
+    const grad = ctx.createLinearGradient(0, y, 0, y + h);
+    grad.addColorStop(0, 'rgba(0,255,136,0.9)');
+    grad.addColorStop(1, 'rgba(0,255,136,0.15)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(x, y, barW, h);
+  });
+
+  // X labels (every 6 months)
+  ctx.fillStyle = 'rgba(90,112,128,0.9)';
+  ctx.font = `${9 * dpr / dpr}px 'Share Tech Mono', monospace`;
+  ctx.textAlign = 'center';
+  keys.forEach((k, i) => {
+    if (i % 6 === 0) {
+      const x = pad.l + i * (chartW / keys.length) + barW/2;
+      ctx.fillText(k, x, H - 8);
+    }
+  });
+}
+
+// ─── TABLE ───────────────────────────────────────────────────
+function populateFilters() {
+  const bands = [...new Set(ALL_DATA.map(r=>r.band).filter(Boolean))].sort();
+  const modes = [...new Set(ALL_DATA.map(r=>r.mode).filter(Boolean))].sort();
+  const bandSel = document.getElementById('filter-band');
+  const modeSel = document.getElementById('filter-mode');
+  bands.forEach(b => { const o = document.createElement('option'); o.value=b; o.text=b; bandSel.appendChild(o); });
+  modes.forEach(m => { const o = document.createElement('option'); o.value=m; o.text=m; modeSel.appendChild(o); });
+}
+
+function applyFilters() {
+  const q = document.getElementById('search-input').value.trim().toLowerCase();
+  const band = document.getElementById('filter-band').value;
+  const mode = document.getElementById('filter-mode').value;
+  const lotw = document.getElementById('filter-lotw').value;
+
+  filteredData = ALL_DATA.filter(r => {
+    if (band && r.band !== band) return false;
+    if (mode && r.mode !== mode) return false;
+    if (lotw && r.lotw !== lotw) return false;
+    if (q) {
+      const hay = [r.call, r.name, r.country, r.qth, r.state, r.grid].join(' ').toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    return true;
+  });
+
+  currentPage = 1;
+  renderTable();
+}
+
+function sortTable(key) {
+  if (sortKey === key) sortDir *= -1;
+  else { sortKey = key; sortDir = key === 'date' || key === 'time' ? -1 : 1; }
+
+  filteredData.sort((a,b) => {
+    let av = a[key]||'', bv = b[key]||'';
+    if (key === 'dist') { av = parseInt(av)||0; bv = parseInt(bv)||0; }
+    if (av < bv) return -sortDir;
+    if (av > bv) return sortDir;
+    return 0;
+  });
+
+  // Update header indicators
+  document.querySelectorAll('thead th').forEach(th => {
+    th.classList.remove('sort-asc','sort-desc');
+  });
+  const headers = ['call','name','date','time','band','mode','rst_sent','country','dist','lotw'];
+  const idx = headers.indexOf(key);
+  if (idx >= 0) {
+    const ths = document.querySelectorAll('thead th');
+    ths[idx].classList.add(sortDir === 1 ? 'sort-asc' : 'sort-desc');
+  }
+
+  renderTable();
+}
+
+function renderTable() {
+  const tbody = document.getElementById('log-tbody');
+  const total = filteredData.length;
+  const pages = Math.ceil(total / PAGE_SIZE);
+  const start = (currentPage - 1) * PAGE_SIZE;
+  const slice = filteredData.slice(start, start + PAGE_SIZE);
+
+  document.getElementById('log-meta').textContent =
+    `${total.toLocaleString()} QSOs · Page ${currentPage} of ${Math.max(1,pages)}`;
+
+  if (slice.length === 0) {
+    const msg = logUnavailable ? 'LOG UNAVAILABLE — TRY AGAIN LATER' : 'NO CONTACTS FOUND';
+    tbody.innerHTML = `<tr><td colspan="10" style="text-align:center;padding:2rem;color:var(--muted);font-family:var(--font-mono);font-size:0.8rem;">${msg}</td></tr>`;
+  } else {
+    tbody.innerHTML = slice.map(r => {
+      const timeStr = r.time ? r.time.slice(0,2)+':'+r.time.slice(2,4) : '';
+      const bandClass = `band-${r.band}`;
+      const lotwClass = r.lotw === 'Y' ? 'lotw-y' : 'lotw-n';
+      const lotwSym = r.lotw === 'Y' ? '✓' : '·';
+      const rst = r.rst_sent && r.rst_rcvd ? `${r.rst_sent} / ${r.rst_rcvd}` : r.rst_sent || '';
+      return `<tr>
+        <td class="call-cell">${esc(r.call)}</td>
+        <td>${esc(r.name ? titleCase(r.name) : '')}</td>
+        <td>${esc(r.date)}</td>
+        <td>${timeStr}Z</td>
+        <td><span class="band-badge ${bandClass}">${esc(r.band)}</span></td>
+        <td class="mode-cell">${esc(r.mode)}</td>
+        <td class="rst-cell">${esc(rst)}</td>
+        <td>${esc(r.country||'')}${r.state ? ' <span style="color:var(--muted)">'+esc(r.state)+'</span>' : ''}</td>
+        <td class="dist-cell">${r.dist ? Number(r.dist).toLocaleString() : ''}</td>
+        <td class="${lotwClass}" style="text-align:center">${lotwSym}</td>
+      </tr>`;
+    }).join('');
+  }
+
+  renderPagination(pages);
+}
+
+function renderPagination(pages) {
+  const el = document.getElementById('pagination');
+  if (pages <= 1) { el.innerHTML = ''; return; }
+
+  let html = `<button class="page-btn" onclick="goPage(${currentPage-1})" ${currentPage===1?'disabled':''}>‹ Prev</button>`;
+
+  const range = [];
+  if (pages <= 7) {
+    for (let i=1;i<=pages;i++) range.push(i);
+  } else {
+    range.push(1);
+    if (currentPage > 3) range.push('...');
+    for (let i=Math.max(2,currentPage-1); i<=Math.min(pages-1,currentPage+1); i++) range.push(i);
+    if (currentPage < pages-2) range.push('...');
+    range.push(pages);
+  }
+
+  range.forEach(p => {
+    if (p === '...') html += `<span class="page-info">…</span>`;
+    else html += `<button class="page-btn ${p===currentPage?'active':''}" onclick="goPage(${p})">${p}</button>`;
+  });
+
+  html += `<button class="page-btn" onclick="goPage(${currentPage+1})" ${currentPage===pages?'disabled':''}>Next ›</button>`;
+  el.innerHTML = html;
+}
+
+function goPage(p) {
+  currentPage = p;
+  renderTable();
+  document.querySelector('.table-wrap').scrollIntoView({behavior:'smooth',block:'nearest'});
+}
+
+// ─── HELPERS ─────────────────────────────────────────────────
+function countBy(arr, key) {
+  return arr.reduce((acc, r) => {
+    const v = r[key];
+    if (v) acc[v] = (acc[v]||0)+1;
+    return acc;
+  }, {});
+}
+
+function esc(s) {
+  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function titleCase(s) {
+  return s.toLowerCase().replace(/\b\w/g, c => c.toUpperCase());
+}
+
+function showSection(id, btn) {
+  document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+  document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+  document.getElementById('section-' + id).classList.add('active');
+  btn.classList.add('active');
+}
+
+window.addEventListener('load', init);
+window.addEventListener('resize', () => {
+  if (document.getElementById('section-dashboard').classList.contains('active')) {
+    drawActivityChart();
+  }
+});

js/main.js

@@ -0,0 +1,23 @@
+// Highlight active nav link on scroll
+const sections = document.querySelectorAll('section[id]');
+const links = document.querySelectorAll('nav a');
+
+const observer = new IntersectionObserver(entries => {
+  entries.forEach(e => {
+    if (e.isIntersecting) {
+      links.forEach(l => l.classList.remove('active'));
+      const active = document.querySelector(`nav a[href="#${e.target.id}"]`);
+      if (active) active.classList.add('active');
+    }
+  });
+}, { threshold: 0.3 });
+
+sections.forEach(s => observer.observe(s));
+
+// Hide the profile photo if it fails to load
+const profilePhoto = document.querySelector('.profile-photo');
+if (profilePhoto) {
+  profilePhoto.addEventListener('error', () => {
+    profilePhoto.style.display = 'none';
+  });
+}

k5bss.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="referrer" content="strict-origin-when-cross-origin">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self' https://cloudflareinsights.com; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests">
+<title>K5BSS — Justin Frasier · Ham Radio Station</title>
+<link rel="sitemap" type="application/xml" href="/sitemap.xml">
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='4' fill='%230f1218'/%3E%3Ctext x='3' y='11' font-family='IBM Plex Mono,Courier New,monospace' font-size='6' fill='%234a5568'%3E~$%3C/text%3E%3Ctext x='2' y='27' font-family='IBM Plex Mono,Courier New,monospace' font-size='19' font-weight='600' fill='%2322c55e'%3Ejf%3C/text%3E%3C/svg%3E">
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
+<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=Barlow:wght@300;400;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="css/k5bss.css">
+</head>
+<body>
+
+<header>
+  <div class="header-inner">
+    <div class="callsign-block">
+      <div>
+        <div class="callsign">K5BSS</div>
+        <div class="op-name">JUSTIN A FRASIER · BOSSIER CITY, LA · EM32</div>
+      </div>
+    </div>
+    <div class="header-status">
+      <div class="status-item">
+        <span class="status-val" id="stat-qso">—</span>
+        <span class="status-lbl">QSOs Logged</span>
+      </div>
+      <div class="status-item">
+        <span class="status-val" id="stat-dxcc">—</span>
+        <span class="status-lbl">Countries</span>
+      </div>
+      <div class="status-item">
+        <span class="status-val" id="stat-states">—</span>
+        <span class="status-lbl">States</span>
+      </div>
+      <div class="online-badge">
+        <span class="pulse-dot"></span>
+        STATION ONLINE
+      </div>
+    </div>
+  </div>
+</header>
+
+<nav>
+  <div class="nav-inner">
+    <button class="nav-btn active" onclick="showSection('dashboard', this)">◈ DASHBOARD</button>
+    <button class="nav-btn" onclick="showSection('logbook', this)">▤ LOGBOOK</button>
+    <button class="nav-btn" onclick="showSection('about', this)">◉ ABOUT</button>
+  </div>
+</nav>
+
+<main>
+
+  <div class="log-error" id="log-error" role="alert" hidden>
+    ⚠ LOG UNAVAILABLE — The logbook could not be loaded. Try again later.
+  </div>
+
+  <!-- DASHBOARD -->
+  <div id="section-dashboard" class="section active">
+    <div class="dash-grid">
+
+      <div class="card amber" id="card-modes">
+        <div class="card-title">▶ Modes</div>
+        <div class="bar-chart" id="modes-chart"></div>
+      </div>
+
+      <div class="card blue" id="card-bands">
+        <div class="card-title">▶ Bands</div>
+        <div class="bar-chart" id="bands-chart"></div>
+      </div>
+
+      <div class="card cyan" id="card-countries">
+        <div class="card-title">▶ Top Countries</div>
+        <div class="country-list" id="countries-list"></div>
+      </div>
+
+      <div class="card green activity-card">
+        <div class="card-title">▶ QSO Activity by Month</div>
+        <canvas id="activityCanvas"></canvas>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- LOGBOOK -->
+  <div id="section-logbook" class="section">
+    <div class="log-controls">
+      <input class="search-input" id="search-input" type="text" placeholder="Search callsign, name, country, QTH..." oninput="applyFilters()">
+      <select class="filter-select" id="filter-band" onchange="applyFilters()">
+        <option value="">All Bands</option>
+      </select>
+      <select class="filter-select" id="filter-mode" onchange="applyFilters()">
+        <option value="">All Modes</option>
+      </select>
+      <select class="filter-select" id="filter-lotw" onchange="applyFilters()">
+        <option value="">LoTW: All</option>
+        <option value="Y">LoTW: Confirmed</option>
+        <option value="N">LoTW: Not Confirmed</option>
+      </select>
+      <span class="log-meta" id="log-meta">Loading...</span>
+    </div>
+    <div class="table-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th onclick="sortTable('call')">Call</th>
+            <th onclick="sortTable('name')">Name</th>
+            <th onclick="sortTable('date')">Date</th>
+            <th onclick="sortTable('time')">Time (UTC)</th>
+            <th onclick="sortTable('band')">Band</th>
+            <th onclick="sortTable('mode')">Mode</th>
+            <th onclick="sortTable('rst_sent')">RST S/R</th>
+            <th onclick="sortTable('country')">Country</th>
+            <th onclick="sortTable('dist')">Dist (mi)</th>
+            <th onclick="sortTable('lotw')">LoTW</th>
+          </tr>
+        </thead>
+        <tbody id="log-tbody">
+          <tr><td colspan="10"><div class="loading"><div class="spinner"></div>Loading logbook...</div></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="pagination" id="pagination"></div>
+  </div>
+
+  <!-- ABOUT -->
+  <div id="section-about" class="section">
+    <div class="about-grid">
+      <div class="card green">
+        <div class="card-title">▶ Station Info</div>
+        <div class="info-block">
+          <div class="info-label">Call Sign</div>
+          <div class="info-value">K5BSS</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Operator</div>
+          <div class="info-value">Justin A Frasier</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Location</div>
+          <div class="info-value">Bossier City, Louisiana</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Grid Square</div>
+          <div class="info-value">EM32</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">County</div>
+          <div class="info-value">Bossier County, LA</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">CQ Zone / ITU Zone</div>
+          <div class="info-value">5 / 6</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">QRZ Profile</div>
+          <div class="info-value"><a href="https://www.qrz.com/db/K5BSS" target="_blank">qrz.com/db/K5BSS ↗</a></div>
+        </div>
+      </div>
+
+      <div class="card blue">
+        <div class="card-title">▶ Operating Preferences</div>
+        <div class="info-block">
+          <div class="info-label">Primary Modes</div>
+          <div class="tag-list">
+            <span class="tag">FT8</span>
+            <span class="tag">FT4</span>
+            <span class="tag">DIG</span>
+            <span class="tag">USB/SSB</span>
+            <span class="tag">RTTY</span>
+          </div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Primary Bands</div>
+          <div class="tag-list">
+            <span class="tag">20m</span>
+            <span class="tag">40m</span>
+            <span class="tag">80m</span>
+            <span class="tag">30m</span>
+            <span class="tag">17m</span>
+            <span class="tag">15m</span>
+          </div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Logging Software</div>
+          <div class="info-value">QRZ Logbook</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">LoTW / eQSL</div>
+          <div class="info-value">Active on both</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Log Period</div>
+          <div class="info-value">Jan 2021 – May 2023</div>
+        </div>
+        <div class="info-block">
+          <div class="info-label">Total QSOs</div>
+          <div class="info-value" style="color:var(--green);font-size:1.5rem;font-family:var(--font-display)">2,112</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<footer>
+  <span>K5BSS</span> · JUSTIN A FRASIER · BOSSIER CITY, LA ·
+  GRID EM32 · CQ5 · ALL TIMES UTC ·
+  LOGBOOK GENERATED FROM ADIF EXPORT
+</footer>
+
+<script src="js/k5bss.js"></script>
+</body>
+</html>

robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://k5bss.com/sitemap.xml

security.txt

@@ -0,0 +1,29 @@
+-----BEGIN PGP SIGNED MESSAGE-----
+Hash: SHA256
+
+#Generated by https://github.com/gitaware/securitytxtgenerator
+
+# If you would like to report a security issue, please contact us at:
+Contact: [email protected]
+Expires: 2027-04-20T01:14:00Z
+Preferred-Languages: en
+Canonical: https://k5bss.com/security.txt
+Encryption: https://k5bss.com/pgp-key.asc
+
+-----BEGIN PGP SIGNATURE-----
+
+wsFzBAEBCAAnBYJp5onuCZB2Xap8YgdeNhYhBK0QLg9LuG9EuLvfkHZdqnxi
+B142AAAlIw//Y//VEh32G+tXnamBIuYq4W+vdBlwZuKGeW/IwObedw89bGwo
+/xSPGWUh0mPKKLof1MtLWNObUUCBscRZiLArExFzw/OZy2J3VuAH5qBrl2am
+D8dnl/6CbqdrpEI3cinrzgDoa1Z4F15wF5lLNlvYHCGkXFIpNFsd8H6P9/UZ
+v0jM6l93wDWbEZR1rHIxvtoUQd8gfPwksGa+osj6QkpP7XBRRly6nAihk8u7
+r+aZ1Sh+YfWiVH966mxmV0x9N2ihYgYmwPMPUNCSRgpDZgM3EEKZWHryuPu2
+Sp5q3bxa6BahAEXFhYaJKinkL5O95vaxiJcsaqPRhlR2xHXLoQj9Ot5v5E9c
+uUc2P0v4M/VLFFTWwnu+3z72V/sj32biRJ70hvH/bb58oOm7YAcOCERyFsY+
+4Drcnt2Am7QDEojhdg3GYf9pJs0tsyvmTZsmpYN8pv3lfzUzEW2YUOdWjMOf
+nLmeqipVA0tSC3QhK3EMqbgtNpJqR/TpbfyWd9EFLS/Jc/kCkAbJlSDOi9ud
+FkbnWBMiTtSPOiDwWMswbOdMTwHu+GxnAbB5+lQghxuEOTTmOPvEQ6DtYhpn
+3+YIf0oDqeptjd+VE5Tx59CMV1RsZkbTVRJanBuLp339Kb/dfQi/G7mIkRne
+hxUZ/Nx9LjsFxlcJRLnAnmtr5qfHeamo7ME=
+=o+Va
+-----END PGP SIGNATURE-----

sitemap.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <url>
+    <loc>https://k5bss.com/</loc>
+    <lastmod>2026-04-20</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>1.0</priority>
+  </url>
+
+  <url>
+    <loc>https://k5bss.com/k5bss.html</loc>
+    <lastmod>2026-04-20</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+
+</urlset>