FULL STACK

DEVELOPER

Designing & craftingAppsApps

CORE
Values

User-Centric Design

Crafting engaging and intuitive user interfaces that are not only visually appealing but also easy to navigate, ensuring a seamless user experience.

Security

Prioritizing robust security measures from the start, implementing best practices to protect your application and user data against threats.

Efficiency

Building performant applications with clean, optimized code and efficient architecture, ensuring fast load times and smooth operation.

ABOUT ME
ABOUT ME
Hi there! I enjoy developing web apps by using Next.js, Node.js, TypeScript with a keen eye for visually captivating UI/UX design. Experienced in delivering high performing, scalable applications that integrate advanced animation libraries (GSAP, Framer Motion) and cutting-edge 3D frameworks (Three.js, React Three Fiber). I prioritize clean design, strong security practices and efficiency in every project.
BACK-END spare
BACK-END
Node.js, AWS, Appwrite, Firebase
FRONT-END
FRONT-END spare
FRONT-END
React.js, Next.js, Vite, TypeScript, JavaScript (ES6+), React Native
3D & ANIMATION
3D & ANIMATION spare
3D & ANIMATION
Three.js, React Three Fiber & Drei, GSAP, Framer Motion
entrance.webp

TECH Stack

  • Builds interactive UIs using component architecture and Virtual DOM for performance. Declarative logic and hooks simplify state management. Its vast ecosystem and community support make it ideal for complex SPAs.
    React.jsDeclarative Component Framework
  • Powerful React framework for production web apps, featuring SSR/SSG for SEO and performance. Simplifies routing and backend tasks with API routes. Built-in optimizations enhance developer experience and app speed.
    Next.jsServer Rendering Framework
  • Enhances JavaScript with static types, improving code quality and maintainability. Catches errors at compile time, offers excellent tooling like autocompletion, and simplifies collaboration on large projects.
    TypeScriptStatic Typed JavaScript
  • A utility-first CSS framework for rapidly building custom UIs directly in HTML. Promotes consistency via a configurable design system. Its JIT engine ensures optimized, small CSS files for faster load times.
    Tailwind CSSUtility First CSS
  • Versatile JavaScript library for creating interactive 3D graphics in browsers via WebGL. Provides fine-grained control over scenes, cameras, lighting, and animations, supporting complex models and immersive experiences.
    Three.jsWebGL 3D Graphics
  • Builds declarative 3D scenes in React using R3F, bridging React's model with Three.js. Drei provides helpers and components, reducing boilerplate and accelerating creation of complex, interactive 3D web experiences.
    React Three Fiber & DreiReact Three Abstraction
  • High-performance JavaScript animation platform for intricate, controlled web animations. Excels at complex sequencing and animating diverse properties smoothly. Modular plugins like ScrollTrigger offer unparalleled creative control.
    GSAP (GreenSock)High Performance Animations
  • Integrates production-ready animations, complex gestures, and layout transitions in React with an intuitive API. Simplifies state-based animations and fluid interactions. Easily adds sophisticated, physics-based motion within JSX.
    Framer MotionDeclarative Motion Library
  • Industry-standard platform for Git version control, source-code management, and collaboration. Features pull requests, issue tracking, and branching for team productivity. GitHub Actions enables CI/CD automation.
    GitHubCollaborative Code Platform
  • Node Package Manager for project dependencies and accessing the vast JavaScript code registry. Simplifies installing and managing libraries. `package.json` ensures consistent builds; `npm scripts` automate tasks.
    NPMJavaScript Dependency Manager
  • Highly-configurable static module bundler that processes and optimizes JS applications and assets for browsers. Improves load times using loaders and plugins for features like HMR and advanced build optimizations.
    WebpackStatic Module Bundler
  • Platform for businesses to easily facilitate payments between multiple parties. Enables marketplaces and SaaS platforms to integrate payment splitting and complex payouts seamlessly.
    Stripe ConnectConnected Accounts Platform
  • Collection of beautifully designed, copy-paste UI components built with Tailwind CSS and Framer Motion. Ideal for crafting modern, highly animated web interfaces quickly.
    Aceternity UIModern UI Components
  • Provides robust authentication and authorization as a service. Simplifies adding secure login, user management, and fine-grained access control to any application.
    Auth0Identity & Access Management
  • Amazon Web Services offers a broad array of global cloud-based products. Includes scalable compute, storage, databases, analytics, networking, machine learning, and more services.
    AWSCloud Computing Services
  • End-to-end cloud solution for comprehensive image and video management. Provides smart storage, optimization, real-time transformation, and delivery via CDN for web/mobile apps.
    CloudinaryMedia Management Platform
  • Serverless backend platform featuring a reactive data model. Simplifies building full-stack, real-time applications with TypeScript, offering automatic state synchronization and data consistency.
    ConvexReactive Backend Platform
  • Self-hostable Backend-as-a-Service platform. Provides pre-built APIs for authentication, databases, storage, functions, and real-time communication to accelerate modern app development.
    AppwriteOpen-Source BaaS
  • JavaScript framework for building native mobile applications for both iOS and Android from a single codebase. Leverages React's declarative UI paradigm for efficient mobile development.
    React NativeCross-Platform Mobile Dev
  • Service for sending emails directly from client-side JavaScript code without needing a backend. Useful for contact forms and simple email notifications in web apps.
    EmailJSClient-Side Email Service
  • Open-source platform and toolkit for making universal React applications. Streamlines React Native development with tools, services, and a managed workflow for easier builds and deployments.
    ExpoReact Native Toolkit
  • Real-time image optimization, transformation, and smart delivery CDN. Significantly enhances website performance with automatically optimized images and faster loading times across devices.
    ImageKit.ioImage Optimization & CDN
  • Cloud communications platform providing versatile APIs for SMS, voice, video, email, and chat. Enables developers to easily embed various communication features into their applications.
    TwilioCommunication APIs
  • Modern frontend build tool and development server known for its speed. Offers instant server start, lightning-fast Hot Module Replacement (HMR), and optimized builds for web projects.
    ViteNext-Gen Frontend Tooling
  • Popular NoSQL document-oriented database. Stores data in flexible, JSON-like documents, enabling dynamic schemas and scalable solutions for modern application development.
    MongoDBNoSQL Document Database
  • Integrates Tailwind CSS utility classes directly into React Native applications. Allows developers to use familiar Tailwind syntax for styling mobile apps consistently and rapidly.
    NativeWindTailwind for React Native
  • Powerful, open-source object-relational database system. Renowned for its reliability, data integrity, feature robustness, and performance in handling complex data workloads.
    PostgreSQLRelational Database System
  • Modern email sending platform designed for developers. Focuses on high deliverability and reliability for transactional and marketing emails through a simple, clean API.
    ResendEmail API for Developers
  • A collection of beautifully designed, re-usable UI components built with Radix UI and Tailwind CSS. Not a traditional library, but rather copy-pasteable code for custom UIs.
    shadcn/uiReusable UI Components
  • Developer-first authentication and user management service. Provides embeddable UI components (React, Next.js) and robust APIs for seamless integration of secure auth flows.
    ClerkUser Management Platform
  • Lightweight, TypeScript-first Object Relational Mapper for SQL databases. Offers excellent type safety, schema migrations, and an intuitive query builder for modern backend development.
    Drizzle ORMTypeScript SQL ORM
  • Implementation of dark mode theming to enhance user interface accessibility and visual comfort. Provides an alternative color scheme, often user-toggleable, for low-light environments.
    Dark Mode ThemingUI Dark Mode Support
  • Tools or libraries specifically for implementing dark mode toggling and theme management within React applications, often leveraging React Context for state propagation.
    React Dark ModeDark Mode for React Apps
  • Comprehensive suite of payment APIs powering online commerce globally. Enables businesses to securely accept payments, send payouts, and manage financial operations online effectively.
    StripeOnline Payment Processing
  • Serverless data platform offering Redis and Kafka for data-intensive applications. Features per-request pricing and global low-latency access, ideal for modern cloud architectures.
    UpstashServerless Data Platform
  • cloudinarycloudinary
  • appwriteappwrite
  • HOSTINGERHOSTINGER
  • streamstream
  • docker.docker.

