Skip to content

feat: landing page feature cards interactive border glow(closes #2280)#2286

Open
shauryavardhan1307 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
shauryavardhan1307:feat/landing-page-border-glow
Open

feat: landing page feature cards interactive border glow(closes #2280)#2286
shauryavardhan1307 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
shauryavardhan1307:feat/landing-page-border-glow

Conversation

@shauryavardhan1307

Copy link
Copy Markdown
Contributor
## Summary

Implements a dynamic, mouse-pointer tracking border glow effect on the landing page feature cards (Live GitHub Signals, PR Momentum, Goal Tracking, and Shareable Profile). The glow follows the user's cursor along the card's border boundaries using CSS variables and a masked pseudo-element, enhancing the premium aesthetic and interactivity of the DevTrack landing page.

Closes #2280 

---

## Type of Change

- [ ] 🐛 Bug fix (non-breaking change that fixes an issue)
- [x] ✨ New feature (non-breaking change that adds functionality)
- [ ] 💥 Breaking change (fix or feature that changes existing behavior)
- [ ] 📝 Documentation update
- [ ] ♻️ Refactor / code cleanup (no functional change)
- [ ] ⚡ Performance improvement
- [ ] 🔒 Security fix
- [ ] 🧪 Tests only

---

## What Changed

- **[`src/components/landing/LandingPage.tsx`](file:///d:/devtrack/src/components/landing/LandingPage.tsx)**: Updated the `use3DTilt` hook to set `--mouse-x` and `--mouse-y` CSS properties on mousemove. Cleaned up redundant inline border and background styles from `AboutHighlightCard`.
- **[`src/app/globals.css`](file:///d:/devtrack/src/app/globals.css)**: Implemented a masked `::before` pseudo-element for `.lnd-about-card` using `radial-gradient` and `mask-composite: exclude` to confine the glow precisely to the card borders.

---

## How to Test

1. Navigate to the landing page `/` in your local development browser.
2. Scroll to the "About DevTrack" section.
3. Hover your cursor over one of the feature cards (e.g. *Live GitHub Signals*).
4. Verify that a localized, sharp border glow follows the cursor's movement.
5. Verify that it degrades gracefully to standard hover styles on mobile viewports.

**Expected result:**
Card borders glow dynamically in response to mouse movement on hover.

---

## Screenshots / Recordings

N/A

---

## Checklist

- [x] Linked the related issue above
- [x] Self-reviewed my own diff
- [x] No unnecessary `console.log`, debug code, or commented-out blocks
- [x] `npm run lint` passes locally
- [x] No TypeScript errors (`npm run type-check`)
- [x] Added or updated tests where applicable
- [x] Updated documentation / comments if behavior changed

---

## Accessibility (UI changes only)

- [x] Keyboard navigation works correctly
- [x] Color contrast meets WCAG AA standard
- [x] ARIA labels / roles added where needed
- [x] Tested on mobile / responsive layout

---

## Additional Context

None.

@vercel

vercel Bot commented Jun 10, 2026

Copy link
Copy Markdown

@shauryavardhan1307 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:bug GSSoC type bonus: bug fix type:performance GSSoC type bonus: performance (+15 pts) labels Jun 10, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@shauryavardhan1307

Copy link
Copy Markdown
Contributor Author

Note on CI Failures (Dependency Lockfile Issue)

All CI checks (Build, Lint, Type Check, E2E, and Visual Regression) are currently failing in ~15-20 seconds. This is due to a pre-existing dependency lockfile integrity issue on the upstream/main branch and is completely unrelated to the changes in this PR.

Specifically, running npm ci (which runs in the CI environments) crashes immediately due to missing platform-specific packages in the lockfile:
npm error Missing: @parcel/watcher-linux-arm64-glibc@2.5.6 from lock file

I have verified locally that both npm run type-check and npm run lint pass with 0 errors on these feature card changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant