57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# k5bss.com
|
|
|
|
Personal portfolio and resume site for Justin Frasier — IT Support Analyst and amateur radio operator (K5BSS, General Class).
|
|
|
|
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.
|
|
|
|
## Structure
|
|
|
|
```
|
|
k5bss.com/
|
|
├── index.html # Main page (all content)
|
|
├── css/
|
|
│ └── style.css # All styles
|
|
├── favicon.ico
|
|
├── favicon-32x32.png
|
|
├── favicon-64x64.png
|
|
└── favicon-256x256.png
|
|
```
|
|
|
|
## Sections
|
|
|
|
- **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
|
|
|
|
## Tech
|
|
|
|
- Plain HTML5 / CSS3 — no JavaScript frameworks or build step
|
|
- 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`
|
|
- Fully responsive across three breakpoints (see below)
|
|
|
|
## Responsive Design
|
|
|
|
The layout 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.
|