Migrate top_component.rs components

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>
+    }
+}