From a271fcb5eda8f8270727616ba8d8ee969e6e2542 Mon Sep 17 00:00:00 2001
From: Adrian Fennert <adrian.fennert@gmx.de>
Date: Sat, 14 Feb 2026 16:50:31 +0100
Subject: [PATCH] feat: update transition styles for ProjectEntry to look
 better

---
 src/lib/components/ProjectEntry.svelte | 99 +++++++++++++-------------
 1 file changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/lib/components/ProjectEntry.svelte b/src/lib/components/ProjectEntry.svelte
index a4f299c..181a06e 100644
--- a/src/lib/components/ProjectEntry.svelte
+++ b/src/lib/components/ProjectEntry.svelte
@@ -60,24 +60,23 @@
 <style>
     article {
         display: block;
-				text-wrap: pretty;
-				text-wrap: balance;
+        text-wrap: pretty;
+        text-wrap: balance;
         border-radius: 1rem;
-        transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s 0s;
-        will-change: rotate;
+        transition: box-shadow ease-in-out 0s;
 
         perspective: 1000px;
 
         &:hover {
-            transition: box-shadow ease-in-out 0.1s, transform ease-in-out 0.3s 0.5s;
-
-            transform: translateY(-0.5rem);
+            transition: box-shadow ease-in-out 0.1s 0.4s;
             box-shadow: var(--color-card-box-shadow);
         }
     }
 
-    :global(article.in-view) {
-        animation: shake 0.4s ease-in-out;
+    @media (min-width: 768px) {
+        :global(article.in-view) {
+            animation: shake 0.4s ease-in-out;
+        }
     }
 
     @keyframes shake {
@@ -171,11 +170,11 @@
     }
 
     .back {
-				display: flex;
-				flex-direction: column;
-				align-content: center;
-				justify-content: center;
-				gap: 2rem;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        gap: 2rem;
 
         color: white;
         background-image: linear-gradient(
@@ -186,53 +185,53 @@
         transform: rotateY(180deg);
     }
 
-		.tasks {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				gap: 1rem;
-		}
-
-		.task-headline {
-				font-size: 1.25rem;
-				font-weight: bold;
-		}
-
-		.task-description {
-				font-size: 1rem;
-				line-height: 1.5;
-		}
-
-		.tools {
+    .tasks {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 1rem;
-		}
+    }
 
-		.tools-headline {
-				font-size: 1rem;
-				font-weight: bold;
-		}
+    .task-headline {
+        font-size: 1.25rem;
+        font-weight: bold;
+    }
 
-		.tools-tags {
-				display: flex;
-				flex-wrap: wrap;
-				align-items: center;
-				justify-content: center;
-				gap: 0.5rem;
+    .task-description {
+        font-size: 1rem;
+        line-height: 1.5;
+    }
+
+    .tools {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+    }
+
+    .tools-headline {
+        font-size: 1rem;
+        font-weight: bold;
+    }
+
+    .tools-tags {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
 
         margin: unset;
         padding: unset;
         list-style: none;
-		}
+    }
 
-		.tools-tags-tag {
-				padding: 0.25rem 0.75rem;
-				border-radius: 1rem;
-				background-color: var(--color-header-border);
+    .tools-tags-tag {
+        padding: 0.25rem 0.75rem;
+        border-radius: 1rem;
+        background-color: var(--color-header-border);
         font-size: 0.875rem;
-		}
+    }
 </style>
\ No newline at end of file