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 = [
|
leptos_icons = { version = "0.1.0", features = [
|
||||||
"FiExternalLink",
|
"FiExternalLink",
|
||||||
"FaGithubBrands",
|
"FaGithubBrands",
|
||||||
|
"FaLinkedinBrands",
|
||||||
|
"FaEnvelopeSolid",
|
||||||
]}
|
]}
|
||||||
|
|
||||||
# dependecies for client (enable when csr or hydrate set)
|
# dependecies for client (enable when csr or hydrate set)
|
||||||
|
|
|
||||||
|
|
@ -6,3 +6,6 @@ pub use link::Link;
|
||||||
|
|
||||||
mod social_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,
|
icon: Icon,
|
||||||
) -> impl IntoView {
|
) -> impl IntoView {
|
||||||
view! {
|
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" />
|
<Icon icon=icon class="mx-auto scale-150 mb-1" />
|
||||||
<span class="text-sm">{ children() }</span>
|
<span class="text-sm">{ children() }</span>
|
||||||
</a>
|
</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::*;
|
||||||
use leptos_meta::*;
|
use leptos_meta::*;
|
||||||
use leptos_router::*;
|
use leptos_router::*;
|
||||||
use leptos_icons::FaIcon::FaGithubBrands;
|
|
||||||
use leptos_icons::*;
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn App() -> impl IntoView {
|
pub fn App() -> impl IntoView {
|
||||||
|
|
@ -23,30 +21,9 @@ pub fn App() -> impl IntoView {
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn Home() -> impl IntoView {
|
fn Home() -> impl IntoView {
|
||||||
let (count, set_count) = create_signal(0);
|
|
||||||
|
|
||||||
view! {
|
view! {
|
||||||
<main class="my-0 mx-auto max-w-3xl text-center">
|
<main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
|
||||||
<h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
|
<components::TopComponent/>
|
||||||
<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>
|
</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