101 lines
4.8 KiB
Rust
101 lines
4.8 KiB
Rust
// 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. My main interests are in Bitcoin, Rust, AI, Nostr and Nym" }
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="project-links-section scroll-reveal">
|
|
<h2>{ "Projects" }</h2>
|
|
<div class="call-to-action-container">
|
|
<p>{ "Check out my Projects at Bytemalte.de" }</p>
|
|
<a href="https://bytemalte.de" target="_blank" class="cta-button" rel="noopener noreferrer">
|
|
{ "Visit my Projects on Bytemalte.de" }
|
|
</a>
|
|
</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 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>
|
|
|
|
<a href="https://yakihonne.com/nprofile1qqsywy5nkmx30t2lpthan9dz8aan20afs60fftxdmejp7m8e6836tnqpzemhxue69uhhyetvv9ujuvrcvd5xzapwvdhk6qg4waehxw309aex2mrp0yhx6ctv0p6x2tnyv5q3vamnwvaz7tmjv4kxz7fwwpexjmtpdshxuet5qy28wumn8ghj7un9d3shjtnyv9kh2uewd9hsz9nhwden5te0wfjkccte9ehx7um5wghxyctwvsq3camnwvaz7tmwdaehgu3dxqcju7tpdd5ksmmwdejjucm0d52nstq2" target="_blank" class="social-card">
|
|
<span class="icon">{ "🌐" }</span>
|
|
<h3>{ "Nostr (Yakihonne)" }</h3>
|
|
<p>{ "Posts, Articles & Updates" }</p>
|
|
<p>{ "NIP-05: malxte@bytemalte.de" }</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>
|
|
|
|
<a href="https://tiktok.com/@bytemalte" target="_blank" class="social-card">
|
|
<span class="icon">{ "▶️" }</span>
|
|
<h3>{ "Tiktok" }</h3>
|
|
<p>{ "Short facts & News" }</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 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>
|
|
}
|
|
}
|