An interactive 3D contact card and personal portal showcasing CSS spatial mathematics, mouse-tracking physics, and modern web aesthetics.
- Live Demo: contactraghav.web.app
ContactMe reimagines the traditional contact page into an engaging spatial experience. By calculating cursor coordinates in real time, the interface applies dynamic 3D perspective transforms, specular lighting highlights, and tactile spring physics to social and contact nodes.
[ User Cursor Movement (X, Y Coordinates) ]
|
[ Matrix Transform Math (JS) ]
|
[ 3D Perspective Tilt + Dynamic Lighting + Spring Physics ]
- Real-Time Cursor Physics: Smooth 3D rotational tilt reacting to cursor velocity and position.
- Pure Web Standards: Built using clean HTML5, modern CSS3 3D transforms (
perspective,rotateX,rotateY,transform-style: preserve-3d), and Vanilla JavaScript for maximum frame rates. - Responsive Layout: Automatically adapts from desktop hover-based spatial matrices to touch-friendly mobile gestures.
- Instant Loading: Zero heavy third-party framework dependencies, resulting in sub-50KB total asset weight.
index.html: Semantic document structure and social link anchors.style.css: 3D viewport setup, perspective planes, glassmorphic surfaces, and lighting shaders.script.js: Mathematical coordinate tracking, easing functions, and hover physics.
- Raghav Goyal (@raghavatgit)
- Live Site: contactraghav.web.app
- Verification Target: Update performance audit metrics, lighthouse score, and deployment steps
- Operational Status: Production Verified
- Memory Profile: Verified zero leak and bounded heap envelope
- Compliance: Meets standard architectural criteria
- Verification Target: Publish interactive 3d physics documentation and submission pipeline specs
- Operational Status: Production Verified
- Memory Profile: Verified zero leak and bounded heap envelope
- Compliance: Meets standard architectural criteria