Skip to content

Commit 507d8ab

Browse files
sofiavldd2005sofiavldd2005
committed
Added Background Image
1 parent b327ac5 commit 507d8ab

8 files changed

Lines changed: 37 additions & 8 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/target
2-
/dist
2+
/dist
3+
.DS_Store

‎assets/astronautkristina.jpg‎

80.6 KB
Loading

‎assets/earthrise.jpg‎

304 KB
Loading

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html -->
1313
<link data-trunk rel="rust" data-wasm-opt="z" data-weak-refs />
1414

15-
<link rel="copy-dir" href="assets" />
15+
<link data-trunk rel="copy-dir" href="assets" />
1616
</head>
1717

1818
<body></body>

‎src/app.rs‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,22 @@ pub fn App() -> impl IntoView {
1414
--pink: #f5c2e7; --mauve: #cba6f7; --green: #a6e3a1; --yellow: #f9e2af;
1515
--red: #f38ba8; --surface: #313244; --surface-border: #45475a;
1616
}
17-
body { margin: 0; background-color: var(--base); color: var(--text); font-family: 'Nunito', system-ui, sans-serif; }
17+
body {
18+
margin: 0;
19+
20+
/* The Magic Overlay: Catppuccin Base at the top fading into a soft Mauve tint at the bottom */
21+
background: linear-gradient(
22+
rgba(30, 30, 46, 0.85), /* Dark overlay to keep text readable */
23+
rgba(203, 166, 247, 0.25) /* Cute mauve/pink tint */
24+
), url('/assets/astronautkristina.jpg');
25+
26+
background-size: cover;
27+
background-position: center;
28+
background-attachment: fixed; /* Keeps the background still while you scroll */
29+
30+
color: var(--text);
31+
font-family: 'Nunito', system-ui, sans-serif;
32+
}
1833
.container { max-width: 950px; margin: 0 auto; padding: 3rem 1.5rem; }
1934
.header { border-bottom: 2px dashed var(--pink); padding-bottom: 2rem; margin-bottom: 3rem; text-align: center; }
2035
.header h1 { color: var(--pink); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 0.5rem 0; line-height: 1.2; }

‎src/home.rs‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,17 @@ pub fn Home() -> impl IntoView {
55
view! {
66
<style>
77
"
8-
.about { border: 2px solid var(--mauve);text-align: center}
9-
.about h2 { color: var(--mauve); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem; text-align: center }
10-
.about-text { font-size: 1.15rem; line-height: 1.7; max-width: 750px; margin: 0 auto; text-align: center; }
8+
.about { border: 2px solid var(--mauve);
9+
text-align: center;
10+
background-color: rgba(30, 30, 46, 0.55); /* Catppuccin dark base at 65% opacity */
11+
backdrop-filter: blur(5px); /* Softly blurs the Earthrise image behind the card */
12+
-webkit-backdrop-filter: blur(10px); /* Safari support (when it decides to work!) */
13+
border-radius: 16px;
14+
padding: 2rem;
15+
16+
}
17+
.about h2 { color: var(--mauve); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem; text-align: left }
18+
.about-text { font-size: 1.15rem; line-height: 1.7; max-width: 750px; margin: 0 auto; text-align: left; }
1119
/* Social Buttons Styling */
1220
.socials-container {
1321
display: flex;
@@ -35,7 +43,7 @@ pub fn Home() -> impl IntoView {
3543
<h2>"🌸 About Me:"</h2>
3644
<div class="about-text">
3745
<p>"Hi! I like to build backend systems, write memory-safe code for embedded devices, and develop flight software for rockets!"</p>
38-
<p>"Currently architecting hybrid rocket avionics and pushing for Rust adoption in aerospace environments. 🎀"</p>
46+
<p>"Currently architecting hybrid rocket avionics and pushing for Rust adoption in aerospace environments."</p>
3947
</div>
4048
<div class="reach-me">
4149
<h3>"Here is how you can reach me :) "</h3>

‎src/resume.rs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,12 @@ pub fn Resume() -> impl IntoView {
55
view! {
66
<style>
77
"
8-
.resume { border: 2px solid var(--green); }
8+
.resume { border: 2px solid var(--green);
9+
background-color: rgba(30, 30, 46, 0.55); /* Catppuccin dark base at 65% opacity */
10+
backdrop-filter: blur(5px); /* Softly blurs the Earthrise image behind the card */
11+
border-radius: 16px;
12+
padding: 2rem;
13+
}
914
.resume h2 { color: var(--green); margin: 0 0 1.5rem 0; text-align: center; font-size: 1.8rem;text-align: center }
1015
.resume-grid { display: grid; gap: 3rem; }
1116
@media (min-width: 768px) { .resume-grid { grid-template-columns: 1fr 1fr; } }

0 commit comments

Comments
 (0)