Go back

UI Components

A collection of the custom components used across my portfolio. Feel free to view the source code and use them in your own projects!

Navbar

A floating, sticky navigation bar with fluid spring animations. Includes a dynamic boot/shutdown animation when navigating.

Tech Stack Orbit

An animated orbiting tech stack component. It displays languages and tools in continuous rotating circles using purely CSS/Framer Motion.

Front End

React JSReact JS
Next JSNext JS
Tailwind CSSTailwind CSS
Shadcn UIShadcn UI
Framer MotionFramer Motion

Back End

Node JSNode JS
MongoDBMongoDB
PostgresSQLPostgresSQL
FirebaseFirebase

Language

JavascriptJavascript
TypescriptTypescript
PythonPython
C++C++
PHPPHP

Tools

GitGit
GitHubGitHub
CursorCursor
DockerDocker
ClaudeClaude
GeminiGemini

Deployment

VercelVercel
Google CloudGoogle Cloud
NetlifyNetlify

Design

FigmaFigma

Expandable Content

An accordion-style list element that expands and collapses content with a smooth layout transition. Perfect for experience or FAQs.

Aaj nahi kal baat karte hai
Pakka Promise

Lorem Ipsum is the best text placeholder ever. Kyuki isse accha text placeholder koi nahi hai. Aur jab aaj baat hi nahi karni to placeholder lagana pad jata hai. Isiliye kalse placeholder nahi par kal to kabhi aata hi nahi hai, ye to kuch gadbad hai.

Kal to aaj se accha hoga
Sahi mein?

Jab kal aaj se accha hoga to aaj kal se accha kyu nahi ho sakta? Isiliye kal par mat टालो, aaj hi baat karte hai. Bery gud beta. Kal se kuch to naya hoga jab aaj kuch naya nahi hua to. Aaj to yehi hona tha isiliye kal kisne dekha hai jo karna hai aaj hi karo aur kuch to dhang se likhlo yaha

Tooltip

A highly responsive tooltip wrapper component. Supports dynamic positioning and slick fade-in animations.

Cat Cursor

A playful custom cursor component featuring Tom the cat interacting dynamically with mouse movements and clicks. Works best on desktop.

Interact within this box with the cat cursor!