keith-portfolio/README.md

Keith Casko — Portfolio

A static personal portfolio for Keith Casko, targeting IT Support, Help Desk, Desktop Support, Junior SysAdmin, and Cloud Support / Operations roles.

Stack: plain HTML, CSS, and a tiny vanilla JS file (mobile nav + footer year). No build step. No frameworks.

Run locally

Any static server works. Easiest options from the project root:

# Python 3
python -m http.server 8080

# Node (if installed)
npx serve .

Then open http://localhost:8080

Opening index.html directly in a browser also works; using a local server is only needed if you later add fetches or routing.

Project structure

keith-portfolio/
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── main.js
├── assets/
│   ├── images/        # portrait, hero rack/workstation photos
│   ├── screenshots/   # project screenshots
│   └── resume/        # keith-casko-resume.pdf
└── README.md

Things to replace before publishing

Every spot that needs a real value is marked with REPLACE in an HTML comment. Search the project for REPLACE to find all of them. The main ones:

• Resume PDF — put the file at assets/resume/keith-casko-resume.pdf (two links in index.html: hero "Download Resume" button and footer).
• GitHub — footer link, replace https://github.com/REPLACE_ME.
• LinkedIn — footer link, replace https://www.linkedin.com/in/REPLACE_ME.
• Email — footer and Contact section, replace you@example.com (two mailto: links).
• Project links — four View Project › links in the Featured Projects section currently point to #. Point each to the real repo or live demo.

Screenshots & images

Drop the real files into these paths and remove the placeholder <div>s in index.html (replace with <img src="…" alt="…">):

• assets/images/hero-rack.jpg — homelab, rack, or workstation photo
• assets/images/portrait.jpg — portrait photo for the About section
• assets/screenshots/bytegeist-ad.jpg — Windows Server / AD lab screenshot
• assets/screenshots/bytegeist-support.jpg — Support Lab app screenshot
• assets/screenshots/linux-docker.jpg — Grafana / Portainer / Uptime Kuma
• assets/screenshots/aws-tracker.jpg — AWS Cloud Study Tracker UI

Keep images reasonably sized (e.g. 1600px wide max, JPEG quality ~80, or WebP) for fast loads.

Deploy

AWS Amplify (manual deploy, no Git connection required)

1. In the Amplify Console, choose Host web app → Deploy without Git.
2. Zip the whole project folder (index.html, css/, js/, assets/) and drag the zip into the uploader. Name the environment e.g. prod.
3. Amplify gives you an *.amplifyapp.com URL. To use a custom domain, open the app → Domain management → Add domain.

For redeploys, upload a new zip to the same environment.

GitHub Pages

1. Push this folder to a GitHub repo (e.g. keith-portfolio).
2. Repo → Settings → Pages.
3. Source: Deploy from a branch. Branch: main (or master), folder: / (root). Save.
4. GitHub publishes to https://<username>.github.io/keith-portfolio/. Allow a minute for the first build.

For a custom domain, add a CNAME file at the project root containing the domain, and configure DNS to point at GitHub Pages.

Vercel

1. Install the CLI once: npm i -g vercel.
2. From the project root: vercel (follow prompts) and then vercel --prod.

Or connect the GitHub repo in the Vercel dashboard — framework preset is Other; no build command; output directory is . (the repo root).

Accessibility & performance notes

• Semantic HTML (<header>, <nav>, <main>, <section>, <article>, <footer>), one <h1>, proper heading hierarchy.
• Visible focus outlines on links and buttons.
• Mobile nav toggle, responsive layouts at 980px and 640px.
• No external JS/CSS dependencies — single CSS file, single JS file.
• alt text / aria-labels on image placeholders; update them when swapping placeholders for real images.