Datei-basiertes CMS für Projekte implementiert und Scroll-Animationen hinzugefügt

style/main.scss

@@ -51,10 +51,10 @@ body {
 }
 
 .auth-card {
-  background: var(--white); 
-  padding: 3rem; 
-  border-radius: 1.5rem; 
-  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); 
+  background: var(--white);
+  padding: 3rem;
+  border-radius: 1.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
   width: 100%;
   max-width: 400px;
   text-align: center;
@@ -64,15 +64,15 @@ body {
 
   // Hier stylen wir die Form-Inhalte direkt
   form {
-    display: flex; 
-    flex-direction: column; 
+    display: flex;
+    flex-direction: column;
     gap: 1.25rem;
 
     input {
       width: 100%;
       box-sizing: border-box; // Wichtig für korrektes Padding
-      padding: 0.8rem 1rem; 
-      border: 1px solid var(--border); 
+      padding: 0.8rem 1rem;
+      border: 1px solid var(--border);
       border-radius: 0.75rem;
       font-size: 1rem;
       transition: border-color 0.2s;
@@ -81,14 +81,14 @@ body {
 
     button {
       width: 100%;
-      padding: 0.8rem; 
-      background: var(--primary); 
-      color: white; 
-      border: none; 
-      border-radius: 0.75rem; 
+      padding: 0.8rem;
+      background: var(--primary);
+      color: white;
+      border: none;
+      border-radius: 0.75rem;
       font-weight: 600;
       font-size: 1rem;
-      cursor: pointer; 
+      cursor: pointer;
       transition: background 0.2s;
       &:hover { background: var(--primary-dark); }
     }
@@ -97,15 +97,15 @@ body {
 
 // --- CHAT WINDOW ---
 .chat-main {
-  background: var(--white); width: 100%; max-width: 800px; height: 650px; border-radius: 1.5rem; 
+  background: var(--white); width: 100%; max-width: 800px; height: 650px; border-radius: 1.5rem;
   display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); overflow: hidden;
 }
 
-.chat-top-bar { 
-    padding: 1.25rem 1.5rem; 
-    border-bottom: 1px solid var(--border); 
-    display: flex; 
-    justify-content: space-between; 
+.chat-top-bar {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
     align-items: center;
     background: #fff;
     h3 { margin: 0; font-size: 1.1rem; }
@@ -139,7 +139,7 @@ body {
 
 // --- FOOTER & SERVER TIME ---
 .app-footer {
-  text-align: center; 
+  text-align: center;
   padding: 3rem 0;
   .server-time {
     display: inline-block;
@@ -271,4 +271,160 @@ body {
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+// Variablen für dein Design
+$card-bg: #1e1e1e;
+$text-primary: #ffffff;
+$text-secondary: #b3b3b3;
+$accent-color: #f74c00; // Dein Rust/Bytemalte Orange
+$card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+$transition-speed: 0.6s;
+
+.home-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+
+  .home-hero {
+    text-align: center;
+    margin-bottom: 60px;
+
+    h1 {
+      font-size: 3rem;
+      margin-bottom: 10px;
+      color: $text-primary;
+    }
+
+    p {
+      color: $text-secondary;
+      font-size: 1.2rem;
+    }
+  }
+}
+
+// Das Grid-Layout
+.projects-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 30px;
+  margin-bottom: 50px;
+}
+
+// Die Projekt-Karte
+.project-card {
+  background: $card-bg;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: $card-shadow;
+  display: flex;
+  flex-direction: column;
+
+  // --- ANIMATIONS-LOGIK ---
+  opacity: 0;
+  transform: translateY(40px);
+  transition: opacity $transition-speed cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform $transition-speed cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: opacity, transform;
+
+  &.animate-in {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  // -------------------------
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    .project-image img {
+      transform: scale(1.05);
+    }
+  }
+
+  .project-image {
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.5s ease;
+    }
+  }
+
+  .project-content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    h3 {
+      margin: 0 0 10px 0;
+      font-size: 1.4rem;
+      color: $text-primary;
+    }
+
+    p {
+      color: $text-secondary;
+      font-size: 0.95rem;
+      line-height: 1.5;
+      margin-bottom: 20px;
+      flex-grow: 1;
+    }
+
+    .project-links {
+      display: flex;
+      gap: 10px;
+
+      a {
+        padding: 8px 16px;
+        border-radius: 6px;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 0.9rem;
+        transition: filter 0.2s;
+
+        &:hover {
+          filter: brightness(1.2);
+        }
+
+        &.btn-download {
+          background: $accent-color;
+          color: white;
+        }
+
+        &.btn-code {
+          background: #333;
+          color: white;
+          border: 1px solid #444;
+        }
+      }
+    }
+  }
+}
+
+.home-footer {
+  text-align: center;
+  padding: 40px 0;
+  color: $text-secondary;
+  border-top: 1px solid #333;
+}
+
+// Lade-Spinner Styling
+.spinner {
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-left-color: $accent-color;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin: 40px auto;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}