[V0_FILE]typescriptreact:file="app/components/project-card.tsx" isEdit="true" isMerged="true" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Github } from "lucide-react" import Image from "next/image" import Link from "next/link" interface ProjectCardProps { title: string description: string image: string link: string tags: string[] } export default function ProjectCard({ title, description, image, link, tags }: ProjectCardProps) { return (

{title}

{description}

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

View Project ) } [V0_FILE]typescriptreact:file="app/components/tech-stack.tsx" isEdit="true" isMerged="true" import { Card } from "@/components/ui/card" const technologies = [ { category: "Languages & Frameworks", skills: ["Java", "Spring Boot", "Angular", "TypeScript", "HTML5", "JavaScript"], }, { category: "Database & ORM", skills: ["MySQL", "Hibernate", "Spring MVC", "REST API"], }, { category: "Tools & Technologies", skills: ["GitHub", "Eclipse", "IntelliJ", "Postman", "Twilio"], }, { category: "Other Skills", skills: ["Tailwind CSS", "Data Structures", "Algorithms", "Apache"], }, ] export default function TechStack() { return (

{technologies.map((tech) => (

{tech.category}

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

))}

) } [V0_FILE]typescriptreact:file="app/components/contact-form.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { useState } from "react" import { submitContactForm } from "../actions" export default function ContactForm() { const [pending, setPending] = useState(false) const [message, setMessage] = useState("") async function handleSubmit(formData: FormData) { setPending(true) try { const response = await submitContactForm(formData) setMessage(response.message) } catch (error) { setMessage("Something went wrong. Please try again.") } finally { setPending(false) } } return (

Name

Message

</div>
        <Button type="submit" className="w-full" disabled={pending}>
          {pending ? "Sending..." : "Send Message"}
        </Button>
        {message && <p className="text-sm text-center mt-4 text-muted-foreground">{message}</p>}
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/actions.ts" isMerged="true"
"use server"

