[V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider } from 'next-themes' import { type ThemeProviderProps } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescript:file="next.config.js" /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: ['hebbkx1anhila5yf.public.blob.vercel-storage.com'], }, } module.exports = nextConfig [V0_FILE]typescriptreact:file="app/portfolio/page.tsx" isQuickEdit="true" 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' import { Github } from 'lucide-react' import Link from 'next/link' import { Canvas } from '@react-three/fiber' import { Stars, OrbitControls } from '@react-three/drei' import { Background3DText } from '@/components/Background3DText' function Scene() { return ( <> ) } const projects = [ { id: 1, title: 'Blinkit Sales Interactive Dashboard', description: 'Built an interactive sales forecasting tool in Power BI with time intelligence functions, generating 15 reliable insights for revenue projections. Applied filters and calculated measures to drive actionable insights, improving data-driven decision-making by 25%. Enhanced sales forecasting accuracy by 20% through time intelligence functions, enabling better trend analysis and informed key business strategies.', github: 'https://github.com/AvanindraVijay/Blinkit_Sales_Analysis_Report-.git', date: '08/2024' }, { id: 2, title: 'Zomato Dataset Analysis', description: 'Analyzed Zomato restaurant data using Python libraries like Pandas, NumPy, and Matplotlib in Jupyter Notebook for data cleaning and visualization. Uncovered key trends that optimized order strategies, resulting in a 10% reduction in delivery times and a 15% improvement in overall operational performance. Showcased strong insightful-analysis by delivering critical insights that improved decision-making processes.', github: 'https://github.com/AvanindraVijay/Zomato_EDA.git', date: '07/2024' }, { id: 3, title: 'KIIT Hospitality', description: 'Developed a PHP and SQL management system to streamline hostel housekeeping processes; integrated JavaScript, CSS and HTML to facilitate a 30% faster response time for maintenance requests. Spearheaded the implementation of an interactive cleaning schedule, resulting in a 40% reduction in manual workload. Demonstrated strong conflict-resolution and collaborative skills by working closely with colleagues to enhance system usability, resulting in a 60% increase in user satisfaction.', github: 'https://github.com/AvanindraVijay/KIIT-Hospitality.git', date: '05/2023' }, { id: 4, title: 'AlgoFitness', description: 'Designed and developed an end-to-end website for gym enthusiasts, utilizing modern best practices of JavaScript and ReactJS. Leveraged the RapidAPI framework to fetch exercise data and provide comprehensive solutions to user\'s fitness queries.', github: 'https://github.com/AvanindraVijay/AlgoFitness.git', date: '01/2024' }, { id: 5, title: 'Age Progression', description: 'Developed Python-based deep learning models using PyTorch and Jupyter Notebook to accurately predict facial age progression. Implemented advanced algorithms to visualize the predicted age progression, providing a comprehensive tool for age estimation.', github: 'https://github.com/AvanindraVijay/AgeProgression.git', date: '09/2023' }, ] const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } } export default function Portfolio() { return (

Portfolio {projects.map((project) => ( {project.title} {project.date}

{project.description}

))}

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isQuickEdit="true" 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' import { toast } from '@/components/ui/use-toast' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { MapPin, Phone } from 'lucide-react' import { Canvas } from '@react-three/fiber' import { Stars, OrbitControls } from '@react-three/drei' import { Background3DText } from '@/components/Background3DText' function Scene() { return ( <> ) } export default function Contact() { const [isPending, setIsPending] = useState(false) async function handleSubmit(event: React.FormEvent) { event.preventDefault() setIsPending(true) const form = event.currentTarget const formData = new FormData(form) try { const response = await fetch( 'https://getform.io/f/0dNVZKdL', { method: 'POST', body: formData, } ) if (response.ok) { toast({ title: "Success!", description: "Your message has been sent successfully.", }) form.reset() } else { throw new Error('Failed to send message') } } catch (error) { toast({ title: "Error", description: "Failed to send message. Please try again.", variant: "destructive", }) } finally { setIsPending(false) } } return (

Contact Me

Name

Message

</div>
            <Button 
              type="submit" 
              className="w-full transition-all duration-300 hover:scale-105 hover:shadow-lg"
              disabled={isPending}
            >
              {isPending ? 'Sending...' : 'Send Message'}
            </Button>
          </motion.form>

<motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.2 }}
          >
            <Card className="transform-gpu transition-all duration-300 hover:scale-105 hover:shadow-xl hover:bg-accent/50">
              <CardHeader>
                <CardTitle>My Location</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <MapPin className="h-5 w-5 text-muted-foreground" />
                  <span>St. Thomas School, Bharamsthan, Sahadatpura, Mau, Uttar Pradesh, India, 275101</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Phone className="h-5 w-5 text-muted-foreground" />
                  <span>+91 8881164451</span>
                </div>
                <div className="aspect-video mt-4 rounded-lg overflow-hidden">
                  <iframe 
                    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d911289.6458478066!2d80.94251274999999!3d26.848692!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1735229409544!5m2!1sen!2sin" 
                    width="100%" 
                    height="100%" 
                    style={{ border: 0 }} 
                    allowFullScreen 
                    loading="lazy" 
                    referrerPolicy="no-referrer-when-downgrade"
                    className="transition-transform duration-300 hover:scale-105"
                  ></iframe>
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/certifications/page.tsx" isQuickEdit="true"
'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { motion } from 'framer-motion'
import { Canvas } from '@react-three/fiber'
import { Stars, OrbitControls } from '@react-three/drei'
import { Background3DText } from '@/components/Background3DText'

