Diptanu Debnath — Web Developer | Drone Pilot

// 01. FULL-STACK WEB DEVELOPER

PRODUCTION WEBSITES ◈ VIDEO WALKTHROUGHS ◈ OPEN-SOURCE GITHUB 4K UHD // 60 FPS RECORDINGS

I BUILD FAST, MODERN WEBSITES & WEB APPS THAT DRIVE RESULTS.

I am a Web Developer & Software Engineer specializing in creating modern, ultra-responsive, and high-converting websites. Explore my real-world client and portfolio web builds below. Watch live screen-recorded video walkthroughs of each website in action, review technical architecture, and click the GitHub Source Code buttons below each project to inspect the source code.

⚡ WEBSITE_STUDIO // LIVE VIDEO STAGE git:(main)

🔒 https:// dentalcare-clinic.demo

VIDEO STREAM READY // 60 FPS

// FILTER SHOWCASE:

◈ DENTAL_CARE_PRO

Services Our Team Consultation Contact

ACTIVE PRODUCTION

⚡ FEATURED HEALTHCARE BUILD

DentalCare Pro // Modern Clinical & Appointment Web App

Modern healthcare web platform with patient consultation booking, interactive service catalog, and responsive mobile architecture.

PROJECT 01 // DENTALCARE PRO

4K UHD ◈ 60 FPS ◈ SCREEN RECORDING

00:00 / 01:16

// PROJECT 01 HEALTHCARE & CLINIC WEB APP

DentalCare Pro // Modern Clinical & Appointment Web App

Modern healthcare web platform engineered with clean semantic structure, custom interactive service catalogs, patient consultation booking, and high-performance mobile responsiveness. Delivers a calming, trust-building aesthetic and ultra-fast loading speed.

✓ Responsive clinical service catalog with interactive cards

✓ Patient appointment booking & contact consultation forms

✓ 100 Lighthouse performance, semantic HTML5, and accessible UX

HTML5 CSS3 / Vanilla JavaScript Responsive Design SEO Optimized

Open GitHub Source Code Live Website Demo

// MY WEBSITES COLLECTION

EXPLORE WEBSITES, WATCH VIDEOS & VIEW SOURCE CODE

CLICK ANY CARD TO STREAM VIDEO IN WORKSTATION

01:16 ▶ ACTIVE IN STAGE

// WEBSITE 01 HEALTHCARE & CLINIC

DentalCare Pro Clinic

Complete patient-facing clinic web experience featuring treatment cards, appointment booking, patient stories, and responsive mobile architecture.

HTML5 CSS3 JavaScript Mobile-First

NEXUS AI

00:45 ▶ STREAM VIDEO

// WEBSITE 02 FULL-STACK SAAS

Nexus AI Dashboard

Autonomous agent control center with real-time telemetry, interactive graphs, and sub-50ms backend orchestration.

Next.js 15 TypeScript Tailwind Supabase

HYPERION 3D

01:10 ▶ STREAM VIDEO

// WEBSITE 03 3D & CREATIVE WEB

Hyperion 3D Studio

Interactive 3D WebGL showroom with custom lighting shaders, orbit controls, and fluid cursor tracking.

Three.js WebGL GSAP Vite

APEX STORE

01:05 ▶ STREAM VIDEO

// WEBSITE 04 E-COMMERCE STORE

Apex Commerce Hub

High-conversion digital storefront with real-time product filters, instant cart drawer, and Stripe checkout.

Next.js 15 Stripe Tailwind Framer

// CORE CAPABILITIES & ENGINEERING PHILOSOPHY

HOW I ARCHITECT & SHIP WEBSITES

Full-Stack Web Development

Architecting robust, end-to-end web applications with Next.js 15, React 19, TypeScript, and modern backend APIs — scalable, secure, and production ready.

NEXT.JS 15 ◈ REACT 19 ◈ TYPESCRIPT

Interactive UI / UX Engineering

