feat: Get Template Ready for Showcase by kiyarose · Pull Request #197 · SillyLittleTech/Portf

kiyarose · 2026-03-26T11:01:50Z

Fixes #194
This pull request introduces several new features and improvements, including two new custom React hooks for scroll animation and body scroll locking, adds extensive new language support with translations for Catalan, French, Japanese, Dutch, and Russian, and sets up automated deployment to GitHub Pages. It also includes a minor dependency update and some small UI/localization improvements.

New Features

Added useAnimatedScroll custom hook for smooth, animated scrolling with fade and scale effects, respecting user reduced-motion preferences (src/hooks/useAnimatedScroll.ts)
Added useBodyScrollLock custom hook to lock and unlock body scroll, handling scrollbar compensation to avoid layout shift (src/hooks/useBodyScrollLock.ts)

Internationalization

Added full translation files for Catalan (src/translations/ca.json), French (src/translations/fr.json), Japanese (src/translations/ja.json), Dutch (src/translations/nl.json), and Russian (src/translations/ru.json) [1] [2] [3] [4] [5]

Deployment Automation

Added GitHub Actions workflow for automated deployment to GitHub Pages (.github/workflows/github-pages.yml)

Dependency Updates

Updated eslint-plugin-react-hooks to a newer canary version in package.json

UI and Localization Improvements

Made small improvements to the skills section header, including icon addition and translation usage (src/sections/SkillsSection.tsx) [1] [2]
Fixed environment variable fallback logic for Turnstile site key (src/sections/ContactSection.tsx)

This workflow automates the deployment of the project to GitHub Pages upon pushes to the main branch and allows manual triggering.

Removed linting step from GitHub Pages workflow.

…lint v10 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/bc4f5bcf-33f8-4a17-bbd2-193ee9558f11

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/4acb4738-f16f-4bd0-9da7-00c279623451

… SkillsSection Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/4acb4738-f16f-4bd0-9da7-00c279623451

Copilot

Pull request overview

Prepares the Vite + React + TypeScript template for a public “showcase” release by improving navigation/UX behaviour, expanding i18n coverage, and adding GitHub Pages deployment automation.

Changes:

Added two UI hooks: animated scrolling (useAnimatedScroll) and body scroll locking (useBodyScrollLock).
Added new translation bundles for ca/fr/ja/nl/ru and wired Skills header text to translations.
Added a GitHub Actions workflow to deploy the built site to GitHub Pages; updated an eslint devDependency.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`src/hooks/useAnimatedScroll.ts`	Introduces animated “fade then jump” scrolling utilities and reduced-motion handling.
`src/hooks/useBodyScrollLock.ts`	Adds a hook to lock body scroll with scrollbar compensation for the mobile menu.
`src/sections/SkillsSection.tsx`	Localizes the Skills section header and adds an icon.
`src/sections/ContactSection.tsx`	Improves Turnstile site key env var fallback/normalization.
`src/translations/ca.json`	Adds Catalan translations.
`src/translations/fr.json`	Adds French translations.
`src/translations/ja.json`	Adds Japanese translations.
`src/translations/nl.json`	Adds Dutch translations.
`src/translations/ru.json`	Adds Russian translations.
`.github/workflows/github-pages.yml`	Adds automated deployment pipeline for GitHub Pages.
`package.json`	Pins `eslint-plugin-react-hooks` to a canary build.
`package-lock.json`	Locks the updated eslint plugin version and peer dependency range.

Copilot · 2026-03-26T11:06:39Z

.github/workflows/github-pages.yml

+          cache: npm
+
+      - name: Install dependencies
+        run: npm clean-install --progress=false


npm clean-install is inconsistent with the repo’s other workflows (which use npm ci) and may not be available on all npm versions. Using npm ci here will be more standard and ensures installs are reproducible from package-lock.json.

Suggested change

run: npm clean-install --progress=false

run: npm ci --progress=false

Copilot · 2026-03-26T11:06:40Z

.github/workflows/github-pages.yml

+      - name: Build
+        run: npm run build:pages
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist


This workflow builds with npm run build:pages, but the Vite config/scripts don’t appear to set a GitHub Pages base path. For project Pages (served under /<repo>/), this can break asset URLs at runtime. Consider setting base for Pages builds (e.g., via a dedicated build script/env var and conditional base in vite.config.ts).

Copilot · 2026-03-26T11:06:40Z

package.json

    "autoprefixer": "^10.4.27",
    "eslint": "^10.1.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "7.1.0-canary-ab18f33d-20260220",