function Scene() {
  return (
    <>
      <Stars 
        radius={100} 
        depth={50} 
        count={5000} 
        factor={4} 
        saturation={0} 
        fade 
        speed={1}
      />
      <Background3DText text="Certificates" />
    </>
  )
}

const certifications = [
  {
    title: "AWS Cloud Foundation",
    issuer: "AWS Academics",
  },
  {
    title: "Salesforce Developer",
    issuer: "Deloitte",
  },
  {
    title: "CCNAv7_Introduction to Networks",
    issuer: "CISCO",
  },
  {
    title: "Cybersecurity Es-certificate",
    issuer: "CISCO",
  },
  {
    title: "Data Analysis",
    issuer: "Microsoft and LinkedIn",
  },
  {
    title: "Problem Solving Intermediate",
    issuer: "HackerRank",
  },
  {
    title: "SQL ADVANCED",
    issuer: "HackerRank",
  },
  {
    title: "Introduction to Cybersecurity",
    issuer: "CISCO",
  },
  {
    title: "PCAP Programming Essentials in Python",
    issuer: "OpenEDG",
  },
  {
    title: "Generative AI",
    issuer: "Microsoft and LinkedIn",
  }
]

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

export default function Certifications() {
  return (
    <div className="min-h-screen relative">
      <div className="absolute inset-0 -z-10">
        <Canvas
          camera={{ position: [0, 0, 10], fov: 50 }}
        >
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />
          <Scene />
          <OrbitControls enableZoom={false} />
        </Canvas>
      </div>
      <div className="container py-8 px-4 md:px-8 relative z-10">
        <motion.h1 
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-4xl font-bold mb-8 text-foreground"
        >
          Certifications
        </motion.h1>
        <motion.div 
          variants={container}
          initial="hidden"
          animate="show"
          className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
        >
          {certifications.map((cert, index) => (
            <motion.div key={index} variants={item}>
              <Card className="transition-all duration-300 hover:scale-105 hover:shadow-xl bg-background backdrop-blur-sm hover:bg-accent/50 border border-border">
                <CardHeader>
                  <CardTitle className="text-foreground">{cert.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{cert.issuer}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/Background3DText.tsx" isQuickEdit="true"
import { Float, Text3D } from '@react-three/drei'

interface Background3DTextProps {
  text: string;
}

export function Background3DText({ text }: Background3DTextProps) {
  return (
    <Float
      speed={4}
      rotationIntensity={1}
      floatIntensity={2}
      position={[-6, 0, 0]}
    >
      <Text3D
        font="/fonts/Geist_Bold.json"
        size={2}
        height={0.2}
        curveSegments={12}
        bevelEnabled
        bevelThickness={0.02}
        bevelSize={0.02}
        bevelOffset={0}
        bevelSegments={5}
      >
        {text}
        <meshStandardMaterial color="#ff6b6b" opacity={0.5} transparent />
      </Text3D>
    </Float>
  )
}

[V0_FILE]typescriptreact:file="components/ErrorBoundary.tsx"
'use client'

import React, { ErrorInfo, ReactNode } from 'react'

interface ErrorBoundaryProps {
  children: ReactNode
}

interface ErrorBoundaryState {
  hasError: boolean
}

class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(_: Error): ErrorBoundaryState {
    return { hasError: true }
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo)
  }

render() {
    if (this.state.hasError) {
      return (
        <div className="flex items-center justify-center min-h-screen bg-background">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4">Oops! Something went wrong.</h1>
            <p className="mb-4">We're sorry for the inconvenience. Please try refreshing the page.</p>
            <button
              onClick={() => this.setState({ hasError: false })}
              className="px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
            >
              Try again
            </button>
          </div>
        </div>
      )
    }

return this.props.children
  }
}

export default ErrorBoundary

[V0_FILE]typescript:file="app/api/get-image-url/route.ts"
import { NextResponse } from 'next/server'

export async function GET() {
  try {
    // In a real-world scenario, you might fetch this URL from a database or external service
    const imageUrl = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202024-12-19%20at%2023.39.41_b3cc68ee-fotor-20241220044-NmfqttD867q2ySez5Gs6Z86871eIMl.png"

// You could add additional logic here, such as checking if the image exists
    // or fetching different images based on some criteria

return NextResponse.json({ url: imageUrl })
  } catch (error) {
    console.error('Error fetching image URL:', error)
    return NextResponse.json({ error: 'Failed to fetch image URL' }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="app/about/page.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Canvas } from "@react-three/fiber"
import { Stars, OrbitControls } from "@react-three/drei"
import { Background3DText } from "@/components/Background3DText"
import { Button } from "@/components/ui/button"

function Scene() {
  return (
    <>
      <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
      <Background3DText text="About" />
    </>
  )
}

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
}

const experiences = [
  {
    title: "Salesforce Developer Intern",
    company: "Deloitte",
    period: "May 2023 - July 2023 (3 months)",
    description:
      "Developed automated processes using Salesforce Flows, Apex, and Lightning Web Components (LWC), improving operational efficiency by 20%.",
    detailedDescription: [
      "Developed automated processes using Salesforce Flows, Apex, and Lightning Web Components (LWC), improving operational efficiency by 20%.",
      "Executed seamless API integrations and security configurations within Salesforce, achieving zero compliance breaches during project rollouts while enhancing overall system reliability for critical business processes.",
      "Tested and deployed custom applications with a 98% success rate.",
      "Earned 13 Superbadges and completed over 50 module badges on Trailhead, showcasing leadership in Salesforce administration and development.",
    ],
  },
  {
    title: "Cyber Security Trainee",
    company: "CISCO",
    period: "May 2023 – June 2023 (1 Month)",
    description:
      "Experienced in network fundamentals including IP protocols, Ethernet, and router/switch configurations, enhancing network reliability by 15%.",
    detailedDescription: [
      "Experienced in network fundamentals including IP protocols, Ethernet, and router/switch configurations, enhancing network reliability by 15%.",
      "Gained expertise in cybersecurity, focusing on malware defense and network security protocols, improving overall security strategies by 20%.",
    ],
  },
  {
    title: "Software Developer Intern",
    company: "Bhaskaracharya Institute for Space Applications and Geoinformatics",
    period: "01/2025 – present",
    description:
      "Developed AI solutions for a government platform, including chatbots, and assisted with Indian government and defence initiatives.",
    detailedDescription: [
      "Developed AI solutions for a government platform, including chatbots, and assisted with Indian government and defence initiatives.",
      "Improved chatbot accuracy by 10% using CLIP-based image retrieval, and integrated LLAMA 2-7B for text generation, enhancing response quality by 12%; tested LLAMA 3.2-3B with Ollama, lowering response time.",
    ],
  },
  {
    title: "Web Development Intern",
    company: "CodeClause",
    period: "May 2023 - June 2023 (2 months)",
    description: "Developed multiple web applications using HTML, CSS, and JavaScript.",
    detailedDescription: [
      "Developed multiple web applications using HTML, CSS, and JavaScript.",
      "Collaborated with UI/UX designers to ensure responsive design and cross-device compatibility.",
      "Optimized website performance and usability, ensuring seamless user experience across platforms.",
    ],
  },
]

export default function About() {
  const [expandedIndex, setExpandedIndex] = useState<number | null>(null)

return (
    <div className="min-h-screen relative">
      <div className="absolute inset-0 -z-10">
        <Canvas camera={{ position: [0, 0, 10], fov: 50 }}>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />
          <Scene />
          <OrbitControls enableZoom={false} />
        </Canvas>
      </div>
      <div className="container py-8 px-4 md:px-8">
        <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="text-4xl font-bold mb-8">
          About Me
        </motion.h1>

<motion.section variants={container} initial="hidden" animate="show" className="mb-12">
          <h2 className="text-2xl font-semibold mb-4">Skills</h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[
              { title: "Programming Languages", content: "C, C++, Python" },
              { title: "Microsoft Office", content: "Microsoft Word, Microsoft Excel, Microsoft Powerpoint" },
              { title: "Visualization Tool", content: "Power BI" },
              { title: "Python Libraries", content: "Pandas, NumPy, Matplotlib, Seaborn, EDA" },
              { title: "Cloud Platforms", content: "Amazon AWS, Salesforce Developer" },
              { title: "Developer Tools", content: "VS Code, GitHub" },
              { title: "Databases", content: "MySQL, SQL Server" },
              { title: "Frontend Development", content: "HTML, CSS, JavaScript" },
            ].map((skill, index) => (
              <motion.div key={index} variants={item}>
                <Card className="h-full transform-gpu transition-all duration-300 hover:scale-105 hover:shadow-xl hover:bg-accent/50">
                  <CardHeader>
                    <CardTitle>{skill.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p>{skill.content}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.section>

<motion.section variants={container} initial="hidden" animate="show" className="mb-12">
          <h2 className="text-2xl font-semibold mb-4">Experience</h2>
          <div className="grid gap-6 md:grid-cols-2">
            {experiences.map((exp, index) => (
              <motion.div key={index} variants={item}>
                <Card className="h-full flex flex-col justify-between transition-all duration-300 hover:scale-105 hover:shadow-xl hover:bg-accent/50">
                  <CardHeader>
                    <CardTitle>{exp.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="flex-grow">
                    <p className="text-muted-foreground mb-2">
                      {exp.company} | {exp.period}
                    </p>
                    <p className="text-sm mb-4">{exp.description}</p>
                    {expandedIndex === index && (
                      <ul className="list-disc pl-5 space-y-2 mb-4">
                        {exp.detailedDescription.map((detail, idx) => (
                          <li key={idx} className="text-sm">
                            {detail}
                          </li>
                        ))}
                      </ul>
                    )}
                  </CardContent>
                  <div className="p-4">
                    <Button
                      onClick={() => setExpandedIndex(expandedIndex === index ? null : index)}
                      variant="outline"
                      className="w-full"
                    >
                      {expandedIndex === index ? "Show Less" : "Show More"}
                    </Button>
                  </div>
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.section>

<motion.section variants={container} initial="hidden" animate="show">
          <h2 className="text-2xl font-semibold mb-4">Content Writing</h2>
          <div className="grid gap-6 md:grid-cols-2">
            {[
              {
                title: "Technical Writing",
                content:
                  "Experienced in creating detailed technical documentation, guides, and tutorials for software applications and data analysis processes.",
              },
              {
                title: "Creative Writing",
                content:
                  "Skilled in crafting engaging content that combines technical expertise with creative storytelling to communicate complex ideas effectively.",
              },
            ].map((writing, index) => (
              <motion.div key={index} variants={item}>
                <Card className="h-full transform-gpu transition-all duration-300 hover:scale-105 hover:shadow-xl hover:bg-accent/50">
                  <CardHeader>
                    <CardTitle>{writing.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p>{writing.content}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.section>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/CustomCursor.tsx"
"use client"

import { useRef, useState } from "react"
import { Cursor } from "@/components/ui/cursor"
import { AnimatePresence, motion } from "framer-motion"
import { PlusIcon } from "lucide-react"

export function CustomCursor() {
  const [isHovering, setIsHovering] = useState(false)
  const targetRef = useRef<HTMLDivElement>(null)

const handlePositionChange = (x: number, y: number) => {
    if (targetRef.current) {
      const rect = targetRef.current.getBoundingClientRect()
      const isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
      setIsHovering(isInside)
    }
  }

return (
    <Cursor
      variants={{
        initial: { scale: 0.3, opacity: 0 },
        animate: { scale: 1, opacity: 1 },
        exit: { scale: 0.3, opacity: 0 },
      }}
      springConfig={{
        bounce: 0.001,
      }}
      transition={{
        ease: "easeInOut",
        duration: 0.15,
      }}
      onPositionChange={handlePositionChange}
    >
      <motion.div
        animate={{
          width: isHovering ? 80 : 16,
          height: isHovering ? 32 : 16,
        }}
        className="flex items-center justify-center rounded-[24px] bg-primary/40 backdrop-blur-md"
      >
        <AnimatePresence>
          {isHovering ? (
            <motion.div
              initial={{ opacity: 0, scale: 0.6 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.6 }}
              className="inline-flex w-full items-center justify-center"
            >
              <div className="inline-flex items-center text-sm text-primary-foreground">
                More <PlusIcon className="ml-1 h-4 w-4" />
              </div>
            </motion.div>
          ) : null}
        </AnimatePresence>
      </motion.div>
    </Cursor>
  )
}

[V0_FILE]typescriptreact:file="components/ui/cursor.tsx"
"use client"
import type React from "react"
import { useEffect, useState, useRef } from "react"
import {
  motion,
  type SpringOptions,
  useMotionValue,
  useSpring,
  AnimatePresence,
  type Transition,
  type Variant,
} from "framer-motion"
import { cn } from "@/lib/utils"

type CursorProps = {
  children: React.ReactNode
  className?: string
  springConfig?: SpringOptions
  attachToParent?: boolean
  transition?: Transition
  variants?: {
    initial: Variant
    animate: Variant
    exit: Variant
  }
  onPositionChange?: (x: number, y: number) => void
}

export function Cursor({
  children,
  className,
  springConfig,
  attachToParent,
  variants,
  transition,
  onPositionChange,
}: CursorProps) {
  const cursorX = useMotionValue(typeof window !== "undefined" ? window.innerWidth / 2 : 0)
  const cursorY = useMotionValue(typeof window !== "undefined" ? window.innerHeight / 2 : 0)
  const cursorRef = useRef<HTMLDivElement>(null)
  const [isVisible, setIsVisible] = useState(!attachToParent)

useEffect(() => {
    if (!attachToParent) {
      document.body.style.cursor = "none"
    } else {
      document.body.style.cursor = "auto"
    }

const updatePosition = (e: MouseEvent) => {
      cursorX.set(e.clientX)
      cursorY.set(e.clientY)
      onPositionChange?.(e.clientX, e.clientY)
    }

document.addEventListener("mousemove", updatePosition)

return () => {
      document.removeEventListener("mousemove", updatePosition)
    }
  }, [cursorX, cursorY, onPositionChange, attachToParent])

const cursorXSpring = useSpring(cursorX, springConfig || { duration: 0 })
  const cursorYSpring = useSpring(cursorY, springConfig || { duration: 0 })

useEffect(() => {
    const handleVisibilityChange = (visible: boolean) => {
      setIsVisible(visible)
    }

if (attachToParent && cursorRef.current) {
      const parent = cursorRef.current.parentElement
      if (parent) {
        parent.addEventListener("mouseenter", () => {
          parent.style.cursor = "none"
          handleVisibilityChange(true)
        })
        parent.addEventListener("mouseleave", () => {
          parent.style.cursor = "auto"
          handleVisibilityChange(false)
        })
      }
    }

return () => {
      if (attachToParent && cursorRef.current) {
        const parent = cursorRef.current.parentElement
        if (parent) {
          parent.removeEventListener("mouseenter", () => {
            parent.style.cursor = "none"
            handleVisibilityChange(true)
          })
          parent.removeEventListener("mouseleave", () => {
            parent.style.cursor = "auto"
            handleVisibilityChange(false)
          })
        }
      }
    }
  }, [attachToParent])

return (
    <motion.div
      ref={cursorRef}
      className={cn("pointer-events-none fixed left-0 top-0 z-50", className)}
      style={{
        x: cursorXSpring,
        y: cursorYSpring,
        translateX: "-50%",
        translateY: "-50%",
      }}
    >
      <AnimatePresence>
        {isVisible && (
          <motion.div initial="initial" animate="animate" exit="exit" variants={variants} transition={transition}>
            {children}
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/dock.tsx"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"

const DockContext = React.createContext<{
  mouseX: React.MotionValue<number>
  activationPoint: React.MutableRefObject<number>
}>({
  mouseX: {} as React.MotionValue<number>,
  activationPoint: { current: 0 } as React.MutableRefObject<number>,
})

interface DockProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
  magnification?: number
  distance?: number
}

export function Dock({ children, magnification = 1.7, distance = 140, className, ...props }: DockProps) {
  const mouseX = useMotionValue(0)
  const activationPoint = React.useRef(0)
  const ref = React.useRef<HTMLDivElement>(null)

React.useEffect(() => {
    if (!ref.current) return

const handleMouseMove = (e: MouseEvent) => {
      const rect = ref.current?.getBoundingClientRect()
      if (!rect) return

const x = e.clientX - rect.left
      mouseX.set(x)
    }

const handleMouseLeave = () => {
      mouseX.set(activationPoint.current)
    }

const handleTouchMove = (e: TouchEvent) => {
      const rect = ref.current?.getBoundingClientRect()
      if (!rect) return

const touch = e.touches[0]
      const x = touch.clientX - rect.left
      mouseX.set(x)
    }

const handleTouchEnd = () => {
      mouseX.set(activationPoint.current)
    }

ref.current.addEventListener("mousemove", handleMouseMove)
    ref.current.addEventListener("mouseleave", handleMouseLeave)
    ref.current.addEventListener("touchmove", handleTouchMove)
    ref.current.addEventListener("touchend", handleTouchEnd)

return () => {
      ref.current?.removeEventListener("mousemove", handleMouseMove)
      ref.current?.removeEventListener("mouseleave", handleMouseLeave)
      ref.current?.removeEventListener("touchmove", handleTouchMove)
      ref.current?.removeEventListener("touchend", handleTouchEnd)
    }
  }, [mouseX])

return (
    <DockContext.Provider value={{ mouseX, activationPoint }}>
      <motion.div
        ref={ref}
        className={cn(
          "flex h-16 items-end justify-center gap-2 rounded-2xl bg-background/80 px-4 backdrop-blur-md",
          className,
        )}
        {...props}
      >
        {React.Children.map(children, (child, index) => {
          if (!React.isValidElement(child)) return child

return React.cloneElement(child as React.ReactElement<any>, {
            index,
            magnification,
            distance,
          })
        })}
      </motion.div>
    </DockContext.Provider>
  )
}

interface DockItemProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
  index?: number
  magnification?: number
  distance?: number
}

export function DockItem({
  children,
  className,
  index = 0,
  magnification = 1.7,
  distance = 140,
  ...props
}: DockItemProps) {
  const { mouseX, activationPoint } = React.useContext(DockContext)
  const ref = React.useRef<HTMLDivElement>(null)

const [width, setWidth] = React.useState(0)
  const [hovering, setHovering] = React.useState(false)

React.useEffect(() => {
    if (!ref.current) return
    setWidth(ref.current.offsetWidth)
  }, [])

React.useEffect(() => {
    if (!ref.current) return

const handleMouseEnter = () => {
      setHovering(true)
      if (ref.current) {
        const rect = ref.current.getBoundingClientRect()
        activationPoint.current = rect.left + rect.width / 2
      }
    }

const handleMouseLeave = () => {
      setHovering(false)
    }

ref.current.addEventListener("mouseenter", handleMouseEnter)
    ref.current.addEventListener("mouseleave", handleMouseLeave)

return () => {
      ref.current?.removeEventListener("mouseenter", handleMouseEnter)
      ref.current?.removeEventListener("mouseleave", handleMouseLeave)
    }
  }, [activationPoint])

const position = React.useRef(0)

React.useEffect(() => {
    if (!ref.current) return
    const rect = ref.current.getBoundingClientRect()
    position.current = rect.left + rect.width / 2
  }, [])

const distanceFromMouse = useTransform(mouseX, (val) => {
    const distance = position.current - val
    return distance
  })

const widthSync = useTransform(distanceFromMouse, (val) => {
    return Math.abs(val)
  })

const width2 = useSpring(widthSync, {
    damping: 15,
    mass: 0.1,
    stiffness: 200,
  })

const scaleSync = useTransform(width2, (val) => {
    if (hovering) return magnification
    return Math.max(1, magnification - (val / distance) * magnification)
  })

const scale = useSpring(scaleSync, {
    damping: 15,
    mass: 0.1,
    stiffness: 200,
  })

return (
    <motion.div
      ref={ref}
      style={{ scale }}
      className={cn("relative flex h-12 w-12 items-center justify-center", className)}
      {...props}
    >
      {children}
    </motion.div>
  )
}

interface DockIconProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

export function DockIcon({ children, className, ...props }: DockIconProps) {
  return (
    <div className={cn("h-8 w-8", className)} {...props}>
      {children}
    </div>
  )
}

interface DockLabelProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

export function DockLabel({ children, className, ...props }: DockLabelProps) {
  return (
    <div
      className={cn(
        "pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md bg-background/80 px-3 py-1 opacity-0 shadow backdrop-blur-md transition-opacity group-hover:opacity-100",
        className,
      )}
      {...props}
    >
      <div className="text-xs font-medium">{children}</div>
      <div className="absolute left-1/2 top-[100%] -translate-x-1/2 border-4 border-transparent border-t-background/80" />
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/mobile-navigation.tsx"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Award, Briefcase, Home, Phone, User } from "lucide-react"
import { useEffect, useState } from "react"

export function MobileNavigation() {
  const pathname = usePathname()
  const [isVisible, setIsVisible] = useState(true)

useEffect(() => {
    const checkMobile = () => {
      setIsVisible(window.innerWidth < 640)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

return () => {
      window.removeEventListener("resize", checkMobile)
    }
  }, [])

if (!isVisible) {
    return null
  }

return (
    <div className="fixed bottom-0 left-0 z-50 w-full h-16 bg-background/80 backdrop-blur-md border-t sm:hidden">
      <div className="grid h-full grid-cols-5">
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={`flex flex-col items-center justify-center ${
              pathname === item.href ? "text-primary" : "text-muted-foreground"
            }`}
          >
            <item.icon className="h-5 w-5" />
            <span className="text-xs mt-1">{item.label}</span>
          </Link>
        ))}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true"
import type React from "react"
import "./globals.css"
import { Inter } from "next/font/google"
import { ThemeProvider } from "@/components/theme-provider"
import Footer from "@/components/footer"
import { Sidebar } from "@/components/sidebar"
import { Toaster } from "@/components/ui/toaster"
import ErrorBoundary from "@/components/ErrorBoundary"
import { CustomCursor } from "@/components/CustomCursor"
import { DockNavigation } from "@/components/dock-navigation"
import { MobileHeader } from "@/components/mobile-header"
import { MobileNavigation } from "@/components/mobile-navigation"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "3D Portfolio",
  description: "A 3D portfolio website showcasing my work and skills",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <ErrorBoundary>
            <div className="flex flex-col min-h-screen">
              <MobileHeader />
              <div className="flex-grow relative pb-16 sm:pb-20">
                <Sidebar />
                <main className="sm:pl-16 px-4 sm:px-6 lg:px-8">{children}</main>
              </div>
              <Footer className="sm:block hidden" />
              <DockNavigation />
              <MobileNavigation />
            </div>
          </ErrorBoundary>
          <Toaster />
          <CustomCursor />
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true"
import { Github, Linkedin } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { cn } from "@/lib/utils"

const socialLinks = {
  github: "https://github.com/AvanindraVijay",
  linkedin: "https://www.linkedin.com/in/vijayavanindra",
  email: "mailto:vijayavanindra5793@gmail.com",
}

interface FooterProps {
  className?: string
}

export default function Footer({ className }: FooterProps) {
  return (
    <footer className={cn("bg-background border-t", className)}>
      <div className="container flex flex-col items-center justify-between gap-4 py-10 px-4 md:h-24 md:flex-row md:py-0">
        <div className="flex flex-col items-center gap-4 md:flex-row md:gap-2 md:px-0">
          <p className="text-center text-sm leading-loose md:text-left">© 2024 Avanindra Vijay. All rights reserved.</p>
        </div>
        <div className="flex items-center space-x-1">
          <Button variant="ghost" size="icon" aria-label="GitHub" className="transition-colors hover:bg-muted">
            <Link href={socialLinks.github} target="_blank" rel="noopener noreferrer">
              <Github className="h-5 w-5" />
            </Link>
          </Button>
          <Button variant="ghost" size="icon" aria-label="LinkedIn" className="transition-colors hover:bg-muted">
            <Link href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer">
              <Linkedin className="h-5 w-5" />
            </Link>
          </Button>
        </div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/sidebar.tsx" isQuickEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { FileText, Linkedin, Github } from "lucide-react"

const socialLinks = {
  github: "https://github.com/AvanindraVijay",
  linkedin: "https://www.linkedin.com/in/vijayavanindra",
  email: "mailto:vijayavanindra5793@gmail.com",
  resume: "https://drive.google.com/file/d/1B-QqfxvPCyNAOsE76qTTh6xcXFxW8BM0/view?usp=drive_link",
}

export function Sidebar() {
  return (
    <aside className="fixed left-4 top-1/2 -translate-y-1/2 flex flex-col space-y-4 z-50 hidden md:flex">
      <Button
        variant="outline"
        size="icon"
        className="bg-background transition-all hover:bg-muted hover:scale-110"
        asChild
      >
        <Link href={socialLinks.resume} target="_blank" rel="noopener noreferrer">
          <FileText className="h-4 w-4" />
          <span className="sr-only">Download Resume</span>
        </Link>
      </Button>
      <Button
        variant="outline"
        size="icon"
        className="bg-background transition-all hover:bg-muted hover:scale-110"
        asChild
      >
        <Link href={socialLinks.linkedin} target="_blank" rel="noopener noreferrer">
          <Linkedin className="h-4 w-4" />
          <span className="sr-only">LinkedIn Profile</span>
        </Link>
      </Button>
      <Button
        variant="outline"
        size="icon"
        className="bg-background transition-all hover:bg-muted hover:scale-110"
        asChild
      >
        <Link href={socialLinks.github} target="_blank" rel="noopener noreferrer">
          <Github className="h-4 w-4" />
          <span className="sr-only">GitHub Profile</span>
        </Link>
      </Button>
    </aside>
  )
}

[V0_FILE]typescriptreact:file="components/dock-navigation.tsx" isQuickEdit="true"
"use client"

import { useTheme } from "next-themes"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Award, Briefcase, Home, Moon, Phone, Sun, User, FileText } from "lucide-react"
import { Dock, DockIcon, DockItem, DockLabel } from "@/components/ui/dock"
import { useEffect, useState } from "react"

export function DockNavigation() {
  const { theme, setTheme } = useTheme()
  const pathname = usePathname()
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 640)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

return () => {
      window.removeEventListener("resize", checkMobile)
    }
  }, [])

const navItems = [
    { href: "/", label: "Home", icon: Home },
    { href: "/about", label: "About", icon: User },
    { href: "/portfolio", label: "Portfolio", icon: Briefcase },
    { href: "/certifications", label: "Certificates", icon: Award },
    { href: "/contact", label: "Contact", icon: Phone },
    {
      href: "https://drive.google.com/file/d/1B-QqfxvPCyNAOsE76qTTh6xcXFxW8BM0/view?usp=drive_link",
      label: "Resume",
      icon: FileText,
      external: true,
    },
  ]

// Remove this line:
  // const toggle = () => {
  //   setTheme(theme === "dark" ? "light" : "dark")
  // }

// Hide on very small screens where the mobile header is shown
  if (isMobile) {
    return null
  }

return (
    <div className="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 px-4 w-full max-w-md hidden sm:block">
      <Dock className="mx-auto">
        {navItems.map((item) => (
          <DockItem
            key={item.href}
            className={`group aspect-square rounded-xl ${
              pathname === item.href ? "bg-primary text-primary-foreground" : "bg-background/90 hover:bg-accent"
            }`}
          >
            <DockLabel>{item.label}</DockLabel>
            {item.external ? (
              <Link
                href={item.href}
                target="_blank"
                rel="noopener noreferrer"
                className="flex h-full w-full items-center justify-center"
              >
                <DockIcon>
                  <item.icon className="h-full w-full" />
                </DockIcon>
              </Link>
            ) : (
              <Link href={item.href} className="flex h-full w-full items-center justify-center">
                <DockIcon>
                  <item.icon className="h-full w-full" />
                </DockIcon>
              </Link>
            )}
          </DockItem>
        ))}
        <DockItem
          className="group aspect-square rounded-xl bg-background/90 hover:bg-accent"
          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
        >
          <DockLabel>Toggle</DockLabel>
          <DockIcon>
            {theme === "light" ? <Moon className="h-full w-full" /> : <Sun className="h-full w-full" />}
          </DockIcon>
        </DockItem>
      </Dock>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/mobile-header.tsx" isQuickEdit="true"
"use client"

import { useTheme } from "next-themes"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Menu, Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function MobileHeader() {
  const { theme, setTheme } = useTheme()
  const pathname = usePathname()

const navItems = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About Me" },
    { href: "/portfolio", label: "Portfolio" },
    { href: "/certifications", label: "Certifications" },
    { href: "/contact", label: "Contact" },
    {
      href: "https://drive.google.com/file/d/1B-QqfxvPCyNAOsE76qTTh6xcXFxW8BM0/view?usp=drive_link",
      label: "Resume",
      external: true,
    },
  ]

return (
    <header className="bg-background border-b sticky top-0 z-40 md:hidden">
      <div className="container flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center space-x-2">
          <span className="font-bold text-lg">My Portfolio</span>
        </Link>

<div className="flex items-center space-x-2">
          <Button
            variant="ghost"
            size="icon"
            aria-label="Toggle theme"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
          >
            <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
            <span className="sr-only">Toggle theme</span>
          </Button>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <Menu className="h-5 w-5" />
                <span className="sr-only">Open menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              {navItems.map((item) => (
                <DropdownMenuItem key={item.href} asChild>
                  {item.external ? (
                    <Link
                      href={item.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`w-full ${pathname === item.href ? "font-medium" : ""}`}
                    >
                      {item.label}
                    </Link>
                  ) : (
                    <Link href={item.href} className={`w-full ${pathname === item.href ? "font-medium" : ""}`}>
                      {item.label}
                    </Link>
                  )}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
"use client"

import Image from "next/image"
import Link from "next/link"
import { motion, useScroll, useTransform } from "framer-motion"
import { useRef } from "react"
import { Canvas } from "@react-three/fiber"
import { Stars, OrbitControls } from "@react-three/drei"
import { Background3DText } from "@/components/Background3DText"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

function Scene() {
  return (
    <>
      <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
      <Background3DText text="Welcome" />
    </>
  )
}

export default function Home() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"],
  })

const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])
  const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0])

const cursorTargetRef = useRef<HTMLDivElement>(null)

return (
    <div ref={containerRef} className="min-h-screen relative">
      <div className="absolute inset-0 -z-10">
        <Canvas camera={{ position: [0, 0, 10], fov: 50 }}>
          <ambientLight intensity={0.5} />
          <pointLight position={[10, 10, 10]} />
          <Scene />
          <OrbitControls enableZoom={false} />
        </Canvas>
      </div>

<div className="container mx-auto py-8 space-y-16">
        <div className="grid gap-8 lg:grid-cols-2 items-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            style={{ y, opacity }}
            className="space-y-6 backdrop-blur-sm bg-background/80 p-6 rounded-lg shadow-xl transition-all duration-300 hover:bg-transparent hover:backdrop-blur-none"
          >
            <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary-foreground">
              I'm Avanindra Vijay
            </h1>
            <h2 className="text-xl sm:text-2xl font-semibold text-primary">Software Engineer | Data Scientist</h2>
            <p className="text-base sm:text-lg text-muted-foreground">
              Results-driven Data & Software Professional with expertise in Python, SQL, and Power BI, backed by
              Salesforce and AWS certifications. Experienced in data gathering, cleaning, analysis, and visualization to
              optimize processes and deliver actionable insights. Passionate about leveraging data and cloud solutions
              to drive efficiency and empower strategic decision-making.
            </p>
            <p className="text-base sm:text-lg text-muted-foreground mt-2">
              Currently a Software Developer Intern at Bhaskaracharya Institute for Space Applications and
              Geoinformatics, contributing to AI solutions for government platforms.
            </p>
          </motion.div>
          <motion.div
            ref={cursorTargetRef}
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5 }}
            className="relative aspect-[4/3] rounded-lg overflow-hidden shadow-xl hover:scale-105 transition-transform duration-300"
          >
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202024-12-19%20at%2023.39.41_b3cc68ee-fotor-20241220044-NmfqttD867q2ySez5Gs6Z86871eIMl.png"
              alt="Avanindra Vijay mountain biking"
              fill
              className="object-cover"
              priority
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
            />
          </motion.div>
        </div>

<motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="space-y-6"
        >
          <h2 className="text-2xl sm:text-3xl font-bold text-center">Key Skills</h2>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {[
              "Python & SQL",
              "Data Analysis & Visualization",
              "Cloud Solutions (AWS, Salesforce)",
              "Power BI",
              "Machine Learning",
              "Web Development",
              "Project Management",
              "Technical Writing",
            ].map((skill, index) => (
              <Card
                key={index}
                className="transition-all duration-300 hover:scale-105 hover:shadow-lg hover:bg-primary hover:text-primary-foreground"
              >
                <CardContent className="p-4 text-center">
                  <p className="font-semibold">{skill}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </motion.section>

<motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          className="space-y-6"
        >
          <h2 className="text-2xl sm:text-3xl font-bold text-center">Currently Working As</h2>
          <Card className="transition-all duration-300 hover:scale-105 hover:shadow-lg">
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <span>Software Developer Intern</span>
                <span className="inline-block bg-primary text-primary-foreground text-xs px-2 py-1 rounded-full">
                  Current
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground mb-2">
                Bhaskaracharya Institute for Space Applications and Geoinformatics | 01/2025 – present
              </p>
              <p>
                Developed AI solutions for a government platform, including chatbots, and assisted with Indian
                government and defence initiatives. Improved chatbot accuracy by 10% using CLIP-based image retrieval,
                and integrated LLAMA 2-7B for text generation, enhancing response quality by 12%.
              </p>
            </CardContent>
          </Card>
        </motion.section>

<motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="space-y-6"
        >
          <h2 className="text-2xl sm:text-3xl font-bold text-center">Featured Projects</h2>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {[
              {
                title: "Blinkit Sales Dashboard",
                description:
                  "Interactive sales forecasting tool in Power BI with time intelligence functions, improving data-driven decision-making by 25%.",
              },
              {
                title: "Zomato Dataset Analysis",
                description:
                  "Python-based analysis of Zomato restaurant data, optimizing order strategies and reducing delivery times by 10%.",
              },
              {
                title: "KIIT Hospitality",
                description:
                  "PHP and SQL management system for streamlining hostel housekeeping processes, reducing manual workload by 40%.",
              },
            ].map((project, index) => (
              <Card key={index} className="transition-all duration-300 hover:scale-105 hover:shadow-lg">
                <CardHeader>
                  <CardTitle>{project.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{project.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
          <div className="text-center">
            <Button asChild>
              <Link href="/portfolio">View All Projects</Link>
            </Button>
          </div>
        </motion.section>
      </div>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More from avanindravijay

More Templates Like This

About

Tags

Share

About

Tags

Share

More from avanindravijay

More Templates Like This