diff --git a/public/codeberg.svg b/public/codeberg.svg
new file mode 100644
index 0000000..3056af5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/github.svg b/public/github.svg
new file mode 100644
index 0000000..7b14348
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/public/linkedin.svg b/public/linkedin.svg
new file mode 100644
index 0000000..0adaf00
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dbee989..a593ae1 100644
--- a/src/app/layout.tsx
+++ b/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({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 1a0be74..836f4c7 100644
--- a/src/app/page.tsx
+++ b/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 (
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 6f0b4f5..4b06241 100644
--- a/src/components/About.tsx
+++ b/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>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 3b6b7e6..e40aeb2 100644
--- a/src/components/Hero.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx
index c5740da..0698ce9 100644
--- a/src/components/Skills.tsx
+++ b/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}
diff --git a/src/components/Social.tsx b/src/components/Social.tsx
new file mode 100644
index 0000000..da8cee5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/tsconfig.json b/tsconfig.json
index cf9c65d..1c6cf4a 100644
--- a/tsconfig.json
+++ b/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"]
 }