enchance this

index.html

@@ -109,13 +109,26 @@
             <source src="https://assets.mixkit.co/videos/preview/mixkit-abstract-digital-grid-of-dots-8541-large.mp4" type="video/mp4">
         </video>
         <div class="absolute w-full h-full bg-black/50 z-10"></div>
-        <div class="text-center px-4 z-20 relative">
-<h1 class="text-4xl md:text-6xl font-bold mb-6">My Game Design & Art Portfolio</h1>
-<p class="text-xl mb-8">Showcasing creative projects and game experiences</p>
-                    <a href="#works" class="inline-block px-6 py-3 bg-red-600 hover:bg-red-700 rounded-full font-medium transition">View Projects</a>
-</div>
+        <div class="text-center px-4 z-20 relative max-w-4xl">
+            <h1 class="text-4xl md:text-7xl font-bold mb-6 animate-fade-in">
+                <span class="text-red-500">Oskar Lundmark Koblanck</span>
+                <div class="text-3xl md:text-5xl font-medium mt-4">Game Design & Interactive Experiences</div>
+            </h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Creating immersive worlds and engaging gameplay mechanics that tell memorable stories</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#works" class="inline-block px-8 py-4 bg-red-600 hover:bg-red-700 rounded-full font-medium transition transform hover:scale-105">
+                    View Projects <i data-feather="arrow-down" class="ml-2"></i>
+                </a>
+                <a href="#contact" class="inline-block px-8 py-4 border-2 border-white hover:bg-white/20 rounded-full font-medium transition transform hover:scale-105">
+                    Get in Touch
+                </a>
+            </div>
+        </div>
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <i data-feather="chevron-down" class="w-8 h-8"></i>
+        </div>
     </section>
-    <style>
+<style>
         .hero-image {
             position: relative;
         }
@@ -154,14 +167,16 @@
             color: #800000;
         }
 </style>
-<!-- About Section -->
-    <section id="about" class="py-20 bg-white">
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-white relative overflow-hidden">
+        <div class="absolute -right-32 -top-32 w-64 h-64 bg-red-100 rounded-full opacity-20 mix-blend-multiply"></div>
+        <div class="absolute -left-32 -bottom-32 w-64 h-64 bg-indigo-100 rounded-full opacity-20 mix-blend-multiply"></div>
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
-                    <h2 class="text-3xl font-bold mb-6">Hello!</h2>
-                    <p class="text-lg mb-6">My name is Oskar Lundmark Koblanck</p>
-                    <div class="prose lg:prose-xl">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10 relative z-10">
+                    <h2 class="text-4xl font-bold mb-6 bg-gradient-to-r from-red-600 to-indigo-600 bg-clip-text text-transparent">Hello There!</h2>
+                    <p class="text-xl mb-6 font-medium">My name is <span class="text-red-600">Oskar Lundmark Koblanck</span></p>
+<div class="prose lg:prose-xl">
                         <p>Hello! My name is Oskar, and I'm a passionate game designer and maker. At 18, my journey into game development took an unexpected start. Initially, I pursued a career as an aircraft mechanic, but as I approached graduation during the COVID-19 pandemic, I decided to follow a passion of mine for game-making.</p>
                         <p class="mt-4">I began my formal education in game and UX & Game Design in the charming northern town of Skellefteå, Sweden. After two enriching years there (and a few too many cups of coffee and a couple of student parties), I decided to level up my skills and knowledge. This quest led me to Kortrijk, Belgium, where I'm enrolled in the Independent Game Production course at DAE. My diverse background and experiences fuel my ambition to create engaging and immersive gaming experiences, because let's be honest, who doesn't want to escape reality occasionally?</p>
                         <p class="mt-4">Thank you for visiting my portfolio!</p>
@@ -247,8 +262,8 @@ Download CV
         </div>
     </section>
     <!-- Projects Section -->
-    <section id="works" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <section id="works" class="py-20 bg-gradient-to-b from-white to-gray-50">
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <h2 class="text-3xl font-bold text-center mb-6">Featured Projects</h2>
             <div class="flex justify-center space-x-4 mb-16">
                 <button id="all-btn" class="px-6 py-2 bg-red-600 text-white rounded-full font-medium" onclick="filterProjects('all')">All</button>

style.css

@@ -1,59 +1,56 @@
-
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-/* Projects section styles */
-#projects-grid {
-    padding: 0 2rem;
+/* Animations */
+@keyframes fade-in {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.project-card {
-    width: 100%;
-    max-width: 100%;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    display: flex;
-    flex-direction: column;
+@keyframes bounce {
+    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
+    40% { transform: translateY(-20px); }
+    60% { transform: translateY(-10px); }
 }
 
-.project-card img {
-    flex: 0 0 auto;
+.animate-fade-in {
+    animation: fade-in 1s ease-out forwards;
 }
 
-.project-card > div {
-    flex: 1;
+.animate-bounce {
+    animation: bounce 2s infinite;
 }
-.project-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.2);
+
+/* Enhanced project cards */
+.project-card {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
-#games-col, #art-col {
+.project-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7));
+    z-index: 1;
+    opacity: 0;
     transition: opacity 0.3s ease;
 }
-#games-col, #art-col {
-    transition: all 0.3s ease;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.project-card:hover::before {
+    opacity: 1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.project-card img {
+    transition: transform 0.5s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.project-card:hover img {
+    transform: scale(1.05);
 }
+
+.project-card > div {
+    position: relative;
+    z-index: 2;
+}