\n );\n}\n\n// Animated Section Component\nfunction AnimatedSection({ children, direction = 'left' }) {\n const sectionRef = useRef(null);\n\n useEffect(() => {\n const section = sectionRef.current;\n if (!section) return;\n\n gsap.fromTo(\n section,\n { \n opacity: 0,\n x: direction === 'left' ? -100 : 100\n },\n {\n opacity: 1,\n x: 0,\n duration: 1,\n scrollTrigger: {\n trigger: section,\n start: 'top 80%',\n toggleActions: 'play none none reverse'\n }\n }\n );\n }, [direction]);\n\n return (\n

\n {children}\n

\n );\n}\n\n// Homepage Component\nfunction HomePage() {\n return (\n

\n \n

Jane Doe

Creative Developer & Innovative Designer

\n View My Work\n

\n \n

\n );\n}\n\n// About Page Component\nfunction AboutPage() {\n const skills = [\n { name: \"Web Development\", level: 90 },\n { name: \"UI/UX Design\", level: 85 },\n { name: \"React\", level: 95 },\n { name: \"Three.js\", level: 80 }\n ];\n\n return (\n

\n \n

About Me

\n $\"Jane$ \n

\n I'm a passionate developer with a keen eye for design and innovative solutions. \n My work combines technical expertise with creative thinking to deliver exceptional digital experiences.\n

\n \n\n \n

Professional Skills

\n {skills.map((skill, index) => (\n

{skill.name}

\n ))}\n

\n \n

\n );\n}\n\n// Portfolio Page Component\nfunction PortfolioPage() {\n const projects = [\n {\n title: \"Interactive Web Platform\",\n description: \"Full-stack web application with real-time collaboration features\",\n technologies: [\"React\", \"Node.js\", \"WebSockets\"],\n imageUrl: \"https://maxm-imggenurl.web.val.run/web-project-preview\",\n videoUrl: \"https://example.com/project-demo\",\n links: {\n github: \"https://github.com/username/project\",\n live: \"https://liveproject.com\"\n }\n },\n {\n title: \"Mobile Design System\",\n description: \"Comprehensive design system for cross-platform mobile apps\",\n technologies: [\"Figma\", \"React Native\", \"Design Tokens\"],\n imageUrl: \"https://maxm-imggenurl.web.val.run/mobile-design-preview\",\n links: {\n behance: \"https://behance.net/project\",\n figma: \"https://figma.com/file\"\n }\n }\n ];\n\n return (\n

My Projects

\n {projects.map((project, index) => (\n \n

{project.title}

{project.description}

\n {project.technologies.map(tech => (\n {tech}\n ))}\n

\n {Object.entries(project.links).map(([platform, url]) => (\n \n {platform}\n \n ))}\n

\n {project.videoUrl && (\n