Featured Projects
A curated selection of high-performance platforms, e-commerce systems, and digital ecosystems built for innovation-driven enterprises.
Ceynest Home
Ceynest Home (ceynesthome.com) is a fully-featured, modern e-commerce platform designed to deliver a seamless shopping experience for customers while providing powerful management tools for administrators. The system supports multi-branch inventory, dynamic promotions, and flexible payment options, making it ideal for growing retail businesses. On the storefront, users are welcomed with a visually rich homepage featuring hero banners, flash deals, promotional sections, new arrivals, and brand highlights. Customers can easily browse products through the “Shop All” page, apply filters by brand, category, and subcategory, and use a brand logo filter bar for quick navigation. Each product is displayed with detailed cards showing images, pricing, discounts, ratings, and purchase options. The product details page provides comprehensive information including image galleries, videos, branch-wise stock availability, customer reviews, and related products. A smart pricing system automatically calculates discounts, while purchase options allow either online payments or direct contact via WhatsApp or phone. The platform includes essential shopping features such as cart management, wishlist saving, and customer accounts with login, registration, and password recovery. Customers can also interact through reviews, questions, and a built-in support chat system. On the backend, the admin panel offers complete control over the business operations. Administrators can manage products, categories, brands, branch stock, and visual content such as banners and sliders. Marketing tools allow the creation of flash deals, promotional campaigns, and announcement popups. The system also includes payment method configuration, customer management, community moderation (reviews and questions), and a dedicated support agent panel. With a responsive design, API-driven backend, and scalable architecture, Ceynest Home ensures efficient performance across devices while supporting business growth through dynamic promotions and centralized management. Technology Stack Frontend: Next.js (React Framework) React.js HTML5, CSS3, JavaScript Backend: Node.js Express.js Database: MySQL Hosting & Server Environment Linux-Based VPS Hosting Nginx / Apache Web Server Node.js Runtime Environment Secure SSH Access Domain & SSL Configuration
View Live Platform
Blue Paradise
Blue Paradise is a high-performance, immersive web experience designed for a luxury destination that combines high-end hospitality with thrill-seeking adventure. The website moves beyond static information, utilizing advanced motion graphics and interactive storytelling to let users "feel" the experience before they book. It creates a seamless fusion between serene luxury (Suites, Spa, Weddings) and high-energy entertainment (Gaming Zone, Adventure Park) using distinct visual styles and transition effects. Immersive User Experience (UX) Luxury Smooth Scrolling: Utilizes ScrollSmoother to create a heavy, premium scrolling feel that glides over content. Fail-Safe Preloader: A custom loading screen that guarantees the site is fully ready before revealing content, with a safety timer to prevent getting stuck. Custom Cursor: A magnetic cursor with a gold follower that reacts (expands/glows) when hovering over interactive elements. Accommodation (The "Flip" Effect) Interactive Cards: The Suites section uses GSAP Flip. Users see a preview card; clicking it seamlessly morphs the card into a full-screen details page without a page reload. Content: Showcases Ocean Suites, Garden Villas, and Royal Penthouses. Weddings & Events (The "Bento Grid") Modern Layout: Replaces traditional lists with a trendy Bento Grid layout, mixing video loops of the venue with high-resolution photography. Hover Reveals: Cards gently lift and overlays fade in to reveal details about the Grand Ballroom and Private Functions. Gaming & Kids Park (The "Cyberpunk" Shift) Visual Shift: The design transitions from cream/gold luxury to a Dark Mode/Neon aesthetic. Glitch Effects: Typography utilizes CSS glitch animations to simulate a digital/gaming atmosphere. Hover-Reveal Menu: Hovering over a game title reveals a floating preview image that follows the cursor (Fantik Studio style). Adventure Park (Horizontal Scroll) Pin & Scroll: As the user scrolls down, the page locks (pins), and the content moves horizontally, mimicking a walk through the theme park and scuba diving zones. Visual Storytelling Infinite Drag Wall: A gallery of images scattered like polaroids on a table that users can freely drag and throw (using Inertia physics) to explore. Technical Stack & Architecture Core Languages: PHP: Used for modular templating (header.php, footer.php, index.php) to ensure code maintainability. HTML5 / CSS3: Modern semantic markup and CSS variables for theming (Gold/Cream palette vs. Neon/Dark palette). JavaScript (ES6+): Modular scripts handling logic for the loader, menu, and interactions. Animation Engine (GSAP): The site relies heavily on the GreenSock Animation Platform (GSAP): ScrollTrigger: Triggers animations as elements enter the viewport. ScrollSmoother: Adds the momentum-based scrolling effect. Flip: Handles the complex layout changes for the Suite cards. Draggable & InertiaPlugin: Powers the draggable photo wall. SplitText: Anim
View Live Platform
Eightex Studio / Story App
This is a high-end, interactive web application designed to host digital stories and podcasts. Unlike a standard blog, it focuses on immersion. It features a 3D book reading experience, a cinematic video/audio podcast player, and a gamified system where users must complete tasks to unlock specific stories. The design is modern, utilizing dark mode, smooth GSAP transitions, and custom cursors. Legacy Stories: Traditional text and image-based scrolling stories. 3D Books: A highly interactive format where books have 3D properties (front cover, back cover, spine design, paper edge style). Features: Users can likely "pick up" and read these books in a simulated 3D environment (ReadBook.jsx, BookReader.jsx). Database: Stores detailed metadata like spine_design, edge_style (cream/white), and ISBNs. Dual Mode Player: The player automatically detects the media type. Audio Mode: Displays a spinning Vinyl Record animation with the album art. Includes a live audio visualizer that reacts to the music. Video Mode (Cinema): Plays .mp4 files in a borderless, cinematic video player. Immersive Overlay: The player opens as a portal overlay (PodcastReader.jsx) that sits on top of the UI, allowing users to scroll through show notes while listening/watching. Buffering System: Includes visual feedback (spinners) when media is loading from the server. Locked Content: Some stories or books are locked by default. Task Modals: To open a locked story, a user clicks it and is presented with a TaskModal. They must complete a specific task to gain access. Rewards: Upon completion, a confetti explosion triggers, and the story is permanently unlocked in the user's local storage. Dashboard Stats: Real-time counters for Total Podcasts, 3D Books, and Stories. CRUD Operations: Full ability to Create, Read, Update, and Delete items. Smart Forms: Podcast Form: Inputs for Host, Duration, Media URL, and Category. Book Form: Inputs for Author, Genre, and 3D assets (Spine URL, Cover URL). JSON Editor: A "Raw Data" editor allowing the admin to manually structure complex book chapters and scenes using JSON code for maximum control. Theme Toggle: Dedicated Dark/Light mode switch for the admin panel. Glassmorphism: Uses blurred backgrounds (backdrop-blur) and translucent layers for a modern, premium feel. Cinematic Lighting: Uses radial gradients and glow effects to highlight content. Animations: Page Transitions: Smooth fading and sliding effects using GSAP when moving between pages. Micro-interactions: Buttons scale on hover, cards lift up, and the custom cursor reacts to clickable elements. Responsiveness: Fully optimized for Mobile (1-column grids), Tablets (2-column), and Desktops (4-column grids). Navigation: A sticky Navbar for easy access. A sticky Footer that automatically pushes to the bottom of the screen regardless of content length. 4. Database Structure (SQL) The backend is powered by a MySQL database (doctemps_story_app) with the following relationships: books: Stores the physical attributes of the 3D books (covers, author, publisher). book_scenes: Linked to books. Contains the actual pages/chapters text and illustrations. stories: Stores the legacy flat stories. scenes: Linked to stories. Contains the dialogue, text, and emojis for the legacy format. podcasts: Stores media URLs, host info, and categories. 5. Technical Highlights React Portals: Used for the Podcast Player to ensure it renders above all other z-index layers in the DOM. Local Storage: Used to remember the user's "Dark Mode" preference and their "Unlocked Stories" progress. Handbrake Optimization: The system is designed to stream "Web Optimized" video files for instant playback start. File Handling: The backend (index.js) is configured with a 50mb limit to handle large image/text payloads during Admin uploads.
View Live Platform
Sriyani Driving School
Student Registration and Profiles: Tracking detailed student information, handling application statuses (pending, approved, rejected, completed), and managing documents like ID cards and birth certificates. Progress Tracking: Recording and monitoring milestones like Medical exam results (Pass/Fail/Expected), Written Exam results, and Driving Trial results. Financial Management: Handling tuition payments (advance, repayments), managing separate fees for medical/retakes, and tracking book inventory/transactions (Book 1 and Book 2). Licensing and Compliance: Tracking key dates such as government appointments, temporary license issuance, and permanent license status. Search and Reporting: Providing advanced search capabilities with filters for payment, exam, trial status, and date ranges. Auditing: Logging a detailed history of changes made to student records.
View Live Platform