Designing and engineering magnetic user interfaces with obsessive attention to fluid micro-interactions, spring physics, and responsive layouts.

FRAMER MOTION ◈ GSAP ◈ TAILWIND

3D Web & WebGL Experiences

Pushing the boundaries of the browser with Three.js, GLSL shaders, camera tracking, and hardware-accelerated 3D models.

THREE.JS ◈ WEBGL ◈ CANVAS API

Performance & SEO Engineering

Laser-focused on 100 Lighthouse scores, sub-second First Contentful Paint, Core Web Vitals optimization, and semantic SEO.

100 LIGHTHOUSE ◈ SSR ◈ ZERO CLS

HTML5 CSS3 / Vanilla JavaScript (ESNext) React 19 Next.js 15 TypeScript Three.js / 3D Tailwind CSS GSAP Motion Framer Motion Node.js PostgreSQL Git / GitHub Figma UI

2+ YEARS OF EXPERIENCE

15+ WEB APPS & PROJECTS

100% LIGHTHOUSE PERFORMANCE

∞ PASSION FOR CODE

STEP 1

Drop Your Video File in the `videos/` Folder

Place your website screen recording or demo video in the portfolio's videos/ directory (e.g. videos/my-website.mp4).

STEP 2

Copy & Paste This Card Snippet in `index.html`

Add this inside #webdevProjectsGrid with your website details and GitHub repo URL:

<!-- NEW WEBSITE PROJECT -->
<div class="project-video-card" data-category="clinic"
    data-video="videos/my-website.mp4"
    data-title="My Website Title"
    data-tag="FULL-STACK WEB APP"
    data-desc="Description of the website you built..."
    data-url="my-website.com"
    data-live="https://my-website.com"
    data-repo="https://github.com/DiptanuDebnath007/my-repo"
    data-tech='["HTML5", "CSS3", "JavaScript"]'>

    <div class="card-video-viewport">
        <video class="card-mini-video" muted loop playsinline>
            <source src="videos/my-website.mp4" type="video/mp4">
        </video>
        <div class="card-viewport-overlay">
            <span class="card-time-pill">01:00</span>
            <span class="card-play-pill">▶ STREAM VIDEO</span>
        </div>
    </div>

    <div class="card-info-pane">
        <div class="card-header-meta">
            <span class="card-index-num">// WEBSITE 05</span>
            <span class="card-type-tag">WEB APP</span>
        </div>
        <h4 class="card-project-name">My Website Name</h4>
        <p class="card-project-summary">Brief summary of features...</p>
        <div class="card-tech-chips">
            <span>HTML5</span><span>CSS3</span><span>JS</span>
        </div>
        <div class="card-action-footer">
            <a href="https://github.com/DiptanuDebnath007/my-repo" target="_blank"
                class="card-github-btn" onclick="event.stopPropagation();">
                GitHub Source
            </a>
            <a href="https://my-website.com" target="_blank"
                class="card-demo-btn" onclick="event.stopPropagation();">
                Live Site ↗
            </a>
        </div>
    </div>
</div>

// 02. MOTION & VIDEO LAB

REC 4K // 120 FPS

PRORES 422HQ ◈ SOUND DESIGN ◈ RETENTION CRAFT

I CUT STORIES THAT STOP THE SCROLL & CONVERT.

In a world of infinite scrolling, generic edits get skipped in 1.5 seconds. I engineer high-retention video edits with hypnotic pacing, Hollywood color grading, immersive 3D soundscapes, and explosive visual effects that capture attention, build authority, and convert viewers into loyal clients.

🎬 APEX EDIT SUITE v2.6 PROJECT: VIRAL_REEL_01

HOOK: 0.8s RETENTION

WATCH THIS EDIT

BEAT-SYNCED ◈ 4K CINEMA ◈ SOUND FX

00:00:04:18 120 FPS LOCK

📈 RETENTION: 98.4%

3840 x 2160 // DCI 4K

MASTER SOUND DESIGN EQ 32-BIT ACTIVE

