[V0_FILE]typescriptreact:file="components/navbar.tsx" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import Link from "next/link" import { motion, AnimatePresence } from "framer-motion" import { Menu, X, Github, Linkedin, Calendar } from "lucide-react" export default function Navbar() { const [isOpen, setIsOpen] = useState(false) const [scrolled, setScrolled] = useState(false) useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setScrolled(true) } else { setScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const navLinks = [ { name: "Home", href: "#home" }, { name: "About", href: "#about" }, { name: "Services", href: "#services" }, { name: "Work", href: "#work" }, { name: "Contact", href: "#contact" }, ] const scrollToSection = (e: React.MouseEvent, href: string) => { e.preventDefault() const targetId = href.replace("#", "") const elem = document.getElementById(targetId) elem?.scrollIntoView({ behavior: "smooth" }) setIsOpen(false) } const iconVariants = { initial: { scale: 1 }, hover: { scale: 1.2, rotate: 5 }, } return (

scrollToSection(e, "#home")}> Aakash4dev. {/* Desktop Navigation */}

{navLinks.map((link) => ( scrollToSection(e, link.href)} > {link.name} ))}

{/* Mobile Navigation Toggle */}

{/* Mobile Navigation Menu */} {isOpen && ( {navLinks.map((link, index) => ( scrollToSection(e, link.href)} > {link.name} ))} )} ) } [V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" export default function CustomCursor() { const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isHovering, setIsHovering] = useState(false) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }) } const handleMouseOver = (e: MouseEvent) => { if ( e.target instanceof HTMLElement && (e.target.tagName === "A" || e.target.tagName === "BUTTON" || e.target.closest("a") || e.target.closest("button")) ) { setIsHovering(true) } else { setIsHovering(false) } } window.addEventListener("mousemove", handleMouseMove) document.addEventListener("mouseover", handleMouseOver) return () => { window.removeEventListener("mousemove", handleMouseMove) document.removeEventListener("mouseover", handleMouseOver) } }, []) return ( <> ) } [V0_FILE]typescriptreact:file="components/social-icon.tsx" isEdit="true" isMerged="true" import type React from "react" import Link from "next/link" import type { ReactNode } from "react" interface SocialIconProps { icon: ReactNode href: string label: string className?: string onClick?: (e: React.MouseEvent) => void } export default function SocialIcon({ icon, href, label, className = "", onClick }: SocialIconProps) { return ( {icon} {label} ) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Custom scrollbar styles */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #8b5cf6, #ec4899); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #7c3aed, #db2777); } /* For Firefox */ * { scrollbar-width: thin; scrollbar-color: #8b5cf6 #1a1a1a; } @keyframes glitch { 0% { clip-path: inset(50% 0 30% 0); transform: translate(-5px, 0); } 20% { clip-path: inset(15% 0 65% 0); transform: translate(5px, 0); } 40% { clip-path: inset(45% 0 40% 0); transform: translate(-5px, 0); } 60% { clip-path: inset(25% 0 60% 0); transform: translate(5px, 0); } 80% { clip-path: inset(55% 0 30% 0); transform: translate(-5px, 0); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(0); } } .glitch { animation: glitch 1s infinite; position: relative; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .glitch::before { left: 2px; text-shadow: -2px 0 #8b5cf6; clip: rect(24px, 550px, 90px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; } .glitch::after { left: -2px; text-shadow: -2px 0 #ec4899; clip: rect(85px, 550px, 140px, 0); animation: glitch-anim 2s infinite linear alternate-reverse; } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/loading.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { motion, useAnimation } from "framer-motion" export default function Loading() { const [progress, setProgress] = useState(0) const controls = useAnimation() useEffect(() => { const duration = 12 // Total duration in seconds (increased from 6 to 18 for 3x slower) const interval = 50 // Update interval in milliseconds const timer = setInterval(() => { setProgress((prev) => { const next = prev + 100 / ((duration * 500) / interval) if (next >= 100) { clearInterval(timer) return 100 } return next }) }, interval) return () => clearInterval(timer) }, []) useEffect(() => { controls.start({ width: `${progress}%` }) }, [progress, controls]) return (

{/* Main loading bar container */}

{/* Gradient background */} {/* Progress bar */} {/* Glow effect */}

{/* Percentage text */}

{Math.round(progress)}%

{/* Loading text with glitch effect */} Loading...

) } [V0_FILE]typescriptreact:file="components/interactive-shapes.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" const shapes = [ { type: "circle", size: 50 }, { type: "square", size: 40 }, { type: "triangle", size: 60 }, { type: "circle", size: 30 }, { type: "square", size: 50 }, { type: "triangle", size: 40 }, ] export default function InteractiveShapes() { const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const { clientX, clientY } = e const shapes = containerRef.current?.children if (shapes) { Array.from(shapes).forEach((shape: Element, index) => { const speed = (index + 1) * 0.5 const x = (window.innerWidth - clientX * speed) / 100 const y = (window.innerHeight - clientY * speed) / 100 ;(shape as HTMLElement).style.transform = `translate(${x}px, ${y}px)` }) } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) return (

{shapes.map((shape, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/contact-email.tsx" isEdit="true" isMerged="true" export default function ContactEmail() { return ( aakash4dev.me@gmail.com ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import "./globals.css" export const metadata: Metadata = { title: "Aakash Singh Rajput - Blockchain Developer & Full Stack Engineer", description: "Portfolio of Aakash Singh Rajput, a Blockchain Developer and Full Stack Engineer specializing in Web3 technologies.", generator: "Next.js", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="hooks/useThree.ts" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import type * as THREE from "three" export function useThree() { const [three, setThree] = useState(null) useEffect(() => { import("three").then((THREE) => { setThree(THREE) }) }, []) return three } [V0_FILE]json:file="package.json" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^18.2.0", "react-day-picker": "8.10.1", "react-dom": "^18.2.0", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "@react-three/drei": "^9.88.0", "@react-three/fiber": "^8.14.5", "expo": "^49.0.0", "three": "^0.157.0", "react-tsparticles": "^2.9.3", "tsparticles": "^2.9.3", "tsparticles-slim": "^2.9.3" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/three-scene.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef } from "react" import { Canvas } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import dynamic from "next/dynamic" import * as THREE from "three" import FloatingBoxes from "./floating-boxes" import ParticlesAnimation from "./particles-animation" function Scene() { const groupRef = useRef() const useThree = dynamic(() => import("@react-three/fiber").then((mod) => mod.useThree), { ssr: false, }) const useFrame = dynamic(() => import("@react-three/fiber").then((mod) => mod.useFrame), { ssr: false, }) const { camera } = useThree() useFrame(({ mouse }) => { if (groupRef.current) { groupRef.current.rotation.y = THREE.MathUtils.lerp(groupRef.current.rotation.y, mouse.x * 0.5, 0.1) groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.5, 0.1) } }) return ( ) } export default function ThreeScene() { return (

) } [V0_FILE]typescriptreact:file="components/particles-animation.tsx" isEdit="true" isMerged="true" "use client" import { useRef, useMemo, useState, useEffect } from "react" import { useFrame, useThree } from "@react-three/fiber" import { PointMaterial } from "@react-three/drei" import type * as THREE from "three" import { useThree as useThreeHook } from "@/hooks/useThree" // Generate random points in a 3D space with a spherical tendency function generatePoints(count: number, radius: number) { const points = new Float32Array(count * 3) for (let i = 0; i < count; i++) { const i3 = i * 3 const theta = Math.random() * Math.PI * 2 const phi = Math.acos(2 * Math.random() - 1) const r = radius * Math.cbrt(Math.random()) // Cube root for more uniform distribution points[i3] = r * Math.sin(phi) * Math.cos(theta) points[i3 + 1] = r * Math.sin(phi) * Math.sin(theta) points[i3 + 2] = r * Math.cos(phi) } return points } function ParticlesInstance({ count = 2000, size = 0.05, radius = 5 }) { const threeLib = useThreeHook() const pointsRef = useRef(null) const [hovered, setHovered] = useState(false) const { mouse, viewport } = useThree() // Generate points only once const points = useMemo(() => generatePoints(count, radius), [count, radius]) // Create a buffer geometry with the points const bufferGeometry = useMemo(() => { if (!threeLib) return null const geometry = new threeLib.BufferGeometry() geometry.setAttribute("position", new threeLib.BufferAttribute(points, 3)) return geometry }, [points, threeLib]) // Animation frame useFrame((state) => { if (!pointsRef.current || !threeLib) return const time = state.clock.getElapsedTime() // Rotate the entire points system pointsRef.current.rotation.y = time * 0.1 // Get the positions attribute for manipulation const positions = pointsRef.current.geometry.attributes.position // Animate each point for (let i = 0; i < count; i++) { const i3 = i * 3 // Get the original position const x = points[i3] const y = points[i3 + 1] const z = points[i3 + 2] // Calculate distance from mouse in normalized coordinates const mouseX = (mouse.x * viewport.width) / 2 const mouseY = (mouse.y * viewport.height) / 2 const dx = mouseX - x const dy = mouseY - y const dist = Math.sqrt(dx * dx + dy * dy) // Apply a wave effect const angle = time * 0.5 + dist * 0.5 const wave = Math.sin(angle) * 0.1 // Apply hover effect - particles move away from mouse when hovered let hoverEffect = 0 if (hovered && dist < 2) { hoverEffect = (1 - dist / 2) * 0.5 } // Update positions with animation positions.setXYZ( i, x + (hovered ? dx * hoverEffect : 0) + Math.sin(time + i * 0.01) * 0.03, y + (hovered ? dy * hoverEffect : 0) + Math.cos(time + i * 0.01) * 0.03, z + wave, ) } positions.needsUpdate = true }) if (!bufferGeometry || !threeLib) return null return ( setHovered(true)} onPointerOut={() => setHovered(false)}> ) } export default function ParticlesAnimation() { const [isThreeLoaded, setIsThreeLoaded] = useState(false) const threeLib = useThreeHook() useEffect(() => { if (threeLib) { setIsThreeLoaded(true) } }, [threeLib]) if (!isThreeLoaded) { return null // or return a loading indicator } return } [V0_FILE]typescriptreact:file="components/header-particles.tsx" isEdit="true" isMerged="true" "use client" import { Suspense, useRef } from "react" import dynamic from "next/dynamic" import { motion } from "framer-motion" // Dynamically import the Canvas component const DynamicCanvas = dynamic(() => import("@react-three/fiber").then((mod) => mod.Canvas), { ssr: false, }) // Dynamically import our ParticlesAnimation component const DynamicParticlesAnimation = dynamic(() => import("./particles-animation"), { ssr: false, }) export default function HeaderParticles() { const containerRef = useRef(null) return ( Loading particles...}> ) } [V0_FILE]typescriptreact:file="components/ParticleAnimation.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useMemo } from "react" import { Canvas, useFrame } from "@react-three/fiber" import * as THREE from "three" const ParticlesMaterial = new THREE.PointsMaterial({ size: 0.05, map: new THREE.TextureLoader().load("/particle.png"), transparent: true, blending: THREE.AdditiveBlending, depthWrite: false, }) function Particles({ count = 5000 }) { const mesh = useRef(null!) const dummy = useMemo(() => new THREE.Object3D(), []) // Generate random positions, speeds and scales const particles = useMemo(() => { const temp = [] for (let i = 0; i < count; i++) { const t = Math.random() * 100 const factor = 20 + Math.random() * 100 const speed = 0.01 + Math.random() / 200 const xFactor = -50 + Math.random() * 100 const yFactor = -50 + Math.random() * 100 const zFactor = -50 + Math.random() * 100 temp.push({ t, factor, speed, xFactor, yFactor, zFactor, mx: 0, my: 0 }) } return temp }, [count]) // Create the particle geometry const [positions, scales] = useMemo(() => { const positions = new Float32Array(count * 3) const scales = new Float32Array(count) for (let i = 0; i < count; i++) { positions[i * 3] = (Math.random() - 0.5) * 10 positions[i * 3 + 1] = (Math.random() - 0.5) * 10 positions[i * 3 + 2] = (Math.random() - 0.5) * 10 scales[i] = Math.random() } return [positions, scales] }, [count]) useFrame((state, delta) => { particles.forEach((particle, i) => { let { t, factor, speed, xFactor, yFactor, zFactor } = particle t = particle.t += speed / 2 const a = Math.cos(t) + Math.sin(t * 1) / 10 const b = Math.sin(t) + Math.cos(t * 2) / 10 const s = Math.cos(t) particle.mx += (state.mouse.x * state.viewport.width - particle.mx) * 0.01 particle.my += (state.mouse.y * state.viewport.height - particle.my) * 0.01 dummy.position.set( (particle.mx / 10) * a + xFactor + Math.cos((t / 10) * factor) + (Math.sin(t * 1) * factor) / 10, (particle.my / 10) * b + yFactor + Math.sin((t / 10) * factor) + (Math.cos(t * 2) * factor) / 10, (particle.my / 10) * b + zFactor + Math.cos((t / 10) * factor) + (Math.sin(t * 3) * factor) / 10, ) dummy.scale.set(s, s, s) dummy.updateMatrix() mesh.current.setMatrixAt(i, dummy.matrix) }) mesh.current.instanceMatrix.needsUpdate = true }) return ( ) } export default function ParticleAnimation() { return (

) } [V0_FILE]typescriptreact:file="components/ParticleBackground.tsx" isEdit="true" isMerged="true" "use client" import { useCallback, useMemo } from "react" import Particles from "react-tsparticles" import { loadSlim } from "tsparticles-slim" import type { Engine } from "tsparticles-engine" const ParticleBackground = () => { const particlesInit = useCallback(async (engine: Engine) => { await loadSlim(engine) }, []) const options = useMemo( () => ({ background: { color: { value: "transparent", }, }, fullScreen: { enable: false, zIndex: 0, }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "push", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, particles: { color: { value: ["#8B5CF6", "#EC4899"], // Purple to Pink }, links: { color: "#a855f7", // A mid-point between purple and pink distance: 150, enable: true, opacity: 0.5, width: 1, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 1, straight: false, }, number: { density: { enable: true, area: 800, }, value: 80, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: 1, max: 5 }, }, }, detectRetina: true, }), [], ) return } export default ParticleBackground [V0_FILE]typescriptreact:file="components/AnimatedBoxes.tsx" isEdit="true" isMerged="true" "use client" import React, { useEffect, useState, useCallback } from "react" interface Box { id: number x: number y: number size: number delay: number } const Box = React.memo(({ x, y, size, delay }: Omit) => (

)) Box.displayName = "Box" const AnimatedBoxes = () => { const [boxes, setBoxes] = useState([]) const generateBoxes = useCallback(() => { const newBoxes: Box[] = [] const boxCount = Math.floor((window.innerWidth * window.innerHeight) / 80000) + 2 // Increased box count for (let i = 0; i < boxCount; i++) { const x = (Math.random() * 0.6 + 0.2) * window.innerWidth const y = (Math.random() * 0.6 + 0.2) * window.innerHeight newBoxes.push({ id: i, x, y, size: Math.random() * 20 + 10, delay: Math.random() * 5, }) } setBoxes(newBoxes) }, []) useEffect(() => { generateBoxes() window.addEventListener("resize", generateBoxes) return () => window.removeEventListener("resize", generateBoxes) }, [generateBoxes]) return (

{boxes.map((box) => ( ))}

) } export default AnimatedBoxes [V0_FILE]typescriptreact:file="components/AnimatedBoxes3D.tsx" isMerged="true" isEdit="true" "use client" import { useRef, useMemo, useState } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls } from "@react-three/drei" import * as THREE from "three" function Box({ position, color }: { position: [number, number, number]; color: THREE.Color }) { const mesh = useRef(null!) const [hovered, setHovered] = useState(false) useFrame((state, delta) => { mesh.current.rotation.x += delta * 0.2 mesh.current.rotation.y += delta * 0.3 }) return ( setHovered(true)} onPointerOut={() => setHovered(false)} scale={hovered ? 1.5 : 1} > ) } function BoxesGroup() { const boxes = useMemo(() => { const temp = [] for (let i = 0; i < 100; i++) { const position: [number, number, number] = [ (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, ] const color = new THREE.Color().setHSL(Math.random(), 0.7, 0.2) // Darker colors temp.push({ position, color }) } return temp }, []) return ( <> {boxes.map((box, index) => ( ))} ) } export default function AnimatedBoxes3D() { return (

) } [V0_FILE]typescriptreact:file="components/InteractiveShapes.tsx" isMerged="true" isEdit="true" "use client" import { useEffect, useRef } from "react" import { motion } from "framer-motion" const shapes = [ { type: "circle", size: 50 }, { type: "square", size: 40 }, { type: "triangle", size: 60 }, ] export default function InteractiveShapes() { const containerRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { const { clientX, clientY } = e const shapes = containerRef.current?.children if (shapes) { Array.from(shapes).forEach((shape: Element, index) => { const speed = (index + 1) * 0.5 const x = (window.innerWidth - clientX * speed) / 100 const y = (window.innerHeight - clientY * speed) / 100 ;(shape as HTMLElement).style.transform = `translate(${x}px, ${y}px)` }) } } window.addEventListener("mousemove", handleMouseMove) return () => window.removeEventListener("mousemove", handleMouseMove) }, []) return (

{shapes.map((shape, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Github, Linkedin, Twitter, Calendar, FileText, Blocks, Cpu, Braces, MessageSquare, Smartphone, PenTool, } from "lucide-react" import { Link as ScrollLink } from "react-scroll" import CustomCursor from "@/components/custom-cursor" import Navbar from "@/components/navbar" import SocialIcon from "@/components/social-icon" import { Button } from "@/components/ui/button" import AboutMe from "@/components/about-me" import Loading from "@/components/loading" import InteractiveShapes from "@/components/InteractiveShapes" import AnimatedBoxes from "@/components/AnimatedBoxes" export default function Home() { const [mounted, setMounted] = useState(false) const [loading, setLoading] = useState(true) useEffect(() => { setMounted(true) const timer = setTimeout(() => { setLoading(false) }, 2000) // Show loading for 2 seconds return () => clearTimeout(timer) }, []) if (!mounted) return null if (loading) return const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // You can add a console.log here if you want to verify it's working console.log("Form submission prevented") } return (

{/* Hero Section with Animated Boxes */}

Hey! It's Aakash Singh Rajput

🚀 Blockchain Innovator | Full-Stack Developer | Tech Explorer

{/* About Section */}

{/* Services Section */}

My Expertise 🛠️

} title="Blockchain Development" description="Custom blockchain solutions, smart contracts, and decentralized applications with a focus on security and efficiency." /> } title="ZK & FHE Implementation" description="Zero-knowledge proofs and fully homomorphic encryption solutions for privacy-preserving applications." /> } title="Full Stack Development" description="End-to-end web application development with modern frameworks and best practices." /> } title="Smart Contract Auditing" description="Comprehensive security audits for smart contracts to identify vulnerabilities and ensure robust implementation." /> } title="Web3 Integration" description="Seamless integration of Web3 technologies into existing applications and platforms." /> } title="Technical Consultation" description="Expert advice on blockchain architecture, technology stack selection, and implementation strategies." />

{/* Work Section */}

What I've Built 🏗️

{/* Contact Section */}

Ping Me 🚀

Prefer to schedule a meeting?

Schedule a Meeting View CV

{/* Footer with Social Links */}

) } function ServiceCard({ icon, title, description }) { return (

{icon}

{title}

{description}

) } function ProjectCard({ title, description, tags, image }) { return (

{title}

{description}

{tags.map((tag, index) => ( {tag} ))}

) } function ContactEmail() { return (

aakash4dev.me@gmail.com

) } [V0_FILE]typescriptreact:file="components/about-me.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" import { Calendar, MapPin, Building2 } from "lucide-react" const timelineData = [ { id: 1, company: "Company A", role: "Software Engineer", period: "2020 - 2022", location: "New York, NY", type: "Full-time", logo: "/company-a-logo.svg", skills: ["JavaScript", "React", "Node.js"], }, { id: 2, company: "Company B", role: "Frontend Developer", period: "2022 - Present", location: "San Francisco, CA", type: "Full-time", logo: "/company-b-logo.svg", skills: ["React", "Next.js", "Tailwind CSS"], }, ] const skillsData = { "Programming Languages": [ { name: "JavaScript", proficiency: 90 }, { name: "TypeScript", proficiency: 80 }, { name: "Solidity", proficiency: 70 }, { name: "Go", proficiency: 60 }, { name: "Rust", proficiency: 50 }, ], "Frameworks/Libraries": [ { name: "React", proficiency: 95 }, { name: "Next.js", proficiency: 85 }, { name: "Node.js", proficiency: 75 }, { name: "Express.js", proficiency: 65 }, ], Tools: [ { name: "Git", proficiency: 98 }, { name: "Docker", proficiency: 88 }, { name: "Kubernetes", proficiency: 78 }, ], } export default function AboutMe() { return (

Code, Coffee & Me ☕💻

{/* Profile Section */}

{/* Mobile description */}

Blockchain Sorcerer 🧙‍♂️ and Full Stack Dev 💻. Building secure, scalable solutions in the crypto-verse. From DeFi to Web3, turning complex tech into seamless experiences. ⛓⚡🔥

{/* Desktop description */}

🚀 Hey, I'm Aakash Singh Rajput!

A Blockchain Wizard 🧙‍♂️ and Full Stack Alchemist 💻, turning{" "} lines of code into decentralized magic! Whether it's{" "} smart contracts, ZK proofs, or FHE sorcery, I love pushing Web3 to the next level.

I spend my days hacking away in Solidity, Go, and Rust—and my nights wondering why gas fees still exist. 😅 When I'm not coding, I'm probably deep-diving into{" "} DeFi rabbit holes, contributing to open-source chaos, or evangelizing blockchain to anyone who'll listen (or can't escape).

Let's connect, build, and break things—because the{" "} future is decentralized, and I refuse to be left behind! ⛓⚡🔥

{/* Timeline Section */}

The Road So Far 🛤️

{/* Vertical Line (only visible on larger screens) */}

{/* Timeline Items */}

{timelineData.map((item, index) => ( {/* Content */}

{item.role}

{item.company}

{item.period}

{item.location}

{item.type}

{item.skills.length > 0 && (

{item.skills.map((skill, skillIndex) => ( {skill} ))}

)}

{/* Timeline Point (hidden on mobile) */}

{/* Timeline Connector (hidden on mobile) */} {index < timelineData.length - 1 && ( )} ))}

{/* Skills Section */}

Code Arsenal ⚔️

{Object.entries(skillsData).map(([category, skills]) => (

{category}

{skills.map((skill) => ( ))}

))}

) } function SkillBar({ name, proficiency }) { return (

{name} {proficiency}%

) }