Abigail Bales — portfolio site

Personal portfolio built with React and Vite, deployed to GitHub Pages from this repository (username.github.io).

Stack

• React 19
• Vite 8
• ESLint (flat config)
• Playwright (dev only — optional screenshot capture for project cards)

Features

• Content driven from a single module (src/content.js).
• Dark / light theme with system preference (prefers-color-scheme) until the user picks a mode; choice is stored in localStorage under theme.
• Responsive layout including a mobile nav overlay and safe-area–aware spacing.
• Portfolio previews as static PNGs under public/projects/ (generated from each item’s liveUrl).

Scripts

Command	Description
npm install	Install dependencies
npm run dev	Start dev server (frees ports 5173–5176 first)
npm run build	Production build to dist/
npm run preview	Serve dist/ locally
npm run lint	Run ESLint
npm run capture:previews	Visit each portfolio liveUrl with Playwright and write public/projects/{id}-preview.png

After changing portfolio URLs or when you want fresher thumbnails, run npm run capture:previews (requires Chromium: npx playwright install chromium once). Commit the PNGs so GitHub Pages serves them without running Playwright in CI.

The dev script uses kill-port so Vite can bind to 127.0.0.1:5173 without silent port drift when old Node processes are still running.

Project layout

Path	Notes
src/content.js	Copy: meta, about, skills, portfolio items, contact, social links
src/components/	Page sections and UI
src/index.css	Light theme tokens and global base styles
src/theme-dark.css	Dark theme overrides ([data-theme="dark"])
src/App.css	Layout and component styles
src/hooks/useTheme.js	Theme resolution and toggle
public/favicon.svg	SVG favicon (aligned with header “A” mark)
public/projects/	Preview PNGs + SVG fallbacks for portfolio cards
scripts/capture-portfolio-previews.mjs	Playwright capture script

Editing content

Most copy lives in src/content.js:

• meta — name, title, location, hero headline, CTAs, etc.
• about — section title and paragraphs
• portfolioIntro — eyebrow, title, lead for the work section
• portfolioItems — each project: id, title, impact, stack, liveUrl, githubUrl, image (e.g. /projects/{id}-preview.png)
• skillsIntro / skillGroups — skills section copy
• contact / social — footer and links

Components under src/components/ handle layout; adjust src/App.css and src/index.css for styling.

Deploying to GitHub Pages

Local npm run preview works because it serves dist/ after a build. GitHub only shows the site if Pages is serving the built output from Actions, not the repo root (which contains dev index.html → /src/main.jsx and looks blank).

dist/ is gitignored, so the live site comes from CI (or a manual upload of dist/).

GitHub repository setup (required)

That View Source line (<script … src="/src/main.jsx">) means GitHub Pages is still publishing the main branch root: the dev index.html, not the Vite build. The live site must come from the workflow that uploads dist/.

Step	Where	What to set
1	Repository name	Abagels96.github.io (username + .github.io) for https://abagels96.github.io/.
2	Visibility	Usually Public on a free account for user Pages.
3	Actions	Settings → Actions → General → allow Actions for this repo.
4	Pages source	Settings → Pages → Build and deployment → Source: GitHub Actions (not “Deploy from a branch” with main / (root)). Pick the workflow “Deploy static site to Pages” if GitHub asks. Save.
5	Run deploy	Merge to main (or master) or Actions → Deploy static site to Pages → Run workflow. First run may ask you to approve the github-pages environment.
6	Wait	1–5 minutes, then hard-refresh (Ctrl+F5).

Verify: View Page Source on the live site should show <script … src="/assets/index-….js">, not /src/main.jsx.

How deployment works

The workflow .github/workflows/deploy-pages.yml runs on push to main or master (and Run workflow):

1. npm ci → npm run build
2. Publishes dist/ with GitHub’s official Pages actions (upload-pages-artifact + deploy-pages).

Feature branches must be merged into main (or the default branch) for automatic deploy.

If the site still doesn’t update

• Actions tab: open the latest run; fix any red Build or Deploy step (e.g. npm ci failing if package-lock.json isn’t committed).
• Private repo: on a free GitHub account, GitHub Pages may require a public repository for username.github.io. Check GitHub Pages docs for your plan.
• Cache: hard-refresh or try an incognito window after a successful deploy.

Local check before pushing

npm run build
npm run preview

base URL

For https://<username>.github.io/, Vite’s default base: '/' is correct.

.nojekyll

public/.nojekyll is copied into dist/ so GitHub Pages does not run Jekyll on the static files.

License

Private project; all rights reserved unless stated otherwise.