Case Studies

Projects Made

A curated showcase of real-world products built from idea to shipped — covering full-stack web, mobile, AI, and cloud solutions.

Web Development

Modern websites & web applications built with cutting-edge technologies

I build responsive, dynamic web applications using modern JavaScript frameworks like React, with robust backend systems powered by Node.js and Express. From e-commerce platforms to content management systems, my web solutions are designed for performance, scalability, and exceptional user experience.

Mobile App Development

Cross-platform mobile applications for Android and iOS

I develop native-feeling mobile applications using React Native and Flutter that work seamlessly across both iOS and Android platforms. My mobile solutions feature intuitive UIs, smooth animations, and full integration with device capabilities like camera, GPS, and push notifications.

AI & Machine Learning

Intelligent solutions powered by artificial intelligence

Leveraging the power of machine learning and AI APIs, I build intelligent applications that can analyze data, recognize patterns, and make predictions. From chatbots to recommendation systems, these solutions bring automation and smart functionality to various business processes.

Cloud & DevOps Solutions

Scalable infrastructure and continuous deployment pipelines

I build and deploy cloud infrastructure using AWS and Google Cloud, implementing CI/CD pipelines for automated testing and deployment. My cloud solutions focus on scalability, security, and reliability, ensuring your applications remain available and performant at all times.

Let's Collaborate

Have a Project in Mind?

I'm always open to discussing new opportunities, challenging projects, or just having a great conversation about tech.

Get In Touch Back to Home
50+Projects Shipped
30+Happy Clients
5+Years Experience

🐛 Bug Blaster

Smash the bugs before they escape! Click fast, coder.

