I'm trying to create a route to my project page in my Nextjs portfolio, i created an array of my pages and their respective links in index.ts file from data folder but for some reason i couldn't figure out the routing.
I created a floating nav with aceternity UI and map over the link after importing it from the data file,i imported my floating nav to my page.tsx. Only the home link '/' worked so far.The project link is not working so i can't navigate there when i click the button on the nav. I would appreciate any help on how i can implement the 'project' path to work on the floating navigation and my 'show my projects' button.
This is the page.tsx file
import Hero from "@/components/Hero";
import { FloatingNav } from "@/components/ui/FloatingNav";
import {FaHome} from 'react-icons/fa'
import Grid from '@/components/Grid'
import Footer from "@/components/Footer";
import Experience from "@/components/Experience";
import Clients from "@/components/Clients";
import RecentProjects from "@/components/RecentProjects";
import { FaLocationArrow } from "react-icons/fa";
import { navItems } from "@/data";
import Approach from "@/components/Approach";
export default function Home() {
return (
<main className="relative bg-black-100 flex justify-center items-center flex-col overflow-hidden
mx-auto sm:px-10 px-5">
<div className="max-w-7xl w-full">
<FloatingNav navItems={[
{name: 'Home', link: '/', icon: <FaHome />},
{name: 'Projects',link:'/', icon: <FaLocationArrow />
}
]} />
<Hero />
<Grid />
<RecentProjects />
<Clients />
<Approach />
<Experience />
<Footer />
</div>
</main>
);
}
The index.ts file from data
export const navItems = [
{ name: "About", link: "#about" },
{ name: "Projects", link: "#projects" },
{ name: "Testimonials", link: "#testimonials" },
{ name: "Contact", link: "#contact" },
];
export const gridItems = [
{
id: 1,
title: "I prioritize client collaboration, fostering open communication ",
description: "",
className: "lg:col-span-3 md:col-span-6 md:row-span-4 lg:min-h-[60vh]",
imgClassName: "w-full h-full",
titleClassName: "justify-end",
img: "/b1.svg",
spareImg: "",
},
{
id: 2,
title: "I'm very flexible with time zone communications",
description: "",
className: "lg:col-span-2 md:col-span-3 md:row-span-2",
imgClassName: "",
titleClassName: "justify-start",
img: "",
spareImg: "",
},
{
id: 3,
title: "My tech stack",
description: "I constantly try to improve",
className: "lg:col-span-2 md:col-span-3 md:row-span-2",
imgClassName: "",
titleClassName: "justify-center",
img: "",
spareImg: "",
},
{
id: 4,
title: "Tech enthusiast with a passion for development.",
description: "",
className: "lg:col-span-2 md:col-span-3 md:row-span-1",
imgClassName: "",
titleClassName: "justify-start",
img: "/grid.svg",
spareImg: "/b4.svg",
},
{
id: 5,
title: "Currently working on my Nextjs Blogpost",
description: "The Inside Scoop",
className: "md:col-span-3 md:row-span-2",
imgClassName: "absolute right-0 bottom-0 md:w-96 w-60",
titleClassName: "justify-center md:justify-start lg:justify-center",
img: "/b5.svg",
spareImg: "/grid.svg",
},
{
id: 6,
title: "Do you want to start a project together?",
description: "",
className: "lg:col-span-2 md:col-span-3 md:row-span-1",
imgClassName: "",
titleClassName: "justify-center md:max-w-full max-w-60 text-center",
img: "",
spareImg: "",
},
];
export const projects = [
{
id: 1,
title: "Travel Advisor API",
des: "Advanced travel companion application using Google Maps with Geolocation, Google Maps API, Searching for places, Fetching restaurants, hotels and attractions based on location from specialized Rapid APIs, data filtering and much more.",
img: "/trc.svg",
iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/three.svg", "/fm.svg"],
link: "https://github.com/medijay/travel_advisor-api",
},
{
id: 2,
title: "Online Doctor Appointment",
des: "Patients can select a desired doctor appointment date through the online platform. This project is developed using the MERN stack technology, and I have implemented various functionalities to make it a professional website.",
img: "/lnp.svg",
iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/stream.svg", "/c.svg"],
link: "https://github.com/medijay/Doctor-appointment",
},
{
id: 3,
title: "React youtube clone",
des: "React youtube clone with rapidAPI single web application with amazing functionalities.",
img: "/med.svg",
iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/three.svg", "/rpd.svg"],
link: "https://medijayrapidapi.netlify.app/",
},
{
id: 4,
title: "React Cocktail API",
des: "Single web application displaying different cocktails with comprehensive details built using React and Rapid API..Search option functionality in the home page.",
img: "/mefi.svg",
iconLists: ["/re.svg", "/tail.svg", "/ts.svg", "/rpd.svg", "/gsap.svg"],
link: "https://mjcodetest.netlify.app/",
},
];
export const testimonials = [
{
quote:
"Collaborating with Ahmed was an absolute pleasure. His professionalism, promptness, and dedication to delivering exceptional results were evident throughout our project. Ahmed's enthusiasm for every facet of development truly stands out. If you're seeking to elevate your website and elevate your brand, Ahmed is the ideal partner.",
name: "Idowu Abdulsalam",
title: "Chief Designer, Zvix",
},
{
quote:
"Collaborating with Ahmed was an absolute pleasure. His professionalism, promptness, and dedication to delivering exceptional results were evident throughout our project. Ahmed's enthusiasm for every facet of development truly stands out. If you're seeking to elevate your website and elevate your brand, Ahmed is the ideal partner.",
name: "Kazeem Adeoye",
title: "Technical Director, Zvix",
},
{
quote:
"Collaborating with Ahmed was an absolute pleasure. His professionalism, promptness, and dedication to delivering exceptional results were evident throughout our project. Ahmed's enthusiasm for every facet of development truly stands out. If you're seeking to elevate your website and elevate your brand, Ahmed is the ideal partner.",
name: "Brian John",
title: "CTO, Medevs",
},
{
quote:
"Collaborating with Ahmed was an absolute pleasure. His professionalism, promptness, and dedication to delivering exceptional results were evident throughout our project. Ahmed's enthusiasm for every facet of development truly stands out. If you're seeking to elevate your website and elevate your brand, Ahmed is the ideal partner.",
name: "Emmanuel O.",
title: "Senior Software Developer",
},
{
quote:
"Collaborating with Ahmed was an absolute pleasure. His professionalism, promptness, and dedication to delivering exceptional results were evident throughout our project. Ahmed's enthusiasm for every facet of development truly stands out. If you're seeking to elevate your website and elevate your brand, Ahmed is the ideal partner.",
name: "Alex Timothy",
title: "Head of HR, Sycamore",
},
];
export const companies = [
{
id: 1,
name: "cloudinary",
img: "/cloud.svg",
nameImg: "/cloudName.svg",
},
{
id: 2,
name: "appwrite",
img: "/app.svg",
nameImg: "/appName.svg",
},
{
id: 3,
name: "HOSTINGER",
img: "/host.svg",
nameImg: "/hostName.svg",
},
{
id: 4,
name: "stream",
img: "/s.svg",
nameImg: "/streamName.svg",
},
{
id: 5,
name: "docker.",
img: "/dock.svg",
nameImg: "/dockerName.svg",
},
];
export const workExperience = [
{
id: 1,
title: "Frontend Engineer Intern",
desc: "Assisted in the development of a web-based platform using React.js, enhancing interactivity.",
className: "md:col-span-2",
thumbnail: "/exp1.svg",
},
{
id: 2,
title: "MERN Dev at Medevs",
desc: "Integrated design feedback to build and maintain user-centered software applications",
className: "md:col-span-2",
thumbnail: "/exp2.svg",
},
{
id: 3,
title: "Freelance App Dev Project",
desc: "Collaborating with a team of 7 professionals and designed the front-end architecture with the UI concepts of 8+ websites.",
className: "md:col-span-2",
thumbnail: "/exp3.svg",
},
{
id: 4,
title: "Lead Frontend Developer",
desc: "Developed and maintained user-facing features using modern frontend technologies.",
className: "md:col-span-2",
thumbnail: "/exp4.svg",
},
];
MagicButton from Hero.tsx
<a href="#projects">
<MagicButton
title= 'Show my projects'
icon={<FaLocationArrow />}
position='right'
You may want to look into "hash" routing.
It appears another StackOverflow user asked a similar question and got a good answer: https://stackoverflow.com/a/75490657/1745635
For your MagicButton, I recommend using Link from 'next/link' instead of the a tag.