- Cinematic Scroll Animation — 150-frame PNG sequence rendered on HTML5 Canvas, synchronized to scroll position
- Interactive Particle Field — Floating particles with mouse-reactive web connections
- Matrix Rain Background — Falling green characters for authentic hacker atmosphere
- Ambient Audio Synthesizer — Web Audio API-generated cyberpunk ambient pad (no external files)
- Animated Gradient Titles — Each section title shimmers with a shifting color gradient
- Terminal-Style UI — Command-line headers, scanline effects, monospace typography
- Glassmorphism Cards — Frosted glass card backgrounds with
backdrop-filter: blur()
- Cursor Glow — Soft cyan light that follows the mouse
- Fully Responsive — Adapts seamlessly from mobile to ultrawide displays
| Section |
Description |
| Identity |
Name, role, and bio with terminal-style header |
| Skills |
7 skill categories with animated progress bars |
| Education |
Timeline — VIT Vellore, IIT Madras, and school history |
| Projects |
Featured projects with tech tags and feature lists |
| Achievements |
Awards categorized by international / national / regional |
| Certifications |
Verified credentials with scan-line hover effects |
| Technology |
Purpose |
| Next.js 14 |
React framework with SSR and optimized builds |
| TypeScript |
Type-safe component development |
| Tailwind CSS |
Utility-first responsive styling |
| Framer Motion |
Scroll-linked and viewport-triggered animations |
| HTML5 Canvas |
Frame rendering, particles, and matrix rain |
| Web Audio API |
Synthesized ambient background music |
# Clone the repository
git clone https://github.com/TirthBora/PortFolio_Project.git
cd PortFolio_Project
# Install dependencies
npm install
# Start development server
├── app/
│ ├── page.tsx # Main page — assembles all sections
│ ├── layout.tsx # Root layout with fonts & metadata
│ └── globals.css # Global styles & CSS variables
├── components/
│ ├── CyberScroll.tsx # Scroll-driven canvas animation
│ ├── TextOverlay.tsx # Scroll-synced text overlays
│ ├── ParticleField.tsx # Interactive particle background
│ ├── MatrixRain.tsx # Falling green characters
│ ├── CursorGlow.tsx # Mouse-following glow
│ ├── AudioPlayer.tsx # Ambient music synthesizer
│ ├── SystemAccess.tsx # Terminal boot sequence
│ ├── IdentityPanel.tsx # Personal info section
│ ├── SkillsPanel.tsx # Skills with progress bars
│ ├── EducationPanel.tsx # Education timeline
│ ├── ProjectsPanel.tsx # Project showcase
│ ├── AchievementsPanel.tsx # Awards section
│ └── CertificationsPanel.tsx # Certifications
└── public/frames/ # 150 PNG frames for scroll animation