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

Cargo.toml

@@ -20,8 +20,10 @@ leptos_axum = { version = "0.8.0", optional = true }
 tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
 sqlx = { version = "0.8.2", features = ["runtime-tokio-rustls", "sqlite", "chrono"], optional = true }
 serde = "1.0.228"
-web-sys = { version = "0.3.83", features = ["Window", "Document", "Element", "HtmlElement"] }
+web-sys = { version = "0.3.83", features = ["Window", "Document", "Element", "HtmlElement", "IntersectionObserver", "IntersectionObserverEntry", "IntersectionObserverInit", "DomRectReadOnly"] }
 gloo-events = "0.1"
+serde_json = "1.0.149"
+js-sys = "0.3.85"
 
 [features]
 hydrate = ["leptos/hydrate", "dep:console_error_panic_hook", "dep:wasm-bindgen"]

README.md

@@ -1,99 +1,87 @@
-bytemalte_de – Community Chat
+bytemalte_de – Community Chat & Projekt-Portfolio
 
-Dies ist ein Fullstack-Projekt für einen modernen Gruppenchat, entwickelt mit:
-- Leptos – Web-Framework aus Rust
-- cargo-leptos – Fullstack-Build-Tool
-- Axum – Webserver-Framework
-- SQLite – Leichte Embedded-Datenbank
+Dies ist ein Fullstack-Projekt für eine moderne Community-Plattform, entwickelt mit:
 
+    Leptos (0.8) – Web-Framework aus Rust (Frontend & SSR)
+
+    cargo-leptos – Fullstack-Build-Tool
+
+    Axum – Webserver-Framework
+
+    SQLite & SQLx – Datenbank für Chat & Benutzer
+
+    File-based CMS – JSON-basiertes System für Projekt-Verwaltung
+
+Projekt-Features
+
+    Echtzeit-Chat: Benutzerregistrierung und Gruppenchat mit SQLite-Backend.
+
+    Projekt-Portfolio: Dynamische Anzeige von Projekten direkt aus einer projects.json.
+
+    Infinite Scroll: Performantes Nachladen von Inhalten auf der Startseite.
+
+    Server Side Rendering (SSR): Schnelle Ladezeiten und SEO-Optimierung.
 
 Projekt-Setup
 
-1. Datenbank konfigurieren
+    Voraussetzungen & Tools Stelle sicher, dass Rust installiert ist. Installiere zusätzlich die benötigten Komponenten:
 
-Erstelle im Hauptverzeichnis eine .env Datei mit folgendem Inhalt:
-DATABASE_URL="sqlite:community.db"
+rustup target add wasm32-unknown-unknown cargo install cargo-leptos cargo install sqlx-cli --no-default-features --features sqlite
 
-Initialisiere anschließend die Datenbank und führe Migrationen aus:
-sqlx db create
-sqlx migrate run
+SASS Compiler: Fedora: sudo dnf install dart-sass Oder via npm: npm install -g sass
 
-Damit werden die Tabellen für Benutzer und Nachrichten in der Datei community.db angelegt.
+    Datenbank & Umgebung Erstelle eine .env Datei im Hauptverzeichnis: DATABASE_URL="sqlite:community.db"
 
+Initialisiere die Datenbank und führe Migrationen aus: sqlx db create sqlx migrate run
 
-2. Entwicklungsserver starten
+    CMS Konfiguration (Projekte) Die Projekte auf der Startseite werden über die Datei projects.json gesteuert. Du kannst Projekte hinzufügen oder ändern, ohne den Code neu zu kompilieren. Die Datei muss im Hauptverzeichnis liegen.
 
-Starte das Projekt mit Hot-Reload:
-cargo leptos watch
+Struktur der projects.json: [ { "id": 1, "title": "Projekt Name", "description": "Beschreibung...", "image_url": "/assets/bild.png", "download_url": "#", "code_url": "https://..." } ]
 
