Skip to content

Commit

Permalink
Work on badges
Browse files Browse the repository at this point in the history
  • Loading branch information
@CodingTil
CodingTil committed Feb 6, 2024
1 parent b2fcfe1 commit 18a50a3
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 18 deletions.
110 changes: 95 additions & 15 deletions src/components/icon_badges.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,16 @@ pub fn get_icon_badge(name: &str) -> Option<Html> {
"lwjgl" => Some(html! {<LWJGL />}),
"pytorch" => Some(html! {<PyTorch />}),
"pyterrier" => Some(html! {<PyTerrier />}),
"html" => Some(html! {<HTML />}),
"css" => Some(html! {<CSS />}),
"js" => Some(html! {<JS />}),
"javascript" => Some(html! {<JS />}),
"vue" => Some(html! {<Vue />}),
"vuejs" => Some(html! {<Vue />}),
"vue.js" => Some(html! {<Vue />}),
"nuxt" => Some(html! {<Vue />}),
"nuxtjs" => Some(html! {<Vue />}),
"nuxt.js" => Some(html! {<Vue />}),
_ => None,
};
}
Expand Down Expand Up @@ -56,7 +66,7 @@ pub fn Java() -> Html {
.unwrap();
html! {
<a href="https://www.java.com/">
<div class={String::from("fill-[#007396] bg-[#d8dee9] hover:bg-[#007396] hover:fill-[#d8dee9] transition-colors duration-200 my-2 p-1 min-h-10 text-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("fill-[#007396] bg-[#d8dee9] hover:bg-[#007396] hover:fill-[#d8dee9] transition-colors duration-200 p-1 min-h-10 text-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<path class="icon" d="M 28.1875 0 C 30.9375 6.363281 18.328125 10.292969 17.15625 15.59375 C 16.082031 20.464844 24.648438 26.125 24.65625 26.125 C 23.355469 24.109375 22.398438 22.449219 21.09375 19.3125 C 18.886719 14.007813 34.535156 9.207031 28.1875 0 Z M 36.5625 8.8125 C 36.5625 8.8125 25.5 9.523438 24.9375 16.59375 C 24.6875 19.742188 27.847656 21.398438 27.9375 23.6875 C 28.011719 25.558594 26.0625 27.125 26.0625 27.125 C 26.0625 27.125 29.609375 26.449219 30.71875 23.59375 C 31.949219 20.425781 28.320313 18.285156 28.6875 15.75 C 29.039063 13.324219 36.5625 8.8125 36.5625 8.8125 Z M 19.1875 25.15625 C 19.1875 25.15625 9.0625 25.011719 9.0625 27.875 C 9.0625 30.867188 22.316406 31.089844 31.78125 29.25 C 31.78125 29.25 34.296875 27.519531 34.96875 26.875 C 28.765625 28.140625 14.625 28.28125 14.625 27.1875 C 14.625 26.179688 19.1875 25.15625 19.1875 25.15625 Z M 38.65625 25.15625 C 37.664063 25.234375 36.59375 25.617188 35.625 26.3125 C 37.90625 25.820313 39.84375 27.234375 39.84375 28.84375 C 39.84375 32.46875 34.59375 35.875 34.59375 35.875 C 34.59375 35.875 42.71875 34.953125 42.71875 29 C 42.71875 26.296875 40.839844 24.984375 38.65625 25.15625 Z M 16.75 30.71875 C 15.195313 30.71875 12.875 31.9375 12.875 33.09375 C 12.875 35.417969 24.5625 37.207031 33.21875 33.8125 L 30.21875 31.96875 C 24.351563 33.847656 13.546875 33.234375 16.75 30.71875 Z M 18.1875 35.9375 C 16.058594 35.9375 14.65625 37.222656 14.65625 38.1875 C 14.65625 41.171875 27.371094 41.472656 32.40625 38.4375 L 29.21875 36.40625 C 25.457031 37.996094 16.015625 38.238281 18.1875 35.9375 Z M 11.09375 38.625 C 7.625 38.554688 5.375 40.113281 5.375 41.40625 C 5.375 48.28125 40.875 47.964844 40.875 40.9375 C 40.875 39.769531 39.527344 39.203125 39.03125 38.9375 C 41.933594 45.65625 9.96875 45.121094 9.96875 41.15625 C 9.96875 40.253906 12.320313 39.390625 14.5 39.8125 L 12.65625 38.75 C 12.113281 38.667969 11.589844 38.636719 11.09375 38.625 Z M 44.625 43.25 C 39.226563 48.367188 25.546875 50.222656 11.78125 47.0625 C 25.542969 52.695313 44.558594 49.535156 44.625 43.25 Z" />
<title>{"Java"}</title>
Expand All @@ -76,10 +86,10 @@ pub fn Python() -> Html {
.unwrap();
html! {
<a href="https://www.python.org/">
<div class={String::from("fill-[#3776AB] bg-[#d8dee9] hover:bg-[#3776AB] hover:fill-[#d8dee9] transition-colors duration-200 my-2 p-1 min-h-10 text-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path class="icon" d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z" />
<title>{"Python"}</title>
<div class={String::from("fill-[#3776AB] bg-[#d8dee9] hover:bg-[#3776AB] hover:fill-[#d8dee9] transition-colors duration-200 p-1 min-h-10 text-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 256 255">
<path d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072M92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13" />
<path fill="#ffc331" d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897m34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13" />
</svg>
</div>
</a>
Expand All @@ -96,7 +106,7 @@ pub fn Rust() -> Html {
.unwrap();
html! {
<a href="https://www.rust-lang.org/">
<div class={String::from("text-[#8B3103] bg-[#d8dee9] hover:bg-[#8B3103] hover:text-[#d8dee9] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("text-[#8B3103] bg-[#d8dee9] hover:bg-[#8B3103] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-rust" style="font-size: 40px;"/>
</div>
</a>
Expand All @@ -113,7 +123,7 @@ pub fn WASM() -> Html {
.unwrap();
html! {
<a href="https://webassembly.org/">
<div class={String::from("bg-[#d8dee9] hover:bg-[#644eef] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("bg-[#d8dee9] hover:bg-[#644eef] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<img width="40px" height="35px" alt="WebAssembly Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/WebAssembly_Logo.svg/68px-WebAssembly_Logo.svg.png?useskin=vector" />
</div>
</a>
Expand All @@ -130,7 +140,7 @@ pub fn GPU() -> Html {
.unwrap();
html! {
<a href="https://wgpu.rs/">
<div class={String::from("bg-[#d8dee9] hover:bg-[#a3be8c] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("bg-[#d8dee9] hover:bg-[#a3be8c] transition-colors duration-200 p-1 min-h-10 text-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<img src="https://wgpu.rs/logo.min.svg" width="33px" alt="WebGPU Logo" />
</div>
</a>
Expand All @@ -147,7 +157,7 @@ pub fn Git() -> Html {
.unwrap();
html! {
<a href="https://git-scm.com/">
<div class={String::from("text-[#ef5032] bg-[#d8dee9] hover:bg-[#ef5032] hover:text-[#d8dee9] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("text-[#ef5032] bg-[#d8dee9] hover:bg-[#ef5032] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-git-alt" style="font-size: 40px;"/>
</div>
</a>
Expand All @@ -164,7 +174,7 @@ pub fn LWJGL() -> Html {
.unwrap();
html! {
<a href="https://www.lwjgl.org//">
<div class={String::from("bg-[#d8dee9] hover:bg-[#b9baea] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<div class={String::from("bg-[#d8dee9] hover:bg-[#b9baea] transition-colors duration-200 mx-auto p-1 min-h-10 text-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<img height="40px" width="35px" alt="LWJGL Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/LWJGL_logo.svg/272px-LWJGL_logo.svg.png?useskin=vector" />
</div>
</a>
Expand All @@ -180,9 +190,11 @@ pub fn PyTorch() -> Html {
)
.unwrap();
html! {
<a href="https://pytorch.org//">
<div class={String::from("bg-[#d8dee9] hover:bg-[#5e81ac] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<img width="35px" alt="PyTorch Logo" src="https://upload.wikimedia.org/wikipedia/commons/1/10/PyTorch_logo_icon.svg" />
<a href="https://pytorch.org/">
<div class={String::from("fill-[#ee4c2c] bg-[#d8dee9] hover:bg-[#ee4c2c] hover:fill-[#d8dee9] transition-colors duration-200 mx-auto p-1 min-h-10 text-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32">
<path d="M16.005.052L6.636 9.427a13.106 13.106 0 0 0 0 18.636a13.105 13.105 0 0 0 18.629 0c5.297-5.188 5.297-13.563.115-18.636l-2.317 2.313c3.859 3.859 3.859 10.145 0 14.005c-3.86 3.859-10.145 3.859-14.005 0c-3.86-3.86-3.86-10.147 0-14.005l6.177-6.172l.776-.885zm4.744 5.183c-.973 0-1.765.792-1.765 1.765a1.763 1.763 0 1 0 1.765-1.765" />
</svg>
</div>
</a>
}
Expand All @@ -198,8 +210,76 @@ pub fn PyTerrier() -> Html {
.unwrap();
html! {
<a href="https://pyterrier.readthedocs.io/en/latest//">
<div class={String::from("bg-[#d8dee9] hover:bg-[#8fbcbb] transition-colors duration-200 my-2 p-1 min-h-10 text-center content-center items-center whitespace-nowrap block rounded ") + style_class.get_class_name()}>
<img width="35px" alt="PyTerrier Logo" src="http://terrier.org/img/terrier-logo-large-transparent.png" />
<div class={String::from("text-[#bf616a] bg-[#d8dee9] hover:bg-[#bf616a] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-solid fa-dog" style="font-size: 35px;"/>
</div>
</a>
}
}

#[styled_component]
pub fn HTML() -> Html {
let style_class = style!(
r#"
aspect-ratio: 1 / 1;
"#
)
.unwrap();
html! {
<a href="https://www.w3schools.com/html/">
<div class={String::from("text-[#e54c22] bg-[#d8dee9] hover:bg-[#e54c22] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-html5" style="font-size: 40px;"/>
</div>
</a>
}
}

#[styled_component]
pub fn CSS() -> Html {
let style_class = style!(
r#"
aspect-ratio: 1 / 1;
"#
)
.unwrap();
html! {
<a href="https://www.w3schools.com/css/">
<div class={String::from("text-[#214ce6] bg-[#d8dee9] hover:bg-[#214ce6] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-css3-alt" style="font-size: 40px;"/>
</div>
</a>
}
}

#[styled_component]
pub fn JS() -> Html {
let style_class = style!(
r#"
aspect-ratio: 1 / 1;
"#
)
.unwrap();
html! {
<a href="https://www.javascript.com/">
<div class={String::from("text-[#e8d44d] bg-[#d8dee9] hover:bg-[#e8d44d] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-square-js" style="font-size: 40px;"/>
</div>
</a>
}
}

#[styled_component]
pub fn Vue() -> Html {
let style_class = style!(
r#"
aspect-ratio: 1 / 1;
"#
)
.unwrap();
html! {
<a href="https://vuejs.org/">
<div class={String::from("text-[#40b27f] bg-[#d8dee9] hover:bg-[#40b27f] hover:text-[#d8dee9] transition-colors duration-200 p-1 min-h-10 ext-center flex justify-center content-center items-center whitespace-nowrap block rounded drop-shadow-md ") + style_class.get_class_name()}>
<i class="fa-brands fa-vuejs" style="font-size: 40px;"/>
</div>
</a>
}
Expand Down
7 changes: 6 additions & 1 deletion src/components/project.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ pub fn ProjectCard(props: &ProjectCardProps) -> Html {
tagline,
url: _,
date_range: _,
skills: _,
skills: tags,
filters: _,
coauthors: _,
report: _,
Expand Down Expand Up @@ -109,6 +109,11 @@ pub fn ProjectCard(props: &ProjectCardProps) -> Html {
<div class={String::from("font-semibold absolute inset-0 p-4 flex items-center text-center justify-center backdrop-blur-sm backdrop-contrast-40 backdrop-brightness-40 opacity-0 group-hover:opacity-70 transition-opacity duration-500 ") + &color}>
{tagline.clone()}
</div>
<div class="absolute bottom-0 right-0 p-2 z-10 flex items-end justify-end">
<div class="transform scale-50 translate-x-1/4 translate-y-1/3 p-1 rounded backdrop-blur bg-black/20 shadow-lg shadow-black/20">
<BadgesStrip tags={tags.clone()} scale={80} />
</div>
</div>
</div>
<br />
<span class="text-foreground-primary font-semibold">
Expand Down
2 changes: 1 addition & 1 deletion src/content/de/projects/2021-02-01_SimpleChat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ color: bg-green-600
tagline: Vereinfachte full-stack Chat App
url: https://github.com/CodingTil/SimpleChat-NuxtJS-Flask
date_range: Februar 2021
skills: [nuxt.js, python, git]
skills: [nuxt.js, html, css, js, python, git]
filters: [web]
---
# Übersicht
Expand Down
2 changes: 1 addition & 1 deletion src/content/en/projects/2021-02-01_SimpleChat.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ color: bg-green-600
tagline: Simplified full-stack chat application
url: https://github.com/CodingTil/SimpleChat-NuxtJS-Flask
date_range: February 2021
skills: [nuxt.js, python, git]
skills: [nuxt.js, html, css, js, python, git]
filters: [web]
---
# Overview
Expand Down

0 comments on commit 18a50a3

Please sign in to comment.