Fix CSP violations from Cloudflare Radar scan

Two duplicate <meta> CSP tags in index.html conflicted with the
_headers HTTP header, and browsers enforce the intersection of all
active policies. That blocked the profile photo, the inline nav-
highlight script, and the Cloudflare Insights beacon.

Consolidate to a single CSP in _headers, allow the actual external
resources the page needs (ki5bhv.com image, cloudflareinsights.com
beacon), and move the inline script/onerror handler into js/main.js
so script-src no longer needs 'unsafe-inline'.

Co-Authored-By: Claude Sonnet 5 <[email protected]>

_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' https://ki5bhv.com 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/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;

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

@@ -6,8 +6,7 @@
   <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'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://ki5bhv.com data:; connect-src 'none'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'none'; upgrade-insecure-requests" />
+  <title>Justin Frasier | Infrastructure Administrator</title>
-  <title>Justin Frasier | IT Support Analyst</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" />
@@ -16,9 +15,6 @@
   <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=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>
 
@@ -28,10 +24,9 @@
 
     <!-- ── Sidebar ── -->
     <aside>
-      <img class="profile-photo" src="https://ki5bhv.com/photo/justin1.jpg" alt="Justin Frasier"
+      <img class="profile-photo" src="https://ki5bhv.com/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">
@@ -65,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>.
@@ -87,9 +82,12 @@
         <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>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>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>
@@ -102,6 +100,7 @@
             <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>
@@ -199,13 +198,18 @@
           <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>Cisco Phone Systems</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>Docker & Container Management</div>
           <div class="skill-cell"><span class="skill-icon">▸</span>Ansible</div>
-          <div class="skill-cell"><span class="skill-icon">▸</span>Proxmox VE</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>
@@ -362,23 +366,7 @@
     </main>
   </div>
 
-  <script>
+  <script src="js/main.js" defer></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>
 

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';
+  });
+}

robots.txt

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