Personal portfolio / resume site for Joshua A. Logsdon, GIS Analyst III, City of San Diego.
Plain HTML + CSS + a tiny vanilla JS theme toggle. No build step, no dependencies.
Open index.html directly in a browser, or run a one-line static server:
python -m http.server 8000
# then visit http://localhost:8000This repo is named JoshALogs.github.io, which GitHub treats as a user site.
Once pushed to main, it auto-publishes to https://joshalogs.github.io.
First-time setup:
git add .
git commit -m "Initial portfolio site"
git branch -M main
git remote add origin https://github.com/JoshALogs/JoshALogs.github.io.git
git push -u origin mainThen on GitHub: Settings → Pages → Build and deployment
- Source: Deploy from a branch
- Branch: main / root (
/) - Save
The site typically goes live within 1–2 minutes of the first push.
When you purchase a domain:
- In the repo, Settings → Pages → Custom domain, enter
yourdomain.comand save. GitHub will commit aCNAMEfile to the repo automatically. - At your registrar, add DNS records pointing to GitHub Pages:
Arecords for the apex domain pointing to:185.199.108.153,185.199.109.153,185.199.110.153,185.199.111.153CNAMErecord forwwwpointing tojoshalogs.github.io
- Wait for DNS + HTTPS cert to provision (usually < 1 hour), then tick Enforce HTTPS.
- Content: all copy lives in
index.html. - Design tokens: colors, radii, spacing, and fonts are at the top of
styles.cssunder:root(dark theme) and:root[data-theme="light"]. - Photo: replace
assets/headshot.jpgwith a newer photo. Keep it square (1:1) and roughly 800×800 for best quality. If you change the filename, update the<img src>inindex.htmlAND theog:image/twitter:imageURLs plus width/height metas in the<head>. - Résumé download: drop a new copy at
assets/Logsdon_Joshua_Resume.pdf. If you change the filename, update the twohrefs inindex.htmlthat reference the file. - After deploying meta/OG changes: paste the URL into LinkedIn's Post Inspector (linkedin.com/post-inspector) to refresh its cached share card.
- Dark and light palettes meet WCAG AA contrast for body and UI text.
- Full keyboard navigation with visible focus rings, including forced-colors (Windows High Contrast) mode.
- Navigation stays available at all viewport widths (wraps to a pill row on phones).
- Skip-to-content link for screen readers.
prefers-reduced-motionrespected (animations disabled).- Print stylesheet outputs a clean document from either theme.
- Semantic landmarks (
header,main,nav,section,footer) and ARIA labels where helpful.
index.html # single-page site
404.html # branded not-found page (root-absolute URLs)
robots.txt # allow-all
styles.css # theme tokens, layout, components, print styles
script.js # theme toggle + back-to-top + footer year
assets/
headshot.jpg # profile photo (square JPEG)
favicon.svg # favicon, concentric-circles "target" mark
favicon-32.png # PNG fallback for the SVG favicon
apple-touch-icon.png # 180x180 full-bleed icon for iOS
Joshua_Logsdon.vcf # "Save contact" vCard (email only, no phone)
Logsdon_Joshua_Resume.pdf
qr.svg # plain green-on-stone QR to the site (Contact popover)
qr-card.svg # shareable QR card: contours + caption (opened from Contact)
qr-card.png # raster of the QR card (2400x2760) for sharing/printing
The Contact section has a subtle "Show QR code" affordance. On a pointer device,
hover or keyboard-focus previews the code; clicking or tapping opens a full-screen
QR viewer (#qr-modal) with a big, bright, scannable code — the phone "hold it up
to scan" view (close via the button, backdrop, or Esc; background scroll is
locked while open). With JavaScript off, the trigger link falls back to opening
assets/qr-card.svg directly. The QR encodes https://joshalogs.github.io/.
Source generators live outside the repo (Python + segno); regenerate only if
the URL changes.