eslint-plugin-react-hooks is pinned to a canary build. If this is only to satisfy the ESLint v10 peer dependency, consider switching to the latest stable release that supports ESLint 10 (if available) to reduce supply-chain and reproducibility risk (canary builds are more likely to be yanked/changed). If the canary is required, it’d help to document the reason in the repo (e.g., in package.json or CONTRIBUTING).

Suggested change

"eslint-plugin-react-hooks": "7.1.0-canary-ab18f33d-20260220",

"eslint-plugin-react-hooks": "^7.1.0",

Copilot · 2026-03-26T11:06:41Z

src/hooks/useAnimatedScroll.ts

+      // For reduced motion, use instant browser scroll
+      if (prefersReducedMotion) {
+        element.scrollIntoView({ behavior: "auto", block: "start" });
+        return;
+      }


In the reduced-motion path, offset is ignored because this branch uses scrollIntoView(). That makes useAnimatedScroll({ offset: -80 }) behave differently for users with prefers-reduced-motion (e.g., sticky headers can cover the target). Consider computing the target scroll position and applying the offset even when reduced motion is enabled (still using behavior: "auto").

Copilot · 2026-03-26T11:06:41Z

src/hooks/useAnimatedScroll.ts

+        // Trigger reflow to ensure style changes are applied
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+
+        // Phase 3: Fade in the target content with scale effect


The “Trigger reflow” section is currently a no-op: there’s an eslint-disable-next-line @typescript-eslint/no-unused-expressions comment but no expression on the next line. Either add an actual reflow read (as intended) or remove the disable/comment; leaving it blank makes the code misleading and may reduce animation reliability.

Copilot · 2026-03-26T11:06:41Z

src/hooks/useAnimatedScroll.ts

+      // Trigger reflow to ensure style changes are applied
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+
+      requestAnimationFrame(() => {


Same as above: the “Trigger reflow” block has an eslint-disable-next-line but no subsequent expression. Add the intended reflow read or remove the unused disable/comment to avoid a misleading no-op.

kiyarose and others added 9 commits March 26, 2026 06:29

Add GitHub Pages deployment workflow

1be74f2

This workflow automates the deployment of the project to GitHub Pages upon pushes to the main branch and allows manual triggering.

Temp change for testing

d4fe7b1

Force install npm dependencies

462a107

Remove lint step from GitHub Pages workflow

e35a04a

Removed linting step from GitHub Pages workflow.

Change npm ci to npm clean-install in workflow

4947ac0

Fix: update eslint-plugin-react-hooks to canary version supporting es…

499f0a7

…lint v10 Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/bc4f5bcf-33f8-4a17-bbd2-193ee9558f11

Fix ContactSection.tsx - restore rawTurnstileSiteKey declaration

3e95e53

Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/4acb4738-f16f-4bd0-9da7-00c279623451

Fix all TypeScript build errors: add missing hooks, translations, fix…

75e401f

… SkillsSection Co-authored-by: kiyarose <75678535+kiyarose@users.noreply.github.com> Agent-Logs-Url: https://github.com/SillyLittleTech/Portf/sessions/4acb4738-f16f-4bd0-9da7-00c279623451

Change deployment branch to 'main' for GitHub Pages

3d3e3fb

kiyarose requested a review from Copilot March 26, 2026 11:01

kiyarose self-assigned this Mar 26, 2026

kiyarose added bug Something isn't working enhancement New feature or request javascript Pull requests that update javascript code labels Mar 26, 2026

github-actions bot added the help wanted Extra attention is needed label Mar 26, 2026

Copilot started reviewing on behalf of kiyarose March 26, 2026 11:02 View session

kiyarose merged commit 0a7ac4e into main Mar 26, 2026
14 checks passed

kiyarose deleted the kr/expage branch March 26, 2026 11:06

Copilot AI reviewed Mar 26, 2026

View reviewed changes

Copilot AI mentioned this pull request Mar 26, 2026

fix: resolve blank page on GitHub Pages sub-path deployment #198

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Get Template Ready for Showcase#197

feat: Get Template Ready for Showcase#197
kiyarose merged 9 commits intomainfrom
kr/expage

kiyarose commented Mar 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	run: npm clean-install --progress=false
	run: npm ci --progress=false

	"eslint-plugin-react-hooks": "7.1.0-canary-ab18f33d-20260220",
	"eslint-plugin-react-hooks": "^7.1.0",

Conversation

kiyarose commented Mar 26, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants