🌌 VertexFlow - Interactive 3D Developer Portfolio

📑 Table of Contents

1. 1. Welcome
2. 2. Visual Experience
3. 3. Design Highlights
4. 4. Key Features
   • 4.1. Cinematic 3D Experience
   • 4.2. Fluid Motion & Orchestration
   • 4.3. Modern Engineering Stack
5. 5. Feature Orchestration Architecture
6. 6. Architecture & Interaction Flow
   • 6.1. The Interaction Flow (Mermaid)
   • 6.2. Technical Stack Hierarchy
   • 6.3. Feature Relationship (ERD Style)
   • 6.4. Conceptual Data Model (ER Diagram)
7. 7. Tech Stack
   • 7.1. 3D & Creative Engineering
   • 7.2. Frontend & Styling
   • 7.3. Integrations & DevOps
8. 8. System Architecture Overview
9. 9. Featured Engineering Projects
   • 9.1. AI & Agentic Systems
   • 9.2. Full-Stack & Cloud
   • 9.3. Performance & Scalability
10. 10. Technical Domain Expertise
11. 11. Running Locally
12. 12. Deployment
13. 13. Author

---

1. Welcome

Welcome to the source code for my personal developer portfolio, VertexFlow. This project is a highly interactive, 3D-powered web experience designed to showcase my journey as a Full-Stack and AI/ML Developer.

🔗 View Live Portfolio

---

2. Visual Experience

VertexFlow is engineered to bridge the gap between high-end 3D graphics and functional web interfaces. The experience is centered around fluid motion and depth.

🌌 Immersive Hero Scene Real-time WebGL environment built with Three.js and custom shaders.	🚀 Project Showcase Interactive 3D cards with hover-responsive tilt and parallax effects.
✨ Featured Projects GSAP-orchestrated timelines revealing technical proficiency on scroll.	✉️ Cinematic Contact Glassmorphic UI design optimized for high-conversion and sleek interaction.

"VertexFlow leverages React Three Fiber and GSAP to deliver a silky-smooth 60 FPS experience that adapts seamlessly across all device tiers."

---

3. Design Highlights

• Glassmorphic UI: Utilizing backdrop blurs and semi-transparent layers for a modern, futuristic feel.
• Motion Blur & Bloom: Custom post-processing effects to enhance the cinematic quality of 3D renders.
• Responsive Camera: Dynamically adjusted Field of View (FOV) to ensure the 3D scene looks perfect on both mobile and ultra-wide displays.

---

4. Key Features

VertexFlow isn't just a portfolio; it's a high-performance 3D engine designed to showcase technical depth through immersive storytelling.

4.1. Cinematic 3D Experience

• Immersive Environments: Built with Three.js and React Three Fiber (R3F) for high-fidelity WebGL rendering.
• Dynamic Geometry: Optimized 3D model orchestration with @react-three/drei, ensuring fast load times without sacrificing visual quality.

4.2. Fluid Motion & Orchestration

• Smooth Scroll Physics: Integrated Lenis smooth-scrolling to eliminate "scroll jank" and provide a native-app feel.
• Scroll-Triggered Timelines: Complex animation sequences orchestrated via GSAP (GreenSock) that stay perfectly in sync with user movement.
• UI Micro-interactions: Declarative, spring-based animations using Framer Motion for polished interface feedback.

4.3. Modern Engineering Stack

• Next-Gen Tooling: Built on Vite and React 19 for near-instant Hot Module Replacement (HMR).
• Utility-First Styling: Leveraging Tailwind CSS v4 for a streamlined, high-performance design system.
• Serverless Connectivity: A robust contact system powered by EmailJS for seamless client-side communication.

---

5. Feature Orchestration Architecture

The following diagram illustrates how the technical components of VertexFlow interact to create the "Cinematic Flow":

graph LR
    %% Styles
    classDef engine fill:#2563eb,color:#fff,stroke:#fff
    classDef motion fill:#8b5cf6,color:#fff,stroke:#fff
    classDef ui fill:#10b981,color:#fff,stroke:#fff

    %% Flow
    User((User Scroll)) --> Lenis[Lenis Smooth Scroll]
    Lenis --> GSAP[GSAP ScrollTrigger]
    
    subgraph "The 3D World"
    GSAP --> R3F[React Three Fiber]
    R3F --> Canvas[WebGL Canvas]
    end

    subgraph "The Interface"
    GSAP --> DOM[UI Elements]
    DOM --> Framer[Framer Motion]
    end

    class R3F,Canvas engine
    class Lenis,GSAP motion
    class DOM,Framer ui

Loading

---

6. Architecture & Interaction Flow

6.1. The Interaction Flow (Mermaid)

This diagram shows how the user interacts with the 3D layer versus the UI layer.

graph TD
    User((User)) -->|Scrolls / Hovers| Lenis[Lenis Smooth Scroll]
    Lenis -->|Syncs| GSAP[GSAP Timeline]
    GSAP -->|Transforms| R3F[React Three Fiber Scene]
    GSAP -->|Triggers| UI[DOM UI Elements]
    
    subgraph "3D World"
    R3F --> Models[GLTF Models]
    R3F --> Shaders[Custom Shaders]
    end

    subgraph "Logic"
    UI -->|Form Submit| EmailJS[EmailJS API]
    EmailJS -->|Notification| Inbox((Dev Inbox))
    end

Loading

6.2. Technical Stack Hierarchy

quadrantChart
    title VertexFlow Tech Mapping
    x-axis Low Latency --> High Performance
    y-axis Simple UI --> Immersive 3D
    quadrant-1 "Cinematic Experience"
    quadrant-2 "Core Logic"
    quadrant-3 "Legacy Methods"
    quadrant-4 "Speed & Utility"
    "Three.js": [0.8, 0.9]
    "React 19": [0.5, 0.6]
    "GSAP": [0.7, 0.8]
    "Vite": [0.9, 0.4]
    "Tailwind v4": [0.9, 0.3]
    "Lenis": [0.6, 0.7]

Loading

6.3. Feature Relationship (ERD Style)

