Skip to content

Commit 475fa7b

Browse files
CodingTilCodingTil
committed
Improve color theme and layout
1 parent 6617946 commit 475fa7b

File tree

7 files changed

+322
-83
lines changed

7 files changed

+322
-83
lines changed

‎index.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,20 @@
1010

1111
<link rel="preconnect" href="https://fonts.googleapis.com" />
1212
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
13-
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
13+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
1414

1515
<link data-trunk rel="copy-dir" href="./styles" />
1616
<link data-trunk rel="css" href="styles/main.css" />
17+
<style>
18+
html {
19+
scroll-behavior: smooth;
20+
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
21+
scroll-padding-top: 5rem;
22+
}
23+
h1, h2, h3, .hero-title {
24+
font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
25+
}
26+
</style>
1727

1828
<link data-trunk rel="copy-dir" href="./src/images" />
1929
<link data-trunk rel="copy-dir" href="./src/public" />

‎src/components/header.rs‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,53 @@ pub fn Header() -> Html {
2121

2222
let switch_locale = Callback::from(move |_| localization.set(other_locale.clone()));
2323

24+
let header_css = css!(
25+
r#"
26+
backdrop-filter: blur(12px) saturate(180%);
27+
-webkit-backdrop-filter: blur(12px) saturate(180%);
28+
background-color: rgba(15, 23, 42, 0.85);
29+
border-bottom: 1px solid rgba(203, 213, 225, 0.1);
30+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
31+
"#
32+
);
33+
2434
html! {
25-
<div class="h-20 sticky top-0 z-50 w-full border-solid border-b-2 bg-background-primary border-background-secondary">
26-
<nav class="container mx-auto pt-5 pb-3 max-w-7xl px-4 xl:px-0 flex justify-between">
27-
<Link<Route> to={Route::Home} classes="group flex items-center space-x-2">
28-
<div class="text-rainbow-1 group-hover:brightness-125">
29-
<i class="fa-solid fa-trademark text-3xl" style="filter:drop-shadow(1px 1px 1px black)"></i>
35+
<div class={classes!("h-20", "sticky", "top-0", "z-50", "w-full", header_css)}>
36+
<nav class="container mx-auto pt-5 pb-3 max-w-7xl px-4 xl:px-0 flex justify-between items-center">
37+
<Link<Route> to={Route::Home} classes={css!(r#"
38+
display: flex;
39+
align-items: center;
40+
gap: 0.75rem;
41+
transition: all 0.2s ease;
42+
"#)}>
43+
<div class={css!(r#"
44+
transition: all 0.2s ease;
45+
&:hover {
46+
transform: scale(1.1);
47+
}
48+
"#)}>
49+
<i class="fa-solid fa-trademark text-3xl text-rainbow-1" style="filter:drop-shadow(2px 2px 4px rgba(96, 165, 250, 0.3))"></i>
3050
</div>
31-
<span class="text-foreground-secondary text-lg font-bold">{"Home"}</span>
51+
<span class="text-foreground-primary text-lg font-semibold">{"Home"}</span>
3252
</Link<Route>>
33-
<button onclick={switch_locale} class="group flex items-center space-x-2">
34-
<span class="sr-only text-foreground-secondary text-lg font-bold">{"Switch language to "}</span>
35-
<span class="text-foreground-secondary text-lg font-bold">{other_locale_str}</span>
36-
<div class="text-rainbow-1 group-hover:brightness-125">
37-
<i class="fa-solid fa-language text-3xl" style="filter:drop-shadow(1px 1px 1px black)"></i>
38-
</div>
53+
<button onclick={switch_locale} class={css!(r#"
54+
display: flex;
55+
align-items: center;
56+
gap: 0.75rem;
57+
padding: 0.5rem 1rem;
58+
border-radius: 0.5rem;
59+
background-color: rgba(51, 65, 85, 0.5);
60+
transition: all 0.2s ease;
61+
border: 1px solid rgba(203, 213, 225, 0.1);
62+
&:hover {
63+
background-color: rgba(71, 85, 105, 0.6);
64+
transform: translateY(-2px);
65+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
66+
}
67+
"#)}>
68+
<span class="sr-only">{"Switch language to "}</span>
69+
<span class="text-foreground-primary text-lg font-semibold">{other_locale_str}</span>
70+
<i class="fa-solid fa-language text-2xl text-rainbow-1"></i>
3971
</button>
4072
</nav>
4173
</div>

‎src/components/project.rs‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -100,24 +100,60 @@ pub fn ProjectCard(props: &ProjectCardProps) -> Html {
100100
_ => panic!("Invalid slug: {}", slug),
101101
};
102102

103+
let card_css = css!(
104+
r#"
105+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
106+
border: 1px solid rgba(203, 213, 225, 0.1);
107+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
108+
109+
&:hover {
110+
transform: translateY(-8px);
111+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
112+
border-color: rgba(203, 213, 225, 0.2);
113+
}
114+
"#
115+
);
116+
103117
html! {
104-
<div class={String::from("py-3 overflow-auto mx-2 ") + size_css.get_class_name()}>
118+
<div class={classes!("py-3", "overflow-auto", "mx-2", size_css)}>
105119
<Link<Route> to={to_route}>
106-
<div class={String::from("group h-auto relative mb-3 inline-block rounded-xl overflow-hidden ") + hide_css.get_class_name()}>
107-
<div class="opacity-100 group-hover:opacity-30 transition-opacity duration-500">
120+
<div class={classes!("group", "h-auto", "relative", "mb-4", "inline-block", "rounded-xl", "overflow-hidden", hide_css, card_css)}>
121+
<div class="opacity-100 group-hover:opacity-20 transition-all duration-500">
108122
<SafeHtml html={image.clone()} />
109123
</div>
110-
<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}>
111-
{tagline.clone()}
124+
<div class={String::from("font-semibold text-lg absolute inset-0 p-6 flex items-center text-center justify-center backdrop-blur-md backdrop-contrast-50 backdrop-brightness-50 opacity-0 group-hover:opacity-100 transition-all duration-500 ") + &color}>
125+
<div class={css!(r#"
126+
transform: translateY(10px);
127+
transition: transform 0.3s ease;
128+
.group:hover & {
129+
transform: translateY(0);
130+
}
131+
"#)}>
132+
{tagline.clone()}
133+
</div>
112134
</div>
113135
<div class="absolute bottom-0 right-0 p-2 z-10 flex items-end justify-end">
114-
<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">
136+
<div class={css!(r#"
137+
transform: scale(0.5) translateX(25%) translateY(33%);
138+
padding: 0.25rem;
139+
border-radius: 0.5rem;
140+
backdrop-filter: blur(8px);
141+
background-color: rgba(0, 0, 0, 0.3);
142+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
143+
"#)}>
115144
<BadgesStrip tags={tags.clone()} scale={80} />
116145
</div>
117146
</div>
118147
</div>
119-
<br />
120-
<span class="text-foreground-primary font-semibold">
148+
<span class={css!(r#"
149+
font-size: 1.125rem;
150+
font-weight: 600;
151+
color: #F1F5F9;
152+
transition: color 0.2s ease;
153+
&:hover {
154+
color: #60A5FA;
155+
}
156+
"#)}>
121157
{title.clone()}
122158
</span>
123159
</Link<Route>>

‎src/components/tags.rs‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,36 @@ use yew::prelude::*;
22

33
use stylist::yew::styled_component;
44

5-
use crate::components::typewriter::Typewriter;
6-
use rand::seq::SliceRandom;
7-
85
#[derive(Debug, PartialEq, Properties)]
96
pub struct TagsProps {
107
pub file_content: String,
118
}
129

1310
#[styled_component]
1411
pub fn Tags(tags: &TagsProps) -> Html {
15-
let mut document = serde_yaml::from_str::<Vec<String>>(&tags.file_content)
12+
let document = serde_yaml::from_str::<Vec<String>>(&tags.file_content)
1613
.unwrap()
1714
.iter()
1815
.map(|tag| tag.to_string())
1916
.collect::<Vec<String>>();
20-
document.shuffle(&mut rand::thread_rng());
17+
18+
let tags_text = document.join(" • ");
2119

2220
html! {
23-
<Typewriter texts={Vec::from(document)} class="text-wrap text-clip overflow-hidden max-w-full text-3xl font-black italic text-center" />
21+
<div class={css!(r#"
22+
font-size: 1.5rem;
23+
font-weight: 600;
24+
font-style: italic;
25+
text-align: center;
26+
max-width: 100%;
27+
line-height: 2rem;
28+
color: rgba(226, 232, 240, 0.9);
29+
@media (min-width: 768px) {
30+
font-size: 1.875rem;
31+
line-height: 2.5rem;
32+
}
33+
"#)}>
34+
{tags_text}
35+
</div>
2436
}
2537
}

0 commit comments

Comments
 (0)