[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 Header from "@/components/header" 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" 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 (

{children}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" import { Github, Linkedin, Mail } from 'lucide-react' import { Button } from '@/components/ui/button' import Link from 'next/link' const socialLinks = { github: "https://github.com/AvanindraVijay", linkedin: "https://www.linkedin.com/in/vijayavanindra", email: "mailto:vijayavanindra5793@gmail.com" } export default function Footer() { return ( ) } [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]typescriptreact:file="components/sidebar.tsx" import Link from 'next/link' import { Button } from '@/components/ui/button' import { FileText, Linkedin, Github, Mail } 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/1ESgKWoyu2kBAitPXzkgPr_sDWT2z5UPp/view?usp=drive_link" } export function Sidebar() { return ( ) } [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="components/header.tsx" isQuickEdit="true"
"use client"

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

const navItems = [
  { href: "/", label: "Home", icon: Home },
  { href: "/about", label: "About Me", icon: User },
  { href: "/portfolio", label: "Portfolio", icon: Briefcase },
  { href: "/certifications", label: "Certifications", icon: Award },
  { href: "/contact", label: "Contact Us", icon: Phone },
]

const socialLinks = {
  resume: "https://drive.google.com/file/d/1ESgKWoyu2kBAitPXzkgPr_sDWT2z5UPp/view?usp=drive_link",
}

export default function Header() {
  const { theme, setTheme } = useTheme()
  const [mounted, setMounted] = useState(false)
  const pathname = usePathname()

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

return (
    <header className="bg-background border-b sticky top-0 z-40">
      <div className="container flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link href="/" className="flex items-center space-x-2 transition-transform hover:scale-105">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            className="h-6 w-6"
          >
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
            <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
            <line x1="12" y1="22.08" x2="12" y2="12" />
          </svg>
          <span className="font-bold text-lg">My Portfolio</span>
        </Link>

<nav className="hidden md:flex space-x-4">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center space-x-1 text-sm font-medium transition-colors hover:text-primary ${
                pathname === item.href ? "text-primary" : "text-muted-foreground"
              }`}
            >
              <item.icon className="h-4 w-4" />
              <span>{item.label}</span>
            </Link>
          ))}
          <Link
            href={socialLinks.resume}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center space-x-1 text-sm font-medium text-muted-foreground transition-colors hover:text-primary"
          >
            <Award className="h-4 w-4" />
            <span>Resume</span>
          </Link>
        </nav>

<div className="flex items-center space-x-2">
          <Button
            variant="ghost"
            size="icon"
            aria-label="Toggle theme"
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            className="transition-colors hover:bg-muted"
          >
            <Sun className="h-6 w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-6 w-6 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" className="md:hidden transition-colors hover:bg-muted">
                <Menu className="h-6 w-6" />
                <span className="sr-only">Open menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end" className="w-56">
              {navItems.map((item) => (
                <DropdownMenuItem key={item.href} asChild>
                  <Link
                    href={item.href}
                    className={`w-full transition-colors hover:bg-muted ${
                      pathname === item.href ? "text-foreground" : "text-foreground/60"
                    }`}
                  >
                    <item.icon className="mr-2 h-4 w-4" />
                    {item.label}
                  </Link>
                </DropdownMenuItem>
              ))}
              <DropdownMenuItem asChild>
                <Link href={socialLinks.resume} target="_blank" rel="noopener noreferrer" className="w-full">
                  <Award className="mr-2 h-4 w-4" />
                  View Resume
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>
    </header>
  )
}

[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="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, useState, useEffect } 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 [imageUrl, setImageUrl] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    fetch("/api/get-image-url")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok")
        }
        return response.json()
      })
      .then((data) => {
        if (data && data.url) {
          setImageUrl(data.url)
        } else {
          throw new Error("Invalid data format")
        }
      })
      .catch((error) => {
        console.error("Error fetching image URL:", error)
        setError("Failed to load image. Please try again later.")
      })
  }, [])

if (error) {
    return <div className="text-center text-red-500">{error}</div>
  }

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>
          {imageUrl && (
            <motion.div
              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={imageUrl || "/placeholder.svg"}
                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>
  )
}

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

import { useEffect, useState } from "react"
import { motion, useMotionValue, useSpring } from "framer-motion"
import { useTheme } from "next-themes"

export function CustomCursor() {
  const { theme } = useTheme()
  const [isHovering, setIsHovering] = useState(false)

const cursorX = useMotionValue(-100)
  const cursorY = useMotionValue(-100)

const springConfig = { damping: 25, stiffness: 700 }
  const cursorXSpring = useSpring(cursorX, springConfig)
  const cursorYSpring = useSpring(cursorY, springConfig)

useEffect(() => {
    const moveCursor = (e: MouseEvent) => {
      cursorX.set(e.clientX - 16)
      cursorY.set(e.clientY - 16)
    }

window.addEventListener("mousemove", moveCursor)

return () => {
      window.removeEventListener("mousemove", moveCursor)
    }
  }, [cursorX, cursorY]) // Added cursorX and cursorY as dependencies

useEffect(() => {
    const handleMouseEnter = () => setIsHovering(true)
    const handleMouseLeave = () => setIsHovering(false)

const links = document.querySelectorAll("a, button")
    links.forEach((link) => {
      link.addEventListener("mouseenter", handleMouseEnter)
      link.addEventListener("mouseleave", handleMouseLeave)
    })

return () => {
      links.forEach((link) => {
        link.removeEventListener("mouseenter", handleMouseEnter)
        link.removeEventListener("mouseleave", handleMouseLeave)
      })
    }
  }, [])

return (
    <>
      <motion.div
        className="cursor"
        style={{
          translateX: cursorXSpring,
          translateY: cursorYSpring,
          position: "fixed",
          left: 0,
          top: 0,
          width: isHovering ? 60 : 32,
          height: isHovering ? 60 : 32,
          borderRadius: "50%",
          backgroundColor: theme === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(0, 0, 0, 0.8)",
          border: `2px solid ${theme === "dark" ? "black" : "white"}`,
          pointerEvents: "none",
          zIndex: 9999,
          transition: "width 0.2s, height 0.2s",
        }}
      />
      <motion.div
        className="cursor-dot"
        style={{
          translateX: cursorX,
          translateY: cursorY,
          position: "fixed",
          left: 0,
          top: 0,
          width: 8,
          height: 8,
          borderRadius: "50%",
          backgroundColor: theme === "dark" ? "white" : "black",
          pointerEvents: "none",
          zIndex: 9999,
        }}
      />
    </>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Hide default cursor */
* {
  cursor: none !important;
}

/* Show default cursor for text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
  cursor: text !important;
}

/* Show default cursor for select elements */
select {
  cursor: default !important;
}

/* Custom cursor styles */
.cursor,
.cursor-dot {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Adjust cursor color for light theme */
:root:not(.dark) .cursor {
  background-color: rgba(0, 0, 0, 0.8);
  border-color: white;
}

:root:not(.dark) .cursor-dot {
  background-color: black;
}

/* Adjust cursor color for dark theme */
.dark .cursor {
  background-color: rgba(255, 255, 255, 0.8);
  border-color: black;
}

.dark .cursor-dot {
  background-color: white;
}
</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