This document contains comprehensive information about Shivraj Roy's professional profile and portfolio. It includes personal details, work experience, education, projects, and interactive experiments. This data is formatted for consumption by Large Language Models (LLMs) to provide accurate and up-to-date information about Shivraj Roy's background, skills, and expertise as a Creative Frontend Developer. # shivrajroy.in > Creative Frontend Developer who obsesses over pixels, animations, and the small details that make interfaces feel alive. ## About - **Frontend Engineer** who obsesses over the details most engineers skip — animation curves, interaction states, render performance - Shipped 2 production apps that gained traction fast — Typifyy **(50+ users)** and DotCal **(900+ active users)**, both within the first month - Spent 9 months at KraftedX building high-performance websites, AI-powered tools, and automations that saved 20+ hours weekly - Always working at the intersection of clean engineering and thoughtful design - Love building tools that solve real problems — from AI-powered utilities to developer productivity apps - I believe great products aren't built with logic alone — they're built with taste ### Personal Information - Name: Shivraj Roy - Role: Frontend Engineer - Location: Delhi, India - Website: https://www.shivrajroy.in ### Social Links - [GitHub](https://github.com/shivraj-roy) - [LinkedIn](https://www.linkedin.com/in/shivraj-roy10) - [X](https://x.com/shivraj_roy10) ### Tech Stack - [TypeScript](https://www.typescriptlang.org/) - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - [Python](https://www.python.org/) - [C++](https://isocpp.org/) - [Java](https://www.java.com/) - [Node.js](https://nodejs.org/) - [React](https://react.dev/) - [Next.js](https://nextjs.org/) - [Tailwind CSS](https://tailwindcss.com/) - [Redux](https://redux.js.org/) - [Zustand](https://zustand-demo.pmnd.rs/) - [TanStack Query](https://tanstack.com/query) - [GSAP](https://gsap.com/) - [Motion](https://motion.dev/) - [Three.js](https://threejs.org/) - [WebGL](https://www.khronos.org/webgl/) - [MongoDB](https://www.mongodb.com/) - [Firebase](https://firebase.google.com/) - [Supabase](https://supabase.com/) - [MySQL](https://www.mysql.com/) - [PostgreSQL](https://www.postgresql.org/) - [Redis](https://redis.io/) - [Git](https://git-scm.com/) - [Figma](https://www.figma.com/) - [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) - [After Effects](https://www.adobe.com/products/aftereffects.html) - [Vercel](https://vercel.com/) - [AWS](https://aws.amazon.com/) - [Azure](https://azure.microsoft.com/) - [Docker](https://www.docker.com/) - [Kubernetes](https://kubernetes.io/) - [Postman](https://www.postman.com/) - [React Router](https://reactrouter.com/) - [shadcn/ui](https://ui.shadcn.com/) - [Radix UI](https://www.radix-ui.com/) - [Claude](https://claude.ai/) - [ChatGPT](https://chatgpt.com/) - [Model Context Protocol](https://modelcontextprotocol.io/) - [Webflow](https://webflow.com/) - [Framer](https://www.framer.com/) - [Cursor](https://cursor.com/) ## Experience ### Creative Developer | KraftedX Duration: 08.2025 - 01.2026 Skills: Next.js, TypeScript, Claude Skills, React, Tailwind CSS, GSAP, Motion, Gemini Pro API, Directus CMS, Procreate, Procreate Dreams, Activepieces, Figma, Git, Postman - Built KraftedX's primary website and interactive landing page with scroll-triggered animations, achieving **95+ PageSpeed scores**. - Designed and deployed 3 AI tools (color palette generator, carousel creator, content automation) using Gemini Pro API. - Engineered 4 workflow automations integrating multiple APIs, **reclaiming 20+ hours weekly** - Created 15-20 graphic illustrations for LinkedIn generating **30K+ impressions** and an animated hiring post achieving **3000+ views** ### Frontend Developer | KraftedX Duration: 05.2025 - 07.2025 Skills: Next.js, TypeScript, React, Tailwind CSS, Figma, Python, Node.js, REST APIs, Git, Postman, MCP Protocol - Delivered pixel-perfect UI across 3 products and redesigned login page, **reducing authentication friction** - **Resolved 50+ bugs** and optimised performance, achieving **40% faster** load times and **35% faster** response times - Built Python-based email reporting system for 4 clients across 3 platforms, **cutting manual time by 90%** ## Education ### Master of Computer Application | Indira Gandhi National Open University Duration: 06.2024 - 08.2025 - Completed 1st year before transitioning to industry ### Bachelor of Computer Application | Guru Gobind Singh Indraprastha University Duration: 12.2020 - 07.2023 - Bachelor of Computer Application (BCA), Computer Engineering | GPA: 8.3/10 - Best Major Project Award, Final Semester ## Projects ### Typifyy Project URL: https://typifyy.shivrajroy.in Skills: React, TypeScript, Tailwind CSS, Chart.js, Zustand, Firebase, React Router, Vercel A minimalistic and customizable typing test app inspired by Monkeytype. Features multiple test modes (time-based & word-count), real-time WPM and accuracy tracking, performance graphs, and an account system with Firebase auth to save typing history. - Customizable settings including keyboard click sounds, error sounds, speed/accuracy thresholds, and live progress display - Smooth caret animation, keyboard shortcuts (Tab + Enter to restart), and responsive design - Self-hosted fonts with no external CDN dependencies for better performance ### DotCal Project URL: https://www.dotcal.in Skills: React, TypeScript, Next.js, Tailwind CSS, Mapbox API, Sharp, Vercel A dynamic wallpaper generator that visualizes your year, goals, journeys, and life as a grid of dots. Each day updates automatically with a new wallpaper showing your progress. - Four calendar types: Year tracker (365 dots), Goal countdown, Journey maps with live satellite imagery via Mapbox, and Life calendar (4,680 dots — week by week) - Auto-updates wallpapers daily via macOS Shortcuts automation - Customizable colors, goals, dates, and dark mode with a minimal design aesthetic ### Drift Gallary Project URL: https://drift-gallary.vercel.app Skills: React, GSAP, Vite, JavaScript, CSS An interactive, scroll-driven image carousel that arranges slides along a curved arc with buttery smooth animations. - Cosine-based arc layout with dynamic vertical lift for the center slide - Infinite scroll using modular arithmetic — no snapping or teleporting - LERP-based momentum scrolling for a natural drift-to-stop feel - Per-slide transforms (scale, parallax, z-index) computed every frame via `gsap.set()` — zero React re-renders during animation - Touch and wheel input with responsive breakpoints for mobile ### One Piece | Fluid Animation Project URL: https://onepiece.shivrajroy.in Skills: React, Three.js, Custom GLSL shaders, GSAP, Firebase, Resend, Vite A GPU-accelerated interactive experience featuring a real-time Navier-Stokes fluid simulation with 8 custom GLSL shader passes per frame. - Move your cursor or finger across the screen to inject velocity into a fluid field that dynamically blends between two character images using smoothstep transitions - Idle animation system with automated brush strokes that keep the page alive when inactive - Wanted Poster Generator — Google Sign-In waitlist with Firebase Auth + Firestore, pirate-themed confirmation emails via Resend, and a wanted poster marquee in the modal - Confetti celebration with One Piece themed colors ## Arts & Interactions Interactive web experiments and micro-interactions — small, playful UI pieces built for the joy of motion. ### Morph Discovery Bar Interaction URL: https://www.shivrajroy.in/arts/morph-discovery-bar Post: https://x.com/shivraj_roy10/status/2061462190276981032 ### Bloom Picker Interaction URL: https://www.shivrajroy.in/arts/bloom-picker Post: https://x.com/shivraj_roy10/status/2063513363754389625 ### 𝕏 Like Interaction URL: https://www.shivrajroy.in/arts/x-like