Netlify app redesign - v0 by Vercel

<ReactProject id="portfolio-redesign"> First, let's update the layout file to properly handle client/server components:

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

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

export const metadata: Metadata = {
  title: 'Bharani Dharan P - Web Developer Portfolio',
  description: 'Full-stack web developer specializing in modern web technologies',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className="scroll-smooth">
      <body className={`${inter.className} bg-[#0B0B1F] text-white`}>
        {children}
      </body>
    </html>
  )
}

Let's create a client components directory and move our client components there:

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Menu, X } from 'lucide-react'

const navItems = [
  { name: 'Home', href: '#home' },
  { name: 'About', href: '#about' },
  { name: 'Skills', href: '#skills' },
  { name: 'Education', href: '#education' },
  { name: 'Projects', href: '#projects' },
  { name: 'Experience', href: '#experience' },
  { name: 'Services', href: '#services' },
  { name: 'Contact', href: '#contact' },
]

export function NavClient() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <nav className="fixed top-0 z-50 w-full bg-black/20 backdrop-blur-lg">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center">
            <Link href="#home" className="text-xl font-bold">
              Bharani
            </Link>
          </div>
          
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-4">
              {navItems.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="rounded-md px-3 py-2 text-sm hover:bg-white/10 transition-colors"
                >
                  {item.name}
                </Link>
              ))}
            </div>
          </div>

          <div className="md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="inline-flex items-center justify-center rounded-md p-2 hover:bg-white/10 transition-colors"
            >
              {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>
      </div>

      {isOpen && (
        <div className="md:hidden">
          <div className="space-y-1 px-2 pb-3 pt-2">
            {navItems.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="block rounded-md px-3 py-2 text-base hover:bg-white/10 transition-colors"
                onClick={() => setIsOpen(false)}
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      )}
    </nav>
  )
}

Create a server-side nav component wrapper:

import { NavClient } from './client/nav-client'

export function Nav() {
  return <NavClient />
}

Update the hero component to be client-side:

'use client'

import Image from 'next/image'
import { Github, Instagram, Linkedin, Youtube } from 'lucide-react'
import { Button } from '@/components/ui/button'

const socialLinks = [
  { icon: Linkedin, href: '#', label: 'LinkedIn' },
  { icon: Youtube, href: '#', label: 'YouTube' },
  { icon: Github, href: '#', label: 'GitHub' },
  { icon: Instagram, href: '#', label: 'Instagram' },
]

export function HeroClient() {
  return (
    <section id="home" className="relative min-h-screen overflow-hidden pt-16">
      <div className="absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-gradient-to-b from-[#0B0B1F] via-purple-900/20 to-[#0B0B1F]" />
        <div 
          className="absolute inset-0 bg-[url('https://sjc.microlink.io/MhI1zvESFEftzsRBDBaCR_F5mIVqSMKEHaaqCqSbgSYB2p3KwPNAz2BW9ZlB_-s9-TLlbCAkq7vM2WPBZWxusg.jpeg')] bg-cover bg-center opacity-30" 
          style={{ backgroundImage: "url('https://sjc.microlink.io/MhI1zvESFEftzsRBDBaCR_F5mIVqSMKEHaaqCqSbgSYB2p3KwPNAz2BW9ZlB_-s9-TLlbCAkq7vM2WPBZWxusg.jpeg')" }}
        />
      </div>

      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-32">
        <div className="grid gap-8 lg:grid-cols-2 lg:gap-16 items-center">
          <div className="space-y-8">
            <div className="space-y-4">
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
                Bharani Dharan P
              </h1>
              <p className="text-xl sm:text-2xl text-gray-400">
                Web Developer & Designer
              </p>
            </div>

            <div className="flex gap-4">
              {socialLinks.map((social) => {
                const Icon = social.icon
                return (
                  <a
                    key={social.label}
                    href={social.href}
                    className="rounded-full bg-white/10 p-2 hover:bg-white/20 transition-colors"
                    aria-label={social.label}
                  >
                    <Icon className="h-5 w-5" />
                  </a>
                )
              })}
            </div>

            <div className="flex flex-wrap gap-4">
              <Button size="lg" className="rounded-full">
                Check Resume
              </Button>
              <Button size="lg" variant="outline" className="rounded-full">
                Contact Me
              </Button>
            </div>
          </div>

          <div className="relative h-[400px] lg:h-[600px]">
            <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-blue-500/30 rounded-full blur-3xl" />
            <Image
              src="/placeholder.svg?height=600&width=600"
              alt="3D Rocket Illustration"
              width={600}
              height={600}
              className="relative h-full w-full object-contain animate-float"
              priority
            />
          </div>
        </div>
      </div>

      <div className="absolute bottom-0 left-0 right-0">
        <div className="flex justify-center pb-8">
          <div className="rounded-full bg-white/10 p-2 animate-bounce">
            <svg
              className="h-6 w-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M19 14l-7 7m0 0l-7-7m7 7V3"
              />
            </svg>
          </div>
        </div>
      </div>
    </section>
  )
}

Create a server-side hero component wrapper:

import { HeroClient } from './client/hero-client'

export function Hero() {
  return <HeroClient />
}

Update the main page:

import { Nav } from '@/components/nav'
import { Hero } from '@/components/hero'

export default function Home() {
  return (
    <main>
      <Nav />
      <Hero />
    </main>
  )
}

Update the globals.css to remove Framer Motion dependencies and use native CSS animations:

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 252 100% 69%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 10% 3.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 10% 3.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 10% 3.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 10% 3.9%;
    --input: 240 10% 3.9%;
    --ring: 252 100% 69%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

The changes made to fix the error include: 1. Properly separated client and server components 2. Removed Framer Motion dependency and used native CSS animations 3. Fixed image handling with next/image 4. Properly structured the app directory 5. Added proper 'use client' directives 6. Fixed background image implementation 7. Simplified component structure These changes should resolve the "Unexpected token '<'" error by ensuring proper client/server component separation and correct Next.js setup. </ReactProject>