# 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-label`s on image placeholders; update them when
  swapping placeholders for real images.