I'll create a redesigned version of the portfolio website with enhanced features and modern design:
This redesign includes several improvements:
Would you like me to add any additional sections or features to the portfolio?
<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>