export async function submitContactForm(formData: FormData) {
  // Simulate a delay
  await new Promise((resolve) => setTimeout(resolve, 1000))

const name = formData.get("name")
  const email = formData.get("email")
  const message = formData.get("message")

// Here you would typically send an email or save to a database
  console.log("Form submission:", { name, email, message })

return {
    message: "Thanks for your message! I'll get back to you soon.",
  }
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import { ThemeProvider } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import type React from "react" // Import React

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

export const metadata: Metadata = {
  title: "John.dev - Full Stack Developer",
  description: "Full stack developer portfolio showcasing projects and skills",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

[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]typescriptreact:file="components/theme-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 ThemeToggle() {
  const { setTheme, theme } = 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="app/components/education.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

const educationData = [
  {
    degree: "Bachelor of Technology",
    major: "Computer Science and Engineering",
    institution: "Holy Mary Institute of Technology and Science",
    period: "06/2019 – 08/2022",
    location: "Hyderabad",
  },
  {
    degree: "Diploma",
    major: "Electrical and Electronics Engineering",
    institution: "Jyothishmathi Institute of Technology and Science",
    period: "06/2016 – 05/2019",
    location: "Karimnagar",
  },
  {
    degree: "Class X",
    institution: "Suvidya High School",
    period: "05/2015 – 06/2016",
    location: "Karimnagar",
  },
]

export default function Education() {
  return (
    <div className="grid gap-6">
      {educationData.map((edu, index) => (
        <Card key={index}>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <h4 className="font-semibold">{edu.degree}</h4>
              {edu.major && <p className="text-sm text-muted-foreground">{edu.major}</p>}
              <p className="text-sm">{edu.institution}</p>
              <div className="flex justify-between text-sm text-muted-foreground">
                <span>{edu.period}</span>
                <span>{edu.location}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/components/experience.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"

const experienceData = [
  {
    title: "Advanced Computing in Programming & Web Development Internship",
    company: "Texoham",
    period: "09/2021 – 12/2021",
    location: "Hyderabad",
    responsibilities: [
      "Worked on real-time projects creating front-end web applications",
      "Created a travel agency web application using HTML, CSS, JavaScript, and React.js",
      "Performed database manipulation and query framing",
      "Developed JavaScript functions for dynamic websites",
    ],
  },
]

const certifications = [
  "Advanced Computing in Programming & Web Development Internship",
  "Programmable Logic Controller, SCADA, PCB Design",
  "Software Engineering Virtual Experience",
  "Certified Full Stack Java Developer",
]

export default function Experience() {
  return (
    <div className="space-y-8">
      {experienceData.map((exp, index) => (
        <Card key={index}>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-4">
              <div>
                <h4 className="font-semibold">{exp.title}</h4>
                <p className="text-sm text-muted-foreground">{exp.company}</p>
                <div className="flex justify-between text-sm text-muted-foreground mt-1">
                  <span>{exp.period}</span>
                  <span>{exp.location}</span>
                </div>
              </div>
              <ul className="list-disc list-inside space-y-2 text-sm">
                {exp.responsibilities.map((resp, idx) => (
                  <li key={idx}>{resp}</li>
                ))}
              </ul>
            </div>
          </CardContent>
        </Card>
      ))}

<div className="mt-8">
        <h3 className="text-xl font-semibold mb-4">Certifications</h3>
        <div className="grid gap-4 md:grid-cols-2">
          {certifications.map((cert, index) => (
            <Card key={index}>
              <CardContent className="p-4">
                <p className="text-sm">{cert}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true"
import { Button } from "@/components/ui/button"
import { Github, Linkedin, Mail, Phone } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import ContactForm from "./components/contact-form"
import Education from "./components/education"
import Experience from "./components/experience"
import ProjectCard from "./components/project-card"
import TechStack from "./components/tech-stack"

export default function Page() {
  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-14 items-center">
          <div className="mr-4 hidden md:flex">
            <Link className="mr-6 flex items-center space-x-2" href="/">
              <span className="hidden font-bold sm:inline-block">Tharun.dev</span>
            </Link>
            <nav className="flex items-center space-x-6 text-sm font-medium">
              <Link href="#about" className="transition-colors hover:text-foreground/80">
                About
              </Link>
              <Link href="#experience" className="transition-colors hover:text-foreground/80">
                Experience
              </Link>
              <Link href="#projects" className="transition-colors hover:text-foreground/80">
                Projects
              </Link>
              <Link href="#contact" className="transition-colors hover:text-foreground/80">
                Contact
              </Link>
            </nav>
          </div>
          <Button variant="outline" className="ml-auto">
            Resume
          </Button>
        </div>
      </header>

<main className="container px-4 md:px-6">
        <section id="about" className="py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col md:flex-row items-center justify-between gap-8">
              <div className="flex flex-col space-y-4">
                <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                  Tharun Nelli
                </h1>
                <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
                  Full Stack Developer based in Hyderabad, India. Passionate about creating efficient web applications
                  using modern technologies.
                </p>
                <div className="flex space-x-4">
                  <Link href="https://github.com/NELLITHARUN" target="_blank">
                    <Button variant="outline" size="icon">
                      <Github className="h-4 w-4" />
                      <span className="sr-only">GitHub</span>
                    </Button>
                  </Link>
                  <Link href="https://linkedin.com/in/tharun-nelli" target="_blank">
                    <Button variant="outline" size="icon">
                      <Linkedin className="h-4 w-4" />
                      <span className="sr-only">LinkedIn</span>
                    </Button>
                  </Link>
                  <Link href="mailto:tharunnelli@gmail.com">
                    <Button variant="outline" size="icon">
                      <Mail className="h-4 w-4" />
                      <span className="sr-only">Email</span>
                    </Button>
                  </Link>
                  <Link href="tel:+919603060137">
                    <Button variant="outline" size="icon">
                      <Phone className="h-4 w-4" />
                      <span className="sr-only">Phone</span>
                    </Button>
                  </Link>
                </div>
              </div>
              <div className="relative w-[280px] h-[280px] rounded-full overflow-hidden">
                <Image
                  src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202021-12-13%20at%2010.05.02%20AM-min%20(1)-92lh62dyRJpFveUFc2pO2S54N2qeTV.png"
                  alt="Tharun Nelli"
                  fill
                  className="object-cover"
                  priority
                />
              </div>
            </div>
          </div>
        </section>

<section id="experience" className="py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-12">Experience</h2>
            <Experience />
            <div className="mt-16">
              <h3 className="text-2xl font-bold tracking-tighter sm:text-3xl mb-8">Education</h3>
              <Education />
            </div>
          </div>
        </section>

<section id="projects" className="py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-12">Projects</h2>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-2">
              <ProjectCard
                title="Anime Streaming Application"
                description="Developed an anime streaming application with end-to-end functionality including Email, OTP, payment, Google auth services, admin and user CRUD operations"
                image="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/e99d4405-e317-45c9-be09-80b083e9d3db.jpeg-iEk8qnSVE8q4KPOklDeuPU2LUzbvAW.png"
                link="https://gitlab.com/NELLITHARUN/ani-soul"
                tags={["Spring Boot", "Angular", "TypeScript", "REST APIs", "MySQL", "Hibernate"]}
              />
              <ProjectCard
                title="Customer Relationship Management"
                description="Full-stack CRM system with role-based access control, contract management, and data export capabilities"
                image="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/9ca5ebd5-6aca-4cd8-a7ec-c18e306493fc.jpeg-42IHZqeYVfOqaPOyjAoptWF4SkSBJE.png"
                link="#"
                tags={["Spring Boot", "Angular", "Spring Security"]}
              />
              <ProjectCard
                title="Email Fetching WhatsApp Bot"
                description="BTech major project featuring email fetching plugins and WhatsApp chatbot integration using IMAP module"
                image="/placeholder.svg?height=400&width=600"
                link="#"
                tags={["JavaScript", "IMAP", "WhatsApp API"]}
              />
              <ProjectCard
                title="Travel Agency Web Application"
                description="Dynamic travel booking platform with user authentication, payment system, and invoice generation"
                image="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/29ed26a6-9860-45ae-85ba-b7d44ea87dfb.jpeg-NTflTM5xi3AHBppVGaeD1rmAXYcfBS.png"
                link="#"
                tags={["HTML", "CSS", "JavaScript"]}
              />
            </div>
          </div>
        </section>

<section className="py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-12">Tech Stack</h2>
            <TechStack />
          </div>
        </section>

<section id="contact" className="py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="mx-auto max-w-2xl">
              <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-12">Get in Touch</h2>
              <ContactForm />
            </div>
          </div>
        </section>
      </main>

<footer className="border-t">
        <div className="container flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6">
          <p className="text-xs text-gray-500 dark:text-gray-400">© 2024 Tharun Nelli. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
</article></body></html>

About

Tags

Share

About

Tags

Share

More from nellitharun

More Templates Like This

About

Tags

Share

About

Tags

Share

More from nellitharun

More Templates Like This