feat: introduce new modular Volcanic Forge template with fluid lava animations #1955#2333
Merged
anurag3407 merged 10 commits intoMay 28, 2026
Merged
Conversation
added 9 commits
May 26, 2026 22:30
…s, and push production assets
…leanup, sizing props, contact mailto, about badges
|
CodeAnt AI is reviewing your PR. |
Contributor
📝 WalkthroughWalkthroughAdds three full portfolio templates: Mosaic Assemble (mosaic tiles + character/element animations), Page Turner (HTMLFlipBook pages with wheel-flip hooks and paginated pages), and Volcanic Forge (lava/ember visual systems and themed sections). Each template composes multiple new subcomponents and wires data from dummy_data.json. ChangesMosaic Assemble Portfolio Template
Page Turner Flipbook Portfolio Template
Volcanic Forge Lava-Themed Portfolio Template
Estimated code review effort 🎯 4 (Complex) | ⏱️ ~45 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
codeant-ai
Bot
added
the
size:XXL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
Comment on lines
+7
to
+15
| const [viewportWidth, setViewportWidth] = useState( | ||
| typeof window !== 'undefined' ? window.innerWidth : 1200, | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| const onResize = () => setViewportWidth(window.innerWidth); | ||
| window.addEventListener('resize', onResize); | ||
| return () => window.removeEventListener('resize', onResize); | ||
| }, []); |
There was a problem hiding this comment.
Suggestion: viewportWidth is tracked with a resize listener but never used in rendering logic. This creates avoidable state updates and component re-renders on every window resize for no functional benefit. Remove this state/effect pair (or actually use viewportWidth) to prevent unnecessary work. [performance]
Severity Level: Major ⚠️
- ⚠️ Hero section re-renders on every browser resize.
- ⚠️ MosaicAssemble template does extra work without UI change.Steps of Reproduction ✅
1. Render the `MosaicAssemble` template component from
`frontend/src/components/portfolio/templates/Mosaic_Assemble/index.jsx:11-20`, which
includes `<Hero data={data.personal} socials={data.socials} />` at line 14.
2. When `MosaicAssemble` renders, the `Hero` component in
`frontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsx:6-15` runs its body
and initializes the `viewportWidth` state via `useState` at lines 7-9.
3. The `useEffect` in `Hero.jsx` at lines 11-15 registers a `window` resize listener; each
time the browser window is resized, `onResize` calls
`setViewportWidth(window.innerWidth)`, causing React to schedule a re-render of `Hero`
(and its children) on every resize event.
4. A `Grep` search for `viewportWidth` in `Hero.jsx` (and visual inspection of
`frontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsx:1-115`) shows
`viewportWidth` is only defined at lines 7-9 and never read in the JSX tree, so every
resize-triggered state update produces a re-render with identical output, resulting in
unnecessary work whenever the template is used and the viewport is resized.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsx
**Line:** 7:15
**Comment:**
*Performance: `viewportWidth` is tracked with a resize listener but never used in rendering logic. This creates avoidable state updates and component re-renders on every window resize for no functional benefit. Remove this state/effect pair (or actually use `viewportWidth`) to prevent unnecessary work.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+8
to
+13
| const contactLinks = [ | ||
| { label: 'Email', value: email, href: email ? `mailto:${email}` : null, icon: Mail }, | ||
| { label: 'GitHub', value: github, href: github || null, icon: Github }, | ||
| { label: 'LinkedIn', value: linkedin, href: linkedin || null, icon: Linkedin }, | ||
| { label: 'Twitter', value: twitter, href: twitter || null, icon: Sparkles }, | ||
| ] |
There was a problem hiding this comment.
Suggestion: href values are taken directly from profile data and rendered into clickable anchors without protocol validation. If a malicious value like javascript:... is present, clicking the link can execute script in the browser. Restrict links to safe protocols (https:, mailto:) before rendering. [security]
Severity Level: Critical 🚨
- ❌ Crafted social links execute arbitrary JavaScript in visitors' browsers.
- ⚠️ Hero and Contact pages both trust unvalidated socials URLs.
- ⚠️ Multi-tenant portfolios allow stored XSS between different user sites.Steps of Reproduction ✅
1. Note that portfolio profile data is sourced from JSON:
`frontend/src/data/dummy_data.json` defines `"socials"` at lines 10-14, including
`"github"`, `"linkedin"`, `"twitter"`, and `"email"` (e.g., line 11 currently `"github":
"https://github.com"`).
2. Observe in `frontend/src/components/portfolio/templates/Page_Turner/shared.jsx` lines
17-20 that `data` is imported from this JSON (line 17) and `export const safeSocials =
data.socials || {}` (line 20) exposes these values without any normalization or protocol
checks.
3. In `frontend/src/components/portfolio/templates/Page_Turner/ContactPage.jsx` lines 5
and 8-12, the component destructures `{ email = '', github = '', linkedin = '', twitter =
'' } = safeSocials` (line 5) and builds `contactLinks` (lines 8-13) where
GitHub/LinkedIn/Twitter `href` values are taken directly from `github`, `linkedin`, and
`twitter` (lines 10-12) with no validation.
4. In the same file, the Social Grid renders those links as `<a>` tags at lines 54-61:
`href={item.href}` with `target="_blank"` and `rel="noreferrer"` (lines 56-60), meaning
any string in `data.socials.github` (or linkedin/twitter) becomes a clickable navigation.
5. To reproduce a script-URL injection, change `frontend/src/data/dummy_data.json` line 11
to `"github": "javascript:alert('XSS-from-github')"` and run the frontend (e.g., `npm run
dev`); render the Page Turner template, which includes `ContactPage` via
`frontend/src/components/portfolio/templates/Page_Turner/index.jsx` lines 49-55.
6. Navigate in the UI to the "Let's Connect" contact page (rendered by `ContactPage`) and
click the "GitHub" card rendered from `contactLinks` (ContactPage.jsx lines 54-61); the
browser follows the `javascript:` URL and executes the injected script, demonstrating that
unvalidated profile URLs can execute arbitrary JavaScript when clicked.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Page_Turner/ContactPage.jsx
**Line:** 8:13
**Comment:**
*Security: `href` values are taken directly from profile data and rendered into clickable anchors without protocol validation. If a malicious value like `javascript:...` is present, clicking the link can execute script in the browser. Restrict links to safe protocols (`https:`, `mailto:`) before rendering.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+76
to
+86
| href={proj.liveUrl} | ||
| whileHover={{ y: -4 }} | ||
| className="flex items-center gap-2 bg-white text-slate-950 px-4 py-2 rounded-lg font-bold text-sm shadow-lg shadow-white/5" | ||
| > | ||
| <ExternalLink size={14} /> | ||
| Live Matrix | ||
| </motion.a> | ||
| )} | ||
| {proj.githubUrl && ( | ||
| <motion.a | ||
| href={proj.githubUrl} |
There was a problem hiding this comment.
Suggestion: proj.liveUrl and proj.githubUrl are injected directly into anchor href values without protocol validation. If this data is user-controlled, a javascript: URL can execute script when clicked. Validate URLs to allow only safe schemes (e.g. https:/http:) before rendering links. [security]
Severity Level: Critical 🚨
- ❌ Mosaic_Assemble project buttons can execute arbitrary JavaScript on click.
- ⚠️ Viewers of Mosaic_Assemble template risk client-side script injection.
- ⚠️ Similar unvalidated links appear in other templates (e.g. Volcanic_Forge).Steps of Reproduction ✅
1. Open `frontend/src/components/portfolio/templates/Mosaic_Assemble/index.jsx` where
`MosaicAssemble` renders `<Projects projects={data.projects} />` at line 17 using data
from `frontend/src/data/dummy_data.json` (lines 38–87).
2. In `frontend/src/data/dummy_data.json`, modify one project's `"liveUrl"` (line 43, 51,
59, etc.) to a JavaScript URL such as `"javascript:alert('XSS from project link')"` while
keeping the rest of the structure unchanged.
3. Render the `MosaicAssemble` template in any page by importing its default export from
`frontend/src/components/portfolio/templates/Mosaic_Assemble/index.jsx`; the `Projects`
component at `frontend/src/components/portfolio/templates/Mosaic_Assemble/Projects.jsx`
lines 73–83 will render a `<motion.a>` with `href={proj.liveUrl}` (line 76) and label
"Live Matrix".
4. In the browser, click the "Live Matrix" button for the modified project; because the
`href` is a `javascript:` URL passed through without validation, the browser executes the
embedded script in the context of the portfolio page.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/Mosaic_Assemble/Projects.jsx
**Line:** 76:86
**Comment:**
*Security: `proj.liveUrl` and `proj.githubUrl` are injected directly into anchor `href` values without protocol validation. If this data is user-controlled, a `javascript:` URL can execute script when clicked. Validate URLs to allow only safe schemes (e.g. `https:`/`http:`) before rendering links.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Nitpick comments (4)
frontend/src/components/portfolio/templates/Mosaic_Assemble/Testimonials.jsx (1)
31-31: ⚡ Quick winUse a stable key instead of array index.
Using the array index as a key can cause issues if the testimonials array is reordered or filtered. If
dummy_data.jsonprovides a uniqueidfield for each testimonial, use it; otherwise consider generating a stable key fromt.nameandt.role.♻️ Suggested fix
- key={i} + key={t.id || `${t.name}-${t.role}`}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/Testimonials.jsx` at line 31, Replace the unstable array index key in the Testimonials component map (currently key={i}) with a stable unique identifier: if each testimonial object has an id use key={t.id}; otherwise derive a stable key from testimonial fields (e.g., combine t.name and t.role) when mapping over the testimonials (the mapped item is referenced as t) so React can track items reliably during reorders/filters.frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx (1)
26-42: ⚡ Quick winStabilize ember configs to prevent animation resets on re-render.
Line 27–41 recomputes random size, timing, drift, and opacity every render, which can cause ember jumps if this component re-renders. Memoize per-particle config once and render from that array.
💡 Suggested refactor
export default function GlobalBackground() { - const embers = useMemo(() => Array.from({ length: 40 }), []); + const embers = useMemo( + () => + Array.from({ length: 40 }, (_, i) => ({ + id: i, + size: Math.random() * 4 + 1, + duration: (Math.random() * 10 + 10) / Math.max(PARTICLE_SPEED, 0.1), + delay: Math.random() * 10, + startX: Math.random() * 100, + driftX: (Math.random() - 0.5) * 200, + peakOpacity: Math.random() * 0.8 + 0.2, + })), + [] + ); @@ - {embers.map((_, i) => { - const size = Math.random() * 4 + 1; - const duration = (Math.random() * 10 + 10) / Math.max(PARTICLE_SPEED, 0.1); - const delay = Math.random() * 10; - const startX = Math.random() * 100; - + {embers.map((ember) => { return ( <motion.div - key={i} + key={ember.id} className="absolute bottom-0 rounded-full bg-orange-500" style={{ - width: size, height: size, left: `${startX}vw`, + width: ember.size, height: ember.size, left: `${ember.startX}vw`, filter: `blur(${1 * Math.min(PARTICLE_BRIGHTNESS, 3)}px) brightness(${PARTICLE_BRIGHTNESS})`, boxShadow: `0 0 ${10 * PARTICLE_BRIGHTNESS}px ${2 * PARTICLE_BRIGHTNESS}px rgba(249, 115, 22, ${0.5 * Math.min(PARTICLE_BRIGHTNESS, 2)})` }} - animate={{ y: ['10vh', '-110vh'], x: [0, (Math.random() - 0.5) * 200], opacity: [0, Math.random() * 0.8 + 0.2, 0] }} - transition={{ duration: duration, repeat: Infinity, delay: delay, ease: 'linear' }} + animate={{ y: ['10vh', '-110vh'], x: [0, ember.driftX], opacity: [0, ember.peakOpacity, 0] }} + transition={{ duration: ember.duration, repeat: Infinity, delay: ember.delay, ease: 'linear' }} /> ); })}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx` around lines 26 - 42, The ember props are being re-generated on every render causing animation jumps; in GlobalBackground.jsx create a stable emberConfigs array (use useMemo) that maps each ember index to random values (size, duration computed using PARTICLE_SPEED, delay, startX, x drift, opacity peak, and any precomputed blur/boxShadow factors using PARTICLE_BRIGHTNESS) and then use emberConfigs[i] inside the embers.map render (use a stable key from the config or index) instead of calling Math.random inline so the per-particle config is computed once and reused across re-renders.frontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx (1)
11-11: ⚡ Quick winReplace
!flexwith Tailwind v4’s preferred important syntaxflex!(align with v4’s non-deprecated form).In Tailwind v4,
!flexis deprecated but still supported; switching toflex!avoids future breakage/lint warnings.File:
frontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx(line 11)🛠️ Suggested fix
- <LavaAnimate className="!flex w-full" particleCount={90} formedDelay={1800} meltAmount={3}> + <LavaAnimate className="flex! w-full" particleCount={90} formedDelay={1800} meltAmount={3}>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx` at line 11, The className on the LavaAnimate usage currently uses Tailwind v3's important syntax "!flex" which is deprecated; update the className string on the LavaAnimate component (the JSX element named LavaAnimate) to replace "!flex" with the Tailwind v4 preferred "flex!" while keeping the rest of the classes (e.g., "w-full") unchanged so the prop reads like "flex! w-full".frontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsx (1)
10-10: ⚡ Quick winUpdate Tailwind v4 important syntax: use
flex!instead of!flex
This project uses Tailwind v4 (frontend/package.json), where the leading-!form like!flexis deprecated but still supported for compatibility—switching to the suffix form keeps styles consistent.🛠️ Suggested fix
- <LavaAnimate className="!flex w-full justify-center" particleCount={120} formedDelay={1800} meltAmount={10} duration={3.5} particleSize={[15, 38]}> + <LavaAnimate className="flex! w-full justify-center" particleCount={120} formedDelay={1800} meltAmount={10} duration={3.5} particleSize={[15, 38]}>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsx` at line 10, Replace deprecated leading-! Tailwind syntax in the About.jsx component: update the className passed to LavaAnimate (currently containing "!flex w-full justify-center") to use the Tailwind v4 suffix form by changing "!flex" to "flex!" so it reads "flex! w-full justify-center" to keep styles consistent with Tailwind v4 conventions.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/Contact.jsx`:
- Around line 24-26: The controlProps assignment currently sets 'aria-disabled'
to a boolean/undefined; change it so aria-disabled uses the string "true" when
disabled and is omitted otherwise. Specifically, in the controlProps conditional
that checks Tag === motion.button, update the non-button branch to set {
'aria-disabled': disabled ? 'true' : undefined } (keep the motion.button branch
as { disabled: disabled || undefined }); this ensures aria-disabled conforms to
ARIA spec while preserving existing behavior.
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsx`:
- Around line 51-64: The TileSnappingText usages are passing hardcoded fallback
strings (data.name || "Shakti Shrey" and data.title || "Full Stack Developer");
remove those fixed identity fallbacks so the component only renders real profile
data: either pass an empty string or conditionally render TileSnappingText only
when data.name / data.title exist (refer to the TileSnappingText instances in
this file), ensuring no hardcoded personal identity appears when data is
missing.
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/MosaicImage.jsx`:
- Around line 55-74: The tiles currently render a visually-hidden <span
className="sr-only">{alt}</span> inside each motion.div causing repeated alt
announcements; instead mark each tile as decorative (add aria-hidden="true" to
the motion.div or otherwise remove the sr-only span) and expose one single
accessible image node with the real alt text (for example a single <img> or a
single sr-only element outside the tile map). Update the tile rendering in
MosaicImage.jsx (the motion.div instances keyed by `${tile.r}-${tile.c}`) to be
aria-hidden and remove the per-tile sr-only span, and ensure one central
accessible element uses the alt string.
In `@frontend/src/components/portfolio/templates/Page_Turner/ContactPage.jsx`:
- Around line 45-47: The inputs and textarea in ContactPage.jsx currently rely
only on placeholders (value={form.name}, value={form.email},
value={form.message} with onChange using setForm), so add accessible labels by
giving each control a unique id (e.g. nameInput, emailInput, messageInput) and
adding corresponding <label htmlFor="..."> elements with visible or
visually-hidden text, or at minimum add descriptive aria-label attributes to the
<input> and <textarea> (e.g. aria-label="Name", aria-label="Email",
aria-label="Message"); keep the existing placeholders and onChange handlers
(setForm) intact and ensure the textarea also receives the id/aria-label.
In `@frontend/src/components/portfolio/templates/Page_Turner/shared.jsx`:
- Around line 75-77: Guard uses of event.target before calling .closest: ensure
event.target is an Element (or has a closest method) before assigning to target
and invoking target.closest; update the handler around the
target/scrollableParent logic (the variables target, scrollableParent and the
call to .closest) to first check e.g. event.target instanceof Element (or
Boolean(event.target && event.target.closest)) and only call .closest when that
check passes, otherwise treat scrollableParent as null/undefined and skip the
scrolling logic.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Contact.jsx`:
- Line 9: Update Tailwind v4 important-suffix syntax by replacing the old
"!flex" important modifier with the new "flex!" form in the Volcanic_Forge
template components; specifically change the className on the LavaAnimate usage
(LavaAnimate className="!flex w-full justify-center" → use "flex! w-full
justify-center") and make the same replacement in the other components mentioned
(Projects, Skills, Experience, Contact, About) wherever "!flex" appears so they
use the "flex!" suffix form.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Experience.jsx`:
- Line 10: Update the Tailwind important modifier in the LavaAnimate component's
className: locate the JSX element LavaAnimate and replace the old prefix syntax
"!flex" with the Tailwind v4 suffix form "flex!" inside the className string
(e.g., className="!flex w-full flex-col" -> className="flex! w-full flex-col");
also scan the same file for any other "!<utility>" occurrences and convert them
to the "<utility>!" suffix form to keep Tailwind v4 syntax consistent.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Hero.jsx`:
- Around line 37-43: The icon-only social links rendered by motion.a lack
accessible names; update the anchor (motion.a) to include a clear accessible
name by adding an aria-label (e.g., aria-label={item.label || item.name ||
item.url}) and/or include a visually-hidden text node (screen-reader-only span)
inside the anchor alongside <item.icon> so assistive technologies can identify
the link; ensure you reference the same item object used for icon and
waveGradient and provide a sensible fallback if item.label is missing.
---
Nitpick comments:
In
`@frontend/src/components/portfolio/templates/Mosaic_Assemble/Testimonials.jsx`:
- Line 31: Replace the unstable array index key in the Testimonials component
map (currently key={i}) with a stable unique identifier: if each testimonial
object has an id use key={t.id}; otherwise derive a stable key from testimonial
fields (e.g., combine t.name and t.role) when mapping over the testimonials (the
mapped item is referenced as t) so React can track items reliably during
reorders/filters.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsx`:
- Line 10: Replace deprecated leading-! Tailwind syntax in the About.jsx
component: update the className passed to LavaAnimate (currently containing
"!flex w-full justify-center") to use the Tailwind v4 suffix form by changing
"!flex" to "flex!" so it reads "flex! w-full justify-center" to keep styles
consistent with Tailwind v4 conventions.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx`:
- Line 11: The className on the LavaAnimate usage currently uses Tailwind v3's
important syntax "!flex" which is deprecated; update the className string on the
LavaAnimate component (the JSX element named LavaAnimate) to replace "!flex"
with the Tailwind v4 preferred "flex!" while keeping the rest of the classes
(e.g., "w-full") unchanged so the prop reads like "flex! w-full".
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx`:
- Around line 26-42: The ember props are being re-generated on every render
causing animation jumps; in GlobalBackground.jsx create a stable emberConfigs
array (use useMemo) that maps each ember index to random values (size, duration
computed using PARTICLE_SPEED, delay, startX, x drift, opacity peak, and any
precomputed blur/boxShadow factors using PARTICLE_BRIGHTNESS) and then use
emberConfigs[i] inside the embers.map render (use a stable key from the config
or index) instead of calling Math.random inline so the per-particle config is
computed once and reused across re-renders.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b19040ea-45ab-4ba9-abe5-43933ce46ad8
📒 Files selected for processing (31)
frontend/src/components/portfolio/templates/Mosaic_Assemble/About.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Contact.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Experience.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/MosaicImage.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Projects.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/ScatterText.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Skills.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/Testimonials.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/TileSnappingText.jsxfrontend/src/components/portfolio/templates/Mosaic_Assemble/index.jsxfrontend/src/components/portfolio/templates/Page_Turner/AboutPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/BackCoverPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/ContactPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/ExperiencePage.jsxfrontend/src/components/portfolio/templates/Page_Turner/HeroPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/ProjectsPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/SkillsPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/TestimonialsPage.jsxfrontend/src/components/portfolio/templates/Page_Turner/index.jsxfrontend/src/components/portfolio/templates/Page_Turner/shared.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/LavaAnimate.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Contact.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Experience.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Hero.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Projects.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/SectionHeader.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/index.jsx
Comment on lines
+24
to
+26
| const controlProps = Tag === motion.button | ||
| ? { disabled: disabled || undefined } | ||
| : { 'aria-disabled': disabled || undefined }; |
Contributor
There was a problem hiding this comment.
Correct aria-disabled to use string value.
The aria-disabled attribute expects a string value "true" or "false", not a boolean or undefined. Per ARIA spec, the attribute should either be set to the string "true" or omitted entirely.
🛠️ Proposed fix
const Tag = disabled ? motion.button : motion.a;
const controlProps = Tag === motion.button
- ? { disabled: disabled || undefined }
- : { 'aria-disabled': disabled || undefined };
+ ? { disabled }
+ : disabled ? { 'aria-disabled': 'true' } : {};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const controlProps = Tag === motion.button | |
| ? { disabled: disabled || undefined } | |
| : { 'aria-disabled': disabled || undefined }; | |
| const controlProps = Tag === motion.button | |
| ? { disabled } | |
| : disabled ? { 'aria-disabled': 'true' } : {}; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/Contact.jsx`
around lines 24 - 26, The controlProps assignment currently sets 'aria-disabled'
to a boolean/undefined; change it so aria-disabled uses the string "true" when
disabled and is omitted otherwise. Specifically, in the controlProps conditional
that checks Tag === motion.button, update the non-button branch to set {
'aria-disabled': disabled ? 'true' : undefined } (keep the motion.button branch
as { disabled: disabled || undefined }); this ensures aria-disabled conforms to
ARIA spec while preserving existing behavior.
Comment on lines
+51
to
+64
| <TileSnappingText | ||
| text={data.name || "Shakti Shrey"} | ||
| className="text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-200 to-slate-400" | ||
| baseDelay={0.1} | ||
| /> | ||
| </h1> | ||
| </div> | ||
|
|
||
| {/* 2. Subtitle Description */} | ||
| <div className="mb-12 w-full overflow-visible flex justify-center"> | ||
| <p className="text-xl sm:text-2xl md:text-3xl font-medium tracking-tight"> | ||
| <TileSnappingText | ||
| text={data.title || "Full Stack Developer"} | ||
| className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-teal-300 to-indigo-400" |
Contributor
There was a problem hiding this comment.
Remove hardcoded profile identity fallbacks in data-driven content.
Lines 52-53 and 63-64 can render fixed identity text when data is absent, which risks showing the wrong profile content.
Proposed fix
<TileSnappingText
- text={data.name || "Shakti Shrey"}
+ text={data.name ?? ""}
className="text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-200 to-slate-400"
baseDelay={0.1}
/>
@@
<TileSnappingText
- text={data.title || "Full Stack Developer"}
+ text={data.title ?? ""}
className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-teal-300 to-indigo-400"
baseDelay={0.4}
/>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/Hero.jsx` around
lines 51 - 64, The TileSnappingText usages are passing hardcoded fallback
strings (data.name || "Shakti Shrey" and data.title || "Full Stack Developer");
remove those fixed identity fallbacks so the component only renders real profile
data: either pass an empty string or conditionally render TileSnappingText only
when data.name / data.title exist (refer to the TileSnappingText instances in
this file), ensuring no hardcoded personal identity appears when data is
missing.
Comment on lines
+55
to
+74
| <motion.div | ||
| key={`${tile.r}-${tile.c}`} | ||
| initial={{ opacity: 0, x: tile.x, y: tile.y, rotate: tile.rot, scale: tile.scale }} | ||
| variants={{ | ||
| hidden: {}, | ||
| show: { | ||
| opacity: 1, x: 0, y: 0, rotate: 0, scale: 1, | ||
| transition: { ...tile.spring, delay: tile.delay }, | ||
| }, | ||
| }} | ||
| className="relative overflow-hidden shadow-sm" | ||
| style={{ | ||
| backgroundImage: `url(${src})`, | ||
| backgroundSize: `${cols * 100}% ${rows * 100}%`, | ||
| backgroundPosition: `${-tile.c * 100}% ${-tile.r * 100}%`, | ||
| backgroundRepeat: 'no-repeat', | ||
| }} | ||
| > | ||
| <span className="sr-only">{alt}</span> | ||
| </motion.div> |
Contributor
There was a problem hiding this comment.
Avoid repeating image alt text for every tile.
Line 73 duplicates screen-reader text per tile, which can cause the same alt to be announced many times. Keep a single accessible image node and hide decorative tiles from assistive tech.
Proposed fix
- <motion.div
+ <motion.div
key={`${tile.r}-${tile.c}`}
+ aria-hidden="true"
initial={{ opacity: 0, x: tile.x, y: tile.y, rotate: tile.rot, scale: tile.scale }}
variants={{
hidden: {},
show: {
opacity: 1, x: 0, y: 0, rotate: 0, scale: 1,
transition: { ...tile.spring, delay: tile.delay },
},
}}
className="relative overflow-hidden shadow-sm"
style={{
backgroundImage: `url(${src})`,
backgroundSize: `${cols * 100}% ${rows * 100}%`,
backgroundPosition: `${-tile.c * 100}% ${-tile.r * 100}%`,
backgroundRepeat: 'no-repeat',
}}
>
- <span className="sr-only">{alt}</span>
</motion.div>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <motion.div | |
| key={`${tile.r}-${tile.c}`} | |
| initial={{ opacity: 0, x: tile.x, y: tile.y, rotate: tile.rot, scale: tile.scale }} | |
| variants={{ | |
| hidden: {}, | |
| show: { | |
| opacity: 1, x: 0, y: 0, rotate: 0, scale: 1, | |
| transition: { ...tile.spring, delay: tile.delay }, | |
| }, | |
| }} | |
| className="relative overflow-hidden shadow-sm" | |
| style={{ | |
| backgroundImage: `url(${src})`, | |
| backgroundSize: `${cols * 100}% ${rows * 100}%`, | |
| backgroundPosition: `${-tile.c * 100}% ${-tile.r * 100}%`, | |
| backgroundRepeat: 'no-repeat', | |
| }} | |
| > | |
| <span className="sr-only">{alt}</span> | |
| </motion.div> | |
| <motion.div | |
| key={`${tile.r}-${tile.c}`} | |
| aria-hidden="true" | |
| initial={{ opacity: 0, x: tile.x, y: tile.y, rotate: tile.rot, scale: tile.scale }} | |
| variants={{ | |
| hidden: {}, | |
| show: { | |
| opacity: 1, x: 0, y: 0, rotate: 0, scale: 1, | |
| transition: { ...tile.spring, delay: tile.delay }, | |
| }, | |
| }} | |
| className="relative overflow-hidden shadow-sm" | |
| style={{ | |
| backgroundImage: `url(${src})`, | |
| backgroundSize: `${cols * 100}% ${rows * 100}%`, | |
| backgroundPosition: `${-tile.c * 100}% ${-tile.r * 100}%`, | |
| backgroundRepeat: 'no-repeat', | |
| }} | |
| > | |
| </motion.div> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/Mosaic_Assemble/MosaicImage.jsx`
around lines 55 - 74, The tiles currently render a visually-hidden <span
className="sr-only">{alt}</span> inside each motion.div causing repeated alt
announcements; instead mark each tile as decorative (add aria-hidden="true" to
the motion.div or otherwise remove the sr-only span) and expose one single
accessible image node with the real alt text (for example a single <img> or a
single sr-only element outside the tile map). Update the tile rendering in
MosaicImage.jsx (the motion.div instances keyed by `${tile.r}-${tile.c}`) to be
aria-hidden and remove the per-tile sr-only span, and ensure one central
accessible element uses the alt string.
Comment on lines
+45
to
+47
| <input value={form.name} onChange={(e) => setForm(c => ({...c, name: e.target.value}))} placeholder="NAME" className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | ||
| <input value={form.email} onChange={(e) => setForm(c => ({...c, email: e.target.value}))} placeholder="EMAIL" className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | ||
| <textarea value={form.message} onChange={(e) => setForm(c => ({...c, message: e.target.value}))} placeholder="MESSAGE" rows={3} className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500 resize-none" /> |
Contributor
There was a problem hiding this comment.
Add accessible labels to the form controls.
These fields currently depend on placeholders only, which is not sufficient for assistive tech.
♿ Proposed fix
- <input value={form.name} onChange={(e) => setForm(c => ({...c, name: e.target.value}))} placeholder="NAME" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" />
- <input value={form.email} onChange={(e) => setForm(c => ({...c, email: e.target.value}))} placeholder="EMAIL" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" />
- <textarea value={form.message} onChange={(e) => setForm(c => ({...c, message: e.target.value}))} placeholder="MESSAGE" rows={3} className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500 resize-none" />
+ <label htmlFor="contact-name" className="sr-only">Name</label>
+ <input id="contact-name" value={form.name} onChange={(e) => setForm(c => ({...c, name: e.target.value}))} placeholder="NAME" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" />
+ <label htmlFor="contact-email" className="sr-only">Email</label>
+ <input id="contact-email" type="email" value={form.email} onChange={(e) => setForm(c => ({...c, email: e.target.value}))} placeholder="EMAIL" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" />
+ <label htmlFor="contact-message" className="sr-only">Message</label>
+ <textarea id="contact-message" value={form.message} onChange={(e) => setForm(c => ({...c, message: e.target.value}))} placeholder="MESSAGE" rows={3} className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500 resize-none" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <input value={form.name} onChange={(e) => setForm(c => ({...c, name: e.target.value}))} placeholder="NAME" className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | |
| <input value={form.email} onChange={(e) => setForm(c => ({...c, email: e.target.value}))} placeholder="EMAIL" className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | |
| <textarea value={form.message} onChange={(e) => setForm(c => ({...c, message: e.target.value}))} placeholder="MESSAGE" rows={3} className="w-full rounded border border-slate-800 bg-[#020617] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500 resize-none" /> | |
| <label htmlFor="contact-name" className="sr-only">Name</label> | |
| <input id="contact-name" value={form.name} onChange={(e) => setForm(c => ({...c, name: e.target.value}))} placeholder="NAME" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | |
| <label htmlFor="contact-email" className="sr-only">Email</label> | |
| <input id="contact-email" type="email" value={form.email} onChange={(e) => setForm(c => ({...c, email: e.target.value}))} placeholder="EMAIL" className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500" /> | |
| <label htmlFor="contact-message" className="sr-only">Message</label> | |
| <textarea id="contact-message" value={form.message} onChange={(e) => setForm(c => ({...c, message: e.target.value}))} placeholder="MESSAGE" rows={3} className="w-full rounded border border-slate-800 bg-[`#020617`] px-3 py-2 text-[10px] text-white outline-none focus:border-cyan-500 resize-none" /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/Page_Turner/ContactPage.jsx`
around lines 45 - 47, The inputs and textarea in ContactPage.jsx currently rely
only on placeholders (value={form.name}, value={form.email},
value={form.message} with onChange using setForm), so add accessible labels by
giving each control a unique id (e.g. nameInput, emailInput, messageInput) and
adding corresponding <label htmlFor="..."> elements with visible or
visually-hidden text, or at minimum add descriptive aria-label attributes to the
<input> and <textarea> (e.g. aria-label="Name", aria-label="Email",
aria-label="Message"); keep the existing placeholders and onChange handlers
(setForm) intact and ensure the textarea also receives the id/aria-label.
Comment on lines
+75
to
+77
| const target = event.target | ||
| const scrollableParent = target.closest('.custom-scrollbar, .overflow-y-auto') | ||
|
|
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify that `.closest()` is called on `event.target` without an Element guard.
rg -n -C3 'event\.target|target\.closest|instanceof Element' frontend/src/components/portfolio/templates/Page_Turner/shared.jsxRepository: anurag3407/career-pilot
Length of output: 374
Guard event.target before calling .closest()
frontend/src/components/portfolio/templates/Page_Turner/shared.jsx calls target.closest(...) where target is assigned directly from event.target; if event.target isn’t an Element, closest can throw during wheel handling.
<details>
<summary>🔧 Proposed fix</summary>
- const target = event.target
- const scrollableParent = target.closest('.custom-scrollbar, .overflow-y-auto')
+ const target = event.target instanceof Element ? event.target : null
+ const scrollableParent = target?.closest('.custom-scrollbar, .overflow-y-auto')</details>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/Page_Turner/shared.jsx` around
lines 75 - 77, Guard uses of event.target before calling .closest: ensure
event.target is an Element (or has a closest method) before assigning to target
and invoking target.closest; update the handler around the
target/scrollableParent logic (the variables target, scrollableParent and the
call to .closest) to first check e.g. event.target instanceof Element (or
Boolean(event.target && event.target.closest)) and only call .closest when that
check passes, otherwise treat scrollableParent as null/undefined and skip the
scrolling logic.
Comment on lines
+37
to
+43
| <motion.a | ||
| key={idx} href={item.url} target="_blank" rel="noreferrer" initial="initial" whileHover="hover" | ||
| className={`lava-btn relative inline-flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full overflow-hidden border p-0 ${item.toneClass}`} | ||
| > | ||
| <motion.span variants={lavaVariants} className="wave-fill absolute left-0 top-0 bottom-0" style={{ width: '0%', backgroundImage: item.waveGradient }} /> | ||
| <item.icon className="relative z-10 block h-5 w-5 md:h-6 md:w-6 shrink-0" /> | ||
| </motion.a> |
Contributor
There was a problem hiding this comment.
Add accessible names to icon-only social links.
Line 37 renders icon-only anchors without an accessible name, so assistive tech users can’t identify destination links reliably.
♿ Suggested fix
<motion.a
key={idx} href={item.url} target="_blank" rel="noreferrer" initial="initial" whileHover="hover"
+ aria-label={item.label}
+ title={item.label}
className={`lava-btn relative inline-flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full overflow-hidden border p-0 ${item.toneClass}`}
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <motion.a | |
| key={idx} href={item.url} target="_blank" rel="noreferrer" initial="initial" whileHover="hover" | |
| className={`lava-btn relative inline-flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full overflow-hidden border p-0 ${item.toneClass}`} | |
| > | |
| <motion.span variants={lavaVariants} className="wave-fill absolute left-0 top-0 bottom-0" style={{ width: '0%', backgroundImage: item.waveGradient }} /> | |
| <item.icon className="relative z-10 block h-5 w-5 md:h-6 md:w-6 shrink-0" /> | |
| </motion.a> | |
| <motion.a | |
| key={idx} href={item.url} target="_blank" rel="noreferrer" initial="initial" whileHover="hover" | |
| aria-label={item.label} | |
| title={item.label} | |
| className={`lava-btn relative inline-flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-full overflow-hidden border p-0 ${item.toneClass}`} | |
| > | |
| <motion.span variants={lavaVariants} className="wave-fill absolute left-0 top-0 bottom-0" style={{ width: '0%', backgroundImage: item.waveGradient }} /> | |
| <item.icon className="relative z-10 block h-5 w-5 md:h-6 md:w-6 shrink-0" /> | |
| </motion.a> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/components/Hero.jsx`
around lines 37 - 43, The icon-only social links rendered by motion.a lack
accessible names; update the anchor (motion.a) to include a clear accessible
name by adding an aria-label (e.g., aria-label={item.label || item.name ||
item.url}) and/or include a visually-hidden text node (screen-reader-only span)
inside the anchor alongside <item.icon> so assistive technologies can identify
the link; ensure you reference the same item object used for icon and
waveGradient and provide a sensible fallback if item.label is missing.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx`:
- Around line 51-65: The ember animation uses infinite motion on the motion.div
mapped from emberConfigs and should respect reduced-motion preferences: import
and call useReducedMotion (from framer-motion) in the GlobalBackground
component, store e.g. const shouldReduce = useReducedMotion(), and if
shouldReduce is true replace the motion animation with a static rendering
(either render a non-animated <div> or pass no animate/transition and only set
final opacity/transform) for the mapped ember elements (the motion.div created
inside the emberConfigs.map). Ensure the branch still applies the same
size/position/style (width/height/left/filter/boxShadow/opacity) but omits
repeat: Infinity and keyframe arrays when reduced motion is enabled.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c1009188-b7cb-4e98-bc6d-a844c609b4b0
📒 Files selected for processing (6)
frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Contact.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Experience.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Projects.jsxfrontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx
🚧 Files skipped from review as they are similar to previous changes (5)
- frontend/src/components/portfolio/templates/Volcanic_Forge/components/Projects.jsx
- frontend/src/components/portfolio/templates/Volcanic_Forge/components/Contact.jsx
- frontend/src/components/portfolio/templates/Volcanic_Forge/components/About.jsx
- frontend/src/components/portfolio/templates/Volcanic_Forge/components/Experience.jsx
- frontend/src/components/portfolio/templates/Volcanic_Forge/components/Skills.jsx
Comment on lines
+51
to
+65
| {emberConfigs.map((config) => { | ||
| return ( | ||
| <motion.div | ||
| key={config.key} | ||
| className="absolute bottom-0 rounded-full bg-orange-500" | ||
| style={{ | ||
| width: config.size, | ||
| height: config.size, | ||
| left: `${config.startX}vw`, | ||
| filter: `blur(${config.blur}px) brightness(${PARTICLE_BRIGHTNESS})`, | ||
| boxShadow: `0 0 ${config.glowSpread}px ${config.glowBlur}px rgba(249, 115, 22, ${0.5 * Math.min(PARTICLE_BRIGHTNESS, 2)})` | ||
| }} | ||
| animate={{ y: ['10vh', '-110vh'], x: [0, config.driftX], opacity: [0, config.opacityPeak, 0] }} | ||
| transition={{ duration: config.duration, repeat: Infinity, delay: config.delay, ease: 'linear' }} | ||
| /> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Framer Motion v12 documentation for useReducedMotion and recommended pattern to disable or simplify infinite animations for prefers-reduced-motion users.
💡 Result:
Framer Motion v12 (now Motion for React) “reduced motion” recommendations for infinite animations 1) Per-component pattern: useReducedMotion Use the useReducedMotion hook to detect whether the user has enabled “Reduced Motion”. It returns true if reduced motion is enabled, and it updates in response to changes. [1] [2] Recommended pattern: when reduced motion is true, switch an infinite/looping animation to a non-moving alternative (e.g., keep x/y fixed, use opacity-only, or use a finite transition). Example (turn an infinite horizontal marquee into a static position): import { motion, useReducedMotion } from "motion/react" export function AccessibleMarquee { const shouldReduceMotion = useReducedMotion return ( <motion.div animate={{ x: shouldReduceMotion? 0: ["0%", "-100%"], }} transition={{ repeat: shouldReduceMotion? 0: Infinity, duration: 10, ease: "linear", }} />) } This matches the hook’s documented guidance that you can replace motion-sickness inducing x/y animations with simpler ones (like opacity) or otherwise change behavior based on reduced motion. [1] [2] 2) Site-wide pattern: MotionConfig with reducedMotion="user" If you want a site-wide policy, Motion provides a MotionConfig component with a reducedMotion option. MotionConfig reducedMotion accepts: - "user" (default): respect the user’s device setting [3] - "always" / "never": force reduced motion on or off (useful for debugging) [3] When reduced motion is on, Motion disables transform and layout animations, while other animations (e.g., opacity, backgroundColor) persist. [3] Example: import { MotionConfig, motion } from "motion/react" export function App { return ( <motion.div animate={{ x: 100 }} /> ) } This is the recommended “global” approach when you have many components and want consistent reduced-motion handling without sprinkling per-component conditionals. [3] How this maps to prefers-reduced-motion The library-level behavior is intended to reflect the device’s “Reduced Motion” setting (prefers-reduced-motion). The CSS prefers-reduced-motion media feature is explicitly designed to detect that preference. [4] Bottom line - For “disable/simplify infinite animations” specifically: gate your infinite repeat (e.g., repeat: Infinity and keyframed x/y loops) behind useReducedMotion, and use a static or opacity-only alternative when shouldReduceMotion is true. [1] - For broader coverage: wrap your app in MotionConfig reducedMotion="user" so transform/layout animations are disabled automatically for users who prefer reduced motion. [3]
Citations:
- 1: https://motion.dev/docs/react-use-reduced-motion
- 2: https://cdn.jsdelivr.net/npm/framer-motion@12.27.1/dist/types/index.d.ts
- 3: https://motion.dev/docs/react-accessibility
- 4: https://www.blogarama.com/marketing-blogs/1455472-best-digital-marketing-services-hyderabad-web-anatomy-blog/76330069-why-framer-motion-popular-react-development
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx"
if [ ! -f "$FILE" ]; then
echo "Missing file: $FILE"
exit 1
fi
echo "---- File: $FILE (relevant area) ----"
nl -ba "$FILE" | sed -n '1,140p'
echo "---- framer-motion imports in the file ----"
rg -n "from 'framer-motion'|from \"framer-motion\"|from 'motion/react'|useReducedMotion|MotionConfig|reducedMotion" "$FILE" || true
echo "---- Package/dependency versions (best-effort) ----"
ls -la package.json frontend/package.json 2>/dev/null || true
if [ -f "package.json" ]; then
rg -n "\"framer-motion\"|\"motion\"" package.json || true
fi
if [ -f "frontend/package.json" ]; then
rg -n "\"framer-motion\"|\"motion\"" frontend/package.json || true
fi
echo "---- Search for existing reduced motion usage patterns ----"
rg -n "useReducedMotion|MotionConfig|reducedMotion" frontend/src || trueRepository: anurag3407/career-pilot
Length of output: 241
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx"
if [ ! -f "$FILE" ]; then
echo "Missing file: $FILE"
exit 1
fi
echo "---- File: $FILE (first ~140 lines with numbers) ----"
cat -n "$FILE" | sed -n '1,160p'
echo "---- framer-motion / reduced-motion imports & usage in the file ----"
rg -n "from 'framer-motion'|from \"framer-motion\"|from 'motion/react'|useReducedMotion|MotionConfig|reducedMotion|prefers-reduced-motion" "$FILE" || true
echo "---- package.json (dependency versions best-effort) ----"
if [ -f "package.json" ]; then
echo "== root package.json =="
cat -n package.json | sed -n '1,140p'
rg -n "\"framer-motion\"|\"motion\"" package.json || true
fi
if [ -f "frontend/package.json" ]; then
echo "== frontend/package.json =="
cat -n frontend/package.json | sed -n '1,220p'
rg -n "\"framer-motion\"|\"motion\"" frontend/package.json || true
fi
echo "---- Search for existing reduced motion usage patterns ----"
rg -n "useReducedMotion|MotionConfig|reducedMotion" frontend/src || trueRepository: anurag3407/career-pilot
Length of output: 6171
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the file that already uses useReducedMotion
FILE="frontend/src/components/portfolio/templates/Mosaic_Assemble/ScatterText.jsx"
if [ -f "$FILE" ]; then
echo "---- $FILE (first 120 lines) ----"
cat -n "$FILE" | sed -n '1,160p'
fi
echo "---- Any other reduced-motion related usage ----"
rg -n "useReducedMotion|MotionConfig|reducedMotion|prefers-reduced-motion" frontend/src || trueRepository: anurag3407/career-pilot
Length of output: 2169
Respect prefers-reduced-motion for infinite ember animation.
frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx animates ember keyframes with transition repeat: Infinity (lines 63-64) but doesn’t gate the animation for reduced-motion users. Apply useReducedMotion (already used in Mosaic_Assemble/ScatterText.jsx) to switch to a static/opacity-only rendering when reduced motion is enabled.
♿ Proposed refactor
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
export default function GlobalBackground() {
+ const shouldReduceMotion = useReducedMotion();
const emberConfigs = useMemo(() => (
Array.from({ length: 40 }, (_, index) => {
const size = Math.random() * 4 + 1;
@@
<motion.div
key={config.key}
className="absolute bottom-0 rounded-full bg-orange-500"
style={{
width: config.size,
height: config.size,
left: `${config.startX}vw`,
filter: `blur(${config.blur}px) brightness(${PARTICLE_BRIGHTNESS})`,
boxShadow: `0 0 ${config.glowSpread}px ${config.glowBlur}px rgba(249, 115, 22, ${0.5 * Math.min(PARTICLE_BRIGHTNESS, 2)})`
}}
- animate={{ y: ['10vh', '-110vh'], x: [0, config.driftX], opacity: [0, config.opacityPeak, 0] }}
- transition={{ duration: config.duration, repeat: Infinity, delay: config.delay, ease: 'linear' }}
+ animate={
+ shouldReduceMotion
+ ? { opacity: config.opacityPeak * 0.35 }
+ : { y: ['10vh', '-110vh'], x: [0, config.driftX], opacity: [0, config.opacityPeak, 0] }
+ }
+ transition={
+ shouldReduceMotion
+ ? { duration: 0 }
+ : { duration: config.duration, repeat: Infinity, delay: config.delay, ease: 'linear' }
+ }
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {emberConfigs.map((config) => { | |
| return ( | |
| <motion.div | |
| key={config.key} | |
| className="absolute bottom-0 rounded-full bg-orange-500" | |
| style={{ | |
| width: config.size, | |
| height: config.size, | |
| left: `${config.startX}vw`, | |
| filter: `blur(${config.blur}px) brightness(${PARTICLE_BRIGHTNESS})`, | |
| boxShadow: `0 0 ${config.glowSpread}px ${config.glowBlur}px rgba(249, 115, 22, ${0.5 * Math.min(PARTICLE_BRIGHTNESS, 2)})` | |
| }} | |
| animate={{ y: ['10vh', '-110vh'], x: [0, config.driftX], opacity: [0, config.opacityPeak, 0] }} | |
| transition={{ duration: config.duration, repeat: Infinity, delay: config.delay, ease: 'linear' }} | |
| /> | |
| {emberConfigs.map((config) => { | |
| return ( | |
| <motion.div | |
| key={config.key} | |
| className="absolute bottom-0 rounded-full bg-orange-500" | |
| style={{ | |
| width: config.size, | |
| height: config.size, | |
| left: `${config.startX}vw`, | |
| filter: `blur(${config.blur}px) brightness(${PARTICLE_BRIGHTNESS})`, | |
| boxShadow: `0 0 ${config.glowSpread}px ${config.glowBlur}px rgba(249, 115, 22, ${0.5 * Math.min(PARTICLE_BRIGHTNESS, 2)})` | |
| }} | |
| animate={ | |
| shouldReduceMotion | |
| ? { opacity: config.opacityPeak * 0.35 } | |
| : { y: ['10vh', '-110vh'], x: [0, config.driftX], opacity: [0, config.opacityPeak, 0] } | |
| } | |
| transition={ | |
| shouldReduceMotion | |
| ? { duration: 0 } | |
| : { duration: config.duration, repeat: Infinity, delay: config.delay, ease: 'linear' } | |
| } | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@frontend/src/components/portfolio/templates/Volcanic_Forge/GlobalBackground.jsx`
around lines 51 - 65, The ember animation uses infinite motion on the motion.div
mapped from emberConfigs and should respect reduced-motion preferences: import
and call useReducedMotion (from framer-motion) in the GlobalBackground
component, store e.g. const shouldReduce = useReducedMotion(), and if
shouldReduce is true replace the motion animation with a static rendering
(either render a non-animated <div> or pass no animate/transition and only set
final opacity/transform) for the mapped ember elements (the motion.div created
inside the emberConfigs.map). Ensure the branch still applies the same
size/position/style (width/height/left/filter/boxShadow/opacity) but omits
repeat: Infinity and keyframe arrays when reduced motion is enabled.
anurag3407
approved these changes
May 28, 2026
anurag3407
added
level:advanced
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
User description
Description
This PR introduces the completely modularized
Volcanic_Forgeportfolio template. It features highly responsive structures that scale naturally on all modern desktop resolutions without distortion, completely running on dynamic data structures.Core Animation Highlights
LavaAnimate): Launches a dense shower of small, asymmetrical, tumbling molten droplets that dynamically fuse together to organically forge elements right as they enter the viewport.textMelt): Drives a persistent, multi-layered fluid wave and thermal glow underneath titles to simulate ongoing glowing heat radiation.EmbersBackground): Runs a localized canvas-simulation of glowing orange embers continuously rising and shifting across the backdrop.CrackedEarthOverlay): Projects a clear, high-contrast structural tectonic fissure network over the basalt background to establish the volcanic bedrock environment.Type of Change
Related Issue
Fixes #1955
Testing
Checklist
Screenshots (MANDATORY for UI/UX changes)
Screen.Recording.2026-05-28.at.2.06.58.PM.mov
CodeAnt-AI Description
Add fully built portfolio templates for Mosaic Assemble and Volcanic Forge
What Changed
Impact
✅ Complete portfolio pages instead of placeholder landing screens✅ More reliable navigation in long, scrollable page-flip layouts✅ Clearer contact and project browsing across both themes💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit