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

backend/analytics.php

@@ -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'],

backend/config.php

@@ -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',

backend/sendMail.php

@@ -1,47 +1,56 @@
 <?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
+        // Honeypot check: Catch bot submissions (matches frontend 'honeypot' or 'website_hp')
-        if (!empty($params->website)) {
+        $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
+        // 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
+        // Render HTML email template
-        $emailBody = renderEmailTemplate($name, $email, $text, $params->message ?? '');
+        $rawMessage = $params->message ?? '';
+        $emailBody  = renderEmailTemplate($name, $email, $text, $rawMessage);
         $subject    = "{$config['app_name']}: $name";
 
-        // 4. Set headers
+        // Construct standard MIME headers
         $headers = [
             'MIME-Version: 1.0',
             'Content-type: text/html; charset=utf-8',
@@ -49,19 +58,22 @@ switch ($_SERVER['REQUEST_METHOD']) {
             "Reply-To: $email"
         ];
 
-        // Send email
+        // Send email via PHP native mailer
-        $success = mail($config['recipient_email'], $subject, $emailBody, implode("\n", $headers));
+        $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
+    // 3. Reject Unsupported HTTP Methods
-        header("Allow: POST", true, 405);
+    default:
+        header("Allow: POST, OPTIONS", true, 405);
+        http_response_code(405);
+        echo json_encode(["status" => "error", "message" => "Method Not Allowed"]);
         exit;
 }

backend/templates/emailTemplate.php

@@ -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
+    // Clean message body and format line breaks for HTML rendering
-    $formattedText = nl2br(trim($text));
+    $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>
     ";

src/app/globals.css

@@ -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,

src/app/imprint/page.tsx

@@ -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">

src/app/page.tsx

@@ -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>

src/app/privacy/page.tsx

@@ -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">

src/components/About.tsx

@@ -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>

src/components/AnalyticsModal.tsx

@@ -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,

src/components/AnalyticsWidget.tsx

@@ -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);

src/components/Background.tsx

@@ -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" />
     </>
   );

src/components/Contact.tsx

@@ -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
+                  Your message has been sent successfully. I&apos;ll get back to
-                  as soon as possible!
+                  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}

src/components/Footer.tsx

@@ -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"

src/components/Portfolio.tsx

@@ -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

src/components/Skills.tsx

@@ -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,7 +95,7 @@ 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 */}
+              {/* Skill Badges */}
               <div className="flex flex-wrap gap-2 justify-center sm:justify-start">
                 {category.skills.map((skill) => (
                   <span

src/components/Social.tsx

@@ -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">