Basic Website
This commit is contained in:
77
src/home.rs
Normal file
77
src/home.rs
Normal file
@@ -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>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user