-Nach erfolgreicher Kompilierung (WASM für das Frontend und Binärdatei für das Backend) ist die Anwendung unter
-http://127.0.0.1:3000 erreichbar.
+Entwicklungsserver starten
 
+Starte das Projekt mit Hot-Reload: cargo leptos watch
 
-Zusätzliche Tools und Konfiguration
+Nach erfolgreicher Kompilierung ist die Anwendung unter http://127.0.0.1:3000 erreichbar.
 
-Dieses Projekt nutzt kryptografische Funktionen (bcrypt) und Datenbankzugriffe. Stelle sicher, dass folgende Tools installiert sind:
+Zusätzliche Konfiguration
 
-rustup target add wasm32-unknown-unknown
-cargo install sqlx-cli --no-default-features --features sqlite
-
-SASS Compiler:
-Fedora:
-sudo dnf install dart-sass
-oder mit npm:
-npm install -g sass
-
-Füge folgende Konfiguration in .cargo/config.toml hinzu, um das WASM-Krypto-Backend zu aktivieren:
-[target.wasm32-unknown-unknown]
-rustflags = ["--cfg", "getrandom_backend=\"wasm_js\""]
+Füge folgende Konfiguration in .cargo/config.toml hinzu, um das WASM-Krypto-Backend (bcrypt) zu aktivieren:
 
+[target.wasm32-unknown-unknown] rustflags = ["--cfg", "getrandom_backend="wasm_js""]
 
 Produktion / Release Build
 
-Erzeuge eine optimierte Release-Version:
-cargo leptos build --release
+Erzeuge eine optimierte Release-Version: cargo leptos build --release
 
 Dieser Befehl erstellt:
-- Die Server-Binärdatei unter target/release/bytemalte_de
-- Das Frontend-Paket (WASM/JS/CSS) unter target/site
 
+    Die Server-Binärdatei unter target/release/bytemalte_de
 
-Tests ausführen
-
-Führe End-to-End-Tests mit Playwright aus:
-cargo leptos end-to-end
-
-Die Tests befinden sich im Verzeichnis end2end/tests.
-
+    Das Frontend-Paket (WASM/JS/CSS) unter target/site
 
 Deployment auf einem entfernten Server (Ubuntu 24.04 VPS)
 
-Nach cargo leptos build --release benötigst du auf dem Zielserver folgende Dateien:
-- target/release/bytemalte_de
-- target/site/
-- community.db
-- .env
+Nach dem Build benötigst du auf dem Zielserver folgende Dateien:
 
-Beispielhafte Verzeichnisstruktur:
-bytemalte_de/
-├── site/
-├── community.db
-└── .env
+    die Binärdatei (bytemalte_de)
 
-Exportiere die Umgebungsvariablen (z. B. in einem Systemd-Service):
-export LEPTOS_OUTPUT_NAME="bytemalte_de"
-export LEPTOS_SITE_ROOT="site"
-export LEPTOS_SITE_PKG_DIR="pkg"
-export LEPTOS_SITE_ADDR="0.0.0.0:3000"
-export DATABASE_URL="sqlite:community.db"
+    den Ordner site/
 
-Starte die Anwendung:
-./bytemalte_de
+    projects.json
 
+    community.db
+
+    .env
+
+Beispielhafte Verzeichnisstruktur: bytemalte_de/ ├── site/ ├── projects.json ├── community.db └── .env
+
+Exportiere die Umgebungsvariablen (z. B. in einem Systemd-Service): export LEPTOS_OUTPUT_NAME="bytemalte_de" export LEPTOS_SITE_ROOT="site" export LEPTOS_SITE_PKG_DIR="pkg" export LEPTOS_SITE_ADDR="0.0.0.0:3000" export DATABASE_URL="sqlite:community.db"
+
+Anwendung starten: ./bytemalte_de
 
 Lizenz & Urheberrecht
 
