Chneemann/portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: update privacy & imprint pages with analytics disclosure and new card design

Browse source
This commit is contained in:
Chneemann 2026-07-27 15:21:20 +02:00
parent e4dc11a16c
commit 82a8e6ec10
3 changed files with 130 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -39,3 +39,6 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
# Apache server configuration files
htaccess

69
src/app/imprint/page.tsx
View file

@ -2,59 +2,63 @@ import Link from "next/link";
export default function ImprintPage() { export default function ImprintPage() {
return ( return (
<section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto"> <section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight"> <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
Legal Notice<span className="text-blue-500">.</span> Legal Notice<span className="text-blue-500">.</span>
</h1> </h1>
<Link <Link
href="/" href="/"
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2" className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2 transition-colors"
> >
← Back to Homepage ← Back to Homepage
</Link> </Link>
<div className="space-y-8 text-slate-300 leading-relaxed text-sm"> <div className="space-y-8 text-slate-300 leading-relaxed text-sm">
{/* Angaben gemäß § 5 DDG & § 18 MStV */} {/* Information in accordance with § 5 DDG & § 18 MStV */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span>{" "} <span className="text-blue-500 font-mono text-sm">//</span>{" "}
Information pursuant to § 5 DDG Information Pursuant to § 5 DDG
</h2> </h2>
<p className="font-semibold text-slate-100">André Kempf</p> <div className=" font-mono text-xs space-y-1 bg-slate-950/60 p-4 rounded-xl border border-slate-800/80">
<p>Full-Stack Web Developer</p> <p className="font-semibold text-slate-100 text-sm">André Kempf</p>
<p className="text-blue-400">Full-Stack Web Developer</p>
<p>Großschneidersweg 2a</p> <p>Großschneidersweg 2a</p>
<p>76149 Karlsruhe</p> <p>76149 Karlsruhe, Germany</p>
<p>Germany</p> </div>
<p className="text-slate-400 text-xs pt-2 border-t border-slate-800/60 mt-3"> <p className="text-slate-300 text-xs pt-1">
Also responsible for content pursuant to § 18 Abs. 2 MStV. Also responsible for content pursuant to § 18 Abs. 2 MStV.
</p> </p>
</div> </div>
{/* Contact */} {/* Contact */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> Contact <span className="text-blue-500 font-mono text-sm">//</span> Contact
</h2> </h2>
<p> <div className="p-4 rounded-xl bg-slate-950/60 border border-slate-800/80 font-mono text-xs">
<strong className="text-slate-200">Email:</strong>{" "} <p className="text-slate-300">
<span className="text-blue-400 hover:underline"> <span className="text-slate-500">Email:</span>{" "}
<span className="text-blue-400 hover:underline cursor-pointer">
dev@andre-kempf.com dev@andre-kempf.com
</span> </span>
</p> </p>
</div> </div>
</div>
{/* Disclaimer */} {/* Disclaimer */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-4"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-5 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2"> <h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span>{" "} <span className="text-blue-500 font-mono text-sm">//</span>{" "}
Disclaimer & Legal Notes Disclaimer & Legal Notes
</h2> </h2>
<div> <div className="space-y-1">
<h3 className="font-semibold text-slate-200 mb-1"> <h3 className="font-semibold">Liability for Content</h3>
Liability for Content <p className="text-slate-300 text-xs leading-relaxed">
</h3>
<p className="text-slate-400 text-xs leading-relaxed">
As a service provider, I am responsible for my own content on As a service provider, I am responsible for my own content on
these pages according to general laws pursuant to § 7 Abs. 1 DDG. these pages according to general laws pursuant to § 7 Abs. 1 DDG.
However, according to §§ 8 to 10 DDG, I am not obligated to However, according to §§ 8 to 10 DDG, I am not obligated to
@ -63,11 +67,9 @@ export default function ImprintPage() {
</p> </p>
</div> </div>
<div> <div className="space-y-1 pt-2 border-t border-slate-800/60">
<h3 className="font-semibold text-slate-200 mb-1"> <h3 className="font-semibold">Liability for Links</h3>
Liability for Links <p className="text-slate-300 text-xs leading-relaxed">
</h3>
<p className="text-slate-400 text-xs leading-relaxed">
My website contains links to external third-party websites over My website contains links to external third-party websites over
whose content I have no control. Therefore, I cannot accept any whose content I have no control. Therefore, I cannot accept any
liability for these external contents. The respective provider or liability for these external contents. The respective provider or
@ -76,9 +78,9 @@ export default function ImprintPage() {
</p> </p>
</div> </div>
<div> <div className="space-y-1 pt-2 border-t border-slate-800/60">
<h3 className="font-semibold text-slate-200 mb-1">Copyright</h3> <h3 className="font-semibold text-slate-200">Copyright</h3>
<p className="text-slate-400 text-xs leading-relaxed"> <p className="text-slate-300 text-xs leading-relaxed">
The content and works created on these pages are subject to German The content and works created on these pages are subject to German
copyright law. Duplication, processing, distribution, or any form copyright law. Duplication, processing, distribution, or any form
of commercialization beyond the scope of copyright law require the of commercialization beyond the scope of copyright law require the
@ -88,8 +90,9 @@ export default function ImprintPage() {
</div> </div>
{/* Dispute Resolution */} {/* Dispute Resolution */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<h2 className="text-lg font-semibold text-white mb-4 flex items-center gap-2"> <div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> Dispute <span className="text-blue-500 font-mono text-sm">//</span> Dispute
Resolution Resolution
</h2> </h2>
@ -100,7 +103,7 @@ export default function ImprintPage() {
href="https://ec.europa.eu/consumers/odr/" href="https://ec.europa.eu/consumers/odr/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-blue-400 hover:underline" className="text-blue-400 hover:underline font-mono"
> >
https://ec.europa.eu/consumers/odr/ https://ec.europa.eu/consumers/odr/
</a> </a>

110
src/app/privacy/page.tsx
View file

@ -2,84 +2,132 @@ import Link from "next/link";
export default function PrivacyPage() { export default function PrivacyPage() {
return ( return (
<section className="min-h-screen py-24 px-6 md:px-12 max-w-4xl mx-auto"> <section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight"> <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
Privacy Policy<span className="text-blue-500">.</span> Privacy Policy<span className="text-blue-500">.</span>
</h1> </h1>
<Link <Link
href="/" href="/"
className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2" className="text-sm font-mono text-blue-400 hover:underline mb-8 inline-flex items-center gap-2 transition-colors"
> >
← Back to Homepage ← Back to Homepage
</Link> </Link>
<div className="space-y-8 text-slate-300 leading-relaxed text-sm"> <div className="space-y-8 text-slate-300 leading-relaxed text-sm">
{/* 1. Overview */} {/* Overview */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2"> <h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> 1. Data <span className="text-blue-500 font-mono text-sm">//</span> Data
Protection at a Glance Protection at a Glance
</h2> </h2>
<h3 className="font-semibold text-slate-200">General Information</h3>
<p> <div className="space-y-1">
<h3 className="font-semibold ">General Information</h3>
<p className="text-slate-300 text-xs leading-relaxed">
The following notes provide a simple overview of what happens to The following notes provide a simple overview of what happens to
your personal data when you visit this website. Personal data is any your personal data when you visit this website. Personal data is
data that can be used to personally identify you. any data that can be used to personally identify you.
</p> </p>
<h3 className="font-semibold text-slate-200 pt-2"> </div>
<div className="space-y-1">
<h3 className="font-semibold pt-2">
Data Collection on This Website Data Collection on This Website
</h3> </h3>
<p> <p className="text-slate-300 text-xs leading-relaxed">
Data processing on this website is carried out by the website Data processing on this website is carried out by the website
operator. Your data is collected when you provide it to us, or operator. Your data is collected when you provide it to us, or
automatically by our IT systems when you visit the site. automatically by our IT systems when you visit the site.
</p> </p>
</div> </div>
</div>
{/* 2. Responsible Party */} {/* Responsible Party */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-2"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-2 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2"> <h2 className="text-lg font-semibold text-white mb-2 flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> 2. <span className="text-blue-500 font-mono text-sm">//</span>
Responsible Party (Controller) Responsible Party (Controller)
</h2> </h2>
<p> <p>
The controller responsible for data processing on this website is: The controller responsible for data processing on this website is:
</p> </p>
<div className="pt-2 text-slate-200"> <div className="pt-2 font-mono text-xs space-y-1 bg-slate-950/60 p-4 rounded-xl border border-slate-800/80">
<p className="font-semibold">André Kempf</p> <p className="font-semibold text-slate-100 text-sm">André Kempf</p>
<p>Großschneidersweg 2a</p> <p>Großschneidersweg 2a</p>
<p>76149 Karlsruhe, Germany</p> <p>76149 Karlsruhe, Germany</p>
<p className="mt-2"> <p className="pt-2">
Email:{" "} Email:{" "}
<span className="text-blue-400 hover:underline"> <span className="text-blue-400 hover:underline cursor-pointer">
dev@andre-kempf.com dev@andre-kempf.com
</span> </span>
</p> </p>
</div> </div>
</div> </div>
{/* 3. Hosting & Log Files */} {/* Hosting & Server Log Files */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2"> <h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> 3. <span className="text-blue-500 font-mono text-sm">//</span>
Hosting & Server Log Files Hosting & Server Infrastructure
</h2> </h2>
<p> <p>
This website is hosted externally. The personal data collected on This website is hosted externally on web servers operated by Netcup
this website is stored on the host&apos;s servers. GmbH. Personal data processed on this website is stored on the
host&apos;s secure servers.
</p> </p>
<p> <p>
The provider automatically collects and stores information in The hosting provider automatically processes technical access data
so-called server log files, which your browser automatically in server environment variables necessary to establish a stable
transmits to us (e.g., browser type, operating system, IP address, connection and deliver page assets securely.
time of request).
</p> </p>
</div> </div>
{/* 4. Your Rights */} {/* Server Analytics */}
<div className="p-6 rounded-2xl border border-slate-800/80 bg-slate-900/40 space-y-3"> <div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2"> <h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> 4. Your <span className="text-blue-500 font-mono text-sm">//</span>
Server Analytics & Privacy-First Tracking
</h2>
<p>
To evaluate website reach and optimize user experience, this website
processes minimal access metrics (e.g., total daily views, coarse
device category, and daily visitor counts).
</p>
<div className="p-4 rounded-xl bg-slate-950/60 border border-slate-800/80 space-y-2 text-xs font-mono">
<p className="text-emerald-400 font-semibold">
// Key privacy guarantees:
</p>
<ul className="list-disc list-inside space-y-1 text-slate-400">
<li>
<strong>No Cookies:</strong> We do not store cookies or local
storage identifiers on your device.
</li>
<li>
<strong>Anonymized IPs:</strong> IP addresses are instantly
hashed with a daily salt and never stored in plain text.
</li>
<li>
<strong>Zero Third Parties:</strong> Analytics data is processed
locally on our own server and never shared with external
tracking services.
</li>
</ul>
</div>
<p className="text-xs text-slate-400 pt-1">
The legal basis for this processing is our legitimate interest in
maintaining and optimizing our online portfolio (Art. 6(1)(f) GDPR).
</p>
</div>
{/* Your Rights */}
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/95 p-6 shadow-2xl shadow-black/60 border-t-slate-600/50 space-y-3 overflow-hidden">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
<h2 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span> Your
Rights Rights
</h2> </h2>
<p> <p>