refactor: UI tweaks and responsive design improvements

public/codeberg.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M64 320C64 368.1 77.5 415.3 103.1 456L316.5 180.1C318 178.1 321.9 178.1 323.4 180.1L412.5 295.3L348.7 295.3L350.1 300.4L416.5 300.4L435.3 324.7L356.9 324.7L359.1 332.7L441.5 332.7L458.1 354.1L365.1 354.1L368 364.4L466 364.4L480.8 383.5L373.3 383.5L376.8 396.1L490.4 396.1L503.4 412.9L381.4 412.9L385.3 426.8L514.1 426.8L526.1 442.3L389.6 442.3L393.5 456.2L536.8 456.2C562.5 415.2 576 368 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320zM397.9 471.5L401.8 485.4L515.4 485.4C519.1 481 522.9 476.2 526.4 471.5L397.9 471.5zM406.1 500.9L409.9 514.8L485.9 514.8C490.9 510.6 496.3 505.7 501.1 500.9L406.1 500.9zM414.3 530.3L418.2 544.1L443.9 544.1C451.5 539.7 458.5 535.3 466.1 530.3L414.3 530.3z"/></svg>

public/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M280.5 426.5C214.5 418.5 168 371 168 309.5C168 284.5 177 257.5 192 239.5C185.5 223 186.5 188 194 173.5C214 171 241 181.5 257 196C276 190 296 187 320.5 187C345 187 365 190 383 195.5C398.5 181.5 426 171 446 173.5C453 187 454 222 447.5 239C463.5 258 472 283.5 472 309.5C472 371 425.5 417.5 358.5 426C375.5 437 387 461 387 488.5L387 540.5C387 555.5 399.5 564 414.5 558C505 523.5 576 433 576 321C576 179.5 461 64 319.5 64C178 64 64 179.5 64 321C64 432 134.5 524 229.5 558.5C243 563.5 256 554.5 256 541L256 501C249 504 240 506 232 506C199 506 179.5 488 165.5 454.5C160 441 154 433 142.5 431.5C136.5 431 134.5 428.5 134.5 425.5C134.5 419.5 144.5 415 154.5 415C169 415 181.5 424 194.5 442.5C204.5 457 215 463.5 227.5 463.5C240 463.5 248 459 259.5 447.5C268 439 274.5 431.5 280.5 426.5z"/></svg>

public/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.3.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M512 96L127.9 96C110.3 96 96 110.5 96 128.3L96 511.7C96 529.5 110.3 544 127.9 544L512 544C529.6 544 544 529.5 544 511.7L544 128.3C544 110.5 529.6 96 512 96zM231.4 480L165 480L165 266.2L231.5 266.2L231.5 480L231.4 480zM198.2 160C219.5 160 236.7 177.2 236.7 198.5C236.7 219.8 219.5 237 198.2 237C176.9 237 159.7 219.8 159.7 198.5C159.7 177.2 176.9 160 198.2 160zM480.3 480L413.9 480L413.9 376C413.9 351.2 413.4 319.3 379.4 319.3C344.8 319.3 339.5 346.3 339.5 374.2L339.5 480L273.1 480L273.1 266.2L336.8 266.2L336.8 295.4L337.7 295.4C346.6 278.6 368.3 260.9 400.6 260.9C467.8 260.9 480.3 305.2 480.3 362.8L480.3 480z"/></svg>

src/app/layout.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Header from "../components/Header";
-import Footer from "@/components/Footer";
-import Background from "@/components/Background";
+import Footer from "../components/Footer";
+import Background from "../components/Background";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -21,7 +21,7 @@ const geistMono = Geist_Mono({
 
 export const metadata: Metadata = {
   title: "André Kempf | Portfolio",
-  description: "My personal portfolio, built with Next.js",
+  description: "My personal portfolio, built with React (Next.js)",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,6 +1,6 @@
 import Hero from "../components/Hero";
-import About from "@/components/About";
-import Skills from "@/components/Skills";
+import About from "../components/About";
+import Skills from "../components/Skills";
 
 export default function Home() {
   return (

src/components/About.tsx

@@ -5,7 +5,7 @@ export default function About() {
       className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
     >
       {/* Titel */}
-      <div className="mb-6 space-y-1">
+      <div className="mb-4 space-y-1">
         <p className="text-xs font-mono text-blue-500 tracking-wider uppercase">
           // 01. Introduction
         </p>

src/components/Hero.tsx

@@ -1,11 +1,12 @@
 import Link from "next/link";
+import SocialLinks from "./Social";
 
 export default function Hero() {
   return (
-    <section className="relative pt-20 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
+    <section className="relative pt-18 py-6 px-4 md:px-6 md:pt-24 max-w-5xl mx-auto">
       <div className="grid grid-cols-1 md:grid-cols-12 gap-3 items-center z-10 w-full">
         {/* Left column */}
-        <div className="md:col-span-8 lg:space-y-5 md:space-y-4 space-y-3 text-left">
+        <div className=" self-start md:col-span-8 lg:space-y-5 md:space-y-4 space-y-3 text-left">
           <span className="text-blue-500 font-mono text-sm tracking-wider uppercase">
             // Hi, my name is
           </span>
@@ -32,7 +33,7 @@ export default function Hero() {
           </p>
 
           {/* Buttons */}
-          <div className="flex flex-wrap gap-4">
+          <div className="flex flex-wrap justify-center sm:justify-start gap-4 pb-0 md:pb-4">
             <Link
               href="#contactme"
               className="px-6 py-3 bg-slate-900 text-blue-500 font-semibold rounded-lg border border-blue-500/40 hover:border-blue-400 hover:bg-blue-600 hover:text-white shadow-md shadow-blue-950/50 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/20"
@@ -49,8 +50,8 @@ export default function Hero() {
         </div>
 
         {/* Right column */}
-        <div className="md:col-span-4 flex justify-center">
-          <div className="relative group h-auto w-64 aspect-5/6">
+        <div className="self-start md:col-span-4 flex justify-center p-3 md:p-0">
+          <div className="relative group h-auto w-70 lg:w-66 md:w-59 aspect-5/6">
             <div className="relative w-full h-full rounded-2xl border-5 border-slate-800 bg-slate-900 overflow-hidden flex items-center justify-center group-hover:border-blue-500/50 transition-colors duration-300">
               <img
                 src="/me.png"
@@ -61,6 +62,7 @@ export default function Hero() {
           </div>
         </div>
       </div>
+      <SocialLinks />
     </section>
   );
 }

src/components/Skills.tsx

@@ -41,7 +41,7 @@ export default function Skills() {
       className="relative py-6 px-4 md:px-6 max-w-5xl mx-auto scroll-mt-15"
     >
       {/* Titel */}
-      <div className="mb-6 space-y-1 text-right flex flex-col items-end">
+      <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
         </p>
@@ -51,7 +51,7 @@ export default function Skills() {
       </div>
 
       {/* Description */}
-      <div className="mb-4 leading-relaxed">
+      <div className="mb-6 leading-relaxed">
         <p>
           Through hands-on experience in various projects, I continuously expand
           and refine my full-stack development skills. Here is an overview of
@@ -80,7 +80,7 @@ export default function Skills() {
 
             <div>
               {/* Header */}
-              <div className="flex items-center justify-between mb-6">
+              <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>{" "}
                   {category.title}
@@ -89,7 +89,7 @@ export default function Skills() {
               </div>
 
               {/* Badgets */}
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap gap-2  justify-center sm:justify-start">
                 {category.skills.map((skill) => (
                   <span
                     key={skill.name}

src/components/Social.tsx

@@ -0,0 +1,49 @@
+import Image from "next/image";
+
+const socialLinks = [
+  {
+    name: "Codeberg",
+    href: "https://codeberg.org/chneemann",
+    icon: "/codeberg.svg",
+  },
+  {
+    name: "LinkedIn",
+    href: "https://linkedin.com/in/andre-kempf",
+    icon: "/linkedin.svg",
+  },
+  {
+    name: "GitHub (Legacy)",
+    href: "https://github.com/chneemann",
+    icon: "/github.svg",
+  },
+];
+
+export default function SocialLinks() {
+  return (
+    <div className="flex items-center justify-center md:justify-start gap-4 pt-3 md:pt-0">
+      {socialLinks.map((link) => (
+        <a
+          key={link.name}
+          href={link.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={link.name}
+          className="flex items-center justify-center gap-2 px-2 py-2 sm:px-3 sm:py-2 bg-slate-900 border border-slate-800 hover:border-blue-500/40 hover:bg-blue-600/10 text-slate-300 hover:text-blue-400 font-medium text-sm rounded-lg shadow-md shadow-blue-950/30 transition-all duration-200 hover:-translate-y-0.5 group"
+        >
+          <div className="relative w-7 h-7 sm:w-6 sm:h-6 opacity-80 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Image
+              src={link.icon}
+              alt={link.name}
+              width={28}
+              height={28}
+              className="object-contain invert"
+            />
+          </div>
+          <span className="hidden sm:inline font-mono text-xs">
+            {link.name}
+          </span>
+        </a>
+      ))}
+    </div>
+  );
+}

tsconfig.json

@@ -4,31 +4,28 @@
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": true,
+    "strict": false,
     "noEmit": true,
-    "esModuleInterop": true,
+    "incremental": true,
     "module": "esnext",
+    "esModuleInterop": true,
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
-    "incremental": true,
     "plugins": [
       {
         "name": "next"
       }
-    ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    ]
   },
   "include": [
     "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
     ".next/types/**/*.ts",
     ".next/dev/types/**/*.ts",
-    "**/*.mts"
+    "**/*.mts",
+    "**/*.ts",
+    "**/*.tsx"
   ],
   "exclude": ["node_modules"]
 }