create me a portfolio with git hub globe "use client";import React from "react";import { motion } from "motion/react";import dynamic from "next/dynamic";const World = dynamic(() => import("../ui/globe").then((m) => m.World), { ssr: false,});export function GlobeDemo() { const globeConfig = { pointSize: 4, globeColor: "#062056", showAtmosphere: true, atmosphereColor: "#FFFFFF", atmosphereAltitude: 0.1, emissive: "#062056", emissiveIntensity: 0.1, shininess: 0.9, polygonColor: "rgba(255,255,255,0.7)", ambientLight: "#38bdf8", directionalLeftLight: "#ffffff", directionalTopLight: "#ffffff", pointLight: "#ffffff", arcTime: 1000, arcLength: 0.9, rings: 1, maxRings: 3, initialPosition: { lat: 22.3193, lng: 114.1694 }, autoRotate: true, autoRotateSpeed: 0.5, }; const colors = ["#06b6d4", "#3b82f6", "#6366f1"]; const sampleArcs = [ { order: 1, startLat: -19.885592, startLng: -43.951191, endLat: -22.9068, endLng: -43.1729, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 1, startLat: 28.6139, startLng: 77.209, endLat: 3.139, endLng: 101.6869, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 1, startLat: -19.885592, startLng: -43.951191, endLat: -1.303396, endLng: 36.852443, arcAlt: 0.5, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 2, startLat: 1.3521, startLng: 103.8198, endLat: 35.6762, endLng: 139.6503, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 2, startLat: 51.5072, startLng: -0.1276, endLat: 3.139, endLng: 101.6869, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 2, startLat: -15.785493, startLng: -47.909029, endLat: 36.162809, endLng: -115.119411, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 3, startLat: -33.8688, startLng: 151.2093, endLat: 22.3193, endLng: 114.1694, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 3, startLat: 21.3099, startLng: -157.8581, endLat: 40.7128, endLng: -74.006, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 3, startLat: -6.2088, startLng: 106.8456, endLat: 51.5072, endLng: -0.1276, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 4, startLat: 11.986597, startLng: 8.571831, endLat: -15.595412, endLng: -56.05918, arcAlt: 0.5, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 4, startLat: -34.6037, startLng: -58.3816, endLat: 22.3193, endLng: 114.1694, arcAlt: 0.7, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 4, startLat: 51.5072, startLng: -0.1276, endLat: 48.8566, endLng: -2.3522, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 5, startLat: 14.5995, startLng: 120.9842, endLat: 51.5072, endLng: -0.1276, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 5, startLat: 1.3521, startLng: 103.8198, endLat: -33.8688, endLng: 151.2093, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 5, startLat: 34.0522, startLng: -118.2437, endLat: 48.8566, endLng: -2.3522, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 6, startLat: -15.432563, startLng: 28.315853, endLat: 1.094136, endLng: -63.34546, arcAlt: 0.7, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 6, startLat: 37.5665, startLng: 126.978, endLat: 35.6762, endLng: 139.6503, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 6, startLat: 22.3193, startLng: 114.1694, endLat: 51.5072, endLng: -0.1276, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 7, startLat: -19.885592, startLng: -43.951191, endLat: -15.595412, endLng: -56.05918, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 7, startLat: 48.8566, startLng: -2.3522, endLat: 52.52, endLng: 13.405, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 7, startLat: 52.52, startLng: 13.405, endLat: 34.0522, endLng: -118.2437, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 8, startLat: -8.833221, startLng: 13.264837, endLat: -33.936138, endLng: 18.436529, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 8, startLat: 49.2827, startLng: -123.1207, endLat: 52.3676, endLng: 4.9041, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 8, startLat: 1.3521, startLng: 103.8198, endLat: 40.7128, endLng: -74.006, arcAlt: 0.5, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 9, startLat: 51.5072, startLng: -0.1276, endLat: 34.0522, endLng: -118.2437, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 9, startLat: 22.3193, startLng: 114.1694, endLat: -22.9068, endLng: -43.1729, arcAlt: 0.7, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 9, startLat: 1.3521, startLng: 103.8198, endLat: -34.6037, endLng: -58.3816, arcAlt: 0.5, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 10, startLat: -22.9068, startLng: -43.1729, endLat: 28.6139, endLng: 77.209, arcAlt: 0.7, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 10, startLat: 34.0522, startLng: -118.2437, endLat: 31.2304, endLng: 121.4737, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 10, startLat: -6.2088, startLng: 106.8456, endLat: 52.3676, endLng: 4.9041, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 11, startLat: 41.9028, startLng: 12.4964, endLat: 34.0522, endLng: -118.2437, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 11, startLat: -6.2088, startLng: 106.8456, endLat: 31.2304, endLng: 121.4737, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 11, startLat: 22.3193, startLng: 114.1694, endLat: 1.3521, endLng: 103.8198, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 12, startLat: 34.0522, startLng: -118.2437, endLat: 37.7749, endLng: -122.4194, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 12, startLat: 35.6762, startLng: 139.6503, endLat: 22.3193, endLng: 114.1694, arcAlt: 0.2, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 12, startLat: 22.3193, startLng: 114.1694, endLat: 34.0522, endLng: -118.2437, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 13, startLat: 52.52, startLng: 13.405, endLat: 22.3193, endLng: 114.1694, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 13, startLat: 11.986597, startLng: 8.571831, endLat: 35.6762, endLng: 139.6503, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 13, startLat: -22.9068, startLng: -43.1729, endLat: -34.6037, endLng: -58.3816, arcAlt: 0.1, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, { order: 14, startLat: -33.936138, startLng: 18.436529, endLat: 21.395643, endLng: 39.883798, arcAlt: 0.3, color: colors[Math.floor(Math.random() * (colors.length - 1))], }, ]; return ( <div className="flex flex-row items-center justify-center py-20 h-screen md:h-auto dark:bg-black bg-white relative w-full"> <div className="max-w-7xl mx-auto w-full relative overflow-hidden h-full md:h-[40rem] px-4"> <motion.div initial={{ opacity: 0, y: 20, }} animate={{ opacity: 1, y: 0, }} transition={{ duration: 1, }} className="div" > <h2 className="text-center text-xl md:text-4xl font-bold text-black dark:text-white"> We sell soap worldwide </h2> <p className="text-center text-base md:text-lg font-normal text-neutral-700 dark:text-neutral-200 max-w-md mt-2 mx-auto"> This globe is interactive and customizable. Have fun with it, and don't forget to share it. :) </p> </motion.div> <div className="absolute w-full bottom-0 inset-x-0 h-40 bg-gradient-to-b pointer-events-none select-none from-transparent dark:to-black to-white z-40" /> <div className="absolute w-full -bottom-20 h-72 md:h-full z-10"> <World data={sampleArcs} globeConfig={globeConfig} /> </div> </div> </div> );}but instead of this colorful globe place black globe with white border and with blur effect in border and dotted world map on globe which is same as used in the https://ui.aceternity.com/ delpoy in seconds section canvas with the background of shooting stars for whole portfoflio the portfolio show have this inteactive globe as hero banner on top and below it on left corner it should have the image for image use this comet card import { CometCard } from "@/components/ui/comet-card";export function CometCardDemo() { return ( <CometCard> <button type="button" className="my-10 flex w-80 cursor-pointer flex-col items-stretch rounded-[16px] border-0 bg-[#1F2121] p-2 saturate-0 md:my-20 md:p-4" aria-label="View invite F7RA" style={{ transformStyle: "preserve-3d", transform: "none", opacity: 1, }} > <div className="mx-2 flex-1"> <div className="relative mt-2 aspect-[3/4] w-full"> <img loading="lazy" className="absolute inset-0 h-full w-full rounded-[16px] bg-[#000000] object-cover contrast-75" alt="Invite background" src="https://images.unsplash.com/photo-1505506874110-6a7a69069a08?q=80&w=1287&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" style={{ boxShadow: "rgba(0, 0, 0, 0.05) 0px 5px 6px 0px", opacity: 1, }} /> </div> </div> <div className="mt-2 flex flex-shrink-0 items-center justify-between p-4 font-mono text-white"> <div className="text-xs">Comet Invitation</div> <div className="text-xs text-gray-300 opacity-50">#F7RA</div> </div> </button> </CometCard> );} it should have two images that changes on hover on comet card from left to right it should change linearly like a 3d card that changes photo add two dummy images for now i will add mine later beside in the right section add about me details that references myself and my details
Here's a portfolio website featuring an interactive globe hero banner, a dynamic Comet Card with image hover effects, and an "About Me" section, all set against a shooting stars background.
To install and run this code:
npm install or yarn install to install dependencies, including framer-motion, @react-three/fiber, and @react-three/drei.npm run dev or yarn dev to start the development server.The code returns the following error:
Could not load /images/dotted-world-map.jpg: undefined
Revise the code to address the error.
I was previewing: /
It seems there's an issue with how the useTexture hook from @react-three/drei is interacting with the dynamically generated image in the Next.js environment, leading to the "undefined" error.
To address this, I'll revise the components/ui/globe.tsx file to use THREE.TextureLoader().load() directly within a useMemo hook. This provides a more explicit way to load the texture and includes error handling callbacks for better debugging.
This change ensures that the texture is loaded directly using Three.js's TextureLoader, which should resolve the "undefined" error. The console.log statements will also provide more insight into the loading process.
Build an Interactive Developer Portfolio with 3D Globe and Comet Card (Inspired by Aceternity UI)Build a fully responsive, modern portfolio website using Next.js, Tailwind CSS, and Framer Motion with the following advanced features and layout:🌍 Hero Section – Interactive 3D GlobeFull-screen section with an interactive 3D globe (using globe.gl or GitHub globe).Black globe with:Dotted world map aesthetic (like Aceternity UI "Deploy in seconds" canvas).White blurred borders for glow.Slow auto-rotation.White animated connection arcs across the globe (use sample arcs).Animated Heading (centered, above globe):cssCopyEdit"We build from anywhere to everywhere." Subtext:arduinoCopyEdit"Explore my work across the globe." Background: animated shooting stars, similar to https://ui.aceternity.com🪐 Comet Card – Left Side Overlay on Hero SectionUse a CometCard component styled like Aceternity.Inside, add:A button showing two images (dummy for now).On mouse hover from left to right, smoothly flip or morph the card to transition between images — like a 3D card rotation.Below the image:lessCopyEditLeft: "Comet Invitation" Right: "#F7RA" 🙋 About Me – Right Side of Comet CardDisplay in neat typography:Name: Veera Venkata Avinash MalipireddyEmail: avinashece.2025@gmail.comPhone: 8978326207LinkedIn: https://www.linkedin.com/in/veera-venkata-avinash-malipireddy-0aa34026b🎓 Education SectionyamlCopyEditBachelor of Engineering – Electronics and Communication Engineering Krishna University College of Engineering and Technology, Machilipatnam, AP May 2021 – April 2024 💼 Work ExperienceFull Stack Developer Intern (Sep 2024 – Present)Built scalable apps using Java, Spring Boot, GitHub ActionsCollaborated with Agile teamsIntegrated OAuth, JWT, and CI/CDFull Stack Developer – Zeto.StudioFullstack + AI integrated projectUsed T3 stack, Fastify, TRPC Router, Bun, TurboRepo🛠️ Technical SkillsLanguages: Java, TypeScript, JavaScript, PythonFrameworks: React, Redux, Spring Boot, Fastify, TRPC, T3 StackRuntimes: Bun, PNPMCloud & Tools: Docker, GitHub Actions, Postman, Swagger, Git, TurboRepoDatabases: MySQL, MongoDBWorkflows: Agile, Scrum🚀 Projects SectionCards with:E-Commerce Platform – React + Spring BootReact Dice Game – Interactive web dice gamePortfolio Website – This project (Globe + Comet Card)📩 Contact MeForm with 3 fields:Name (required)Email (required)Message (required)✅ On submit: email form to avinashece.2025@gmail.com📄 Add a "Download CV" button that downloads avinash-cv.pdf🎨 Aesthetic & UX NotesDefault dark mode with neon/cyber glowAll UI elements should animate with framer-motionAdd blur/glow effects to globe and backgroundsUse subtle parallax on scrollMinimalistic futuristic font and UI style like Aceternity