Fix pages build: restore missing files dropped in merge#196
Fix pages build: restore missing files dropped in merge#196
Conversation
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
There was a problem hiding this comment.
Pull request overview
Restores files and fixes regressions that left the Vite + React + TypeScript site in a non-building state after a merge, by reintroducing missing hooks/translations and repairing truncated section code.
Changes:
- Fixes build-breaking issues in
ContactSection.tsx(restored Turnstile site key assignment) andSkillsSection.tsx(restoreduseTranslation()usage and corrected<SectionHeader>props). - Restores missing hooks used by navigation (
useAnimatedScroll,useBodyScrollLock). - Restores missing locale JSON files referenced by the translations index (
ca,fr,nl,ja,ru).
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/sections/ContactSection.tsx | Restores the Turnstile site key assignment chain so the module parses/builds correctly. |
| src/sections/SkillsSection.tsx | Fixes missing translation hook usage and corrects/normalizes SectionHeader props. |
| src/hooks/useAnimatedScroll.ts | Reintroduces animated (fade) scrolling used by header/mobile nav. |
| src/hooks/useBodyScrollLock.ts | Reintroduces body scroll locking used by the mobile nav overlay. |
| src/translations/ca.json | Restores Catalan translations referenced by src/translations/index.ts. |
| src/translations/fr.json | Restores French translations referenced by src/translations/index.ts. |
| src/translations/nl.json | Restores Dutch translations referenced by src/translations/index.ts. |
| src/translations/ja.json | Restores Japanese translations referenced by src/translations/index.ts. |
| src/translations/ru.json | Restores Russian translations referenced by src/translations/index.ts. |
| // For reduced motion, use instant browser scroll | ||
| if (prefersReducedMotion) { | ||
| element.scrollIntoView({ behavior: "auto", block: "start" }); | ||
| return; | ||
| } | ||
|
|
||
| const main = document.querySelector("main"); | ||
| if (!main) { | ||
| element.scrollIntoView({ behavior: "auto", block: "start" }); | ||
| return; | ||
| } | ||
|
|
||
| const targetPosition = | ||
| element.getBoundingClientRect().top + window.scrollY + offset; | ||
|
|
There was a problem hiding this comment.
offset is ignored when prefersReducedMotion is true (and also when falling back to scrollIntoView because <main> isn’t found). Since call sites pass offset: -80 for a sticky header, reduced-motion users can end up with the target section hidden under the header. Consider computing the target Y position and using window.scrollTo({ top: ..., behavior: "auto" }) in these branches as well so offset is consistently honoured.
| // For reduced motion, use instant browser scroll | |
| if (prefersReducedMotion) { | |
| element.scrollIntoView({ behavior: "auto", block: "start" }); | |
| return; | |
| } | |
| const main = document.querySelector("main"); | |
| if (!main) { | |
| element.scrollIntoView({ behavior: "auto", block: "start" }); | |
| return; | |
| } | |
| const targetPosition = | |
| element.getBoundingClientRect().top + window.scrollY + offset; | |
| const targetPosition = | |
| element.getBoundingClientRect().top + window.scrollY + offset; | |
| // For reduced motion, use instant browser scroll while still respecting offset | |
| if (prefersReducedMotion) { | |
| window.scrollTo({ top: targetPosition, behavior: "auto" }); | |
| return; | |
| } | |
| const main = document.querySelector("main"); | |
| if (!main) { | |
| window.scrollTo({ top: targetPosition, behavior: "auto" }); | |
| return; | |
| } |
| // 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 | ||
| requestAnimationFrame(() => { |
There was a problem hiding this comment.
There’s a "Trigger reflow" comment followed by an eslint-disable-next-line @typescript-eslint/no-unused-expressions, but no statement on the next line. This is misleading and makes it unclear whether a reflow was intended; either add the actual reflow trigger (e.g., by reading a layout property) or remove the comment/disable directive.
| // Trigger reflow to ensure style changes are applied | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-expressions | ||
|
|
||
| requestAnimationFrame(() => { | ||
| main.style.transform = "scale(1.02)"; |
There was a problem hiding this comment.
Same as above in scrollToTop: the reflow comment and eslint-disable-next-line directive aren’t followed by any statement. This should either perform the intended reflow or be removed to avoid dead/misleading lint directives.
| */ | ||
| export function useAnimatedScroll(options: AnimatedScrollOptions = {}) { | ||
| const { duration = 400, offset = 0 } = options; | ||
| const prefersReducedMotion = useReducedMotion(); |
There was a problem hiding this comment.
Minor consistency: most components in this repo coerce useReducedMotion() to a strict boolean via useReducedMotion() ?? false (e.g. src/components/ScrollSpy.tsx:24). Here it’s assigned directly, so the type/behaviour may differ from the rest of the codebase depending on framer-motion’s return value. Consider matching the existing pattern for consistency.
| const prefersReducedMotion = useReducedMotion(); | |
| const prefersReducedMotion = useReducedMotion() ?? false; |
The merge of #195 left the branch in a non-building state due to several files either truncated, corrupted, or entirely missing.
Changes
ContactSection.tsxconst rawTurnstileSiteKey =declaration — the assignment line and theVITE_TURNSTILE_SITE_KEYlookup were silently dropped, leaving dangling expression statements (TS1005/TS1109)SkillsSection.tsx<SectionHeader>with three conflictingeyebrowprops (TS17001) — collapsed to a singleeyebrow={t.skills.eyebrow}iconpropconst { t } = useTranslation()call (imported but never invoked, sotwas undefined)Missing hooks (imported by
App.tsx/MobileNav.tsx, absent from tree)src/hooks/useAnimatedScroll.tssrc/hooks/useBodyScrollLock.tsMissing translations (imported by
src/translations/index.ts, absent from tree)ca.json,fr.json,nl.json,ja.json,ru.jsonAll restored from
kiyarose/Portfreference.