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

docs & refactor: add JSDoc/PHPDoc comments and polish component structure

Browse source
This commit is contained in:
Chneemann 2026-07-29 08:21:50 +02:00
parent b1ddacc51f
commit e547986940
17 changed files with 207 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
backend/analytics.php
View file

@ -1,11 +1,17 @@
<?php
/**
* Privacy-friendly, self-hosted web analytics tracking endpoint.
* Provides basic view counts, anonymized daily unique visitors, device categories, and server execution metrics.
*/
$startTime = microtime(true);
// CORS Config
// 1. CORS Headers & Preflight Handling
$allowedOrigins = ['https://andre-kempf.com', 'https://www.andre-kempf.com', 'http://localhost:3000'];
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (in_array($origin, $allowedOrigins)) {
if (in_array($origin, $allowedOrigins, true)) {
header("Access-Control-Allow-Origin: " . $origin);
} else {
header("Access-Control-Allow-Origin: https://andre-kempf.com");
@ -15,11 +21,13 @@ header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
header("Content-Type: application/json; charset=UTF-8");
// Handle HTTP OPTIONS preflight request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
http_response_code(200);
exit;
}
// 2. Error Reporting & Session Initialization
ini_set('display_errors', 0);
error_reporting(E_ALL);
@ -27,9 +35,9 @@ if (session_status() === PHP_SESSION_NONE) {
session_start();
}
// 3. Storage & Default Data Structure
$dataFile = __DIR__ . '/analytics.json';
// Essential data structure + lastPing
$data = [
'totalViews' => 0,
'todayViews' => 0,
@ -39,7 +47,7 @@ $data = [
'devices' => ['Desktop' => 0, 'Mobile' => 0]
];
// Load existing data
// Load existing analytics JSON data
if (file_exists($dataFile)) {
$content = @file_get_contents($dataFile);
if ($content) {
@ -50,7 +58,7 @@ if (file_exists($dataFile)) {
}
}
// Reset daily stats if day changed
// 4. Daily Reset Logic
$today = date('Y-m-d');
if ($data['lastDate'] !== $today) {
$data['todayViews'] = 0;
@ -58,7 +66,7 @@ if ($data['lastDate'] !== $today) {
$data['visitors'] = [];
}
// Localhost / Development check
// 5. Environment & Rate-Limiting Checks
$referer = $_SERVER['HTTP_REFERER'] ?? '';
$ip = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
@ -71,9 +79,9 @@ $isLocalhost = (
$lastTrackTime = $_SESSION['last_track_time'] ?? 0;
$currentTime = time();
$isSpam = ($currentTime - $lastTrackTime) < 30;
$isSpam = ($currentTime - $lastTrackTime) < 30; // 30-second cooldown per session
// Track view
// 6. Analytics Tracking Execution
if (isset($_GET['track']) && $_GET['track'] === 'true' && !$isLocalhost && !$isSpam) {
$_SESSION['last_track_time'] = $currentTime;
@ -81,22 +89,26 @@ if (isset($_GET['track']) && $_GET['track'] === 'true' && !$isLocalhost && !$isS
$data['todayViews']++;
$data['lastPing'] = $currentTime;
// Detect coarse device category
$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isMobile = preg_match('/mobile|android|iphone|ipad|tablet/i', $ua);
$deviceType = $isMobile ? 'Mobile' : 'Desktop';
$data['devices'][$deviceType] = ($data['devices'][$deviceType] ?? 0) + 1;
// Hash IP address with daily salt for anonymized unique visitor tracking
$visitorHash = md5($ip . $today);
if (!in_array($visitorHash, $data['visitors'])) {
if (!in_array($visitorHash, $data['visitors'], true)) {
$data['visitors'][] = $visitorHash;
}
// Atomic file save to prevent race condition corruption
@file_put_contents($dataFile, json_encode($data), LOCK_EX);
}
// Calculate server execution time (ms)
// 7. Calculate Server Execution Latency
$responseTime = round((microtime(true) - $startTime) * 1000, 2);
// 8. Output Metrics Payload
echo json_encode([
'totalViews' => $data['totalViews'],
'todayViews' => $data['todayViews'],

3
backend/config.php
View file

@ -1,5 +1,8 @@
<?php
/**
* Global mail configuration options for portfolio contact processing
*/
return [
'recipient_email' => 'dev@andre-kempf.com',
'from_email' => 'noreply@andre-kempf.com',

56
backend/sendMail.php
View file

@ -1,67 +1,79 @@
<?php
/**
* Endpoint for processing contact form submissions and sending notification emails via PHP mail().
*/
$config = require_once __DIR__ . '/config.php';
require_once __DIR__ . '/templates/emailTemplate.php';
switch ($_SERVER['REQUEST_METHOD']) {
case ("OPTIONS"): // Allow preflight requests
// 1. Handle CORS Preflight Requests
case "OPTIONS":
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
http_response_code(200);
exit;
case ("POST"): // Handle and send the email
// 2. Process Contact Form Submission
case "POST":
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// Read raw JSON payload
// Read raw JSON payload from frontend
$json = file_get_contents('php://input');
$params = json_decode($json);
// 1. Honeypot check for spam protection
if (!empty($params->website)) {
// Honeypot check: Catch bot submissions (matches frontend 'honeypot' or 'website_hp')
$honeypot = $params->honeypot ?? $params->website_hp ?? $params->website ?? '';
if (!empty($honeypot)) {
// Silently discard bot submission with 200 OK
http_response_code(200);
echo json_encode(["status" => "success"]);
exit;
}
// 2. Sanitize inputs & set fallbacks
$email = filter_var($params->email ?? '', FILTER_VALIDATE_EMAIL);
$name = htmlspecialchars(trim($params->name ?? 'Anonymous'), ENT_QUOTES, 'UTF-8');
$text = htmlspecialchars(trim($params->message ?? ''), ENT_QUOTES, 'UTF-8');
// Sanitize & validate incoming fields
$email = filter_var($params->email ?? '', FILTER_VALIDATE_EMAIL);
$name = htmlspecialchars(trim($params->name ?? 'Anonymous'), ENT_QUOTES, 'UTF-8');
$text = htmlspecialchars(trim($params->message ?? ''), ENT_QUOTES, 'UTF-8');
// Validate required fields
if (!$email || empty($text)) {
http_response_code(400);
echo json_encode(["status" => "error", "message" => "Invalid input"]);
echo json_encode(["status" => "error", "message" => "Invalid input data"]);
exit;
}
// 3. Render template
$emailBody = renderEmailTemplate($name, $email, $text, $params->message ?? '');
$subject = "{$config['app_name']}: $name";
// Render HTML email template
$rawMessage = $params->message ?? '';
$emailBody = renderEmailTemplate($name, $email, $text, $rawMessage);
$subject = "{$config['app_name']}: $name";
// 4. Set headers
$headers = [
// Construct standard MIME headers
$headers = [
'MIME-Version: 1.0',
'Content-type: text/html; charset=utf-8',
"From: {$config['from_email']}",
"Reply-To: $email"
];
// Send email
$success = mail($config['recipient_email'], $subject, $emailBody, implode("\n", $headers));
// Send email via PHP native mailer
$success = mail($config['recipient_email'], $subject, $emailBody, implode("\r\n", $headers));
if ($success) {
http_response_code(200);
echo json_encode(["status" => "success"]);
} else {
http_response_code(500);
echo json_encode(["status" => "error"]);
echo json_encode(["status" => "error", "message" => "Failed to send email"]);
}
break;
default: // Reject any other HTTP method
header("Allow: POST", true, 405);
// 3. Reject Unsupported HTTP Methods
default:
header("Allow: POST, OPTIONS", true, 405);
http_response_code(405);
echo json_encode(["status" => "error", "message" => "Method Not Allowed"]);
exit;
}

30
backend/templates/emailTemplate.php
View file

@ -1,34 +1,52 @@
<?php
/**
* Renders an HTML email template for portfolio contact submissions with dark theme styling.
*
* @param string $name Name of the sender
* @param string $email Email address of the sender
* @param string $text Message content from the contact form
* @param string $paramsMessage Plain text copy for mailto pre-filled body
* @return string HTML email content
*/
function renderEmailTemplate(string $name, string $email, string $text, string $paramsMessage): string {
// Sanitize input values for HTML output safety
$safeName = htmlspecialchars($name, ENT_QUOTES, 'UTF-8');
$safeEmail = htmlspecialchars($email, ENT_QUOTES, 'UTF-8');
// Pre-fill reply parameters using rawurlencode (%20 for spaces)
$replySubject = rawurlencode("Re: Portfolio Contact from $name");
$replyBody = rawurlencode("\n\n---\nOriginal message from $name ($email):\n" . $paramsMessage);
$mailtoLink = "mailto:$email?subject=$replySubject&body=$replyBody";
$mailtoLink = "mailto:" . rawurlencode($email) . "?subject=$replySubject&body=$replyBody";
// Cleaned message body to avoid double breaks
$formattedText = nl2br(trim($text));
// Clean message body and format line breaks for HTML rendering
$formattedText = nl2br(htmlspecialchars(trim($text), ENT_QUOTES, 'UTF-8'));
return "
<div style='width: 100%; height: 100%; background-color: #fff; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;'>
<div style='background-color: #020617; color: #f8fafc; padding: 28px; max-width: 800px; margin: 0 auto; border: 1px solid #1e293b; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);'>
<!-- Email Header -->
<div style='margin-bottom: 20px;'>
<span style='font-family: monospace; color: #3b82f6; font-size: 12px;'>// Portfolio Contact Message</span>
<h2 style='margin: 6px 0 0 0; color: #ffffff; font-size: 20px;'>New message from $name</h2>
<h2 style='margin: 6px 0 0 0; color: #ffffff; font-size: 20px;'>New message from {$safeName}</h2>
</div>
<!-- Message Card -->
<div style='background-color: #0f172a; border: 1px solid #1e293b; padding: 18px; border-radius: 8px; margin-bottom: 24px;'>
<div style='font-family: monospace; font-size: 12px; color: #64748b; margin-bottom: 12px;'>
<span style='color: #3b82f6;'>From:</span> $name ($email)
<span style='color: #3b82f6;'>From:</span> {$safeName} ({$safeEmail})
</div>
<div style='font-size: 14px; line-height: 1.6; color: #cbd5e1;'>{$formattedText}</div>
</div>
<!-- Quick Reply CTA -->
<div style='border-top: 1px solid #1e293b; padding-top: 20px; text-align: center;'>
<a href='$mailtoLink' style='display: inline-block; padding: 12px 24px; background-color: #2563eb; color: #ffffff; font-weight: 500; text-decoration: none; border-radius: 8px; font-size: 13px; font-family: monospace;'>
<a href='{$mailtoLink}' style='display: inline-block; padding: 12px 24px; background-color: #2563eb; color: #ffffff; font-weight: 500; text-decoration: none; border-radius: 8px; font-size: 13px; font-family: monospace;'>
➜ Quick Reply
</a>
</div>
</div>
</div>
";

6
src/app/globals.css
View file

@ -1,10 +1,12 @@
@import "tailwindcss";
/* Theme variable bindings linking Next.js Google fonts to Tailwind utility classes */
@theme {
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
}
/* Global base styles, scrollbar styling, and focus states */
@layer base {
html {
color-scheme: dark;
@ -19,14 +21,17 @@
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* Global text selection highlight */
::selection {
@apply bg-blue-500/30 text-blue-200;
}
/* Accessible keyboard navigation focus indicator */
:focus-visible {
@apply outline-2 outline-offset-2 outline-blue-500 rounded-sm;
}
/* Custom Webkit scrollbar styling (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 8px;
}
@ -42,6 +47,7 @@
}
}
/* Override default browser autofill background styles in form fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,

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

@ -1,8 +1,12 @@
import Link from "next/link";
/**
* Legal notice page pursuant to German telemedia law (§ 5 DDG & § 18 MStV)
*/
export default function ImprintPage() {
return (
<section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
{/* Page Heading & Back Navigation */}
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
Legal Notice<span className="text-blue-500">.</span>
</h1>
@ -14,7 +18,7 @@ export default function ImprintPage() {
</Link>
<div className="space-y-8 text-slate-300 leading-relaxed text-sm">
{/* Information in accordance with § 5 DDG & § 18 MStV */}
{/* Publisher Identification (§ 5 DDG & § 18 MStV) */}
<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 mb-2 flex items-center gap-2">
@ -32,7 +36,7 @@ export default function ImprintPage() {
</p>
</div>
{/* Contact */}
{/* Direct Contact Info */}
<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">
@ -48,7 +52,7 @@ export default function ImprintPage() {
</div>
</div>
{/* Disclaimer */}
{/* Legal Disclaimer (Content, Links, Copyright) */}
<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">
@ -89,7 +93,7 @@ export default function ImprintPage() {
</div>
</div>
{/* Dispute Resolution */}
{/* Consumer Dispute Resolution Disclaimer */}
<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">

3
src/app/page.tsx
View file

@ -4,6 +4,9 @@ import Skills from "../components/Skills";
import Contact from "../components/Contact";
import Portfolio from "../components/Portfolio";
/**
* Main portfolio landing page assembling all key sections in sequence
*/
export default function Home() {
return (
<section>

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

@ -1,8 +1,12 @@
import Link from "next/link";
/**
* GDPR privacy policy page outlining data collection, self-hosted analytics, and user rights
*/
export default function PrivacyPage() {
return (
<section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
{/* Page Heading & Navigation */}
<h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
Privacy Policy<span className="text-blue-500">.</span>
</h1>
@ -14,7 +18,7 @@ export default function PrivacyPage() {
</Link>
<div className="space-y-8 text-slate-300 leading-relaxed text-sm">
{/* Overview */}
{/* Executive Summary */}
<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">
@ -43,7 +47,7 @@ export default function PrivacyPage() {
</div>
</div>
{/* Responsible Party */}
{/* Data Controller Information */}
<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">
@ -66,7 +70,7 @@ export default function PrivacyPage() {
</div>
</div>
{/* Hosting & Server Log Files */}
{/* External Web Hosting Details */}
<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">
@ -85,7 +89,7 @@ export default function PrivacyPage() {
</p>
</div>
{/* Server Analytics */}
{/* Privacy-Preserving Analytics Principles */}
<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">
@ -123,7 +127,7 @@ export default function PrivacyPage() {
</p>
</div>
{/* Your Rights */}
{/* Statutory Data Subject 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">

15
src/components/About.tsx
View file

@ -1,10 +1,13 @@
/**
* Section presenting personal background information, education, and key overview facts
*/
export default function About() {
return (
<section
id="aboutme"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
>
{/* Titel */}
{/* Section Header */}
<div className="mb-4 space-y-1">
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
// 01. Introduction
@ -15,7 +18,7 @@ export default function About() {
</div>
<div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
{/* Left column */}
{/* Personal Bio Paragraphs */}
<div className="md:col-span-7 space-y-6 leading-relaxed">
<p>
Hey there! André here—a full-stack developer based in Karlsruhe. A
@ -52,7 +55,7 @@ export default function About() {
</p>
</div>
{/* Right column */}
{/* Quick Facts Card */}
<div className="md:col-span-5">
<div
className="group relative p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
@ -64,7 +67,7 @@ export default function About() {
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none" />
<div>
{/* Header Titel */}
{/* Card Header */}
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span>{" "}
@ -72,7 +75,7 @@ export default function About() {
</h3>
</div>
{/* List Container */}
{/* Key Highlights List */}
<ul className="space-y-4 text-sm">
<li className="flex items-center gap-3">
<span className="text-blue-500 font-mono">▸</span>
@ -110,7 +113,7 @@ export default function About() {
</ul>
</div>
{/* Footer Quote */}
{/* Footer Tagline */}
<div className="pt-4 border-t border-slate-800/80 text-xs text-slate-500 font-mono text-center">
`Keep it simple, keep it clean.`
</div>

12
src/components/AnalyticsModal.tsx
View file

@ -3,7 +3,9 @@
import { useEffect } from "react";
import { createPortal } from "react-dom";
/** Analytics metrics payload returned by the custom backend API */
/**
* Analytics metrics payload returned by the custom backend API
*/
export interface AnalyticsData {
totalViews: number;
todayViews: number;
@ -22,7 +24,9 @@ interface AnalyticsModalProps {
stats: AnalyticsData;
}
/** Formats unix timestamps into relative time strings (e.g., "5s ago", "2m ago") */
/**
* Formats unix timestamps into relative time strings (e.g., "5s ago", "2m ago")
*/
function getTimeAgo(timestamp?: number): string {
if (!timestamp) return "just now";
const seconds = Math.floor((Date.now() - timestamp * 1000) / 1000);
@ -34,7 +38,9 @@ function getTimeAgo(timestamp?: number): string {
return `${hours}h ago`;
}
/** Terminal-style modal inspector for viewing live traffic and system health metrics */
/**
* Terminal-style modal inspector for viewing live traffic and system health metric
*/
export default function AnalyticsModal({
isOpen,
onClose,

4
src/components/AnalyticsWidget.tsx
View file

@ -3,7 +3,9 @@
import { useEffect, useState } from "react";
import AnalyticsModal, { AnalyticsData } from "./AnalyticsModal";
/** Footer badge widget that fetches live metrics and triggers the analytics modal */
/**
* Footer badge widget that fetches live metrics and triggers the analytics modal
*/
export default function AnalyticsWidget() {
const [stats, setStats] = useState<AnalyticsData | null>(null);
const [isOpen, setIsOpen] = useState(false);

5
src/components/Background.tsx
View file

@ -1,6 +1,10 @@
/**
* Global ambient background featuring a masked SVG-style grid overlay and subtle glow effect
*/
export default function Background() {
return (
<>
{/* Radial-masked blue grid overlay */}
<div
className="fixed inset-0 pointer-events-none z-0 opacity-[0.25]"
style={{
@ -13,6 +17,7 @@ export default function Background() {
}}
/>
{/* Top ambient glow light */}
<div className="fixed top-0 left-1/2 -translate-x-1/2 w-1000px h-400px bg-linear-to-tr from-blue-600/10 to-cyan-400/10 blur-[120px] pointer-events-none z-0" />
</>
);

38
src/components/Contact.tsx
View file

@ -2,29 +2,36 @@
import { useState } from "react";
/**
* Contact section with interactive form, bot anti-spam protection, and direct email info
*/
export default function Contact() {
// Form input states
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [honeypot, setHoneypot] = useState("");
// Submission UI states
const [submitted, setSubmitted] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
// Bot detection timestamp (form interaction speed check)
const [formLoadTime] = useState(Date.now());
const handleSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => {
// Handles contact form submission with bot verification & PHP backend dispatch
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Bot check
// Anti-spam check 1: Submissions faster than 3 seconds are treated as automated bots
const timeTaken = (Date.now() - formLoadTime) / 1000;
if (timeTaken < 3) {
setSubmitted(true);
return;
}
// Anti-spam check 2: Honeypot field filled out by bots
if (honeypot !== "") {
setSubmitted(true);
return;
@ -67,7 +74,7 @@ export default function Contact() {
id="contactme"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
>
{/* Title */}
{/* Section Header */}
<div className="mb-6 space-y-1 text-right flex flex-col items-end">
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
// 04. Get in Touch
@ -78,7 +85,7 @@ export default function Contact() {
</div>
<div className="grid md:grid-cols-12 gap-8 items-start">
{/* Left column */}
{/* Left Column: Direct Info & Terminal Card */}
<div className="md:col-span-5 flex flex-col justify-between p-5 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md shadow-lg shadow-black/40 border-t-slate-600/50 relative overflow-hidden space-y-6">
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl pointer-events-none" />
@ -96,6 +103,7 @@ export default function Contact() {
contribute to your team.
</p>
{/* Terminal Status Display */}
<div className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 font-mono text-[11px] space-y-1.5 shadow-inner">
<div className="text-slate-500">// Terminal Direct Contact</div>
<div className="text-slate-300 flex items-center gap-1">
@ -111,6 +119,7 @@ export default function Contact() {
</div>
</div>
{/* Email Shortcut */}
<div className="pt-3 border-t border-slate-800/80 font-mono text-xs">
<span className="text-slate-500 block text-[10px] mb-1">
// Prefer email?
@ -121,7 +130,7 @@ export default function Contact() {
</div>
</div>
{/* Right column */}
{/* Right Column: Contact Form / Success Message */}
<div className="md:col-span-7">
<div
className="relative p-4 md:p-6 rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md
@ -130,20 +139,23 @@ export default function Contact() {
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/10 rounded-full blur-xl pointer-events-none" />
{submitted ? (
/* Success Message */
<div className="py-12 text-center space-y-3">
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-blue-500/10 text-blue-400 font-mono text-4xl mb-2 border border-blue-500/20">
✓
</div>
<h3 className="text-xl font-bold text-white">Thank you!</h3>
<p className="text-sm max-w-sm mx-auto">
Your message has been sent successfully. I'll get back to you
as soon as possible!
Your message has been sent successfully. I&apos;ll get back to
you as soon as possible!
</p>
</div>
) : (
/* Form Container */
<form onSubmit={handleSubmit} className="space-y-4">
{/* Hidden Honeypot Field for Bot Catching */}
<div className="hidden" aria-hidden="true">
<label className="block text-xs mb-1.5" htmlFor="website">
<label className="block text-xs mb-1.5" htmlFor="website_hp">
Website
</label>
<input
@ -157,12 +169,14 @@ export default function Contact() {
/>
</div>
{/* Name Input */}
<div>
<label className="block text-xs mb-1.5" htmlFor="name">
Name
</label>
<input
type="text"
id="name"
required
value={name}
onChange={(e) => setName(e.target.value)}
@ -171,12 +185,14 @@ export default function Contact() {
/>
</div>
{/* Email Input */}
<div>
<label className="block text-xs mb-1.5" htmlFor="email">
Email
</label>
<input
type="email"
id="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
@ -185,11 +201,13 @@ export default function Contact() {
/>
</div>
{/* Message Input */}
<div>
<label className="block text-xs mb-1.5" htmlFor="message">
Message
</label>
<textarea
id="message"
rows={4}
required
value={message}
@ -199,12 +217,14 @@ export default function Contact() {
/>
</div>
{/* Submission Error Banner */}
{error && (
<p className="text-red-400 text-xs font-mono">
An error occurred. Please try again later.
</p>
)}
{/* Submit Button */}
<button
type="submit"
disabled={loading}

9
src/components/Footer.tsx
View file

@ -3,21 +3,24 @@
import Link from "next/link";
import AnalyticsWidget from "./AnalyticsWidget";
/**
* Page footer with copyright notice, live analytics widget, and legal links
*/
export default function Footer() {
return (
<footer className="w-full bg-slate-950/50 text-xs text-slate-500 px-4 py-4 border-t border-slate-900/40">
<div className="max-w-5xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
{/* Left: Copyright */}
{/* Left: Copyright Notice */}
<p className="order-1 md:order-1">
© {new Date().getFullYear()} André Kempf. All rights reserved.
</p>
{/* Center: Analytics */}
{/* Center: Live System Metrics Badge */}
<div className="order-3 md:order-2 opacity-70 hover:opacity-100 transition-opacity">
<AnalyticsWidget />
</div>
{/* Right: Links */}
{/* Right: Legal & Compliance Links */}
<div className="flex gap-4 order-2 md:order-3">
<Link
href="/imprint"

29
src/components/Portfolio.tsx
View file

@ -1,6 +1,9 @@
import Link from "next/link";
import Image from "next/image";
/**
* Static list of featured and secondary portfolio project items
*/
const PROJECTS = [
{
title: "DABubble",
@ -51,7 +54,11 @@ const PROJECTS = [
},
];
/**
* Portfolio showcase section highlighting primary and secondary projects
*/
export default function Portfolio() {
// Separate featured highlight from remaining secondary project cards
const featuredProject = PROJECTS.find((p) => p.isFeatured);
const secondaryProjects = PROJECTS.filter((p) => !p.isFeatured);
@ -60,7 +67,7 @@ export default function Portfolio() {
id="portfolio"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
>
{/* Title */}
{/* Section Header */}
<div className="mb-4 space-y-1">
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
// 03. Projects
@ -71,7 +78,7 @@ export default function Portfolio() {
</div>
<div className="space-y-6">
{/* Featured Project Card */}
{/* Featured Main Project Card */}
{featuredProject && (
<div className="group relative rounded-2xl border border-slate-700/60 bg-slate-900/90 backdrop-blur-md shadow-lg shadow-black/40 border-t-slate-600/50 hover:border-blue-500/50 hover:bg-slate-800/90 hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-0.5 transition-all duration-300 ease-out overflow-hidden grid md:grid-cols-12 items-center">
<div className="absolute -top-12 -right-12 w-32 h-32 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none z-20" />
@ -79,7 +86,7 @@ export default function Portfolio() {
Featured Project
</div>
{/* Description */}
{/* Description & Metadata */}
<div className="p-5 md:col-span-7 z-10 flex flex-col justify-between h-full">
<div>
<div className="flex items-center justify-between mb-2 pr-28">
@ -97,7 +104,7 @@ export default function Portfolio() {
</div>
<div>
{/* Badges */}
{/* Tech Stack Badges */}
<div className="flex flex-wrap gap-2 mb-6">
{featuredProject.tags.map((tag) => (
<span
@ -113,7 +120,7 @@ export default function Portfolio() {
))}
</div>
{/* Links */}
{/* Action Links */}
<div className="flex items-center gap-4 text-sm font-semibold">
{featuredProject.demoLink && (
<Link
@ -137,7 +144,7 @@ export default function Portfolio() {
</div>
</div>
{/* Image */}
{/* Project Preview Image */}
<div className="relative md:col-span-5 h-64 md:h-full min-h-260px overflow-hidden border-t md:border-t-0 md:border-l border-slate-800/60">
<Image
src={featuredProject.image}
@ -151,7 +158,7 @@ export default function Portfolio() {
</div>
)}
{/* Secondary Projects Grid */}
{/* Secondary Projects Grid Layout */}
<div className="grid md:grid-cols-2 gap-6">
{secondaryProjects.map((project) => (
<div
@ -160,7 +167,7 @@ export default function Portfolio() {
>
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none" />
{/* Image */}
{/* Project Image */}
<div className="relative h-44 overflow-hidden border-b border-slate-800/60">
<Image
src={project.image}
@ -172,7 +179,7 @@ export default function Portfolio() {
<div className="absolute inset-0 bg-linear-to-t from-slate-950/90 via-slate-950/0 to-transparent pointer-events-none" />
</div>
{/* Description */}
{/* Card Details & Stack */}
<div className="p-5 flex-1 flex flex-col justify-between relative z-10">
<div>
<div className="flex items-center justify-between mb-1">
@ -190,7 +197,7 @@ export default function Portfolio() {
</div>
<div>
{/* Badges */}
{/* Tech Badges */}
<div className="flex flex-wrap gap-2 mb-4">
{project.tags.map((tag) => (
<span
@ -206,7 +213,7 @@ export default function Portfolio() {
))}
</div>
{/* Links */}
{/* Repository Links */}
<div className="grid grid-cols-2 pt-2 border-t border-slate-800/60">
{project.frontendLink && (
<Link

19
src/components/Skills.tsx
View file

@ -1,4 +1,7 @@
export default function Skills() {
/**
* Technical skill matrix grouped by stack category and highlight priority
*/
const skillCategories = [
{
title: "Frontend",
@ -35,12 +38,15 @@ export default function Skills() {
},
];
/**
* Render the technical skills section with responsive category cards and styled skill tags.
*/
return (
<section
id="myskills"
className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
>
{/* Titel */}
{/* Section Header */}
<div className="mb-4 space-y-1 text-right flex flex-col items-end">
<p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
// 02. Technical Stack
@ -50,7 +56,7 @@ export default function Skills() {
</h2>
</div>
{/* Description */}
{/* Intro Description */}
<div className="mb-6 leading-relaxed">
<p>
Through hands-on experience in various projects, I continuously expand
@ -65,7 +71,7 @@ export default function Skills() {
</p>
</div>
{/* Skill categories */}
{/* Skill Category Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{skillCategories.map((category) => (
<div
@ -76,10 +82,11 @@ export default function Skills() {
hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-0.5
transition-all duration-300 ease-out flex flex-col justify-between overflow-hidden"
>
{/* Subtle glow effect */}
<div className="absolute -top-12 -right-12 w-24 h-24 bg-blue-500/15 rounded-full blur-xl group-hover:bg-blue-500/25 transition-all duration-500 pointer-events-none" />
<div>
{/* Header */}
{/* Category Header */}
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
<span className="text-blue-500 font-mono text-sm">//</span>{" "}
@ -88,8 +95,8 @@ export default function Skills() {
<span className="w-2 h-2 rounded-full bg-blue-500/40 group-hover:bg-blue-400 group-hover:shadow-[0_0_8px_rgba(96,165,250,0.8)] transition-all duration-300" />
</div>
{/* Badgets */}
<div className="flex flex-wrap gap-2 justify-center sm:justify-start">
{/* Skill Badges */}
<div className="flex flex-wrap gap-2 justify-center sm:justify-start">
{category.skills.map((skill) => (
<span
key={skill.name}

6
src/components/Social.tsx
View file

@ -1,5 +1,8 @@
import Image from "next/image";
/**
* External social profile link configurations
*/
const socialLinks = [
{
name: "Codeberg",
@ -18,6 +21,9 @@ const socialLinks = [
},
];
/**
* Renders a row of social media profile links with icons and labels
*/
export default function SocialLinks() {
return (
<div className="flex items-center justify-center md:justify-start gap-4 pt-3 md:pt-0">