-Dieses Projekt basiert auf dem Leptos Axum Starter Template.
-Die spezifische Chat-Logik, das Styling und UI-Design wurden individuell für bytemalte_de entwickelt.
+Dieses Projekt basiert auf dem Leptos Axum Starter Template. Die spezifische Chat-Logik, das JSON-CMS, das Styling und UI-Design wurden individuell für bytemalte_de entwickelt.
 
 Entwickelt mit ❤️ von bytemalte

projects.json

@@ -0,0 +1,178 @@
+[
+  {
+    "id": 1,
+    "title": "Malxte.de Persönliche Rust Website",
+    "description": "Meine persönliche Website komplett mit Rust und Yew programmiert.",
+    "image_url": "/assets/malxte_de.png",
+    "download_url": "#",
+    "code_url": "https://gitea.malxte.de/Bytemalte/malxte_de"
+  },
+  {
+    "id": 2,
+    "title": "Bytemalte.de Rust Community Website",
+    "description": "Eine in Rust und mit Leptos programmierte Community Website.",
+    "image_url": "/assets/bytemalte_de.png",
+    "download_url": "#",
+    "code_url": "https://gitea.malxte.de/Bytemalte/bytemalte_de"
+  },
+  {
+    "id": 3,
+    "title": "Bytemalte Logo",
+    "description": "Das offizielle Bytemalte Logo Projekt.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 4,
+    "title": "Rust CLI Tool",
+    "description": "Ein nützliches Kommandozeilenwerkzeug in Rust.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 5,
+    "title": "SQLite Datenbank Manager",
+    "description": "Verwaltungstool für lokale Datenbanken.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 6,
+    "title": "Leptos Dashboard",
+    "description": "Ein schickes Dashboard für Server-Metriken.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 7,
+    "title": "WASM Game Engine",
+    "description": "Spieleentwicklung direkt für den Browser.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 8,
+    "title": "Rust Auth System",
+    "description": "Sichere Benutzerauthentifizierung mit JWT.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 9,
+    "title": "Markdown Parser",
+    "description": "Ein schneller Markdown-zu-HTML Konverter.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 10,
+    "title": "Discord Bot in Rust",
+    "description": "Ein moderner Bot mit Serenity.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 11,
+    "title": "Gitea API Client",
+    "description": "Automatisierung für deine Repositories.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 12,
+    "title": "Rust Web Scraper",
+    "description": "Daten effizient aus dem Web extrahieren.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 13,
+    "title": "Chat App Backend",
+    "description": "Skalierbares Backend mit WebSockets.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 14,
+    "title": "Portfolio Template",
+    "description": "Ein minimalistisches Design für Entwickler.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 15,
+    "title": "Rust Network Tool",
+    "description": "Analyse von Netzwerkpaketen in Echtzeit.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 16,
+    "title": "Image Optimizer",
+    "description": "Bilder verlustfrei komprimieren mit Rust.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 17,
+    "title": "Rust Cryptography",
+    "description": "Implementierung moderner Verschlüsselung.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 18,
+    "title": "Server Monitor",
+    "description": "Uptime-Tracking für deine VPS.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 19,
+    "title": "Rust Compiler Plugin",
+    "description": "Erweiterung der Rust-Sprachfunktionen.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 20,
+    "title": "Desktop App mit Tauri",
+    "description": "Cross-Platform App mit Rust Backend.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 21,
+    "title": "Bytemalte Blog",
+    "description": "Ein statischer Blog-Generator.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  },
+  {
+    "id": 22,
+    "title": "Finales Testprojekt",
+    "description": "Das letzte Projekt in der Liste.",
+    "image_url": "/assets/Logo.jpg",
+    "download_url": "#",
+    "code_url": "#"
+  }
+]

src/backend/logic.rs

@@ -9,18 +9,32 @@ pub struct ChatMessage {
 
 #[server]
 pub async fn login_or_register(user: String, pass: String) -> Result<i64, ServerFnError> {
-    use sqlx::SqlitePool;
     use bcrypt::{hash, verify, DEFAULT_COST};
+    use sqlx::SqlitePool;
     let pool = use_context::<SqlitePool>().unwrap();
-    let existing = sqlx::query!("SELECT id, password_hash FROM users WHERE username = ?", user).fetch_optional(&pool).await?;
+    let existing = sqlx::query!(
+        "SELECT id, password_hash FROM users WHERE username = ?",
+        user
+    )
+    .fetch_optional(&pool)
+    .await?;
 
     if let Some(u) = existing {
-        if verify(&pass, &u.password_hash).unwrap_or(false) { Ok(u.id.expect("ID fehlt")) }
-        else { Err(ServerFnError::new("Falsches Passwort")) }
+        if verify(&pass, &u.password_hash).unwrap_or(false) {
+            Ok(u.id.expect("ID fehlt"))
+        } else {
+            Err(ServerFnError::new("Falsches Passwort"))
+        }
     } else {
         let hashed = hash(&pass, DEFAULT_COST).unwrap();
-        let id = sqlx::query!("INSERT INTO users (username, password_hash) VALUES (?, ?)", user, hashed)
-            .execute(&pool).await?.last_insert_rowid();
+        let id = sqlx::query!(
+            "INSERT INTO users (username, password_hash) VALUES (?, ?)",
+            user,
+            hashed
+        )
+        .execute(&pool)
+        .await?
+        .last_insert_rowid();
         Ok(id)
     }
 }
@@ -28,7 +42,13 @@ pub async fn login_or_register(user: String, pass: String) -> Result<i64, Server
 #[server]
 pub async fn send_message(user_id: i64, content: String) -> Result<(), ServerFnError> {
     let pool = use_context::<sqlx::SqlitePool>().unwrap();
-    sqlx::query!("INSERT INTO messages (user_id, content) VALUES (?, ?)", user_id, content).execute(&pool).await?;
+    sqlx::query!(
+        "INSERT INTO messages (user_id, content) VALUES (?, ?)",
+        user_id,
+        content
+    )
+    .execute(&pool)
+    .await?;
     Ok(())
 }
 
@@ -36,10 +56,30 @@ pub async fn send_message(user_id: i64, content: String) -> Result<(), ServerFnE
 pub async fn get_all_messages() -> Result<Vec<ChatMessage>, ServerFnError> {
     let pool = use_context::<sqlx::SqlitePool>().unwrap();
     let rows = sqlx::query!("SELECT u.username, m.content FROM messages m JOIN users u ON m.user_id = u.id ORDER BY m.created_at ASC").fetch_all(&pool).await?;
-    Ok(rows.into_iter().map(|r| ChatMessage { username: r.username, content: r.content }).collect())
+    Ok(rows
+        .into_iter()
+        .map(|r| ChatMessage {
+            username: r.username,
+            content: r.content,
+        })
+        .collect())
 }
 
 #[server]
 pub async fn get_server_time() -> Result<String, ServerFnError> {
     Ok(chrono::Local::now().to_rfc3339())
 }
+
+#[server]
+pub async fn get_projects_from_file() -> Result<Vec<crate::pages::home::Project>, ServerFnError> {
+    use std::fs;
+
+    let data = fs::read_to_string("projects.json")
+        .map_err(|e| ServerFnError::new(format!("Konnte projects.json nicht laden: {}", e)))?;
+
+    // Hier nutzen wir leptos::serde_json
+    let projects: Vec<crate::pages::home::Project> = leptos::serde_json::from_str(&data)
+        .map_err(|e| ServerFnError::new(format!("JSON Struktur ungültig: {}", e)))?;
+
+    Ok(projects)
+}

src/pages/home.rs

@@ -1,7 +1,8 @@
+use crate::backend::logic::get_projects_from_file;
 use leptos::prelude::*;
-use leptos::html::Div;
+use leptos::wasm_bindgen::prelude::Closure; // Import direkt von leptos
 use leptos::wasm_bindgen::JsCast;
-use web_sys::HtmlElement;
+use web_sys::{IntersectionObserver, IntersectionObserverEntry};
 
 #[derive(Clone, Debug, serde::Serialize, serde::Deserialize, PartialEq)]
 pub struct Project {
@@ -13,116 +14,41 @@ pub struct Project {
     pub code_url: String,
 }
 
-fn get_all_projects() -> Vec<Project> {
-    vec![
-        Project {
-            id: 1,
-            title: "Malxte.de Persönliche Rust Website".into(),
-            description: "Meine persönliche Website kommplett mit Rust und Yew Programmiert, alle Links zu Kanälen etc.".into(),
-            image_url: "/assets/malxte_de.png".into(),
-            download_url: "#".into(),
-            code_url: "https://gitea.malxte.de/Bytemalte/malxte_de".into(),
-        },
-        Project {
-            id: 2,
-            title: "Bytemalte.de Rust Community Website".into(),
-            description: "Eine in Rust und mit Leptos Programmierte Bytemalte Community Website auf der du gerade bist :)".into(),
-            image_url: "/assets/bytemalte_de.png".into(),
-            download_url: "#".into(),
-            code_url: "https://gitea.malxte.de/Bytemalte/bytemalte_de".into(),
-        },
-        Project {
-            id: 3,
-            title: "Bytemalte Log".into(),
-            description: "Das ist das Offizielle Bytemalte Logo. (NICHT FREI VERWENDBAR!)".into(),
-            image_url: "/assets/Logo.jpg".into(),
-            download_url: "#".into(),
-            code_url: "#".into(),
-        },
-        // Füge hier weitere Projekte hinzu...
-    ]
-}
-
 #[component]
-pub fn HomePage() -> impl IntoView {
-    let items_per_page = 3;
-    let all_data = get_all_projects();
-    
-    // Initialer Zustand für SSR & Client
-    let initial_projects = all_data.iter().take(items_per_page).cloned().collect::<Vec<_>>();
-    
-    let (projects, set_projects) = signal(initial_projects);
-    let (page, set_page) = signal(1);
-    let (loading, set_loading) = signal(false);
-    let (all_loaded, set_all_loaded) = signal(all_data.len() <= items_per_page);
-    
-    let sentinel = NodeRef::<Div>::new();
-
-    let fetch_projects = move |p: usize| {
-        if all_loaded.get_untracked() || loading.get_untracked() { return; }
-        
-        set_loading.set(true);
-        let all_my_projects = get_all_projects();
-        let start = p * items_per_page; 
-        let end = (start + items_per_page).min(all_my_projects.len());
-
-        if start >= all_my_projects.len() {
-            set_all_loaded.set(true);
-            set_loading.set(false);
-            return;
-        }
-
-        // Kurze Verzögerung für den Lade-Effekt
-        set_timeout(move || {
-            let slice = all_my_projects[start..end].to_vec();
-            set_projects.update(|projs| projs.extend(slice));
-            
-            if end >= all_my_projects.len() {
-                set_all_loaded.set(true);
-            }
-            set_loading.set(false);
-        }, std::time::Duration::from_millis(200));
-    };
+fn ProjectCard(p: Project) -> impl IntoView {
+    let card_ref = NodeRef::<leptos::html::Div>::new();
+    let (is_visible, set_is_visible) = signal(false);
 
+    // Dieser Effekt aktiviert die Animation, sobald die Karte im Sichtfeld erscheint
     Effect::new(move |_| {
-        let w = window(); 
-        let w_clone = w.clone();
-        
-        let handle = gloo_events::EventListener::new(&w, "scroll", move |_| {
-            if all_loaded.get_untracked() || loading.get_untracked() { return; }
-
-            if let Some(doc) = w_clone.document() {
-                if let Some(el) = doc.document_element().and_then(|e| e.dyn_into::<HtmlElement>().ok()) {
-                    let scroll_y = w_clone.scroll_y().unwrap_or(0.0);
-                    let inner_height = w_clone.inner_height().unwrap().as_f64().unwrap_or(0.0);
-                    let total_height = el.offset_height() as f64;
-
-                    if scroll_y + inner_height >= total_height - 300.0 {
-                        let current_page = page.get_untracked();
-                        set_page.set(current_page + 1);
-                        fetch_projects(current_page);
+        if let Some(el) = card_ref.get() {
+            // Nutzung der Closure über den korrekten Pfad
+            let callback = Closure::wrap(Box::new(
+                move |entries: js_sys::Array, observer: IntersectionObserver| {
+                    for entry in entries.to_vec() {
+                        let entry: IntersectionObserverEntry = entry.unchecked_into();
+                        if entry.is_intersecting() {
+                            set_is_visible.set(true);
+                            // Beobachtung stoppen, sobald die Animation einmal getriggert wurde
+                            observer.unobserve(&entry.target());
                         }
                     }
+                },
+            )
+                as Box<dyn FnMut(js_sys::Array, IntersectionObserver)>);
+
+            let observer = IntersectionObserver::new(callback.as_ref().unchecked_ref()).unwrap();
+            observer.observe(&el);
+            callback.forget();
         }
     });
-        handle.forget();
-    });
 
     view! {
-        <div class="home-container">
-            <header class="home-hero">
-                <h1>"Bytemalte."</h1>
-                <p>"Entdecke meine neuesten Projekte."</p>
-            </header>
-
-            // Der Container MUSS die Klasse projects-grid haben
-            <div class="projects-grid">
-                <For
-                    each=move || projects.get()
-                    key=|p| p.id
-                    children=|p| {
-                        view! {
-                            <div class="project-card">
+        <div
+            node_ref=card_ref
+            class="project-card"
+            class:animate-in=move || is_visible.get()
+        >
             <div class="project-image">
                 <img src=p.image_url alt=p.title.clone() />
             </div>
@@ -137,16 +63,42 @@ pub fn HomePage() -> impl IntoView {
         </div>
     }
 }
-                />
-            </div>
 
-            <div node_ref=sentinel class="loading-trigger">
-                {move || match (loading.get(), all_loaded.get()) {
-                    (true, _) => view! { <div class="spinner"></div> }.into_any(),
-                    (_, true) => view! { <p class="end-msg">"Das waren alle Projekte ✨"</p> }.into_any(),
-                    _ => view! { <p>"Scrollen für mehr"</p> }.into_any(),
+#[component]
+pub fn HomePage() -> impl IntoView {
+    let projects_resource = Resource::new(
+        || (),
+        |_| async move { get_projects_from_file().await.unwrap_or_default() },
+    );
+
+    view! {
+        <div class="home-container">
+            <header class="home-hero">
+                <h1>"Bytemalte."</h1>
+                <p>"Entdecke meine neuesten Projekte."</p>
+            </header>
+
+            <Suspense fallback=move || view! { <div class="spinner"></div> }>
+                <div class="projects-grid">
+                    {move || {
+                        projects_resource.get().map(|all_projects| {
+                            view! {
+                                <For
+                                    each=move || all_projects.clone()
+                                    key=|p| p.id
+                                    children=|p| {
+                                        view! { <ProjectCard p=p /> }
+                                    }
+                                />
+                            }
+                        })
                     }}
                 </div>
+            </Suspense>
+
+            <footer class="home-footer">
+                <p>"Das sind alle meine Projekte ✨"</p>
+            </footer>
         </div>
     }
 }

style/main.scss

@@ -272,3 +272,159 @@ body {
 }
 
 @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); }
+}