sabuein.github.io

Personal website for Salaheddin AbuEin — plain HTML5, CSS3 and vanilla JavaScript (ES6+ modules), no frameworks, installable as a PWA.

Status

v2 implemented — the "Terminal" redesign. See docs/specifications-v2.md for what changed and why; docs/specifications-v1.md / v1.1.md are kept as historical planning record.

Structure

• / — home
• /resume/ — standalone résumé (screen + print/PDF)
• /posts/ — recent work, fetched live from abuein.dev via the Ghost Content API through a plain ES module
• /portfolio/ — legacy redirect to abuein.dev, kept for old links
• /offline.html — service-worker offline fallback
• assets/css/ — tokens.css (the whole colour/type/spacing system), reset.css, base.css (shared components), plus one file per page
• assets/js/mods/ — one small module per concern, orchestrated by assets/js/application.mjs
• assets/favicon/ — generated icon set (see icon_gen.py-style script if you want to regenerate them; not included in this zip, ask if useful)
• assets/documents/ — résumé PDF/DOCX and the downloadable .vcf

Before you deploy: one required step

assets/js/mods/config.mjs has a placeholder Content API key. The /posts/ page won't show anything until you:

1. Go to https://abuein.dev/ghost/#/settings/integrations
2. Add (or open) a Custom Integration
3. Copy its Content API Key into GHOST_CONTENT_API_KEY in that file

This key is safe to commit / ship client-side — it's read-only and public-data-only by design. Just don't put an Admin API key there.

Running it locally

Service workers require https:// or localhost — opening index.html directly via file:// will not register one, and the PWA install prompt won't appear. Serve it instead:

npx serve .
# or
python3 -m http.server 8080

Then visit http://localhost:.... First load registers the service worker; reload once to see the offline/cache behaviour kick in.

Deploying

This assumes the repo root is served at https://sabuein.github.io/ (a GitHub user Pages site) — everything uses root-relative paths (/assets/..., /sw.js) on that assumption. If you ever deploy under a subpath instead, update start_url/scope in app.webmanifest and the root-relative paths throughout.

git add -A
git commit -m "v2: terminal redesign"
git push

After deploying: whenever you change a cached file

Bump VERSION at the top of sw.js. Cache names are keyed on it — that's what makes returning visitors' browsers fetch your changes instead of quietly serving the old cached copy forever. Easy to forget, the most common real-world PWA bug.

Documentation

• docs/specifications-v1.md, docs/specifications-v1.1.md — original planning docs
• docs/specifications-v2.md — this redesign: what changed, why, and a short list of open items for a v2.1