Local changes for exporting resume pdf

This commit is contained in:
Tanguy Gérôme 2025-08-30 11:19:53 +03:00
parent 47e4cccb5d
commit 2fefcd41cf
Signed by untrusted user who does not match committer: tanguy
GPG key ID: 10B2947233740B88
2 changed files with 73 additions and 9 deletions

View file

@ -1,5 +1,5 @@
use leptos::prelude::*; use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title}; use leptos_meta::{provide_meta_context, MetaTags, Style, Stylesheet, Title};
use leptos_router::{ use leptos_router::{
components::{Outlet, ParentRoute, Route, Router, Routes, A}, path components::{Outlet, ParentRoute, Route, Router, Routes, A}, path
}; };
@ -198,11 +198,44 @@ pub fn Resume() -> impl IntoView {
let resume = Resource::new(move || i18n.get_locale(), move |locale| get_resume(locale.to_string())); let resume = Resource::new(move || i18n.get_locale(), move |locale| get_resume(locale.to_string()));
view! { view! {
<main class="main-width"> <main class="main-width">
<img <Title text="tanguy.gerome.cv"/>
class="resume-image" <Style>
src="https://directus.gerome.fi/assets/0c33f439-4e1b-4a1f-a1ab-df1cc9b60f23?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true" "
alt="Tanguy Gérôme - portait" header, footer {
/> display: none!important;
}
h1, h2 {
color: #317349!important;
}
h1 {
margin-top: 16px!important;
}
h2 {
margin-top: 32px!important;
}
a {
text-decoration: none;
color: #0F0F0F!important;
}
main {
margin-top: 0!important;
}
"
</Style>
<picture class="resume-image">
<img
// src="https://directus.gerome.fi/assets/0c33f439-4e1b-4a1f-a1ab-df1cc9b60f23?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true"
// src="https://directus.gerome.fi/assets/efdc0b69-7a48-4434-bf07-d406e42a971e?width=1600&fit=inside&format=auto&quality=95&withoutEnlargement=true"
src="https://directus.gerome.fi/assets/4f4838be-9eb2-4a55-95de-8fe5c86f935a?width=600&height=600&fit=cover&format=auto&quality=90&withoutEnlargement=true"
alt="Portrait by Jutta Kivilompolo"
/>
<label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
</picture>
<Suspense <Suspense
fallback=move || view! { <div>"Loading..."</div> } fallback=move || view! { <div>"Loading..."</div> }
> >
@ -216,6 +249,7 @@ pub fn Resume() -> impl IntoView {
}) })
} }
</Suspense> </Suspense>
// <label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
</main> </main>
} }
} }

View file

@ -257,9 +257,12 @@ body {
.resume-image { .resume-image {
float: right; float: right;
max-width: 300px; height: 250px;
width: 100%; width: 250px;
margin: 16px; margin: 0px;
margin-top: 0px;
object-fit: cover;
position: relative;
@media all and (max-width: 550px) { @media all and (max-width: 550px) {
float: unset; float: unset;
@ -268,8 +271,31 @@ body {
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
>img {
max-width: 100%;
max-height: 100%;
}
label {
display: block;
text-align: center;
font-size: 10px;
transform: rotate(-90deg) translate(0%, 101%);
position: absolute;
// right: 0%;
top: 0%;
height: 100%;
width: 100%;
}
} }
// label.resume-image-label {
// display: block;
// text-align: center;
// font-size: 10px;
// }
.gallery-entries, .blog-entries { .gallery-entries, .blog-entries {
width: 100%; width: 100%;
display: flex; display: flex;
@ -289,9 +315,13 @@ body {
.blog-illustration { .blog-illustration {
position: relative; position: relative;
height: min(60vh, 75vw);
display: flex;
img { img {
max-height: 60vh; max-height: 60vh;
height: 100%;
width: 100vw; width: 100vw;
max-width: 100vw; max-width: 100vw;
object-fit: cover; object-fit: cover;