Add 3D hero orb and scroll-driven, scroll-aware backdrop by Yasar2019 · Pull Request #7 · Yasar2019/myPortfolio

Yasar2019 · 2025-12-19T14:37:09Z

Motivation

Give the portfolio a modern, professional visual polish with subtle 3D motion and parallax that does not distract from content.
Introduce a scroll-driven variable so background and hero visuals can react smoothly to user scrolling for richer, tactile UX.
Keep changes lightweight and CSS-driven to maintain performance and easy theming.

Description

Add a scroll progress driver in App.jsx that publishes --scroll-progress to :root using a requestAnimationFrame-friendly scroll listener.
Extend src/styles/GlobalStyles.js with --scroll-progress, subtle backdrop layers (body::before and body::after) and scroll-tied transforms/opacity to create a parallax/backdrop effect.
Enhance src/Components/Header.jsx with a positioned HeroScene containing an animated 3D Orb and Ring elements, and adjust header layering (z-index) so content sits above the visuals.
Make HeaderSection position: relative and overflow: hidden to contain the scene and enable parallax translation via var(--scroll-progress).

Testing

Started the local dev server with npm start (Parcel) — bundling completed successfully (server reported "Built in ...").
Verified the dev server responded with HTTP/1.1 200 OK via curl.
Attempted an automated Playwright screenshot of the running site, but the headless navigation failed to connect (network error). This did not affect the build step which succeeded.
No unit tests were added or run as part of this change.

Codex Task

github-actions · 2025-12-19T14:38:24Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://witty-mud-031b23a0f-7.eastus2.2.azurestaticapps.net

Copilot

Pull request overview

This PR introduces scroll-driven visual enhancements to the portfolio site, including a 3D animated hero orb with orbital rings and parallax backdrop effects that respond to scroll position.

Key Changes:

Implements scroll progress tracking using requestAnimationFrame for performance-optimized scroll detection
Adds CSS custom property --scroll-progress that updates dynamically as users scroll
Introduces a 3D animated orb with spinning rings in the header section, positioned behind content using z-index layering

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/App.jsx	Adds scroll progress tracking with `useEffect` hook that updates `--scroll-progress` CSS variable
src/styles/GlobalStyles.js	Defines `--scroll-progress` variable and creates scroll-reactive backdrop layers using `body::before` and `body::after` pseudo-elements
src/Components/Header.jsx	Introduces `HeroScene`, `Orb`, and `Ring` styled components with 3D transforms and animations; adds z-index layering to ensure content appears above decorative elements

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-19T14:48:32Z

+      <HeroScene>
+        <Orb>
+          <Ring />
+          <Ring />
+          <Ring />
+        </Orb>
+      </HeroScene>


The 3D orb and rings are purely decorative but may confuse screen reader users. Add aria-hidden="true" to the HeroScene component to hide it from assistive technologies.

Copilot · 2025-12-19T14:48:33Z

@@ -1,6 +1,6 @@
 // src/App.js


The file comment says "src/App.js" but the file is named "App.jsx". Update the comment to match the actual filename.

Suggested change

// src/App.js

// src/App.jsx

Copilot · 2025-12-19T14:48:33Z

+        0
+      )
+      scale(1.02);
+    filter: blur(0px);


The blur filter is set to 0px which has no effect. Either remove this line if no blur is intended, or set it to a non-zero value if a blur effect is desired.

Suggested change

filter: blur(0px);

Copilot · 2025-12-19T14:48:34Z

+  @keyframes orbSpin {
+    from {
+      transform: rotateX(18deg) rotateY(0deg);
+    }
+    to {
+      transform: rotateX(18deg) rotateY(360deg);
+    }
+  }


The keyframes animation is defined inside the styled component definition. While this works, it creates duplicate keyframe definitions in the generated CSS each time the component is used. Move the keyframes definition outside the styled component using styled-components' keyframes helper to avoid duplication and improve performance.

Copilot · 2025-12-19T14:48:34Z

+  @keyframes ringFloat {
+    0%,
+    100% {
+      filter: drop-shadow(0 0 8px rgba(255, 111, 97, 0.2));
+    }
+    50% {
+      filter: drop-shadow(0 0 18px rgba(73, 135, 255, 0.3));
+    }
+  }


