[V0_FILE]typescriptreact:file="components/Header.tsx" isMerged="true" import Link from "next/link" export default function Header() { return (

) } [V0_FILE]typescriptreact:file="components/Hero.tsx" isMerged="true" import Image from "next/image" export default function Hero() { return (

Botuku Satya Pujith

Computer Science Student | Data Science Enthusiast

Download Resume

) } [V0_FILE]typescriptreact:file="components/About.tsx" isMerged="true" export default function About() { return (

About Me

Motivated and passionate second-year Computer Science student specializing in Data Science, with experience in programming languages such as Java, Python, and web technologies including HTML, CSS, and React.js. Eager to apply my technical skills and problem-solving abilities to real-world challenges by contributing to innovative projects in a dynamic and growth-oriented environment. Committed to continuous learning, innovation, and leveraging technology to develop impactful solutions.

) } [V0_FILE]typescriptreact:file="components/Skills.tsx" isMerged="true" export default function Skills() { const skills = [ "Java", "Python", "HTML", "CSS", "React.js", "Node.js", "Flutter", "MySQL", "Power BI", "Google Analytics", ] return (

Skills

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

) } [V0_FILE]typescriptreact:file="components/Projects.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Projects() { const projects = [ { title: "Fashion Fusion", description: "Web application for fashion enthusiasts to share and receive style suggestions.", tools: "TypeScript, Tailwind CSS, MongoDB", }, { title: "Star Nova", description: "Web portal for film industry auditions with location-based prioritization.", tools: "HTML, CSS, JavaScript", }, { title: "FPS ZOMBIE Game", description: "Basic PC gaming application developed using Unity.", tools: "C#, Unity Gaming Assets", }, { title: "SORO", description: "Static website to reduce Surface Water Pollution through user incentives.", tools: "Web Technologies", }, ] return (

Projects

{projects.map((project, index) => ( {project.title} {project.tools}

{project.description}

))}

) } [V0_FILE]typescriptreact:file="components/Experience.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Experience() { const experiences = [ { title: "Internship in Python Programming", company: "Internpe", date: "12th Aug 2024 – 8th Sep 2024", description: "Built various Python projects including a Digital Clock, Tic Tac Toe game, Snake game, and Connect Four game.", }, { title: "AI Creators Program Internship", company: "Swecha Telangana", date: "12th Aug 2024 – 26th Aug 2024", description: "Built AI chatbot for preserving culture and Language environment using React.js and Node.js.", }, ] return (

Experience

{experiences.map((exp, index) => ( {exp.title} {exp.company} | {exp.date}

{exp.description}

))}

) } [V0_FILE]typescriptreact:file="components/Education.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Education() { const education = [ { degree: "Bachelor of Technology - Computer Science Engineering in Data Science", institution: "Institute of Aeronautical Engineering, Dundigal", year: "2023-Present", grade: "CGPA - 8.15", }, { degree: "Intermediate - Maths, Physics, Chemistry", institution: "Narayana Junior College, Vijayawada", year: "2021-2023", grade: "92.7%", }, { degree: "SSC", institution: "Narayana High School", year: "2020-2021", grade: "CGPA – 10.0", }, ] return (

Education

{education.map((edu, index) => ( {edu.degree} {edu.institution}

{edu.year}

{edu.grade}

))}

) } [V0_FILE]typescriptreact:file="components/Certifications.tsx" isMerged="true" export default function Certifications() { const certifications = [ "3rd position in Hackathon by Brainovision Pvt. Ltd (5th – 6th December 2024)", "Python for Data Science from NPTEL (Jul – Aug 2024)", "Oracle Certified Professional in Oracle Cloud Infrastructure Generative AI (August 2024)", "Data Analytics and Visualization Job Simulation from Accenture (May 2024)", "Google Analytics for Beginners from Google", "3rd position in Code-A-Thon by Forge Alumnus Service (March 2024)", "Programming in Java from NPTEL (Jan -Apr 2024)", ] return (

Certifications & Achievements

{cert}

) } [V0_FILE]typescriptreact:file="components/Contact.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" export default function Contact() { return (

Contact Me

<Button type="submit" className="w-full">
            Send Message
          </Button>
        </form>
      </div>
    </section>
  )
}

[V0_FILE]typescriptreact:file="components/Footer.tsx" isEdit="true" isMerged="true"
import { Github, Linkedin, Mail } from "lucide-react"
import { motion } from "framer-motion"

const socialLinks = [
  {
    name: "GitHub",
    url: "https://github.com/SatyaPujith",
    icon: Github,
  },
  {
    name: "LinkedIn",
    url: "https://linkedin.com/in/botukusatyapujith",
    icon: Linkedin,
  },
  {
    name: "Email",
    url: "mailto:satyapoojith2@gmail.com",
    icon: Mail,
  },
]

export function Footer() {
  return (
    <footer className="border-t bg-background/80 backdrop-blur-md">
      <div className="container flex flex-col items-center justify-between gap-4 py-10 md:h-24 md:flex-row md:py-0">
        <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
            <p className="text-center text-sm leading-loose md:text-left">Built with passion by Botuku Satya Pujith</p>
          </motion.div>
        </div>
        <motion.div
          className="flex items-center gap-4"
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          {socialLinks.map((link) => {
            const Icon = link.icon
            return (
              <a
                key={link.name}
                href={link.url}
                target="_blank"
                rel="noopener noreferrer"
                className="rounded-full p-2 hover:bg-accent"
              >
                <Icon className="h-5 w-5" />
                <span className="sr-only">{link.name}</span>
              </a>
            )
          })}
        </motion.div>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true"
"use client"

import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"

export function ModeToggle() {
  const { theme, setTheme } = useTheme()

return (
    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

[V0_FILE]css:file="app/globals.css" isMerged="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: 221.2 83.2% 53.3%;
    --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: 221.2 83.2% 53.3%;
    --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: 217.2 91.2% 59.8%;
    --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: 224.3 76.3% 48%;
  }
}

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

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function AboutPage() {
  const education = [
    {
      degree: "Bachelor of Technology - Computer Science Engineering in Data Science",
      institution: "Institute of Aeronautical Engineering, Dundigal",
      year: "2023-Present",
      grade: "CGPA - 8.15",
    },
    {
      degree: "Intermediate - Maths, Physics, Chemistry",
      institution: "Narayana Junior College, Vijayawada",
      year: "2021-2023",
      grade: "92.7%",
    },
    {
      degree: "SSC",
      institution: "Narayana High School",
      year: "2020-2021",
      grade: "CGPA – 10.0",
    },
  ]

<motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2, duration: 0.5 }}
          className="space-y-4"
        >
          <h2 className="text-2xl font-bold">Education</h2>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {education.map((edu, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 + index * 0.1, duration: 0.5 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle className="text-lg">{edu.degree}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm text-muted-foreground">{edu.institution}</p>
                    <p className="text-sm">{edu.year}</p>
                    <p className="font-medium">{edu.grade}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </motion.div>
    </div>
  )
}

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

import { motion } from "framer-motion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function ProjectsPage() {
  const projects = [
    {
      title: "Fashion Fusion",
      description: "Web application for fashion enthusiasts to share and receive style suggestions.",
      tools: ["TypeScript", "Tailwind CSS", "MongoDB"],
      link: "#",
    },
    {
      title: "Star Nova",
      description: "Web portal for film industry auditions with location-based prioritization.",
      tools: ["HTML", "CSS", "JavaScript"],
      link: "#",
    },
    {
      title: "FPS ZOMBIE Game",
      description: "Basic PC gaming application developed using Unity.",
      tools: ["C#", "Unity Gaming Assets"],
      link: "#",
    },
    {
      title: "SORO",
      description: "Static website to reduce Surface Water Pollution through user incentives.",
      tools: ["React", "Node.js", "Express"],
      link: "#",
    },
  ]

<div className="grid gap-6 md:grid-cols-2">
          {projects.map((project, index) => (
            <motion.div
              key={project.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
            >
              <Card className="group relative overflow-hidden">
                <CardHeader>
                  <CardTitle className="text-xl">{project.title}</CardTitle>
                  <CardDescription>{project.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {project.tools.map((tool) => (
                      <Badge key={tool} variant="secondary">
                        {tool}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
                <motion.div
                  className="absolute inset-0 bg-primary/10 opacity-0 transition-opacity group-hover:opacity-100"
                  whileHover={{ opacity: 1 }}
                />
              </Card>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </div>
  )
}

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

import { motion } from "framer-motion"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function ExperiencePage() {
  const experiences = [
    {
      title: "Internship in Python Programming",
      company: "Internpe",
      date: "12th Aug 2024 – 8th Sep 2024",
      description: [
        "Built a real time Digital Clock using Python and Tkinter",
        "Developed Tic Tac Toe game with dynamic board display and win detection",
        "Created a classic Snake game using pygame library",
        "Implemented a Connect Four game with two-player mode",
      ],
    },
    {
      title: "AI Creators Program Internship",
      company: "Swecha Telangana",
      date: "12th Aug 2024 – 26th Aug 2024",
      description: [
        "Built AI chatbot for preserving culture and Language environment",
        "Utilized React.js and Node.js for development",
        "Implemented natural language processing features",
      ],
    },
  ]

const certifications = [
    "3rd position in Hackathon by Brainovision Pvt. Ltd",
    "Python for Data Science from NPTEL",
    "Oracle Certified Professional in Oracle Cloud Infrastructure Generative AI",
    "Data Analytics and Visualization Job Simulation from Accenture",
    "Google Analytics for Beginners from Google",
    "3rd position in Code-A-Thon by Forge Alumnus Service",
    "Programming in Java from NPTEL",
  ]

return (
    <div className="container px-4 py-16 md:px-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="space-y-12"
      >
        <section className="space-y-8">
          <h1 className="text-4xl font-bold">Experience</h1>
          <div className="grid gap-6 md:grid-cols-2">
            {experiences.map((exp, index) => (
              <motion.div
                key={exp.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1, duration: 0.5 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>{exp.title}</CardTitle>
                    <CardDescription>
                      {exp.company} | {exp.date}
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ul className="list-disc pl-4 space-y-2">
                      {exp.description.map((item, i) => (
                        <li key={i}>{item}</li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

<section className="space-y-8">
          <h2 className="text-3xl font-bold">Certifications</h2>
          <div className="grid gap-4 md:grid-cols-2">
            {certifications.map((cert, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 + index * 0.1, duration: 0.5 }}
              >
                <Card>
                  <CardContent className="p-4">
                    <p>{cert}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>
      </motion.div>
    </div>
  )
}

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

import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export default function CertificationsPage() {
  const certifications = [
    {
      title: "Python for Data Science",
      issuer: "NPTEL",
      date: "Jul – Aug 2024",
      details: "Completed the course with 68% consolidated score",
    },
    {
      title: "Oracle Certified Professional",
      issuer: "Oracle",
      date: "August 2024",
      details: "Oracle Cloud Infrastructure Generative AI",
    },
    {
      title: "Data Analytics and Visualization Job Simulation",
      issuer: "Accenture",
      date: "May 2024",
      details: "Completed practical simulation of real-world data analytics tasks",
    },
    {
      title: "Google Analytics for Beginners",
      issuer: "Google",
      date: "2024",
      details: "Mastered fundamentals of digital analytics",
    },
    {
      title: "Programming in Java",
      issuer: "NPTEL",
      date: "Jan -Apr 2024",
      details: "Completed the course with 58% consolidated score",
    },
  ]

const achievements = [
    {
      title: "3rd Position in Hackathon",
      organization: "Brainovision Pvt. Ltd",
      date: "5th – 6th December 2024",
      location: "MLRIT College Hyderabad",
    },
    {
      title: "3rd Position in Code-A-Thon",
      organization: "Forge Alumnus Service",
      date: "March 2024",
      location: "IIT Hyderabad",
    },
    {
      title: "TCS CodeVita Season 10",
      organization: "Tata Consultancy Services",
      date: "2024",
      details: "Participated in global coding competition",
    },
  ]

return (
    <div className="container px-4 py-16 md:px-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="space-y-12"
      >
        <section className="space-y-8">
          <h1 className="text-4xl font-bold">Certifications</h1>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {certifications.map((cert, index) => (
              <motion.div
                key={cert.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.1, duration: 0.5 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>{cert.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm font-medium">{cert.issuer}</p>
                    <p className="text-sm text-muted-foreground">{cert.date}</p>
                    <p className="mt-2 text-sm">{cert.details}</p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>

<section className="space-y-8">
          <h2 className="text-3xl font-bold">Achievements</h2>
          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {achievements.map((achievement, index) => (
              <motion.div
                key={achievement.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 + index * 0.1, duration: 0.5 }}
              >
                <Card>
                  <CardHeader>
                    <CardTitle>{achievement.title}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-sm font-medium">{achievement.organization}</p>
                    <p className="text-sm text-muted-foreground">{achievement.date}</p>
                    {achievement.location && <p className="mt-2 text-sm">{achievement.location}</p>}
                    {achievement.details && <p className="mt-2 text-sm">{achievement.details}</p>}
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </section>
      </motion.div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/api/contact/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import nodemailer from "nodemailer"

export async function POST(req: Request) {
  try {
    const { name, email, message } = await req.json()

const transporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS,
      },
    })

const mailOptions = {
      from: process.env.EMAIL_USER,
      to: "satyapoojith2@gmail.com",
      subject: `Portfolio Contact from ${name}`,
      text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`,
    }

await transporter.sendMail(mailOptions)

return NextResponse.json({ message: "Email sent successfully!" })
  } catch (error) {
    console.error("Error sending email:", error)
    return NextResponse.json({ error: "Failed to send email" }, { status: 500 })
  }
}

[V0_FILE]typescriptreact:file="components/Navigation.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"
import { ModeToggle } from "./mode-toggle"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useState } from "react"

export function Navigation() {
  const pathname = usePathname()
  const [open, setOpen] = useState(false)

const links = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/projects", label: "Projects" },
    { href: "/experience", label: "Experience" },
    { href: "/certifications", label: "Certifications" },
    { href: "/contact", label: "Contact" },
  ]

return (
    <header className="fixed top-0 w-full bg-background/80 backdrop-blur-md z-50 border-b">
      <nav className="container mx-auto px-4 py-4">
        <div className="flex items-center justify-between">
          <Link href="/" className="text-xl font-bold">
            BSP
          </Link>

{/* Desktop Navigation */}
          <div className="hidden md:flex items-center gap-6">
            {links.map(({ href, label }) => (
              <Link key={href} href={href} className="relative">
                {pathname === href && (
                  <motion.span
                    layoutId="underline"
                    className="absolute left-0 top-full block h-[2px] w-full bg-foreground"
                  />
                )}
                {label}
              </Link>
            ))}
            <ModeToggle />
          </div>

{/* Mobile Navigation */}
          <div className="md:hidden flex items-center gap-2">
            <ModeToggle />
            <Sheet open={open} onOpenChange={setOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon">
                  <Menu className="h-6 w-6" />
                  <span className="sr-only">Toggle menu</span>
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[300px] sm:w-[400px]">
                <nav className="flex flex-col gap-4 mt-4">
                  {links.map(({ href, label }) => (
                    <Link
                      key={href}
                      href={href}
                      onClick={() => setOpen(false)}
                      className={`text-lg p-2 rounded-lg hover:bg-accent ${pathname === href ? "bg-accent" : ""}`}
                    >
                      {label}
                    </Link>
                  ))}
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </nav>
    </header>
  )
}

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

import Image from "next/image"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { ArrowRight } from "lucide-react"

export default function Home() {
  return (
    <section className="min-h-[calc(100vh-4rem)] flex items-center py-8 md:py-0">
      <div className="container px-4 md:px-6">
        <div className="grid gap-8 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="flex flex-col justify-center space-y-4 order-2 lg:order-1 text-center lg:text-left"
          >
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                Hi, I'm Satya Pujith
              </h1>
              <p className="text-base sm:text-lg text-muted-foreground md:text-xl">
                Computer Science Student specializing in Data Science. Passionate about building innovative solutions
                and learning new technologies.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-2 justify-center lg:justify-start">
              <Button asChild size="lg">
                <a href="/projects">
                  View My Work <ArrowRight className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button variant="outline" asChild size="lg">
                <a href="/contact">Get in Touch</a>
              </Button>
            </div>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="flex items-center justify-center order-1 lg:order-2"
          >
            <div className="relative w-[280px] h-[280px] sm:w-[350px] sm:h-[350px] lg:w-[400px] lg:h-[400px]">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/photo_6111569369801802390_y.jpg-0Xm5Aog6wZvZLt9BLO9FK4R1LUwPpf.jpeg"
                alt="Botuku Satya Pujith"
                fill
                className="object-cover rounded-full border-4 border-background shadow-xl"
                priority
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}

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

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"
import type React from "react" // Import React

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
          description: "group-[.toast]:text-muted-foreground",
          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import { ThemeProvider } from "@/components/theme-provider"
import { Navigation } from "@/components/Navigation"
import { Footer } from "@/components/Footer"
import { Inter } from "next/font/google"
import "./globals.css"
import { Toaster } from "@/components/ui/sonner"
import type { ReactNode } from "react"

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

export const metadata = {
  title: "Satya Pujith - Portfolio",
  description: "Computer Science Student specializing in Data Science",
  viewport: "width=device-width, initial-scale=1, maximum-scale=1",
}

export default function RootLayout({
  children,
}: {
  children: ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <Navigation />
          <main className="min-h-screen pt-16">{children}</main>
          <Footer />
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  )
}

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

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Github, Linkedin, Mail, Phone } from "lucide-react"
import { toast } from "sonner"

export default function ContactPage() {
  const [isSubmitting, setIsSubmitting] = useState(false)

const contactInfo = [
    {
      icon: Mail,
      title: "Email",
      value: "satyapoojith2@gmail.com",
      link: "mailto:satyapoojith2@gmail.com",
    },
    {
      icon: Phone,
      title: "Phone",
      value: "+91 9391994524",
      link: "tel:+919391994524",
    },
    {
      icon: Github,
      title: "GitHub",
      value: "github.com/SatyaPujith",
      link: "https://github.com/SatyaPujith",
    },
    {
      icon: Linkedin,
      title: "LinkedIn",
      value: "linkedin.com/in/botukusatyapujith",
      link: "https://linkedin.com/in/botukusatyapujith",
    },
  ]

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setIsSubmitting(true)

const formData = new FormData(e.currentTarget)
    const data = {
      name: formData.get("name"),
      email: formData.get("email"),
      message: formData.get("message"),
    }

try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      })

if (!response.ok) throw new Error()

toast.success("Message sent successfully!")
      e.currentTarget.reset()
    } catch (error) {
      toast.error("Failed to send message. Please try again.")
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="container px-4 py-16 md:px-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="grid gap-8 md:grid-cols-2"
      >
        <div className="space-y-6">
          <div className="space-y-2">
            <h1 className="text-4xl font-bold">Get in Touch</h1>
            <p className="text-lg text-muted-foreground">
              Feel free to reach out for collaborations or just a friendly hello
            </p>
          </div>
          <div className="grid gap-4">
            {contactInfo.map((item, index) => {
              const Icon = item.icon
              return (
                <motion.div
                  key={item.title}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1, duration: 0.5 }}
                >
                  <a href={item.link} target="_blank" rel="noopener noreferrer">
                    <Card className="group transition-colors hover:bg-accent">
                      <CardContent className="flex items-center gap-4 p-4">
                        <Icon className="h-5 w-5" />
                        <div>
                          <p className="font-medium">{item.title}</p>
                          <p className="text-sm text-muted-foreground">{item.value}</p>
                        </div>
                      </CardContent>
                    </Card>
                  </a>
                </motion.div>
              )
            })}
          </div>
        </div>

<motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.2, duration: 0.5 }}
        >
          <Card>
            <CardHeader>
              <CardTitle>Send me a message</CardTitle>
              <CardDescription>I'll try to get back to you as soon as possible.</CardDescription>
            </CardHeader>
            <CardContent>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                  <Input name="name" placeholder="Your name" required />
                </div>
                <div className="space-y-2">
                  <Input name="email" type="email" placeholder="Your email" required />
                </div>
                <div className="space-y-2">
                  <Textarea name="message" placeholder="Your message" className="min-h-[150px]" required />
                </div>
                <Button type="submit" className="w-full" disabled={isSubmitting}>
                  {isSubmitting ? "Sending..." : "Send Message"}
                </Button>
              </form>
            </CardContent>
          </Card>
        </motion.div>
      </motion.div>
    </div>
  )
}
</article></body></html>