erDiagram
    PORTFOLIO ||--|{ THREE-SCENE : "renders"
    THREE-SCENE ||--o{ GSAP-TIMELINE : "animated by"
    GSAP-TIMELINE ||--o{ SCROLL-TRIGGER : "synced with"
    SCROLL-TRIGGER ||--|| LENIS-ENGINE : "physics provider"
    
    UI-LAYER ||--o{ EMAIL-JS : "handles contact"
    VITE-BUILDER ||--|| PRODUCTION-APP : "optimizes"

Loading

6.4. Conceptual Data Model (ER Diagram)

Although VertexFlow is a serverless frontend application, the UI is driven by a strictly typed data model structure, and user interactions are handled via structured payloads to external APIs.

erDiagram
    VISITOR ||--o{ MESSAGE : "Submits via Contact Form"
    PORTFOLIO ||--|{ PROJECT : "Showcases"
    PORTFOLIO ||--|{ EXPERIENCE : "Highlights"
    PORTFOLIO ||--|{ SKILL : "Demonstrates"
    PORTFOLIO ||--|{ CERTIFICATION : "Validates"

    MESSAGE {
        string sender_name
        string sender_email
        string message_content
        string service_id "EmailJS Payload"
    }

    PROJECT {
        string name
        string tech_stack
        string description
        string github_link
        string live_link
        string image_path
    }

    EXPERIENCE {
        string role_title
        string company_logo
        string duration
        array responsibilities
    }

    SKILL {
        string category_title
        string description
        string icon_path
    }

    CERTIFICATION {
        string course_name
        string issuer
        string issue_date
        string credential_link
    }

Loading

---

7. Tech Stack

VertexFlow is built with a modern, performance-first stack, focusing on the intersection of 3D graphics and scalable web architecture.

7.1. 3D & Creative Engineering

Technology	Usage
Three.js	Core WebGL engine for 3D rendering
React Three Fiber	Declarative Three.js for the React ecosystem
GSAP	Professional-grade animation timelines and scroll orchestration
Framer Motion	Declarative UI transitions and micro-interactions
Lenis	High-performance smooth scroll engine

7.2. Frontend & Styling

• React 19: Utilizing the latest concurrent rendering features.
• Vite: Next-generation frontend tooling for ultra-fast HMR.
• Tailwind CSS v4: Utility-first styling with the latest CSS engine capabilities.
• Lucide React: Clean, consistent vector iconography.

7.3. Integrations & DevOps

• EmailJS: Serverless client-side email integration for the contact system.
• Vercel: Globally distributed edge deployment and CI/CD.
• Git/GitHub: Version control and source management.

---

8. System Architecture Overview

This diagram represents the data and animation flow within VertexFlow:

graph TD
    subgraph "Display Layer"
    Canvas[3D Canvas / R3F]
    DOM[UI Overlay / React]
    end

    subgraph "Control Engine"
    Scroll[Lenis Smooth Scroll] -->|Sync| GSAP[GSAP Timeline]
    GSAP -->|Update Props| Canvas
    GSAP -->|Trigger Anims| DOM
    end

    subgraph "External"
    DOM -->|Payload| EmailJS[EmailJS API]
    end

    style Canvas fill:#2563eb,color:#fff
    style GSAP fill:#88ce02,color:#000
    style Scroll fill:#f59e0b,color:#000

Loading

---

9. Featured Engineering Projects

VertexFlow serves as the immersive gateway to my technical work, highlighting expertise across AI/ML, Full-Stack Development, and Cloud Infrastructure.

9.1. AI & Agentic Systems

• ZenithRAG | Python LangChain Vector DB LLMs
  • Architected an advanced Level-3 RAG system with a high-throughput pipeline for document parsing and semantic synthesis.
• RoleRadar | AI Agents MCP Python
  • Developed an agentic job discovery platform using autonomous AI agents to map profiles to hyper-relevant market opportunities.
• MediQuery.ai | LLMs LangChain Pinecone AWS
  • Built a RAG-based medical chatbot leveraging vector databases for context-aware healthcare information retrieval.

9.2. Full-Stack & Cloud

• Z-Axis Cloud | Docker Cloud Infra DevOps
  • Designed a scalable cloud framework optimized for container orchestration and resource-heavy AI model deployment.
• SkillBridge AI | React Node.js GenAI
  • Engineered an AI career coach featuring automated resume parsing and dynamic skill-gap analysis.
• Rewind | MERN Stack Redux JWT
  • Architected a social ecosystem for digital footprints with a decoupled client-server architecture and cinematic UI.

9.3. Performance & Scalability

• Sonic-Prep | Vite Framer Motion – High-performance interview prep platform focused on low-latency UI.
• QuickCart | Next.js SSR Tailwind – E-commerce architecture optimized for SEO and speed.
• OpenShelf E2E | ML Collaborative Filtering – End-to-end recommendation engine for personalized content.

---

10. Technical Domain Expertise

pie title Project Specializations
    "RAG & Generative AI" : 40
    "Full-Stack (MERN/Next.js)" : 30
    "Cloud & DevOps" : 20
    "Machine Learning" : 10

Loading

---

11. Running Locally

Want to explore the code or run it on your own machine? Follow these steps:

1. Clone the repository

git clone https://github.com/salonyranjan/VertexFlow.git
cd VertexFlow

2. Install dependencies

npm install

3. Set up Environment Variables

To make the contact form work locally, create a .env file in the root directory and add your EmailJS credentials:

VITE_APP_EMAILJS_SERVICE_ID=your_service_id_here
VITE_APP_EMAILJS_TEMPLATE_ID=your_template_id_here
VITE_APP_EMAILJS_PUBLIC_KEY=your_public_key_here

4. Start the development server

npm run dev

The application will be available at http://localhost:5173.

---

12. Deployment

This project is configured for seamless deployment on Vercel.

Framework Preset: Vite

Build Command: npm run build

Output Directory: dist

Note: Ensure that Environment Variables are also configured in your Vercel Project Settings for the live contact form to function properly.

---

13. Author

Salony Ranjan

I am a Full-Stack Developer and AI Enthusiast passionate about building immersive digital experiences and autonomous AI agents. Currently, I focus on the intersection of 3D Web (WebGL) and Generative AI (RAG Pipelines).

🌐 Connect with Me

---

"Code is poetry in motion."
Salony Ranjan © 2026