SUB 20Hz MID 1kHz HIGH 20kHz

RETENTION OPTIMIZER 94.8%

⚡ Dynamic Cuts 🔊 Bass Risers 🎯 Subtitles 💥 Speed Ramps

INTERACTIVE FX SOUNDBOARD CLICK TO TRIGGER

↖ ✂ ⇄ 🔍 4K 60P TIMELINE SEQUENCE

00:00 00:03 00:06 00:09 00:12 00:15

04:18

V3 FX & RAMPS

SPEED RAMP // 400%

GLITCH TRANSITION

OPTICAL FLARE

ZOOM POP BURST

V2 GRAPHICS

KINETIC HOOK CAPTIONS

3D MOTION CALLOUT

CLIENT CTA OVERLAY

V1 4K FOOTAGE

DRONE_HYPERLAPSE.BRAW

AERIAL_ORBIT_FPV.MOV

TALENT_INTERVIEW_A.R3D

PRODUCT_MACRO_B.MOV

A1 SFX & RISERS

WHOOSH

SUB IMPACT

SNAP

CINEMATIC RISER

BASS DROP

A2 MUSIC SCORE

ORIGINAL_BEAT_SYNC_MASTER_128BPM.WAV

// PROJECT ARCHIVE & EARLIER CUTS

EARLIER VIDEO PROJECTS & CLIENT SHOWREEL

Click any past project below to immediately load and stream its video edit inside the APEX Studio NLE monitor above.

⚡ 9:16 VERTICAL // 120 FPS

00:15 ▶ PREVIEW EDIT

// EDIT 01 VIRAL REEL

High-Retention Viral Reel // Fitness & Lifestyle

Hypnotic 9:16 vertical cut engineered with micro-hooks, beat-synced pacing, kinetic typography, and punchy sub-bass drops.

📈 98.4% Retention ⚡ 0.8s Hook Lock

DaVinci Resolve Beat-Sync Sound Design

🎬 2.39:1 ANAMORPHIC

00:30 ▶ PREVIEW EDIT

// EDIT 02 BRAND CINEMA

Cinematic Brand Commercial // Automotive Spec Cut

Hollywood-calibrated color grading with custom Kodak 2383 print emulation, ACEScc color science, and 3D spatial audio.

🎨 Kodak 2383 LUT 💎 ProRes 422HQ

Color Science Premiere Pro Foley SFX

🚁 4K 120FPS // GYROFLOW

00:45 ▶ PREVIEW EDIT

// EDIT 03 FPV AERIAL

FPV Proximity Chase // High-Speed Drone Reel

High-octane proximity chasing through mountain ridges, speed ramping matched to bass risers, and Gyroflow stabilization.

⚡ 400% Speed Ramp 🌐 Horizon Lock

Gyroflow Speed Ramping D-Log M RAW

✨ 3D MOTION // GLITCH

00:20 ▶ PREVIEW EDIT

// EDIT 04 3D VFX & TITLES

Cyberpunk 3D Kinetic Titles // VFX Sequence

Complex 3D camera tracking, futuristic HUD callouts, procedural glitch effects, and holographic typography.

🔮 3D Camera Track 💥 Glitch VFX

After Effects Blender 3D HUD Design

RETENTION SCIENCE

The 0.8s Scroll-Stopping Retention Engine

65% of viewers drop off before second 3 on average videos. My cuts are engineered with pattern-interrupts, kinetic zooms, and seamless micro-hooks that keep engagement over 85%+ right to your CTA.

Diptanu's Cut (88% Avg) Standard Edit (24% Avg)

COLOR SCIENCE

Hollywood D-Log & Film Emulation

Transforming flat RAW sensor data into rich, cinematic imagery using custom 3D LUTs, Kodak 2383 print emulation, and calibrated DCI-P3 color gamuts that give brands instant prestige.

GOLDEN HOUR

TEAL & ORANGE

CYBER NEON

MIDNIGHT NOIR

SPATIAL AUDIO

Immersive 3D Sound Design

Audio is 50% of the visual experience. Every cut is supported with custom risers, sub-bass impacts, crisp foley, and micro-whooshes that make viewers feel the energy physically in their headphones.

🎧 3D BINAURAL SPATIAL 🔊 SUB-BASS REINFORCED 🎚️ -14 LUFS PODCAST / REEL NORMALIZED

CLIENT PIPELINE

48-Hour Rapid Delivery Guarantee

Never miss a posting deadline or campaign launch date. Fast cloud transfers, timestamped Frame.io revision workflows, and lossless ProRes 422HQ exports delivered directly to your inbox.

01 Raw Ingest

➔

02 Rough Cut (24h)

➔

03 SFX & Grade

➔

04 4K Master Delivery

✦ READY TO LEVEL UP YOUR CONTENT?

Turn Passive Viewers Into Obsessed Clients.

Select your video project scope below to jump directly to my project console with priority scheduling.

Start Video Project 🔒 100% Satisfaction Guarantee ◈ 2-Hour Response Time

500k+ TOTAL VIEWS GENERATED

88.4% AVERAGE RETENTION RATE

48H EXPRESS TURNAROUND

4K 120P MAX MASTER EXPORT

STEP 1

Drop Your Video Files in the `videos/` Folder

Export your video edit or showreel as a web-optimized .mp4 or .webm (H.264/AAC, 1080p or 4K, 10–60s preview), then place it in the portfolio's videos/ folder:

videos/edit-reels.mp4       ← (Viral Reels & TikToks)
videos/edit-commercial.mp4  ← (Brand Commercials & Promos)
videos/edit-drone.mp4       ← (FPV & Aerial Cinematography)
videos/edit-vfx.mp4         ← (3D Motion Graphics & VFX)

STEP 2

Copy & Paste a Project Card in `index.html`

Inside <div class="video-projects-grid" id="videoProjectsGrid">, add your project card:

<!-- NEW VIDEO EDITING PROJECT -->
<div class="video-project-card" data-genre="reels"
    data-video="videos/my-new-edit.mp4"
    data-title="PROJECT: CLIENT_BRAND_REEL"
    data-headline="HIGH CONVERSION EDIT"
    data-badge="HOOK: 0.7s RETENTION"
    data-sub="4K CINEMA ◈ SOUND FX ◈ COLOR GRADED"
    data-retention="97.8%">

    <div class="card-video-viewport">
        <video class="card-mini-video" muted loop playsinline>
            <source src="videos/my-new-edit.mp4" type="video/mp4">
        </video>
        <div class="card-viewport-overlay">
            <span class="card-time-pill">00:25</span>
            <span class="card-play-pill">▶ PREVIEW EDIT</span>
        </div>
    </div>

    <div class="card-info-pane">
        <div class="card-header-meta">
            <span class="card-index-num">// EDIT 05</span>
            <span class="card-type-tag genre-reels">REEL</span>
        </div>
        <h4 class="card-project-name">Your Project Title // Client Name</h4>
        <p class="card-project-summary">Brief breakdown of your pacing, color grading, and SFX...</p>
        <div class="card-tech-chips">
            <span>DaVinci Resolve</span><span>Sound Design</span><span>Color Grade</span>
        </div>
        <div class="card-action-footer">
            <button type="button" class="load-nle-btn">
                ▶ Load into Studio Monitor
            </button>
        </div>
    </div>
</div>

STEP 3

(Optional) Map to Topbar Studio Tabs in `script.js`

If you want the topbar tabs (Viral Reels, Brand Cinema, FPV Showreel, 3D VFX) in the DaVinci NLE Studio to load your videos directly, update the genreData object in script.js:

const genreData = {
    reels: {
        title: 'PROJECT: VIRAL_REEL_01',
        video: 'videos/edit-reels.mp4', // Your video file path
        retention: '98.4%',
        ...
    }
};