Portfolio_Edson

✨ Key Features

Physics-Based 3D Hero (@react-three/fiber & rapier)
- Features a fully interactive, physics-driven 3D ID badge (lanyard) that responds to mouse interactions and gravity.
- Complex mesh line generation and custom dual-texture mapping for photorealistic rendering.
Cinematic Scroll Animations (GSAP & HTML5 Canvas)
- Smooth, high-performance image sequence scrubbing mapped perfectly to scroll progression via GSAP ScrollTrigger.
Cyber-Minimalist Aesthetics
- Custom PixelCard modals with dynamic canvas-based pixel shimmer effects that trigger sequentially on interaction.
- Glassmorphic navigation, sleek typography, and fluid framer-motion layout transitions.
Integrated API System
- Built-in serverless endpoint (/api/contact) for processing project inquiries securely without exposing credentials.

Frontend Architecture:

3D & Animations:

Make sure you have Node.js 18.17+ installed.

Clone the repository:

git clone https://github.com/Edson-Edwin/Portfolio_Edson.git
cd Portfolio_Edson

Install dependencies:
```
npm install
```
Setup environment variables: Create a .env.local file in the root directory and add your email configuration for the contact form:
```
EMAIL_USER=your_email@gmail.com
EMAIL_PASSWORD=your_app_specific_password
```
Run the development server:
```
npm run dev
```
Open http://localhost:3000 with your browser to see the portfolio.

src/components/Lanyard.tsx: The complex 3D physics badge implementation.
src/components/CanvasScroll.tsx: The high-performance GSAP image sequence scrubber.
src/components/PixelCard.tsx: The canvas-based interactive pixel dispersion effect.
src/components/StartProjectModal.tsx: The beautifully choreographed neon popup form.
src/app/api/contact/route.ts: The secure backend mailer service.

This project is open-source and available under the MIT License.

Designed & Engineered by Edson Edwin Ninan