improved links

package.json

@@ -16,14 +16,14 @@
 	},
 	"devDependencies": {
 		"eslint-config-next": "^14.2.5",
-		"@types/node": "^20.14.10",
+		"@types/node": "^20.14.11",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",
 		"autoprefixer": "^10.4.19",
 		"eslint": "^8",
 		"eslint-config-prettier": "^9.1.0",
 		"postcss": "^8.4.39",
-		"tailwindcss": "^3.4.4",
+		"tailwindcss": "^3.4.6",
 		"typescript": "^5.5.3"
 	}
 }

src/app/components/footer.tsx

@@ -1,11 +1,12 @@
+import Link from "next/link";
 import { EMAIL_ADDRESS } from "../lib/constants";
 import LinkButton from "./link-button";
 import Image from "next/image";
 
 export function Footer() {
 	return (
 		<footer className="flex flex-col mt-auto sm:flex-row items-center justify-between w-full gap-y-4 bg-black px-16 py-4">
-			<a className="uppercase text-lg hover:underline" href="/imprint">Imprint</a>
+			<Link className="uppercase text-lg hover:underline" href="/imprint">Imprint</Link>
 
 
 			{/* Contact Me Button */}
@@ -22,7 +23,7 @@ export function Footer() {
 				</div>
 			</LinkButton>
 
-			<a className="uppercase text-lg hover:underline" href="/privacy">Privacy Policy</a>
+			<Link className="uppercase text-lg hover:underline" href="/privacy">Privacy Policy</Link>
 		</footer>
 	);
 }

src/app/components/link-button.tsx

@@ -1,10 +1,14 @@
-export default function LinkButton(props: React.HTMLProps<HTMLAnchorElement>) {
+import Link from "next/link";
+
+
+export default function LinkButton(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
 	return (
-		<a
+		<Link
 			{...props}
+			href={props.href ?? "#"}
 			className={`${props.className} border-white border-2 rounded-full px-4 py-2 transform transition-transform duration-200 hover:scale-105`}
 		>
 			{props.children}
-		</a>
+		</Link>
 	);
 }

src/app/components/markdown.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import Markdown from "react-markdown";
 
 interface MarkdownProps {
@@ -10,7 +11,7 @@ export default function RenderMarkdown(props: MarkdownProps) {
 			h1: ({ node, ...props }) => <h1 className="text-2xl font-bold uppercase w-full" {...props} />,
 			h2: ({ node, ...props }) => <h2 className="text-xl font-bold w-full mt-4 mb-2" {...props} />,
 			h3: ({ node, ...props }) => <h3 className="text-lg font-bold w-full mt-4 mb-2" {...props} />,
-			a: ({ node, ...props }) => <a className="hover:underline" {...props} />,
+			a: ({ node, ...props }) => <Link className="hover:underline" {...props} />,
 			p: ({ node, ...props }) => <p className="text-base w-full" {...props} />,
 		}} >{props.content}</Markdown>
 	);

src/app/components/notification.tsx

@@ -13,7 +13,7 @@ export default function PageNotification(props: NotificationProps) {
 
 	return (
 		visible &&
-		<div className={"fixed bottom-4 right-2 left-2 sm:right-4 sm:left-auto bg-purple-900 border border-gray-300 rounded-lg shadow-2xl"}>
+		<div className={"fixed bottom-4 right-2 left-2 sm:right-4 sm:left-auto bg-purple-900 border border-gray-300 rounded-lg shadow-2xl z-50"}>
 			{props.content}
 
 			<button

src/app/components/projects.tsx

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import LinkButton from "./link-button";
 import { GITHUB_URL } from "../lib/constants";
+import Link from "next/link";
 
 
 
@@ -60,7 +61,7 @@ interface ProjectProps {
 export function Project(props: ProjectProps) {
 	return (
 
-		<a href={props.link} className="flex flex-row items-start justify-start gap-2 border-2 bg-gray-900 bg-opacity-10 hover:bg-opacity-20 border-white w-full h-fit rounded-lg hover:shadow-md p-4">
+		<Link href={props.link} className="flex flex-row items-start justify-start gap-2 border-2 bg-gray-900 bg-opacity-10 hover:bg-opacity-20 border-white w-full h-fit rounded-lg hover:shadow-md p-4">
 			{props.icon && <Image src={props.icon} alt={props.title} className="w-28 h-28 rounded-md" width={36} height={36} />}
 
 			<div className="flex flex-col items-start justify-between h-full">
@@ -73,6 +74,6 @@ export function Project(props: ProjectProps) {
 					))}
 				</div>
 			</div>
-		</a>
+		</Link>
 	);
 }

src/app/page.tsx

@@ -4,6 +4,7 @@ import Technologies from "./components/technologies";
 import Projects from "./components/projects";
 import { LINKEDIN_URL, GITHUB_URL } from "./lib/constants";
 import PageNotification from "./components/notification";
+import Link from "next/link";
 
 
 const notificationContent = <>
@@ -94,7 +95,7 @@ function Header() {
 
 function BusinessCards() {
 	return (
-		<a
+		<Link
 			href="https://www.instagram.com/p/C7HkuPnIMto/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=="
 			target="_blank"
 			className="group hidden xl:flex flex-col absolute -right-16 h-fit hover:-translate-x-2 transition-transform"
@@ -109,7 +110,7 @@ function BusinessCards() {
 			<span className="group-hover:opacity-100 absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white text-xs p-1 opacity-0 transition-opacity">
 				New business cards available!
 			</span>
-		</a>
+		</Link>
 	);
 }