Keith Casko
108 lines
4.0 KiB
Markdown
108 lines
4.0 KiB
Markdown
# 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.
|