phrox dev
I'm Creative Frontend Enginer crafting immersive 3D websites
New to Contra
phrox is building their profile!
A premium, interactive UI Kit designed with an advanced purple glassmorphic aesthetic. This project showcases the fusion of modern user interface trends with high-performance WebGL animations, delivering an immersive and tactile visual experience.
Key Technical Features & UI Components:
Ethereal 3D Fluid Background: Programmed a custom WebGL Fragment Shader running directly via Three.js to render a fluid, real-time wave animation that responds to mouse positions and viewport scaling smoothly.
Glassmorphism Design System: Formulated complex CSS backdrop-filter profiles layered with soft internal borders (rgba(255,255,255,0.2)) and deep multi-layered shadows to give a high-fidelity translucent look.
Micro-interactions & State Management: Engineered native JavaScript behaviors for functional custom UI elements, including smooth multi-state custom switches (Toggle Switches) and animated tab components (switchTab).
Core Architecture:
Semantic styling using custom CSS variables (--p1 through --p6 Purple token scales).
High-refresh performance layout optimized for zero hardware lagging.
Tech Stack Used:
Frontend Engineering: HTML5, Modern Vanilla JavaScript (ES6+), Advanced CSS Grid & Flexbox
3D Graphics & Shaders: Three.js / Custom GLSL WebGL Shaders
Typography: Nunito & DM Sans
live at:- https://saasdashboardfromphrox.netlify.app/
1
8
PHROX DEV is my personal high-end production portfolio designed with a futuristic, dark cyberpunk aesthetic featuring high-energy fire orange and neon cyan highlights. Built to show high-fidelity creative engineering, it integrates immersive 3D background components with clean, metric-driven interface design.
Key Architecture & Technical Highlights:
Interactive 3D Graphics (app.js): Engineered a custom Three.js WebGL particle network background featuring dynamic particle calculations (280+ active nodes), mathematical physics animations, and smooth viewport resize behaviors.
Advanced Cyberpunk Token Styling (styles.css): Formulated deep-space background surfaces with custom border-glow states, hardware-accelerated fluid layouts, and multi-layered glow vectors using semantic design tokens.
Futuristic UI Layout (index.html): Architected custom visual layouts utilizing modern font stacks (Orbitron, Rajdhani, JetBrains Mono) optimized for performance and complete desktop/mobile responsiveness.
Core Concepts Demonstrated:
3D WebGL Integration via Three.js
Complex CSS Animation & Micro-interactions
Clean Code Architecture & Layout Optimization
Tech Stack Used:
Core: HTML5, Modern Vanilla JavaScript (ES6+), Advanced CSS Custom Properties
3D Graphics: WebGL / Three.js
Fonts & Icons: Google Fonts, Custom Inline SVGs
live at:- https://phroxdevportfolio.netlify.app/
1
14
I discovered a comprehensive, multi-page web ecosystem built for a futuristic AI platform. Moving beyond a simple landing page, this project features a fully integrated user journey including a live dashboard/portfolio tracking system, an interactive marketplace, and digital wallet connectivity workflows.
Architecture & Multi-Page Modules:
Core Landing Page (index.html): The main entry point featuring high-fidelity dark-themed visuals, glowing typography, and immersive hero elements optimized for pixel-perfect performance.
Market Hub (market.html): A custom UI layout designed for displaying tech-products, AI assets, or digital tools with advanced filtering options.
Portfolio Dashboard (portfolio.html): A clean, metric-driven interface built to visualize real-time user data and professional work showcases.
Connect Portal (connect.html): A sleek, modern authentication and secure digital integration layout for user onboarding.
Technical Engineering (style.css, main.js, blod.js):
Interactive Visual Effects: Engineered custom JavaScript logic to drive complex particles, node graphs, and dynamic fluid/glowing UI animations.
Modern Styling: Leveraged advanced CSS architectures, fluid grids, and neon gradient layers to build an authentic cyberpunk and tech-forward aesthetic.
Clean Code Architecture: Developed using structured, responsive, and performance-optimized code deployed successfully on Netlify.
Tech Stack:
Design: Figma (Wireframing & UI Consistency)
Frontend: HTML5, CSS3 (Custom Variables & Micro-interactions), Modern JavaScript (ES6+)
live at:- https://cryptopageas.netlify.app/
1
17
A premium, high-fidelity landing page designed and developed for a next-generation AI platform. The goal of this project was to create a pixel-perfect, modern, and immersive user experience that communicates speed, scaling, and advanced technology.
Key Features & Design Choices:
Futuristic UI/UX: Implemented a dark-theme aesthetic paired with vibrant neon gradients (purple and cyan) to give a cutting-edge, tech-forward vibe.
Interactive Elements: Features custom-built particle networks and complex interactive nodes in the hero section to visualize AI data scaling dynamically.
Data-Driven Sections: Cleanly integrated key performance metrics (99.9% Uptime, 12M+ API Calls) inside sleek, border-glowing cards.
Flawless Typography & Hierarchy: Used bold, modern tech-fonts with clean spacing to ensure immediate readability and maximum user engagement.
Tech Stack Used: > * Figma (UI/UX Concept & Wireframing)
HTML5, Advanced CSS/Tailwind (For the pixel-perfect layout and custom glow effects)
JavaScript (For interactive elements and smooth animations)
live at:- https://ailandingpagefromphrox.netlify.app/
1
22