{ Portfolio Projects }
Browse our portfolio categorized by Development, Graphic Design, and Video Editing. Select a project from the sidebar to view its details.
</FlipCards | AI-Powered Study Platform>
Overview
FlipCards is a comprehensive, AI-driven study platform designed to revolutionize how students and professionals approach learning. By leveraging advanced Generative AI models, the application completely eliminates the tedious process of manual flashcard and quiz creation.
Users can simply input raw text, study notes, or document excerpts, and the system intelligently parses the information to generate structured, interactive study materials in seconds. Built with a modern full-stack architecture, FlipCards goes beyond simple rote memorization by offering a dynamic user experience featuring customizable study sets, progress tracking, and gamified multiplayer quiz modes.
The platform is engineered to scale, offering secure user authentication and real-time cloud data synchronization, ensuring that learners can seamlessly access their materials across any device, anytime.
Built With:
Key Technical Features:
- AI Integration: Successfully integrated Google's Gemini API to parse raw text and return structured JSON data for automatic quiz generation.
- User Authentication & Data: Implemented secure login systems and real-time data storage (cloud database) to save user progress and flashcard sets.
- Complex State Management: Built a custom game logic engine in vanilla JavaScript to handle quiz scoring, timers, and "Quibble" multiplayer modes without relying on heavy frameworks.
- Responsive UI: Mobile-first architecture ensuring seamless functionality across devices.
Features & Implementation
Impact
The platform has proven valuable to students across different schools, demonstrating how quickly adaptable web development skills can create real-world solutions that address genuine educational needs.
Lobby & Navigation
The lobby design follows a minimalistic approach prioritizing ease of use and intuitive navigation. Every element is thoughtfully placed, featuring a Lobby AI Assistant to help users navigate and enhance their study experience.
The Folder Section displays all user-created study sets. By clicking the Review button, users access all available review modes in the current version, allowing them to choose their preferred study method.
FlipCards AI Function
The AI Assistant powered by the Gemini API provides comprehensive study support through multiple specialized features:
- Interactive Chat: Engage in conversations with the AI while attaching files or photos for context.
- RRL Finder: Discover relevant research studies for academic papers.
- Create Set: Quickly generate study materials.
- Analyze File: Upload documents for detailed explanations of key concepts with culturally relevant examples.
- Summarizer: Get concise summaries of uploaded documents for fast comprehension.
Diverse Review Modes
Review Modes offer diverse ways to study your flashcards:
- Flashcard Mode: The classic way to study. View the term and recall the definition. Includes Text-to-Speech.
- Match Mode: A timed game to match terms with their definitions.
- Learn Mode: A multiple-choice quiz based on definitions to help with memorization.
- Test Mode: A written-exam style mode where you type the correct term for a given definition.
- Defidrop Mode: A timed game where you choose the correct definition from multiple options. Can be played with others.
- Pinpoint Mode: An image-based learning mode, ideal for visual subjects like nursing or anatomy.
- Blitz Mode: A fast-paced review mode where you quickly decide if the given definition is True or False.
Quibble Mode (Multiplayer Review)
A live multiplayer game where players compete for high scores by guessing the correct "Term" for a given "Definition".
- Game Modes: Play in Test Mode (typing answers into a live chat box) or Learn Mode (multiple-choice buttons).
- Core Gameplay: A Host creates a lobby, selects the flashcard set, timer, and mode. Players race against the clock and each other to score points.
- Scoring & XP: +1 point for the first correct answer per round. Players earn +50 XP per correct answer, with up to +1000 XP for the match winner.
- Host Controls: Full lobby management including Pause/Resume, Restart, Kick, and Game Settings.
</GreenCab Non Emergency Transportation>
Overview
GreenCab is a full-stack booking and dispatch system meticulously designed for a Non-Emergency Medical Transportation (NEMT) provider. The platform streamlines the complex scheduling process by replacing outdated manual phone bookings with a seamless, real-time digital interface, connecting patients directly to dispatchers via a highly reliable serverless architecture.
By prioritizing accessibility and operational efficiency, the system empowers both end-users and administrators. Patients can effortlessly request rides with specialized requirements (such as wheelchair access), while dispatchers operate from a centralized hub to monitor, approve, and organize daily transit operations smoothly.
Built With:
Core Architecture & Dispatch
Real-Time Dispatch Dashboard
Engineered a dynamic and reactive admin interface utilizing the Firebase Realtime Database. By leveraging continuous event listeners (onValue), the dashboard allows dispatchers to receive, view, and manage incoming ride requests instantly. This zero-latency data synchronization eliminates the need for manual page refreshes, ensuring critical medical transport requests are handled with maximum efficiency.
Transactional Email Engine (Nodemailer)
Implemented a robust backend notification system using Google Cloud Functions coupled with Nodemailer. Upon successful form submission, the automated system triggers a serverless function that generates a dynamic, professional HTML email. This email contains a structured table outlining patient details and specific ride requirements, providing immediate, tamper-proof confirmation for both the client and the administrative team.
Security & User Experience
Secure Data Orchestration
Developed rigorous front-end and back-end form handling logic to protect sensitive user information. The system incorporates strict input sanitization, automated phone masking, and intelligent date validation. Once validated, it pushes structured JSON data directly to the ride_requests database node, preserving complete data integrity and preventing injection vulnerabilities across the entire ecosystem.
Responsive UI/UX Architecture
Built a scalable, modular frontend system heavily relying on modern CSS Variables and sophisticated Flexbox/Grid layouts. The application ensures full accessibility and pixel-perfect rendering across all devices, from mobile phones to ultra-wide dispatch monitors. Key UI features include intuitive custom modal interactions for secure admin authentication and highly dynamic "service type" filtering to efficiently refine complex datasets.
</GreenCab: Hancock County Website>
Ongoing Project
</NEMT Management Website>
Ongoing Project
</Community Partnerships Housing Solutions Website>
Ongoing Project
</I Need RRL | Unified Academic Search Engine>
Overview
A specialized academic web application that leverages Generative AI to streamline the Review of Related Literature (RRL) process.
I Need RRL is a specialized academic search engine and research assistant designed to accelerate the creation of a Review of Related Literature (RRL). Recognizing that students often struggle to find credible sources and format citations correctly, this application aggregates data from major academic repositories (Google Scholar via CrossRef, PubMed, Semantic Scholar) into a single interface. Beyond simple search, it features an AI-powered document analyzer that reads a user's research paper and intelligently suggests related studies, bridging the gap between a student's current draft and the sources they need.
Built With:
Key Features & Technical Implementation
AI-Driven Document Analysis
Integrated Anthropic's Claude API to read uploaded research files (PDF, DOCX, TXT), analyze the context, and extract key themes. This allows the system to automatically generate tailored search queries and a customized list of relevant source suggestions.
Unified Academic Search
Simulates a "federated search" by orchestrating complex asynchronous data fetching from diverse public APIs (PubMed, CrossRef, Semantic Scholar, JSTOR). This simultaneous querying allows users to compare results across disciplines in real-time, providing a unified search experience without a backend server.
Client-Side File Processing
Implemented robust, format-agnostic file handling logic using client-side libraries like mammoth.js and native FileReader APIs. This processes raw text and Base64 encoded documents directly in the browser for immediate analysis without needing a heavy backend architecture.
Automated Citation Engine
Developed a custom algorithmic formatter in vanilla JavaScript to convert raw JSON metadata into standardized citations dynamically. It instantly converts URLs or DOIs into perfectly formatted APA (7th), MLA (9th), or Chicago (17th) citations, eliminating manual errors.
</Global Access 1>
Overview
Global Access 1 is a professional web platform developed for a specialized transportation service, focusing on non-emergency medical transit. The website is engineered to provide a seamless, stress-free booking experience for individuals requiring ambulatory, wheelchair, or stretcher transportation.
Understanding that the primary user base may include elderly patients or individuals with disabilities, the interface prioritizes high contrast, clear typography, and straightforward navigation. The custom-built digital booking form replaces traditional phone-only scheduling, routing client requests directly to the dispatch team.
The backend is powered by Node.js, ensuring that sensitive ride requests and contact inquiries are processed securely and efficiently before reaching the administrative dashboard.
Built With:
Key Technical Features:
- Accessible Booking Interface: A responsive, highly legible form structure designed specifically for scheduling specialized medical transport with ease.
- Service Categorization: Clear, intuitive routing for different vehicle requirements including ambulatory, wheelchair, and stretcher services.
- Node.js Backend Processing: Secure server-side handling of user inquiries and transport requests, ensuring reliable data transmission to dispatchers.
- Responsive Architecture: Fluid grid systems utilizing modern CSS to guarantee the site works flawlessly on mobile devices for on-the-go booking.
Features & Implementation
Impact & Reliability
The platform significantly reduces friction in arranging critical medical transportation, minimizing missed healthcare appointments by giving patients and caregivers a direct, 24/7 digital booking avenue.
Streamlined Navigation
The site structure is intentionally kept flat and intuitive. Users can immediately locate the "Book a Ride" call-to-action, learn about fleet capabilities, or contact support without digging through complex nested menus.
Performance Optimization
To accommodate users who may be on slower mobile networks at hospitals or clinics, the website relies on lightweight vanilla JavaScript and optimized asset delivery, resulting in near-instant page load speeds.
</BlindLux | Premium E-Commerce>
Overview
BlindLux is a fully designed and developed e-commerce and service website built for a premium window blind company. The project demonstrates a complete, real-world customer journey — from product discovery all the way through to checkout.
Focused on smooth, intuitive user flows from browsing to purchase, the platform ensures a consistent visual system designed first in Figma and executed with a highly maintainable, responsive frontend architecture and robust backend logic.
Built With:
Design & Development Highlights:
- UI/UX Planning: Designed in Figma before development, ensuring a consistent visual system with a clean, professional blue and white color palette.
- Frontend Architecture: Built with a responsive, component-based frontend structure utilizing HTML, CSS, and JS to keep UI logic maintainable.
- Backend Integration: Utilized MySQL and server-side routing to securely handle user authentication, order processing, and dynamic database queries.
Core Features
Products & Galleries
Features detailed product pages with pricing and feature breakdowns. Includes a filterable project gallery with categories like Roller Blinds, Venetian, Vertical, Roman Shades, and Motorized blinds, all presented in a responsive image-forward grid layout.
Customer Journey & Checkout
A full e-commerce checkout flow handles address entry, multiple payment methods (Credit Card, Bank Transfer, Digital Wallet), and a live order summary sidebar to ensure a frictionless buying experience.
Lead Generation & Inquiries
Integrated a multi-field Free Quote Modal capturing room type, number of windows, blind type, preferred consultation date, and project details alongside a Testimonial and conversion-focused Call-to-Action banner.
Secure Authentication
Complete login and sign-up flow with secure email/password support and OAuth integration capabilities (Google, Facebook) to manage user sessions and order histories.
</Lucid Dreams | Visual Arts Portfolio>
Overview
Lucid Dreams is a high-end, professional portfolio website meticulously built on the Weebly CMS to centralize and prominently showcase a diverse, rich body of visual work. The platform serves as a digital gallery for everything from cinematic music videos to compelling brand storytelling and commercial videography.
By creatively leveraging Weebly’s drag-and-drop infrastructure alongside custom code injections, the site achieves a highly responsive, media-rich environment. It is specifically engineered to handle high-resolution image galleries and heavy embedded video streams seamlessly without sacrificing page load speeds or user experience.
Built With:
Design & Development Highlights:
- Custom CMS Overrides: Utilized raw HTML, CSS, and JavaScript embeds to break free from standard template constraints, delivering a truly bespoke visual layout.
- Media Optimization: Structured the architecture to lazy-load heavy media assets, ensuring ultra-smooth scrolling and playback across all devices.
Core Features
Immersive "Dark Mode" Aesthetic
Engineered a cohesive, deep dark-themed UI that deliberately removes visual clutter. This high-contrast approach forces the user's eye directly toward the vibrant colors and dynamic motion of the embedded video content, simulating a theater-like viewing experience.
Grid-Based Project Catalog
Developed a highly structured, masonry-style grid layout to organize an extensive catalog of projects. The grid dynamically adjusts based on screen size, allowing users to intuitively filter and browse through specific categories like music videos, short films, and corporate branding.
Integrated Booking Funnel
Designed a frictionless contact funnel that gently guides visitors from consuming content directly into a lead generation form. The system captures essential client details and project scopes, instantly routing high-value inquiries to the creative team for fast booking.
</Kent Leach | Personal Brand Portal>
Overview
The Kent Leach platform is a high-impact, meticulously crafted landing page and personal brand hub. It is designed to serve as the ultimate central gateway for a highly professional digital presence, establishing immediate authority and trust with visitors.
Built natively within the Systeme.io ecosystem, the project transcends a basic landing page by operating as a fully functional marketing funnel. It beautifully merges custom frontend scripting with robust backend marketing tools, ensuring that every user interaction is intentionally designed to drive engagement, capture leads, and solidify the client's brand identity.
Built With:
Design & Development Highlights:
- Systeme.io Integration: Masterfully utilized the all-in-one platform to seamlessly handle hosting, page building, and complex automated funnel management within a single, unified ecosystem.
- Responsive Dark Mode Design: Designed a cohesive, premium "Dark Theme" interface using specific hex codes (e.g., #FF7900 for striking accents) and custom Styled Components to guarantee absolute visual consistency across all mobile and desktop viewports.
Core Technical Features
Custom Pre-loader Experience
Engineered a highly engaging, custom CSS3 & JavaScript loading screen that greets users with a "Getting to know Kent..." prompt. This features a smooth, customized spinning animation and an underlying auto-redirect timer, transforming standard loading latency into an engaging, brand-building initial user interaction.
Automated Navigation Logic
Wrote strict vanilla JavaScript logic utilizing precise setTimeout functions to act as an automated digital concierge. It flawlessly routes visitors from the initial splash screen directly to the main content hub after exactly 5 seconds, ensuring a controlled, cinematic introduction to the brand.
</Smart A Investors | Capital Funnel>
Overview
Smart A Investors is an ultra-high-conversion corporate website strategically designed to establish absolute authority and trust within the highly competitive alternative investment space. The site does not merely display information; it functions as a sophisticated, automated lead-generation engine.
Targeting high-net-worth individuals, the platform's architecture is meticulously calibrated to guide users on an educational journey. By smoothly transitioning visitors from consuming high-value educational content directly into scheduling private consultations, the site effectively bridges the gap between passive curiosity and active capital commitment.
Built With:
Design & Development Highlights:
- Conversion-Centric Architecture: Engineered a highly strategic "call-to-action" hierarchy using psychological design principles. This forces user flow from educational diagrams directly toward high-value conversion endpoints like the "Access Elite Investments" portal.
- Community & Lead Capture: Built multiple, non-intrusive entry points for audience retention, including direct API integrations with a private Facebook Community and an automated email newsletter system for continuous, long-term lead nurturing.
Core Features & Integrations
Automated Scheduling Integration
Seamlessly integrated the robust Calendly API into the frontend via a persistent floating widget and deeply embedded trigger buttons ("Schedule a Call with Kent"). This allows high-ticket prospects to execute real-time, zero-friction appointment bookings without ever leaving the primary platform.
Visual Asset Framework
Implemented a highly responsive, custom graphical breakdown of the proprietary "SMART" investment strategy. By utilizing advanced custom CSS layout grids, the complex financial framework remains perfectly legible, engaging, and professional regardless of whether it is viewed on a massive desktop monitor or a mobile device.
</NewDay Child Coaching | Wix Redesign>
Overview
NewDay Child Coaching is a comprehensive, end-to-end website redesign tailored specifically for a woman-owned, therapist-operated virtual pediatric coaching practice that serves families nationwide. The primary objective of this project was to take an existing digital presence and completely modernize it, drastically improving visual clarity, user experience, and the communication of the brand's core mission to parents seeking professional child development support.
By meticulously restructuring the platform within Wix and utilizing custom HTML, CSS, and JS embeds, the new site provides a warm, empathetic, and highly approachable layout. It perfectly balances the professional credibility of a licensed pediatric specialist team with the welcoming, family-friendly accessibility required to convert anxious parents into confident clients.
Built With:
Design & Redesign Highlights:
- Strategic Visual Audit: Conducted a full heuristic and visual audit of the legacy site, conceptualizing the entire redesign in Figma to establish a strict UI/UX system before building the live site in Wix.
- Brand Identity Elevation: Maintained the client's established cream, navy, and teal color palette while significantly enhancing layout hierarchy, white space, and typography to improve overall readability.
- Architectural User Journey: Restructured the site map to guide parents through a logical, reassuring funnel—from discovering the proprietary framework to enrolling in paid developmental courses.
- Custom Asset Creation: Created and refined highly specific custom graphics and marketing assets utilizing a combination of Canva, Adobe Photoshop, and Illustrator.
Core Features & Custom Workflows
Proprietary PathWise™ Framework
Engineered a completely redesigned hero section and dedicated framework page featuring the proprietary PathWise™ matrix (Typical / Delayed / Different × Levels 1–3). This includes an interactive visual grid with custom hover tooltips that carefully explain each level of child development support, instantly helping parents understand their child's unique position.
Thrive Courses Enrollment
Built a high-converting, dedicated enrollment landing page for the brand's developmental coaching curriculum. It combines clinical expertise from PT, OT, and SLP specialists into a clean, trust-building layout designed specifically to alleviate parental anxiety and encourage sign-ups.
E-Commerce Shop & eGift Cards
Integrated a robust product listing page for both digital downloads and physical books, equipped with dynamic category filtering, price range controls, and sorting functionality. Additionally, developed a seamless eGift card purchase flow allowing users to select amounts ($25–$200), input recipient details, schedule delivery dates, and attach personalized messages.
Member Dashboard & Global Search
Implemented a secure User Profile Dashboard providing members with dedicated tabs for Profile Management, Active Subscriptions, Bookings, Digital Wallets, and Settings. Paired this with a global tabbed Search Results Page that elegantly organizes queries across products, services, and blog posts with responsive category filters.
</CMS Site 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AuthentiCodr.>
Overview
WebAuth: Client-Side 2FA Token Manager
AuthentiCodr is a secure, offline-first web application designed to seamlessly replicate the core functionality of Google Authenticator directly within the browser ecosystem.
This project demonstrates a deep understanding of cryptographic protocols by implementing standard Time-Based Two-Factor Authentication (TOTP) logic entirely on the client side, completely eliminating the need for backend infrastructure. By keeping all token generation offline, it ensures maximum privacy, speed, and data security for the user.
The user interface is crafted to be highly intuitive, allowing users to effortlessly add new accounts via manual key entry, track their active tokens, and manage their 2FA lifecycle with an elegant, responsive design.
Built With:
Key Technical Features:
- Offline-First Architecture: 100% client-side operation ensuring zero data transmission to external servers, protecting highly sensitive 2FA seeds.
- Cryptographic Implementation: Custom JavaScript logic to handle HMAC-SHA1 hash generation and accurate TOTP 30-second window calculations.
- Local Data Persistence: Utilizes advanced browser LocalStorage APIs to securely save and retrieve user account profiles across sessions.
Features & Implementation
Privacy & Security Focus
Because authenticators handle critical security gateways, this application was built with a strict zero-trust model. No databases or third-party tracking scripts are included, ensuring the cryptographic keys remain exclusively on the user's local device.
Real-Time UI Synchronization
Developed a precise JavaScript timing loop that syncs perfectly with global epoch time, automatically refreshing the 6-digit passcode and visually animating the countdown timer without any lag or page reloads.
</Student Information System | Full-Stack Portal>
Overview
The Student Information System (SIS) is a robust, full-stack web application engineered specifically for the dynamic and data-heavy environment of a modern university campus. The platform acts as a centralized digital hub, featuring entirely separate, secure portals for both students and university administrators, ensuring that critical academic data is managed flawlessly in real-time.
By combining a modern, glassmorphism-inspired frontend with a highly capable backend data architecture, the system bridges the gap between local database processing and cloud accessibility. This dual-layer approach allows institutions to seamlessly track enrollment, manage class schedules, monitor attendance, and process grading with absolute data integrity and zero operational friction.
Built With:
Development Highlights:
- Hybrid Data Architecture: Connected to MongoDB Atlas for cloud-based persistent storage, while leveraging SQLite and C-based processing for lightning-fast localized data queries and complex relational mapping.
- RESTful API Integration: Developed a comprehensive REST API handling all core CRUD operations (Create, Read, Update, Delete). The frontend consumes these endpoints via secure asynchronous fetch calls.
- Modular Codebase: Structured with a strict separation of concerns, maintaining completely isolated HTML, CSS, and JS logic for the Admin, Student, and Login domains to ensure high maintainability.
Core System Features
Role-Based Authentication Gateway
Features a highly secure, visually striking login screen utilizing a modern glassmorphism UI design. It implements strict role-based access control (RBAC), instantly detecting credentials to route users to either the restricted Student Dashboard or the elevated Faculty/Admin Portal, backed by robust client-side and server-side form validation.
Administrative Management Panel
A command-center interface allowing administrators to view the entire student body through dynamic data tables. Admins possess full operational authority to seamlessly enroll new students via optimized modal forms, as well as instantaneously edit, update, or completely delete existing student records from the database.
Personalized Student Dashboard
Provides students with a dedicated, read-only portal where they can securely review their complete academic profile (including Student ID, enrolled course, and contact data). The dashboard elegantly displays their current academic standing and grades retrieved directly from the cloud database.
Attendance & Schedule Tracking
Equipped with a meticulous attendance marking engine inherently tied to individual student records. It generates a comprehensive history table displaying exact date-stamped 'Present' or 'Absent' logs. Additionally, it features a dynamic per-student Schedule Viewer that organizes and displays exact days, times, and subjects for all actively enrolled courses.
</FocusFlow-AI | Smart Study Scheduler>
Overview
FocusFlow-AI is a highly advanced, offline-first smart scheduling web application meticulously engineered to transform chaotic student workloads into highly structured, personalized study plans. By intelligently synthesizing a user's academic goals, course subjects, and strict deadlines, the platform dynamically generates a clear, actionable roadmap.
What sets FocusFlow apart is its hybrid architecture. It operates flawlessly offline for core scheduling and task management, ensuring uninterrupted productivity. However, when connected to the internet, the system supercharges the experience by leveraging dual AI capabilities (Gemini and Groq APIs) to provide real-time study advice, dynamic schedule adjustments, and tailored exam preparation strategies.
Built With:
Design & Development Highlights:
- Offline-First Architecture: Built with progressive web app (PWA) principles, allowing core features to function without an internet connection, ensuring students can access their schedules anywhere.
- Lightweight & Optimized: Developed using Vanilla HTML, CSS, and JavaScript with zero heavy framework overhead. Bundled with Vite for an ultra-fast, modern development build.
- Deep Focus UI: Designed comprehensively in Figma before development, featuring a dark, focus-friendly user interface that utilizes a calming deep navy and purple color palette to reduce eye strain during late-night study sessions.
Core AI Features & Workflows
Home & Workflow Generator
Features an intuitive "Tell Workflow" input modal where students simply describe their goals, subjects, and priorities in plain, natural text. The integrated AI instantly parses this conversational input to generate a deeply personalized, mathematically structured study schedule optimized for retention.
Dual AI Chat Interface
An integrated, real-time conversational assistant powered simultaneously by Google's Gemini API and the ultra-fast Groq API. This AI tutor acts as a digital study buddy, offering personalized academic advice, answering complex subject questions, and suggesting proven exam preparation strategies on the fly.
Interactive Weekly Schedule View
A beautifully crafted weekly calendar UI that maps out AI-generated study sessions day by day. It features seamless week-by-week browsing capabilities and intelligently assigns flexible "catch-up blocks" during the weekend to ensure students stay on track even if they miss a weekday session.
Visual Learning Framework
A dedicated roadmap page that visually anchors the student's primary objectives (e.g., "Ace Finals in Math, Physics & Chemistry"). It includes an active countdown timer to deadlines and provides a structured, hierarchical breakdown that translates overarching goals into immediate, focused daily actions.
</Where to know>
Overview
"Where to know" is a specialized, data-driven web interface built specifically for the hospitality industry. It empowers hotel management teams by transforming raw guest data into actionable, visual insights.
The core purpose of the platform is to deeply analyze customer feedback, booking trends, and daily service metrics, presenting them in an easy-to-understand dashboard. By identifying key pain points and operational bottlenecks, the site actively suggests targeted ways for hotels to significantly improve their customer service and overall guest satisfaction scores.
From the initial wireframing in Figma to the final frontend execution, every aspect was designed to make complex analytics accessible and visually engaging for non-technical hotel staff.
Built With:
Key Technical Features:
- Interactive Data Dashboards: Clean, responsive HTML/CSS structures built to beautifully render charts and service improvement metrics.
- High-Fidelity Prototyping: Extensive use of Figma for UI/UX planning to ensure the dashboard met the specific usability needs of hotel administrators.
- Motion Graphics Integration: Utilized Adobe After Effects to create smooth, high-quality promotional assets and micro-interactions embedded within the site.
Features & Implementation
Actionable Insights Generation
The frontend is designed to highlight the "why" behind the data. Instead of just showing numbers, the interface dynamically displays custom-tailored suggestions based on mocked analytics to demonstrate real-world utility.
Seamless User Experience
Incorporated modern vanilla JavaScript to manage seamless tab switching, modal popups for detailed data reports, and fluid transitions. The meticulous attention to CSS styling guarantees a premium, enterprise-level feel matching the hospitality sector.
</Pol Coffee Shop>
Overview
Pol Coffee Shop is a beautifully designed, responsive landing page for a specialty coffee cafe. The platform highlights the shop's cozy ambience, premium coffee bean selection, and location details, offering an inviting digital storefront that captures the essence of a serene coffee experience.
Built With:
Design & Development Highlights:
- Vanilla Architecture: Built entirely with Vanilla HTML/CSS/JS for a lightweight, fast, and deeply optimized frontend architecture without relying on heavy frontend frameworks.
- Semantic Structure: Utilized semantic HTML tags to ensure strong accessibility standards and improved SEO for a local business.
- Modern CSS: Leveraged modern CSS techniques including Flexbox and CSS Grid to achieve precise alignment and an aesthetically pleasing content structure.
- Visual Hierarchy: Designed with a strong emphasis on visual hierarchy, typography, and whitespace, ensuring a clean, modern interface that reflects the physical cafe's warm ambience.
- User Flow: Focused on a smooth, intuitive user flow—guiding visitors effortlessly from discovering the shop's story to browsing coffee variants and locating the physical store.
Core Features
Responsive Layout
Created a fully fluid, mobile-first design that looks stunning across all device sizes, from mobile phones to widescreen desktop monitors.
Dynamic Navigation
Implemented a clean, intuitive navigation bar featuring a mobile hamburger toggle menu and scroll-triggered background styling for a seamless browsing experience.
Scroll Animations
Integrated the IntersectionObserver API to trigger smooth fade-up reveal animations as users scroll through the 'About' and 'Beans' sections, adding a premium, interactive feel to the page.
Bean Selection Showcase
Developed a structured grid layout for coffee bean cards, featuring descriptive tags (e.g., Light Roast, Dark Roast) and tasting notes to effectively present the cafe's offerings.
Typography & Branding
Integrated Google Fonts (Inter and Playfair Display) to create a highly legible, elegant, and visually cohesive brand identity throughout the webpage.
</ReciSweets>
Overview
ReciSweets is a full-stack web application that allows users to create, manage, and share their favorite sweet and dessert recipes. The platform supports user authentication, personal recipe collections, and a public gallery for discovering recipes from other users.
Built With:
Design & Development Highlights:
- Vanilla Frontend: Built with Vanilla HTML/CSS/JS for a lightweight, fast, and responsive frontend architecture without relying on heavy frameworks.
- RESTful API: Developed a robust RESTful API with Node.js and Express to handle user data, authentication, and recipe operations securely.
- Flexible Database: Utilized MongoDB and Mongoose for flexible database schema design, allowing complex recipe objects and user relationships.
- Modal-based UI: Designed an intuitive Modal-based UI for adding recipes, viewing details, and sorting, ensuring a seamless single-page user experience.
- User Flow: Focused on a smooth, intuitive user flow from browsing personal collections to discovering new desserts in the public gallery.
Core Features
User Authentication
Secure login and registration system using JWT and password hashing with bcrypt, including session handling via HTTP-only cookies.
Recipe Management
Complete CRUD (Create, Read, Update, Delete) operations for personal recipes. Users can add recipes with images, detailed instructions, ingredients, difficulty, and cooking time.
Public & Private Galleries
Users can maintain a private collection of recipes or share them to a public gallery for other users to discover and save.
Search, Filter & Sort
Custom recipe sorting by name and date, filtering by sweet categories (e.g., Cakes, Cookies, Pastries), and search functionality to quickly find specific recipes.
Recipe PDF Export
Integrated client-side PDF generation to allow users to download beautifully formatted PDF versions of recipes directly from the browser.
Client-Side Image Compression
Implemented an elegant image compression utility using the Canvas API to optimize storage and load times before sending data to the server.
Shareable Links
Ability to generate and copy shareable URLs for public recipes.
</Figma: E-Commerce Ads>
Campaign Creatives & PubMats
A collection of high-converting e-commerce advertising materials designed entirely in Figma. This gallery showcases a versatile approach to product marketing, balancing bold typography, vibrant color theory, and clear calls-to-action to maximize user engagement and click-through rates across social media platforms.
</Figma: Hero Section Designs>
Web UI/UX Concepts
The hero section is the digital storefront of any modern website. This collection explores various UI/UX concepts for landing pages, emphasizing visual hierarchy, striking imagery, and intuitive navigation. Designed in Figma, these layouts are structured to capture immediate attention and clearly communicate value propositions.
</Landing Page Designs>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Design 4>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Design 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Ad Campaign 1>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Ad Campaign 2>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Ad Campaign 3>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Ad Campaign 4>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Ad Campaign 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Canva: E-Commerce Designs (Part 1)>
Social Media Marketing & Brand Assets
A versatile collection of e-commerce creatives and promotional materials designed in Canva. This gallery spans across multiple client brands, showcasing product highlights and engaging visual hierarchies tailored for social feeds.










</Canva: E-Commerce Designs (Part 2)>
Social Media Marketing & Brand Assets
Continuing the collection of high-converting e-commerce advertising materials designed in Canva. This section explores further variations in product layouts and typography-driven announcements.










</Canva: E-Commerce Designs (Part 3)>
Social Media Marketing & Brand Assets
Part three focuses on before-and-after transformations and targeted ad campaigns, emphasizing strong product focus and immediate value propositions.










</Canva: E-Commerce Designs (Part 4)>
Social Media Marketing & Brand Assets
Showcasing dynamic product features and educational brand graphics. By maintaining a strict visual language and utilizing smart negative space, these assets guide the customer's eye directly to the product.










</Canva: E-Commerce Designs (Part 5)>
Social Media Marketing & Brand Assets
Continuing to highlight premium e-commerce creatives with bold aesthetics. This section features promotional discounts and visually arresting brand announcements designed to maximize click-through rates.










</Canva: E-Commerce Designs (Part 6)>
Social Media Marketing & Brand Assets
Showcasing clean overlays and crisp product cutouts. This grid emphasizes the importance of legible, high-contrast text overlaying compelling product photography.










</Canva: E-Commerce Designs (Part 7)>
Social Media Marketing & Brand Assets
Focusing heavily on outdoor and lifestyle integration, demonstrating how products fit naturally into the consumer's world while maintaining brand identity.








</Canva: E-Commerce Designs (Part 8)>
Social Media Marketing & Brand Assets
The final installment of the Canva e-commerce series. This collection rounds out the brand marketing portfolio with a mix of direct sales assets and subtle branding materials.








</Brand Kit 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Promo Video 1>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Promo Video 2>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Promo Video 3>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Promo Video 4>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Promo Video 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Animation 1>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Animation 2>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Animation 3>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Animation 4>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</Animation 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AMV Edit 1>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AMV Edit 2>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AMV Edit 3>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AMV Edit 4>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.
</AMV Edit 5>
Overview
Detailed project overview goes here.
Features
Further details, technical challenges, and solutions.