The keyframes animation is defined inside the styled component definition. While this works, it creates duplicate keyframe definitions in the generated CSS each time the component is used. Move the keyframes definition outside the styled component using styled-components' keyframes helper to avoid duplication and improve performance.

github-actions · 2025-12-19T16:40:29Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://witty-mud-031b23a0f-7.eastus2.2.azurestaticapps.net

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-19T16:42:28Z

+
+    updateScrollProgress();
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    window.addEventListener('resize', handleScroll);


The resize event listener should use the passive option for better scroll performance, similar to the scroll listener. Resize handlers that don't call preventDefault can benefit from being marked as passive.

Suggested change

window.addEventListener('resize', handleScroll);

window.addEventListener('resize', handleScroll, { passive: true });

Copilot · 2025-12-19T16:42:29Z

+    inset: -20%;
+    pointer-events: none;
+    z-index: -1;
+    transition: transform 0.25s ease-out;


Using both transform and transition on pseudo-elements that update via CSS custom properties can cause layout thrashing. Since --scroll-progress changes frequently during scrolling, the transition: transform 0.25s will attempt to animate every scroll update, creating a laggy effect. Consider removing the transition property to allow transforms to update smoothly with the scroll position, or use will-change: transform to optimize rendering.

Suggested change

transition: transform 0.25s ease-out;

will-change: transform;

Copilot · 2025-12-19T16:42:29Z

+      <HeroScene>
+        <Orb>
+          <Ring />
+          <Ring />
+          <Ring />
+        </Orb>
+      </HeroScene>


The HeroScene, Orb, and Ring elements are decorative and use pointer-events: none, but they should have aria-hidden="true" to ensure screen readers skip them entirely. Consider adding this attribute to the HeroScene component to improve accessibility.

Copilot · 2025-12-19T16:42:29Z

+      )
+      rotate(calc(var(--scroll-progress) * 2deg));
  }



Users with vestibular motion disorders may experience discomfort from the scroll-driven parallax effects on the backdrop pseudo-elements. Consider adding a prefers-reduced-motion media query to disable the transform animations for users who have requested reduced motion in their system settings.

Suggested change

@media (prefers-reduced-motion: reduce) {

body::before,

body::after {

transition: none;

transform: none;

}

}

Copilot · 2025-12-19T16:42:30Z

+  &:nth-child(1) {
+    transform: rotateX(65deg) rotateZ(20deg) translateZ(25px);
+  }
+
+  &:nth-child(2) {
+    transform: rotateY(75deg) rotateZ(-15deg) translateZ(-10px);
+    animation-delay: 1.5s;
+  }
+
+  &:nth-child(3) {
+    transform: rotateX(80deg) rotateZ(80deg) translateZ(10px);
+    animation-delay: 3s;
+  }


The animation on the Ring component will not work as intended. The nth-child selectors apply static transforms that override the animation property. The ringFloat animation will be superseded by the transform declarations in the nth-child rules. Either remove the transform from nth-child selectors and apply them via CSS variables in the animation, or use a different approach to differentiate the rings.

Add interactive hero scene and scroll-aware backdrop

1f3b75d

Yasar2019 added the codex label Dec 19, 2025 — with ChatGPT Codex Connector

Yasar2019 requested a review from Copilot December 19, 2025 14:45

Copilot started reviewing on behalf of Yasar2019 December 19, 2025 14:46 View session

Copilot AI reviewed Dec 19, 2025

View reviewed changes

Add scroll reveal animations between sections

8f97325

Yasar2019 requested a review from Copilot December 19, 2025 16:39

Copilot started reviewing on behalf of Yasar2019 December 19, 2025 16:40 View session

Copilot AI reviewed Dec 19, 2025

View reviewed changes

Yasar2019 merged commit 009cdc9 into main Dec 19, 2025
8 checks passed

Yasar2019 deleted the codex/add-interactive-3d-design-elements branch December 19, 2025 17:00

	window.addEventListener('resize', handleScroll);
	window.addEventListener('resize', handleScroll, { passive: true });

	transition: transform 0.25s ease-out;
	will-change: transform;

+  @media (prefers-reduced-motion: reduce) {
+    body::before,
+    body::after {
+      transition: none;
+      transform: none;
+    }
+  }

Conversation

Yasar2019 commented Dec 19, 2025

Motivation

Description

Testing

Uh oh!

github-actions Bot commented Dec 19, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Dec 19, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants