diff --git a/index.html b/index.html
index 034b861..b2f9137 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="de">
+
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=0.5">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portfolio | TheBlokker</title>
     <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="css/main.css">
@@ -12,261 +12,269 @@
     <link href="fontawesome-free-6.4.0-web/css/fontawesome.css" rel="stylesheet">
     <link href="fontawesome-free-6.4.0-web/css/brands.css" rel="stylesheet">
     <link href="fontawesome-free-6.4.0-web/css/solid.css" rel="stylesheet">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;0,300;1,200&display=swap');
-
-        body {
-            font-family: 'Josefin Sans', sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f4f4f9;
-            color: #333;
+    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,200;0,300;1,200&display=swap"
+        rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
         }
-
-        header {
-            background: #333;
-            color: #fff;
-            padding: 1rem 0;
-            text-align: center;
-        }
-
-        header h1 {
-            margin: 0;
-        }
-
-        nav {
-            display: flex;
-            justify-content: center;
-            background: #444;
-            padding: 0.5rem 0;
-        }
-
-        nav a {
-            color: #fff;
-            text-decoration: none;
-            margin: 0 1rem;
-            font-size: 1.1rem;
-        }
-
-        nav a:hover {
-            text-decoration: underline;
-        }
-
-        .container {
-            max-width: 900px;
-            margin: 2rem auto;
-            padding: 0 1rem;
-        }
-
-        .section {
-            margin-bottom: 2rem;
-        }
-
-        .section h2 {
-            margin-bottom: 1rem;
-            color: #444;
+        .profile-container {
+            position: relative;
+            display: inline-block;
         }
 
-        footer {
-            text-align: center;
-            padding: 1rem 0;
-            background: #333;
-            color: #fff;
-            position: fixed;
+        .profile-circle {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
-            bottom: 0;
+            height: 100%;
+            border-radius: 50%;
+            /* Make it a circle */
+            /* background: linear-gradient(45deg, #BA3BF9, #52EB8A); */
+            /* Gradient colors */
+            opacity: 0.8;
+            z-index: -1;
+            /* size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700 */
+            /* width: 6rem;  */
+            /* height: 6rem; */
+            background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
         }
     </style>
     <script src="scripts.js"></script>
-    <!-- Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HJS5QV5VZT"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
-
-        function gtag() {
-            dataLayer.push(arguments);
-        }
-
+        function gtag() { dataLayer.push(arguments); }
         gtag('js', new Date());
         gtag('config', 'G-HJS5QV5VZT');
-
     </script>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
-            crossorigin="anonymous"></script>
-
 </head>
-<body>
-<header>
-    <h1>TheBlokker</h1>
-    <p>Welcome to my portfolio</p>
-</header>
-<nav>
-    <a href="#about">About</a>
-    <a href="#projects">Projects</a>
-    <a href="#favours">Favours Things</a>
-    <a href="#contact">Contact</a>
-</nav>
-<div class="container">
-    <section id="about" class="section">
-        <h2>About Me</h2>
-        <div class="container">
-            <div class="row">
-                <div class="col-md-auto">
-                    <img class="profilepic" src="img/My_Image.jpg" alt="TheBlokker's profile picture"
-                         title="The profil picture of TheBlokker">
-                </div>
-                <div class="col">
-                    <p>Hello! I'm TheBlokker, a passionate backend-developer. I love creating software that helps the world.
-                        Feel free to explore my work!</p>
+
+<body class="bg-gray-100 font-sans text-gray-800">
+    <header class="bg-gray-800 text-white py-4 text-center">
+        <h1 class="text-2xl font-bold">TheBlokker</h1>
+        <p class="text-lg">Welcome to my portfolio</p>
+    </header>
+
+    <nav class="bg-gray-700 py-2 flex justify-center">
+        <a href="#about" class="text-white hover:underline mx-4 px-2 py-1">About</a>
+        <a href="#projects" class="text-white hover:underline mx-4 px-2 py-1">Projects</a>
+        <a href="#favours" class="text-white hover:underline mx-4 px-2 py-1">Favours Things</a>
+        <a href="#contact" class="text-white hover:underline mx-4 px-2 py-1">Contact</a>
+    </nav>
+
+    <div class="container mx-auto mt-8 px-4">
+        <section id="about" class="mb-8">
+            <h2 class="text-3xl font-semibold mb-4 text-gray-700">About Me</h2>
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="profile-container md:mr-8">
+                    <div class="profile-circle"></div>
+                    <img src="img/My_Image.jpg" alt="TheBlokker's profile picture"
+                        title="The profil picture of TheBlokker" class="rounded-full w-32 h-32 m-1 ">
                 </div>
+                <p class="text-lg">
+                    Hello! I'm TheBlokker, a passionate backend-developer. I love creating software that helps the
+                    world. Feel free to explore my work!
+                </p>
             </div>
-        </div>
-    </section>
-    <section id="projects" class="section">
-        <h2>Projects:</h2>
-        <p>Here are some of my recent projects:</p>
-        <div class="container">
-            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
-                <div class="col">
-                    <div class="card shadow-sm">
-                        <img class="card-img-top" width="100%" height="100%" src="img/IMG_0430.png" alt="Tech-Roleplay"
-                             role="img">
-                        <div class="card-body">
-                            <p class="card-text"><a href="tech-roleplay.html">GTA 5 RolePlay-Server</a></p>
-                        </div>
+        </section>
+
+        <section id="projects" class="mb-8">
+            <h2 class="text-3xl font-semibold mb-4 text-gray-700">Projects</h2>
+            <p class="mb-4">Here are some of my recent projects:</p>
+
+            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-4">
+                <div class="md:flex">
+                    <div class="md:shrink-0">
+                        <img src="img/IMG_0430.png" alt="Tech-Roleplay"
+                            class="h-48 w-full object-cover md:h-full md:w-48">
                     </div>
-                </div>
-                <div class="col">
-                    <div class="card shadow-sm">
-                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
-                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
-                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
-                            <rect width="100%" height="100%" fill="#55595c"></rect>
-                            <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
-                        </svg>
-                        <div class="card-body">
-                            <p class="card-text">TerminalIDE - A IDE in a normal Unix based shell</p>
+                    <div class="p-8">
+                        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">GTA 5 RolePlay-Server
                         </div>
+                        <a href="tech-roleplay.html"
+                            class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
+                            The realistic Roleplay-Server for GTA 5 in the World
+                        </a>
+                        <p class="mt-2 text-gray-500">
+                            <span
+                                class="inline-block min-h-[1em] w-8/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                            <span
+                                class="inline-block min-h-[1em] w-8/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                        </p>
                     </div>
                 </div>
-                <div class="col placeholder-glow">
-                    <div class="card shadow-sm">
-                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
-                             xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
-                             preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
+            </div>
+            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl mb-4">
+                <div class="md:flex">
+                    <div class="md:shrink-0">
+                        <svg class="w-full h-48 bg-gray-200" xmlns="http://www.w3.org/2000/svg" role="img"
+                            aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false">
+                            <title>Placeholder</title>
                             <rect width="100%" height="100%" fill="#55595c"></rect>
                             <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text>
                         </svg>
-                        <div class="card-body">
-                            <p class="card-text"><span class="placeholder col-7"></span>
-                                <span class="placeholder col-6"></span>
-                                <span class="placeholder col-3"></span></p>
-                        </div>
+                    </div>
+                    <div class="p-8">
+                        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Terminal IDE</div>
+                        <a href=""
+                            class="block mt-1 text-lg leading-tight font-medium text-black hover:underline link:disabled">
+                            A IDE in a normal Unix based shell
+                        </a>
+                        <p class="mt-2 text-gray-500">
+                            <span
+                                class="inline-block min-h-[1em] w-8/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                            <span
+                                class="inline-block min-h-[1em] w-8/12 flex-auto cursor-wait bg-current align-middle opacity-50"></span>
+                        </p>
                     </div>
                 </div>
             </div>
-        </div>
 
-    </section>
-    <section id="socials" class="section">
-        <h2>Social Media</h2>
-        <a href="https://github.com/TheBlokker" title="GitHub"><i class="fa-brands fa-github fa-xl"
-                                                                  style="color: black"></i></a>
-        <a href="https://www.youtube.com/@theblokker_developer" title="YouTube"><i class="fa-brands fa-youtube fa-xl"
-                                                                                   style="color: red"></i></a>
-        <a href="https://discord.com/users/629199560002109453" title="Discord"><i class="fa-brands fa-discord fa-xl"
-                                                                                  style="color: rgb(47, 179, 223)"></i></a>
-        <a href="https://www.twitch.tv/theblokker_live" title="Twitch"><i class="fa-brands fa-twitch fa-xl"
-                                                                          style="color: #d400ff;"></i></a>
-        <a href="mailto:theblokker.dev@gmail.com" title="E-Mail"><i class="fa-regular fa-envelope fa-xl"
-                                                                    style="color: #52EB8A;"></i></a>
-    </section>
-    <section id="favours" class="section">
-        <h2>Favours ... </h2>
-        <div class="container">
-            <div class="row">
-                <div class="col">
-                    <h2 class="fw-normal">... Series</h2>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt0106080/" data-iframely-url="//iframely.net/7SdU41Q"></a></div></div><script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt2467372/" data-iframely-url="//iframely.net/GOoNjqB"></a></div></div><script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt0073989/" data-iframely-url="//iframely.net/epOT7ZS?card=small"></a></div></div><script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt4277128/" data-iframely-url="//iframely.net/UonbAgX"></a></div></div><script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt0246393/" data-iframely-url="//iframely.net/Qz7ixmq"></a></div></div><script async src="//iframely.net/embed.js"></script>
+
+        </section>
+
+        <section id="socials" class="mb-8">
+            <h2 class="text-3xl font-semibold mb-4 text-gray-700">Social Media</h2>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="https://github.com/TheBlokker" title="GitHub" class="text-black hover:text-gray-500"><i
+                        class="fa-brands fa-github fa-2xl"></i></a>
+                <a href="https://www.youtube.com/@theblokker_developer" title="YouTube"
+                    class="text-red-600 hover:text-red-400"><i class="fa-brands fa-youtube fa-2xl"></i></a>
+                <a href="https://discord.com/users/629199560002109453" title="Discord"
+                    class="text-blue-500 hover:text-blue-300"><i class="fa-brands fa-discord fa-2xl"></i></a>
+                <a href="https://www.twitch.tv/theblokker_live" title="Twitch"
+                    class="text-purple-500 hover:text-purple-300"><i class="fa-brands fa-twitch fa-2xl"></i></a>
+                <a href="mailto:theblokker.dev@gmail.com" title="E-Mail" class="text-green-500 hover:text-green-300"><i
+                        class="fa-regular fa-envelope fa-2xl"></i></a>
+            </div>
+        </section>
+
+        <section id="favours" class="mb-8">
+            <h2 class="text-3xl font-semibold mb-4 text-gray-700">Favours ...</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pb-8">
+                <div>
+                    <h3 class="text-2xl font-semibold mb-2">... Series</h3>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt0106080/"
+                                data-iframely-url="//iframely.net/7SdU41Q"></a></div>
+                    </div>
+                    <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt2467372/"
+                                data-iframely-url="//iframely.net/GOoNjqB"></a></div>
+                    </div>
+                    <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt0073989/"
+                                data-iframely-url="//iframely.net/epOT7ZS?card=small"></a></div>
+                    </div>
+                    <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt4277128/"
+                                data-iframely-url="//iframely.net/UonbAgX"></a></div>
+                    </div>
+                    <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt0246393/"
+                                data-iframely-url="//iframely.net/Qz7ixmq"></a></div>
+                    </div>
+                    <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt0312172/"
+                                data-iframely-url="//iframely.net/jbC7yAB"></a></div>
+                    </div>
                     <script async src="//iframely.net/embed.js"></script>
+                    <div class="iframely-embed pb-2">
+                        <div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a
+                                href="https://www.imdb.com/title/tt0491738/"
+                                data-iframely-url="//iframely.net/r5Ufd33"></a></div>
+                    </div>
                     <script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt0312172/" data-iframely-url="//iframely.net/jbC7yAB"></a></div></div><script async src="//iframely.net/embed.js"></script>
-                    <div class="iframely-embed"><div class="iframely-responsive" style="height: 170px; padding-bottom: 0;"><a href="https://www.imdb.com/title/tt0491738/" data-iframely-url="//iframely.net/r5Ufd33"></a></div></div><script async src="//iframely.net/embed.js"></script>
                     <br>
-                    <p><a class="btn btn-secondary disabled" href="#" aria-disabled="true">See more Films and Series
-                        »</a></p>
-                </div><!-- /.col-lg-4 -->
-                <div class="col">
-                    <h2 class="fw-normal">.. Songs</h2>
-                    <iframe style="border-radius:12px"
+                    <p><a class="bg-gray-300 text-gray-500 py-2 px-4 rounded-md inline-block" href="#"
+                            aria-disabled="true">See more Films and Series »</a></p>
+                </div>
+                <div>
+                    <h3 class="text-2xl font-semibold mb-2">... Songs</h3>
+                    <div class="pb-2"><iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/20I6sIOMTCkB6w7ryavxtO?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
+                    </div>
+                    <div class="pb-2"> <iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/0iGckQFyv6svOfAbAY9aWJ?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
-                            src="https://open.spotify.com/embed/track/39J2ievGlF1UmLeqjDr8Fb?utm_source=generator"
-                            width="100%" height="152" frameBorder="0" allowfullscreen=""
-                            allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-                            loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
+                    </div>
+
+                    <div class="pb-2"> <iframe style="border-radius:12px"
+                        src="https://open.spotify.com/embed/track/39J2ievGlF1UmLeqjDr8Fb?utm_source=generator"
+                        width="100%" height="152" frameBorder="0" allowfullscreen=""
+                        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+                        loading="lazy"></iframe>
+                    </div>
+                    <div class="pb-2"><iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/7A4KdLy1DXOOC5fhIdDuHz?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
+                    </div>
+                    <div class="pb-2"><iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/2ihCaVdNZmnHZWt0fvAM7B?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
+                    </div>
+                    <div class="pb-2"><iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/6HMFtoMvv6n6Q2eOyPFyne?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-                    <iframe style="border-radius:12px"
+                    </div>
+                    <div class="pb-2"><iframe style="border-radius:12px"
                             src="https://open.spotify.com/embed/track/0eMxgAHmuvoqpLyYQrbKvQ?utm_source=generator"
                             width="100%" height="152" frameBorder="0" allowfullscreen=""
                             allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                             loading="lazy"></iframe>
-
-                    <p><a class="btn btn-secondary disabled" href="#" aria-disabled="true">View details »</a></p>
-                </div><!-- /.col-lg-4 -->
+                    </div>
+                    <p><a class="bg-gray-300 text-gray-500 py-2 px-4 rounded-md inline-block" href="#"
+                            aria-disabled="true">View details »</a></p>
+                </div>
             </div>
-        </div>
-        <div class="container">
-            <div class="row">
-                <div class="col">
-                    <h2 class="fw-normal">... Color</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <h3 class="text-2xl font-semibold mb-2">... Color</h3>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                         <rect height="50px" width="50px" fill="#BA3BF9"></rect>
                     </svg>
                 </div>
-
             </div>
-        </div>
+        </section>
 
+        <section id="contact" class="mb-8">
+            <h2 class="text-3xl font-semibold mb-4 text-gray-700">Contact Me</h2>
+            <p class="text-lg">If you'd like to get in touch, feel free to email me at <a
+                    href="mailto:theblokker.dev@gmail.com"
+                    class="text-indigo-500 hover:underline">theblokker.dev@gmail.com</a>.</p>
+        </section>
+    </div>
 
-    </section>
-    <section id="contact" class="section">
-        <h2>Contact Me</h2>
-        <p>If you'd like to get in touch, feel free to email me at <a href="mailto:theblokker.dev@gmail.com">theblokker.dev@gmail.com</a>.
-        </p>
-    </section>
-</div>
-<div id="footer" class="footer">
-    <p>&copy; 2024 TheBlokker. All Rights Reserved.</p>
-</div>
+    <footer class="bg-gray-800 text-white text-center py-4 mt-8">
+        <p>© 2024 TheBlokker. All Rights Reserved.</p>
+    </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file
