Basic Website

src/home.rs

@@ -0,0 +1,77 @@
+// Import the Yew prelude module, including the 'html!' macro and necessary traits.
+use yew::prelude::*;
+
+/// The Home functional component for the landing page.
+#[function_component(Home)]
+pub fn home() -> Html {
+    // The 'html!' macro is used to define the component's structure using JSX-like syntax.
+    html! {
+        // Main container for layout purposes.
+        <div class="container">
+            // 1. The Hero section (Topmost part of the page).
+            <header class="hero-section fade-in">
+                // Main title/headline.
+                <h1 class="glitch-text">{ "I am Malxte" }</h1>
+                // Subtitle/tagline below the main headline.
+                <p class="subtitle">{ "Developer | Creator | Tech Enthusiast" }</p>
+            </header>
+
+            // 2. The 'About Me' section (Appears as the user scrolls down).
+            <section class="about-section scroll-reveal">
+                <h2>{ "About me" }</h2>
+                // Card containing the biographical text.
+                <div class="bio-card">
+                    <p>
+                        { "Hi, I am a young highly motivated Rust 🦀 programmer and Nostr Lover ❤️. I Like to share my Projects, Tech News and Tips." }
+                    </p>
+                    <p>
+                        { "When I'm not coding, I create content or work on my own projects, such as bytemalte.de a community website or my socialmedia app maltemedia." }
+                    </p>
+                </div>
+            </section>
+
+            // 3. Social Media Links section (Links that animate on hover).
+            <section class="links-section scroll-reveal">
+                <h2>{ "Connect" }</h2>
+                // Grid layout for the social media cards.
+                <div class="grid-links">
+                    
+                    // Link to bytemalte.de
+                    <a href="https://bytemalte.de" target="_blank" class="social-card">
+                        <span class="icon">{ "🌐" }</span>
+                        <h3>{ "ByteMalte.de" }</h3>
+                        <p>{ "Meine Website" }</p>
+                    </a>
+                    
+                    // Link to YouTube
+                    <a href="https://www.youtube.com/@bytemalte" target="_blank" class="social-card">
+                        <span class="icon">{ "▶️" }</span>
+                        <h3>{ "YouTube" }</h3>
+                        <p>{ "Tutorials & Content" }</p>
+                    </a>
+
+                    // Link to X (Twitter)
+                    <a href="https://x.com/@malxte" target="_blank" class="social-card">
+                        <span class="icon">{ "✖️" }</span>
+                        <h3>{ "X (Twitter)" }</h3>
+                        <p>{ "Gedanken & Updates" }</p>
+                    </a>
+
+                    // Link to Gitea
+                    <a href="https://gitea.malxte.de/Bytemalte" target="_blank" class="social-card">
+                        <span class="icon">{ "💻" }</span>
+                        <h3>{ "My Gitea" }</h3>
+                        <p>{ "Mein Code" }</p>
+                    </a>
+
+                    // Link to Reddit
+                    <a href="https://reddit.com/user/ByteMalxte" target="_blank" class="social-card">
+                        <span class="icon">{ "💬" }</span>
+                        <h3>{ "Reddit" }</h3>
+                        <p>{ "Community Posts & Updates" }</p>
+                    </a>
+                </div>
+            </section>
+        </div>
+    }
+}