tanguy/tanguy.gerome.fi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: tanguy:resume-local
Branches Tags
tanguy:master
tanguy:resume-local
..
compare: tanguy:master
Branches Tags
tanguy:master
tanguy:resume-local

1 commit
resume-loc ... master

Author SHA1 Message Date
Tanguy Gérôme
af93cd1f00
Make gallery images clickable to display full-sized image 2025-08-31 12:57:52 +03:00
3 changed files with 23 additions and 76 deletions
Show stats Expand all files Collapse all files

46
src/app.rs
View file

@ -1,5 +1,5 @@
use leptos::prelude::*;
use leptos_meta::{provide_meta_context, MetaTags, Style, Stylesheet, Title};
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet, Title};
use leptos_router::{
components::{Outlet, ParentRoute, Route, Router, Routes, A}, path
};
@ -198,44 +198,11 @@ pub fn Resume() -> impl IntoView {
let resume = Resource::new(move || i18n.get_locale(), move |locale| get_resume(locale.to_string()));
view! {
<main class="main-width">
<Title text="tanguy.gerome.cv"/>
<Style>
"
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>
<img
class="resume-image"
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"
/>
<Suspense
fallback=move || view! { <div>"Loading..."</div> }
>
@ -249,7 +216,6 @@ pub fn Resume() -> impl IntoView {
})
}
</Suspense>
// <label class="resume-image-label">Portrait by Jutta Kivilompolo</label>
</main>
}
}

4
src/gallery.rs
View file

@ -118,7 +118,9 @@ pub fn GalleryEntry() -> impl IntoView {
view! {
<div class="main-width gallery-open-entry">
<h2 class="gallery-title">{image.title}</h2>
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
<a class="gallery-image-details-link" href=format!("https://directus.gerome.fi/assets/{}?format=auto&quality=95", image.watermarked.id)>
<img src=format!("https://directus.gerome.fi/assets/{}?width=1600&height=1600&fit=inside&format=auto&quality=90&withoutEnlargement=true", image.watermarked.id)/>
</a>
{if subtitle.len() > 0 {
Some(view!{<h4 class="gallery-subtitle">{subtitle}</h4>})
} else {

49
style/main.scss
View file

@ -257,12 +257,9 @@ body {
.resume-image {
float: right;
height: 250px;
width: 250px;
margin: 0px;
margin-top: 0px;
object-fit: cover;
position: relative;
max-width: 300px;
width: 100%;
margin: 16px;
@media all and (max-width: 550px) {
float: unset;
@ -271,31 +268,8 @@ body {
margin-top: 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 {
width: 100%;
display: flex;
@ -425,12 +399,17 @@ body {
align-items: flex-start;
margin-top: 32px;
img {
object-fit: contain;
width: 100%;
max-height: 90vh;
max-width: 1232px;
align-self: center;
.gallery-image-details-link {
display: block;
margin: auto;
img {
object-fit: contain;
width: 100%;
max-height: 90vh;
max-width: 1232px;
align-self: center;
}
}
.gallery-title {