Update portfolio website

2026-10-02 09:29:22 -04:00
parent 7def1c8410
commit 65582587f5
28 changed files with 2371 additions and 1676 deletions
@@ -0,0 +1,107 @@
+# 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.