[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" export function useMobile() { const [isMobile, setIsMobile] = useState(false) useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } // Initial check checkMobile() // Add event listener window.addEventListener("resize", checkMobile) // Cleanup return () => window.removeEventListener("resize", checkMobile) }, []) return isMobile } [V0_FILE]typescriptreact:file="interactive-portfolio.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback, memo } from "react" import { motion, AnimatePresence } from "framer-motion" import { useMobile } from "@/hooks/use-mobile" // Simulated portfolio data const projects = [ { id: 1, title: "Neuomorphic Dashboard", description: "A unique admin interface with depth and tactility. This dashboard provides an intuitive way to visualize complex data with a modern design approach that emphasizes shadows and subtle gradients to create a sense of physical depth.", tags: ["React", "Tailwind CSS", "Framer Motion"], color: "#2dd4bf", image: "/placeholder.svg?height=300&width=500", liveUrl: "https://example.com", codeUrl: "https://github.com/example", }, { id: 2, title: "Immersive Learning Platform", description: "Educational platform with interactive 3D elements that transform traditional learning into an engaging experience. Students can manipulate virtual objects, explore complex concepts through spatial visualization, and track their progress through gamified elements.", tags: ["Next.js", "Three.js", "TypeScript"], color: "#8b5cf6", image: "/placeholder.svg?height=300&width=500", liveUrl: "https://example.com", codeUrl: "https://github.com/example", }, { id: 3, title: "Ambient Music Generator", description: "AI-powered tool for creating atmospheric soundscapes based on mood, environment, and user preferences. The application uses machine learning to analyze patterns in ambient music and generates unique compositions that adapt to the user's input parameters.", tags: ["TensorFlow.js", "Web Audio API", "React"], color: "#f43f5e", image: "/placeholder.svg?height=300&width=500", liveUrl: "https://example.com", codeUrl: "https://github.com/example", }, { id: 4, title: "Generative Art Engine", description: "Algorithm-based tool for creating unique visual patterns that can be customized through various parameters. Users can adjust complexity, color schemes, and animation properties to generate artwork that can be exported as high-resolution images or animations.", tags: ["Canvas API", "p5.js", "Node.js"], color: "#f97316", image: "/placeholder.svg?height=300&width=500", liveUrl: "https://example.com", codeUrl: "https://github.com/example", }, ] const skills = [ { name: "Frontend Development", level: 90, color: "#06b6d4" }, { name: "UI/UX Design", level: 85, color: "#8b5cf6" }, { name: "Backend Development", level: 75, color: "#22c55e" }, { name: "Creative Coding", level: 80, color: "#f97316" }, { name: "3D Visualization", level: 70, color: "#f43f5e" }, ] const experience = [ { year: "2023", title: "Senior Frontend Developer", company: "Tech Innovations Inc.", description: "Led development of interactive web applications, mentored junior developers, and implemented modern frontend architecture using React and TypeScript.", }, { year: "2021", title: "Frontend Developer", company: "Creative Digital Agency", description: "Built responsive websites and interactive experiences for major clients across various industries using modern JavaScript frameworks and animation libraries.", }, { year: "2019", title: "Junior Web Developer", company: "StartUp Ventures", description: "Contributed to building the company's flagship product, focusing on UI components and responsive design implementation.", }, ] const testimonials = [ { name: "Sarah Johnson", role: "Marketing Director", company: "Brand Co", quote: "Working with this developer was a game-changer for our company. The attention to detail and creative solutions exceeded our expectations.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Michael Chen", role: "Startup Founder", company: "TechLaunch", quote: "Incredibly responsive and professional. Delivered our project on time and with features we hadn't even thought of. Highly recommended!", avatar: "/placeholder.svg?height=80&width=80", }, { name: "Emma Rodriguez", role: "Product Manager", company: "SaaS Platform", quote: "The developer's ability to translate our complex requirements into an intuitive interface was impressive. Our users love the result.", avatar: "/placeholder.svg?height=80&width=80", }, { name: "David Kim", role: "Creative Director", company: "Design Studio", quote: "Rare to find a developer with both technical expertise and an eye for design. The collaborative process was smooth and the outcome was exceptional.", avatar: "/placeholder.svg?height=80&width=80", }, ] // Remove the custom cursor completely // Replace CustomCursor component with a simplified version that doesn't use hooks or state const CustomCursor = memo(({ cursorText }: { cursorText: string }) => { // Return null - effectively disabling the custom cursor return null }) CustomCursor.displayName = "CustomCursor" // Animated background particles component const ParticleBackground = () => { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Create particles const colors = ["#8b5cf6", "#ec4899", "#06b6d4", "#22c55e"] const particles = Array.from({ length: 50 }, () => ({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 3 + 1, speedX: (Math.random() - 0.5) * 0.5, speedY: (Math.random() - 0.5) * 0.5, color: colors[Math.floor(Math.random() * colors.length)], })) // Animation loop let animationId: number const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) particles.forEach((particle) => { // Update position particle.x += particle.speedX particle.y += particle.speedY // Bounce off edges if (particle.x < 0 || particle.x > canvas.width) { particle.speedX *= -1 } if (particle.y < 0 || particle.y > canvas.height) { particle.speedY *= -1 } // Draw particle ctx.beginPath() ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2) ctx.fillStyle = particle.color ctx.globalAlpha = 0.3 ctx.fill() }) animationId = requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", resizeCanvas) cancelAnimationFrame(animationId) } }, []) // Empty dependency array - only run once return

About Me

Background

Approach

Experience Timeline

Featured Projects

{project.title}

{selectedProject.title}

Technologies

Skills & Expertise

Client Testimonials

Get In Touch