About

[Samridhi-2007]

#44
User description
Description:
This PR introduces a new About page (/about/page.tsx) and a subtle sparkle effect from SparkleMeshBackground.jsx to the application with the following updates:

Features Added:
Fully responsive About page compatible with desktop and mobile layouts.
Smooth entrance and hover animations on all sections using Framer Motion for a professional look.
Feature cards with icon rotation, lift, and glow effects on hover.
Gradient header text and consistent color theme matching the app’s dark mode palette.
Mission section with smooth fade-in animation for emphasis.

CTA buttons:
"Get Started →" with gradient styling.
"Go to Home" button with icon and subtle hover scaling.

Added a crisp footer:
Thin border separation.
Light gray text consistent with theme.
Responsive and minimalistic design.

Purpose:
Enhances user experience by providing a visually engaging, informative About page while maintaining the app’s responsive and dark-themed UI.

Description of SparkleMeshBackground.jsx
Added a visually appealing SparkleMeshBackground component that creates a subtle, premium-looking animated sparkle effect behind the main heading section.
Keeps the page background jet black for a modern aesthetic.
Uses silver-blue glowing particles with smooth twinkling animation.
Sparkles are limited to the heading area, not spread across the full page.
Added depth variation and soft shimmer for a professional look.

Tech Used:
React (Canvas API for animation)
Custom JavaScript particle system

Purpose:
Enhances the hero section’s visual appeal with a refined, elegant sparkle effect while maintaining performance and minimal distraction.

Files Added/Modified
app/about/page.tsx – main About page component
/component/SparkleMeshBackground.jsx

Testing Notes:
Page tested across multiple screen sizes for responsiveness.
Animations verified for smooth transitions and hover effects.
CTA buttons navigate correctly.

Screenshot:

@kris70lesgo please review it

[vercel]

@Samridhi-2007 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Performance risk Description: The animation loop and resize listener are set up globally and persist for the component's lifetime, which is fine, but the canvas is full-screen with thousands of frame renders and 110 particles; ensure this background is only mounted where needed to avoid performance degradation or battery drain—consider throttling on hidden tabs via Page Visibility or reducing particles for low-power devices. SparkleMeshBackground.jsx [8-93] Referred Code const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let animationFrameId; const particles = []; const numParticles = 110; // slightly more for denser sparkle field const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener("resize", resize); const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 3; const spreadX = 420; const spreadY = 260; for (let i = 0; i < numParticles; i++) { const angle = Math.random() * Math.PI * 2; ... (clipped 65 lines)
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Reconsider custom canvas animation for sparkles Replace the custom canvas-based particle animation with a dedicated particle library. This would reduce custom code maintenance for a decorative feature and leverage a more specialized solution. Examples: src/components/SparkleMeshBackground.jsx [4-105] const SparkleMeshBackground = () => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); let animationFrameId; const particles = []; const numParticles = 110; // slightly more for denser sparkle field ... (clipped 92 lines) Solution Walkthrough: Before: // src/components/SparkleMeshBackground.jsx const SparkleMeshBackground = () => { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); const particles = []; // ... initialize 110 particles with custom properties ... const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p) => { // ... custom logic for movement, twinkle, and glow ... ctx.fillStyle = createRadialGradient(...); ctx.arc(p.x, p.y, ...); ctx.fill(); }); requestAnimationFrame(draw); }; draw(); // ... cleanup ... }, []); return <canvas ref={canvasRef} ... />; }; After: // src/components/SparkleMeshBackground.jsx import Particles from "react-tsparticles"; import { loadSlim } from "tsparticles-slim"; const SparkleMeshBackground = () => { // ... useEffect to load particles engine ... const particleOptions = { // ... declarative configuration for particles ... particles: { number: { value: 110 }, color: { value: "#ffffff" }, shape: { type: "circle" }, opacity: { value: { min: 0.2, max: 1 }, animation: { enable: true, speed: 2 } }, size: { value: { min: 0.3, max: 1.1 } }, move: { speed: 0.2, }, }, // ... other options for background, interactivity etc. ... }; return <Particles id="tsparticles" options={particleOptions} init={particlesInit} />; }; Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies the maintainability trade-off of a custom canvas implementation versus a library, which is a valid architectural point for a non-core visual feature.	Medium
Possible issue	Update animation center on resize Move the calculation of centerX and centerY into the resize function to ensure the particle animation remains correctly centered when the window is resized. src/components/SparkleMeshBackground.jsx [15-23] +let centerX, centerY; + const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; + centerX = canvas.width / 2; + centerY = canvas.height / 3; }; resize(); window.addEventListener("resize", resize); -const centerX = window.innerWidth / 2; -const centerY = window.innerHeight / 3; - Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a bug where the animation's center coordinates are not updated on resize, causing visual glitches, and provides a correct and necessary fix.	Medium
Update

[kris70lesgo]

@Samridhi-2007 can u add this component https://ui.aceternity.com/components/github-globe
i want to merge this pr
u dont have to make another pr just commit on this one

[Samridhi-2007]

@kris70lesgo yah okay

[Samridhi-2007]

@kris70lesgo I tried importing it but its quite irresponsive and sometime leading to react errors..

[kris70lesgo]

@Samridhi-2007 send me the issue u are facing and u can also use copilot or windsurf for assitance