Migrate top_component.rs components

src/app/components/mod.rs

@@ -5,4 +5,7 @@ mod link;
 pub use link::Link;
 
 mod social_link;
-pub use social_link::{SocialLinkContainer, SocialLink};
+pub use social_link::{SocialLinkContainer, SocialLink};
+
+mod top_component;
+pub use top_component::TopComponent;

src/app/components/social_link.rs

@@ -19,7 +19,7 @@ pub fn SocialLink(
     icon: Icon,
 ) -> impl IntoView {
     view! {
-        <a class="mx-auto scale-150 mb-1" href=url target="_blank">
+        <a href=url target="_blank">
             <Icon icon=icon class="mx-auto scale-150 mb-1" />
             <span class="text-sm">{ children() }</span>
         </a>

src/app/components/top_component.rs

@@ -0,0 +1,34 @@
+use leptos::*;
+use leptos_icons::FaIcon::{FaGithubBrands, FaLinkedinBrands, FaEnvelopeSolid};
+use leptos_icons::*;
+
+use super::*;
+
+#[component]
+pub fn TopComponent() -> impl IntoView {
+    view! {
+        <div class="min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative">
+            <div class="flex-1 p-10 justify-center items-center">
+                <img src="https://devemyhg.lycee-darchicourt.net/wp-content/uploads/2018/01/No-picture.png" alt="Ma photo" class="mx-auto rounded-lg" />
+            </div>
+            <div class="flex-1 p-10 flex flex-col gap-3">
+                <h1 class="font-bold text-3xl">Florian RICHER</h1>
+                <h4 class="font-semibold text-xl">"Développeur d´application Web et Mobile"</h4>
+                <p class="font-normal text-base">
+                    r#"
+                    Découvrez mon parcours en développement, où ma passion précoce pour la programmation a débuté avec la
+                    création d'applications 3D utilisant OpenGL et s'est étendue à la maîtrise de diverses technologies,
+                    notamment le développement Web avec React, Ruby on Rails, Symfony, Tailwindcss et Bootstrap, la réalisation
+                    d'applications mobiles avec Flutter et le développement système en Rust, toujours animé par mon désir
+                    inépuisable d'apprendre et ma curiosité sans bornes.
+                    "#
+                </p>
+                <SocialLinkContainer>
+                    <SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</SocialLink>
+                    <SocialLink icon=Icon::from(FaLinkedinBrands) url="https://www.linkedin.com/in/florian-richer-80960b129/".to_string()>Linkedin</SocialLink>
+                    <SocialLink icon=Icon::from(FaEnvelopeSolid) url="mailto:florian.richer@protonmail.com".to_string()>Mail</SocialLink>
+                </SocialLinkContainer>
+            </div>
+        </div>
+    }
+}