denshooter/portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: enhance layout and styling of components with improved animations and responsiveness

Browse Source
This commit is contained in:
Denshooter
2025-02-04 00:38:40 +01:00
parent b1e8775346
commit e7735e8521
10 changed files with 366 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/Projects/[slug]/Footer.tsx Normal file
View File

@@ -0,0 +1,32 @@
import Link from "next/link";
export default function Footer() {
return (
<footer
className="p-10 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl text-center text-gray-800 dark:text-white">
<div className="flex justify-center space-x-4 mt-4">
<Link href="https://github.com/Denshooter" target="_blank">
<svg
className="w-6 h-6 text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 transition"
fill="currentColor"
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"/>
</svg>
</Link>
<Link href="https://linkedin.com/in/dkonkol" target="_blank">
<svg
className="w-6 h-6 text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-300 transition"
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>
</Link>
</div>
<p className="mt-6">© Dennis Konkol 2025</p>
</footer>
);
}

137
app/Projects/[slug]/page.tsx
View File

@@ -1,76 +1,87 @@
"use client";
import { useParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import {useParams, useRouter} from "next/navigation";
import {useEffect, useState} from "react";
import Link from "next/link";
import Image from "next/image";
import Header from "../../components/Header";
import Footer from "./Footer";
interface Project {
id: string;
title: string;
slug: string;
description: string;
link: string;
image: string;
id: string;
title: string;
slug: string;
description: string;
link: string;
image: string;
}
export default function ProjectDetail() {
const params = useParams();
const router = useRouter();
const { slug } = params as { slug: string };
const [project, setProject] = useState<Project | null>(null);
const params = useParams();
const router = useRouter();
const {slug} = params as { slug: string };
const [project, setProject] = useState<Project | null>(null);
useEffect(() => {
if (slug) {
fetch("/data/projects.json")
.then((res) => res.json())
.then((data: Project[]) => {
const found = data.find((proj) => proj.slug === slug);
if (found) {
setProject(found);
useEffect(() => {
if (slug) {
fetch("/data/projects.json")
.then((res) => res.json())
.then((data: Project[]) => {
const found = data.find((proj) => proj.slug === slug);
if (found) {
setProject(found);
// Log the project view
fetch("/api/stats", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "project_view",
projectId: found.id,
}),
}).catch((err) => console.error("Failed to log project view", err));
} else {
// Redirect to 404 if project not found
router.replace("/not-found");
}
});
// Log the project view
fetch("/api/stats", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
type: "project_view",
projectId: found.id,
}),
}).catch((err) => console.error("Failed to log project view", err));
} else {
// Redirect to 404 if project not found
router.replace("/not-found");
}
});
}
}, [slug, router]);
if (!project) {
return <div className="p-10 text-center">Loading...</div>;
}
}, [slug, router]);
if (!project) {
return <div className="p-10 text-center">Loading...</div>;
}
return (
<div className="p-10 bg-gray-100 dark:bg-gray-800 min-h-screen">
<h1 className="text-4xl font-bold text-gray-800 dark:text-white">
{project.title}
</h1>
<Image
src={project.image}
alt={project.title}
className="mt-4 w-full max-w-md rounded shadow"
/>
<p className="mt-4 text-gray-600 dark:text-gray-300">
{project.description}
</p>
<Link
href={`/`}
className="mt-4 inline-block text-blue-500 hover:underline"
>
Go back Home
</Link>
</div>
);
}
return (
<div className="min-h-screen flex flex-col bg-radiant">
<Header/>
<div className="flex-grow p-10 pt-24">
<div
className="flex flex-col items-center p-8 bg-gradient-to-br from-white/60 to-white/30 backdrop-blur-lg rounded-2xl shadow-xl max-w-lg mx-auto">
<h1 className="text-4xl font-bold text-gray-800 dark:text-white">
{project.title}
</h1>
<Image
src={project.image}
alt={project.title}
width={400}
height={400}
className="mt-4 w-full max-w-md rounded shadow-lg"
/>
<p className="mt-4 text-gray-600 dark:text-gray-300">
{project.description}
</p>
<Link
href={`/`}
className="mt-4 inline-block text-blue-500 hover:underline"
>
Go back Home
</Link>
</div>
</div>
<Footer/>
</div>
);
}