refactor(footer, header, robots): enhance accessibility, improve formatting, and update sitemap directives

This commit is contained in:
2025-02-13 18:18:00 +01:00
parent 3cdd1c4bec
commit d517abab9f
8 changed files with 199 additions and 193 deletions

View File

@@ -1,6 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptLibraryMappings"> <component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{script}" />
<includedPredefinedLibrary name="Node.js Core" /> <includedPredefinedLibrary name="Node.js Core" />
</component> </component>
</project> </project>

View File

@@ -8,5 +8,6 @@
</content> </content>
<orderEntry type="inheritedJdk" /> <orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="script" level="application" />
</component> </component>
</module> </module>

View File

@@ -1,80 +1,82 @@
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import {useEffect, useState} from "react";
export default function Footer() { export default function Footer() {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setIsVisible(true); setIsVisible(true);
}, 450); // Delay to start the animation }, 450); // Delay to start the animation
}, []); }, []);
const scrollToSection = (id: string) => { const scrollToSection = (id: string) => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.scrollIntoView({ behavior: "smooth" }); element.scrollIntoView({behavior: "smooth"});
} }
}; };
return ( return (
<footer <footer
className={`sticky- bottom-0 p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`} className={`sticky- bottom-0 p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
> >
<div className={`flex flex-col md:flex-row items-center justify-between`}> <div className={`flex flex-col md:flex-row items-center justify-between`}>
<div className={`flex-col items-center`}> <div className={`flex-col items-center`}>
<h1 className="md:text-xl font-bold">Thank You for Visiting</h1> <h1 className="md:text-xl font-bold">Thank You for Visiting</h1>
<p className="md:mt-1 text-lg"> <p className="md:mt-1 text-lg">
Connect with me on social platforms: Connect with me on social platforms:
</p> </p>
<div className="flex justify-center items-center space-x-4 mt-4"> <div className="flex justify-center items-center space-x-4 mt-4">
<Link href="https://github.com/Denshooter" target="_blank"> <Link aria-label={"Dennis Github"} href="https://github.com/Denshooter" target="_blank">
<svg <svg
className="w-10 h-10" className="w-10 h-10"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" /> <path
</svg> d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
</Link> </svg>
<Link href="https://linkedin.com/in/dkonkol" target="_blank"> </Link>
<svg <Link aria-label={"Dennis Linked In"} href="https://linkedin.com/in/dkonkol" target="_blank">
className="w-10 h-10" <svg
fill="currentColor" className="w-10 h-10"
viewBox="0 0 24 24" fill="currentColor"
> viewBox="0 0 24 24"
<path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" /> >
</svg> <path
</Link> d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z"/>
</div> </svg>
</div> </Link>
<div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2"> </div>
<button </div>
onClick={() => scrollToSection("about")} <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition" <button
> onClick={() => scrollToSection("about")}
Back to Top className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
</button> >
</div> Back to Top
<div className="flex-col"> </button>
<div className="mt-4"> </div>
<Link <div className="flex-col">
href="/privacy-policy" <div className="mt-4">
className="text-blue-800 transition-underline" <Link
> href="/privacy-policy"
Privacy Policy className="text-blue-800 transition-underline"
</Link> >
<Link Privacy Policy
href="/legal-notice" </Link>
className="ml-4 text-blue-800 transition-underline" <Link
> href="/legal-notice"
Legal Notice className="ml-4 text-blue-800 transition-underline"
</Link> >
</div> Legal Notice
</Link>
</div>
<p className="md:mt-4">© Dennis Konkol 2025</p> <p className="md:mt-4">© Dennis Konkol 2025</p>
</div> </div>
</div> </div>
</footer> </footer>
); );
} }

View File

@@ -1,71 +1,73 @@
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import {useEffect, useState} from "react";
export default function Footer_Back() { export default function Footer_Back() {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
setIsVisible(true); setIsVisible(true);
}, 450); // Delay to start the animation }, 450); // Delay to start the animation
}, []); }, []);
return ( return (
<footer <footer
className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`} className={`p-3 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 ${isVisible ? "animate-fly-in" : "opacity-0"}`}
> >
<div className={`flex flex-col md:flex-row items-center justify-between`}> <div className={`flex flex-col md:flex-row items-center justify-between`}>
<div className={`flex-col items-center`}> <div className={`flex-col items-center`}>
<p className="md:mt-1 text-lg"> <p className="md:mt-1 text-lg">
Connect with me on social platforms: Connect with me on social platforms:
</p> </p>
<div className="flex justify-center items-center space-x-4 mt-4"> <div className="flex justify-center items-center space-x-4 mt-4">
<Link href="https://github.com/Denshooter" target="_blank"> <Link aria-label={"Dennis Github"} href="https://github.com/Denshooter" target="_blank">
<svg <svg
className="w-10 h-10" className="w-10 h-10"
fill="currentColor" fill="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z" /> <path
</svg> d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.387.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.746.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.997.108-.774.42-1.305.763-1.605-2.665-.305-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.527.117-3.18 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.4 3-.405 1.02.005 2.043.14 3 .405 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.877.118 3.18.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.62-5.475 5.92.43.37.823 1.1.823 2.22v3.293c0 .32.218.694.825.577C20.565 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/>
</Link> </svg>
<Link href="https://linkedin.com/in/dkonkol" target="_blank"> </Link>
<svg <Link aria-label={"Dennis Linked In"} href="https://linkedin.com/in/dkonkol" target="_blank">
className="w-10 h-10" <svg
fill="currentColor" className="w-10 h-10"
viewBox="0 0 24 24" fill="currentColor"
> viewBox="0 0 24 24"
<path d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z" /> >
</svg> <path
</Link> d="M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5 11.5h-3v-5.5c0-1.38-1.12-2.5-2.5-2.5s-2.5 1.12-2.5 2.5v5.5h-3v-10h3v1.5c.83-1.17 2.17-1.5 3.5-1.5 2.48 0 4.5 2.02 4.5 4.5v5.5z"/>
</div> </svg>
</div> </Link>
<div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2"> </div>
<Link </div>
href={"/"} <div className="mt-4 md:absolute md:left-1/2 md:transform md:-translate-x-1/2">
className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition" <Link
> href={"/"}
Back to main page className="p-4 mt-4 md:px-4 md:my-6 text-white bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl hover:from-blue-600 hover:to-purple-600 transition"
</Link> >
</div> Back to main page
<div className="flex-col"> </Link>
<div className="mt-4"> </div>
<Link <div className="flex-col">
href="/privacy-policy" <div className="mt-4">
className="text-blue-800 transition-underline" <Link
> href="/privacy-policy"
Privacy Policy className="text-blue-800 transition-underline"
</Link> >
<Link Privacy Policy
href="/legal-notice" </Link>
className="ml-4 text-blue-800 transition-underline" <Link
> href="/legal-notice"
Legal Notice className="ml-4 text-blue-800 transition-underline"
</Link> >
</div> Legal Notice
<p className="md:mt-4">© Dennis Konkol 2025</p> </Link>
</div> </div>
</div> <p className="md:mt-4">© Dennis Konkol 2025</p>
</footer> </div>
); </div>
</footer>
);
} }

View File

@@ -42,6 +42,7 @@ export default function Header() {
<button <button
className="text-gray-700 hover:text-gray-900 md:hidden" className="text-gray-700 hover:text-gray-900 md:hidden"
onClick={toggleSidebar} onClick={toggleSidebar}
aria-label={isSidebarOpen ? "Close menu" : "Open menu"}
> >
<svg <svg
className="w-6 h-6" className="w-6 h-6"
@@ -123,7 +124,7 @@ export default function Header() {
Contact Contact
</button> </button>
</div> </div>
<h6 className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</h6> <p className="text-center text-xs text-gray-500 p-4">© 2025 Dennis</p>
</div> </div>
</div> </div>
); );

View File

@@ -1,35 +1,64 @@
// app/layout.tsx // app/layout.tsx
"use client";
import "./globals.css"; import "./globals.css";
import { Roboto } from "next/font/google"; import {Metadata} from "next";
import {Roboto} from "next/font/google";
import React from "react"; import React from "react";
//import ClientCookieConsentBanner from "./components/ClientCookieConsentBanner"; //import ClientCookieConsentBanner from "./components/ClientCookieConsentBanner";
const roboto = Roboto({ const roboto = Roboto({
variable: "--font-roboto", variable: "--font-roboto",
weight: "400", weight: "400",
subsets: ["latin"], subsets: ["latin"],
}); });
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<script <script
defer defer
src="https://umami.denshooter.de/script.js" src="https://umami.denshooter.de/script.js"
data-website-id="1f213877-deef-4238-8df1-71a5a3bcd142" data-website-id="1f213877-deef-4238-8df1-71a5a3bcd142"
></script> ></script>
<meta charSet="utf-8" /> <meta charSet="utf-8"/>
</head> <title>Dennis Konkol&#39;s Portfolio</title>
<body className={roboto.variable}>{children}</body> </head>
</html> <body className={roboto.variable}>{children}</body>
); </html>
);
} }
export const metadata: Metadata = {
title: "Dennis Konkol | Portfolio",
description: "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
keywords: ["Dennis Konkol", "Software Engineer", "Portfolio", "Student"],
authors: [{name: "Dennis Konkol", url: "https://dki.one"}],
openGraph: {
title: "Dennis Konkol | Portfolio",
description: "Explore my projects and get in touch!",
url: "https://dki.one",
siteName: "Dennis Konkol Portfolio",
images: [
{
url: "https://dki.one/api/og",
width: 1200,
height: 630,
alt: "Dennis Konkol Portfolio",
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Dennis Konkol | Portfolio",
description: "Student & Software Engineer based in Osnabrück, Germany.",
images: ["https://dki.one/api/og"],
},
};

View File

@@ -1,31 +0,0 @@
// app/metadata.ts
import {Metadata} from "next";
export const metadata: Metadata = {
title: "Dennis Konkol | Portfolio",
description: "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
keywords: ["Dennis Konkol", "Software Engineer", "Portfolio", "Student"],
authors: [{name: "Dennis Konkol", url: "https://dki.one"}],
openGraph: {
title: "Dennis Konkol | Portfolio",
description: "Explore my projects and get in touch!",
url: "https://dki.one",
siteName: "Dennis Konkol Portfolio",
images: [
{
url: "https://dki.one/api/og",
width: 1200,
height: 630,
alt: "Dennis Konkol Portfolio",
},
],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Dennis Konkol | Portfolio",
description: "Student & Software Engineer based in Osnabrück, Germany.",
images: ["https://dki.one/api/og"],
},
};

View File

@@ -1,4 +1,5 @@
User-agent: * User-agent: *
Allow: / Allow: /
Disallow: ['/legal-notice', '/privacy-policy'] Disallow: /legal-notice
Page: https://dki.one/sitemap.xml Disallow: /privacy-policy
Sitemap: https://dki.one/sitemap.xml