Migrate top_component.rs components
This commit is contained in:
parent
35d4878bb7
commit
c9fc2d59c6
7 changed files with 43 additions and 102 deletions
|
|
@ -21,6 +21,8 @@ cfg-if = "1.0"
|
|||
leptos_icons = { version = "0.1.0", features = [
|
||||
"FiExternalLink",
|
||||
"FaGithubBrands",
|
||||
"FaLinkedinBrands",
|
||||
"FaEnvelopeSolid",
|
||||
]}
|
||||
|
||||
# dependecies for client (enable when csr or hydrate set)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
34
src/app/components/top_component.rs
Normal file
34
src/app/components/top_component.rs
Normal file
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,6 @@ mod components;
|
|||
use leptos::*;
|
||||
use leptos_meta::*;
|
||||
use leptos_router::*;
|
||||
use leptos_icons::FaIcon::FaGithubBrands;
|
||||
use leptos_icons::*;
|
||||
|
||||
#[component]
|
||||
pub fn App() -> impl IntoView {
|
||||
|
|
@ -23,30 +21,9 @@ pub fn App() -> impl IntoView {
|
|||
|
||||
#[component]
|
||||
fn Home() -> impl IntoView {
|
||||
let (count, set_count) = create_signal(0);
|
||||
|
||||
view! {
|
||||
<main class="my-0 mx-auto max-w-3xl text-center">
|
||||
<h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
|
||||
<p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
|
||||
<components::Tag>Salut</components::Tag>
|
||||
<components::Link>Salut</components::Link>
|
||||
<components::SocialLinkContainer>
|
||||
<components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
|
||||
<components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
|
||||
</components::SocialLinkContainer>
|
||||
<button
|
||||
class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
|
||||
on:click=move |_| set_count.update(|count| *count += 1)
|
||||
>
|
||||
"Something's here | "
|
||||
{move || if count() == 0 {
|
||||
"Click me!".to_string()
|
||||
} else {
|
||||
count().to_string()
|
||||
}}
|
||||
" | Some more text"
|
||||
</button>
|
||||
<main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
|
||||
<components::TopComponent/>
|
||||
</main>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
#top {
|
||||
@apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
|
||||
|
||||
& > div {
|
||||
@apply flex-1 p-10;
|
||||
}
|
||||
|
||||
& > .top__image {
|
||||
@apply flex justify-center items-center;
|
||||
|
||||
& > img {
|
||||
@apply mx-auto rounded-lg;
|
||||
}
|
||||
}
|
||||
|
||||
& > .top__presentation {
|
||||
@apply flex flex-col gap-3;
|
||||
|
||||
& > h1 {
|
||||
@apply font-bold text-3xl;
|
||||
}
|
||||
|
||||
& > h4 {
|
||||
@apply font-semibold text-xl;
|
||||
}
|
||||
|
||||
& > p {
|
||||
@apply font-normal text-base;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import SocialLink from './social_link/SocialLink'
|
||||
import SocialLinks from './social_link/SocialLinks'
|
||||
import './TopComponent.scss'
|
||||
import { FaEnvelope, FaGithub, FaLinkedin } from 'react-icons/fa'
|
||||
|
||||
function TopComponent() {
|
||||
return (
|
||||
<div id="top">
|
||||
<div className='top__image'>
|
||||
<img src="https://devemyhg.lycee-darchicourt.net/wp-content/uploads/2018/01/No-picture.png" alt="Ma photo" />
|
||||
</div>
|
||||
<div className='top__presentation'>
|
||||
<h1>Florian RICHER</h1>
|
||||
<h4>Développeur d´application Web et Mobile</h4>
|
||||
<p>
|
||||
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>
|
||||
<SocialLinks>
|
||||
<SocialLink
|
||||
icon={<FaGithub />}
|
||||
name="Github"
|
||||
url="https://github.com/mrdev023"
|
||||
/>
|
||||
<SocialLink
|
||||
icon={<FaLinkedin />}
|
||||
name="Linkedin"
|
||||
url="https://www.linkedin.com/in/florian-richer-80960b129/"
|
||||
/>
|
||||
<SocialLink
|
||||
icon={<FaEnvelope />}
|
||||
name="Mail"
|
||||
url="mailto:florian.richer@protonmail.com"
|
||||
/>
|
||||
</SocialLinks>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default TopComponent
|
||||
Loading…
Reference in a new issue