0
Score
❤️❤️❤️
Lives
30
Seconds
1
Level
3
const section = canvas.parentElement; const W = () => section.offsetWidth; const H = () => section.offsetHeight; const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(W(), H()); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(55, W() / H(), 0.1, 300); camera.position.set(0, 0, 20); // Floating cube nodes const cubeGeo = new THREE.BoxGeometry(0.4, 0.4, 0.4); const nodes = []; const CUBE_COUNT = 55; for (let i = 0; i < CUBE_COUNT; i++) { const mat = new THREE.MeshBasicMaterial({ color: i % 4 === 0 ? 0x4facfe : 0x00f2fe, wireframe: true, transparent: true, opacity: 0.55 + Math.random() * 0.4 }); const mesh = new THREE.Mesh(cubeGeo, mat); const x = (Math.random() - 0.5) * 40; const y = (Math.random() - 0.5) * 18; const z = (Math.random() - 0.5) * 15; mesh.position.set(x, y, z); mesh.scale.setScalar(0.4 + Math.random() * 1.8); nodes.push({ mesh, origX: x, origY: y, speed: 0.4 + Math.random() * 0.9, phase: Math.random() * Math.PI * 2, rotX: (Math.random() - 0.5) * 0.025, rotY: (Math.random() - 0.5) * 0.025, rotZ: (Math.random() - 0.5) * 0.015, }); scene.add(mesh); } // Connection lines const lineMat = new THREE.LineBasicMaterial({ color: 0x00f2fe, transparent: true, opacity: 0.1 }); const lineGroup = new THREE.Group(); scene.add(lineGroup); // Central holographic ring const ringGeo = new THREE.TorusGeometry(3, 0.04, 8, 60); const ringMat = new THREE.MeshBasicMaterial({ color: 0x00f2fe, transparent: true, opacity: 0.25 }); const ring1 = new THREE.Mesh(ringGeo, ringMat); const ring2 = new THREE.Mesh(new THREE.TorusGeometry(2, 0.03, 8, 60), new THREE.MeshBasicMaterial({ color: 0x4facfe, transparent: true, opacity: 0.2 })); ring2.rotation.x = Math.PI / 3; scene.add(ring1, ring2); let mx = 0, my = 0; document.addEventListener('mousemove', e => { mx = (e.clientX / window.innerWidth - 0.5) * 2; my = -(e.clientY / window.innerHeight - 0.5) * 2; }); window.addEventListener('resize', () => { renderer.setSize(W(), H()); camera.aspect = W() / H(); camera.updateProjectionMatrix(); }); let t = 0; function animate() { requestAnimationFrame(animate); t += 0.007; camera.position.x += (mx * 5 - camera.position.x) * 0.04; camera.position.y += (my * 1.5 - camera.position.y) * 0.04; camera.lookAt(scene.position); ring1.rotation.y = t * 0.6; ring1.rotation.x = Math.sin(t * 0.3) * 0.2; ring2.rotation.z = t * 0.8; nodes.forEach(n => { n.mesh.rotation.x += n.rotX; n.mesh.rotation.y += n.rotY; n.mesh.rotation.z += n.rotZ; n.mesh.position.y = n.origY + Math.sin(t * n.speed + n.phase) * 1.4; n.mesh.position.x = n.origX + Math.cos(t * n.speed * 0.6 + n.phase) * 0.5; }); // Dynamic connections while (lineGroup.children.length > 0) { const l = lineGroup.children[0]; lineGroup.remove(l); l.geometry.dispose(); } const pts = []; for (let i = 0; i < CUBE_COUNT; i++) { for (let j = i + 1; j < CUBE_COUNT; j++) { if (nodes[i].mesh.position.distanceTo(nodes[j].mesh.position) < 5.5) { pts.push(nodes[i].mesh.position.clone(), nodes[j].mesh.position.clone()); } } } if (pts.length) { lineGroup.add(new THREE.LineSegments( new THREE.BufferGeometry().setFromPoints(pts), lineMat )); } renderer.render(scene, camera); } animate(); })(); // ══════════════════════════════════════════ // 3D TILT ON DYNAMICALLY GENERATED CARDS // (Called after showProjects runs) // ══════════════════════════════════════════ function applyCardPhysics() { document.querySelectorAll('.project-card').forEach(card => { if (card._physicsApplied) return; card._physicsApplied = true; card.addEventListener('mousemove', e => { const r = card.getBoundingClientRect(); const dx = (e.clientX - r.left - r.width / 2) / (r.width / 2); const dy = (e.clientY - r.top - r.height / 2) / (r.height / 2); card.style.transform = `perspective(900px) rotateX(${-dy * 8}deg) rotateY(${dx * 8}deg) scale(1.03)`; card.style.boxShadow = `${-dx * 12}px ${-dy * 12}px 30px rgba(0,242,254,0.15), 0 20px 50px rgba(0,0,0,0.5)`; }); card.addEventListener('mouseleave', () => { card.style.transform = ''; card.style.boxShadow = ''; }); }); } // Patch showProjects to call applyCardPhysics after rendering const _origShowProjects = window.showProjects; if (typeof _origShowProjects === 'function') { window.showProjects = function(data) { _origShowProjects(data); setTimeout(applyCardPhysics, 200); }; } else { // Fallback: watch DOM for cards const obs = new MutationObserver(() => applyCardPhysics()); obs.observe(document.body, { childList: true, subtree: true }); } // ══════════════════════════════════════════ // CTA SECTION — PARTICLE RING CANVAS // ══════════════════════════════════════════ (function initCtaCanvas() { const canvas = document.getElementById('cta-canvas'); if (!canvas || typeof THREE === 'undefined') return; const section = canvas.parentElement; const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(section.offsetWidth, section.offsetHeight); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, section.offsetWidth / section.offsetHeight, 0.1, 200); camera.position.z = 18; // Orbiting rings const rings = []; const ringData = [ { r: 7, tube: 0.04, color: 0x00f2fe, opacity: 0.3, rx: 0.01, ry: 0.008 }, { r: 5, tube: 0.03, color: 0x4facfe, opacity: 0.2, rx: -0.006, ry: 0.015 }, { r: 9.5, tube: 0.025, color: 0x00f2fe, opacity: 0.15, rx: 0.004, ry: -0.01 }, ]; ringData.forEach(d => { const m = new THREE.Mesh( new THREE.TorusGeometry(d.r, d.tube, 6, 80), new THREE.MeshBasicMaterial({ color: d.color, transparent: true, opacity: d.opacity }) ); rings.push({ mesh: m, rx: d.rx, ry: d.ry }); scene.add(m); }); // Floating particles const pCount = 120; const pGeo = new THREE.BufferGeometry(); const pPositions = new Float32Array(pCount * 3); for (let i = 0; i < pCount; i++) { pPositions[i*3] = (Math.random() - 0.5) * 35; pPositions[i*3+1] = (Math.random() - 0.5) * 20; pPositions[i*3+2] = (Math.random() - 0.5) * 12; } pGeo.setAttribute('position', new THREE.BufferAttribute(pPositions, 3)); const particles = new THREE.Points(pGeo, new THREE.PointsMaterial({ color: 0x00f2fe, size: 0.08, transparent: true, opacity: 0.6 })); scene.add(particles); window.addEventListener('resize', () => { renderer.setSize(section.offsetWidth, section.offsetHeight); camera.aspect = section.offsetWidth / section.offsetHeight; camera.updateProjectionMatrix(); }); let t = 0; function animate() { requestAnimationFrame(animate); t += 0.006; rings.forEach(r => { r.mesh.rotation.x += r.rx; r.mesh.rotation.y += r.ry; }); particles.rotation.y = Math.sin(t * 0.3) * 0.15; particles.rotation.x = Math.cos(t * 0.2) * 0.08; renderer.render(scene, camera); } animate(); })(); // pulse-badge keyframes (inject if needed) if (!document.getElementById('pulse-badge-kf')) { const s = document.createElement('style'); s.id = 'pulse-badge-kf'; s.textContent = `@keyframes pulse-badge { 0%,100%{box-shadow:0 0 0 0 rgba(0,242,254,0)} 50%{box-shadow:0 0 0 8px rgba(0,242,254,0.06)} }`; document.head.appendChild(s); }