EXPLORE
DESIGNS

I regularly collect modern UI/UX inspirations to keep my creative edge

RECENT
PROJECTS

Modern Next.js Portfolio

Portfolio Landing Page crafted using Next.js, Three.js, Framer Motion and TailwindCSS

Hero sectionBento Grid sectionRecent ProjectsTestimonials

SaaS Xora Modern UI/UX

SaaS Landing Page developed using React.js and Tailwind CSS that exemplifies modern UI/UX principles.

SaaS XoraSaaS XoraSaaS XoraSaaS Xora

3D Portfolio

Minimalistic 3D portfolio landing page built with React.js, Three.js and TailwindCSS to demonstrate developer skills.

3D Portfolio3D Portfolio3D Portfolio3D Portfolio

Healthcare Management

A full stack healthcare patient management application that allows patients to register, book and manage their appointments with doctors, featuring administrative tools for scheduling, confirming, and canceling appointments, along with SMS notifications.

Welcome ScreenPatient RegistrationPatient Registration continuedAdmin dashboard

Awwwards Zentry Clone

Visually captivating website inspired by Zentry, featuring scroll-triggered animations, geometric transitions and engaging video storytelling.

Zentry CloneZentry CloneZentry CloneZentry Clone

File Management Platform

A storage management and file sharing platform that lets users effortlessly upload, organize, and share files. Built with the latest Next.js 15 and the Appwrite Node SDK.

File ManagementFile Management

3D iPhone Landing Page Clone

Clone of Apple's iPhone 15 Pro website using React.js and TailwindCSS. It highlights the effective use of GSAP (Greensock Animations) and Three.js for displaying iPhone 15 Pro models.

iPhone CloneiPhone CloneiPhone CloneiPhone Clone

University Library Management System

Full stack University Library Management System built with Next.js, TypeScript and Postgres. Production-grade platform featuring a public-facing app and an admin interface.

Library SystemLibrary SystemLibrary SystemLibrary System

WORK
Experience

Software Support | HSBC

Jan 2025 – Apr 2025

    IT Support Analyst | Greystar

    Jan 2024 – Aug 2024

      Software Licensing Admin | Bournemouth University

      Oct 2022 – Oct 2023

        IT Admin / Engineer | Orange

        Sep 2020 – Oct 2022

          Service Desk Analyst | Capgemini

          Oct 2015 – Jul 2017
            Tap / click to morph