Skip to content

Commit bfe22cf

Browse files
sofiavldd2005sofiavldd2005
committed
Background Images and Credits
1 parent 5f1f0f6 commit bfe22cf

7 files changed

Lines changed: 186 additions & 6 deletions

File tree

‎assets/floatingastronaut.webp‎

66.2 KB
Loading

‎assets/palebluedot.jpg‎

22.6 KB
Loading

‎src/app.rs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
use crate::pages::home::Home;
2+
use crate::pages::not_found::NotFound;
23
use crate::pages::projects::Projects;
34
use crate::pages::resume::Resume;
45
use leptos::prelude::*;
@@ -57,11 +58,11 @@ pub fn App() -> impl IntoView {
5758
<main>
5859
<div class="container">
5960
<header class="header">
60-
<h1>"✨ My personal Webpage ✨"</h1>
61+
<h1>"My personal Webpage"</h1>
6162
<p>"Aerospace Engineering @ IST | RED Rocketry | Embedded Rustacean "</p>
6263

6364
<nav class="nav-bar">
64-
<a href="/" class="nav-link home">"👾Home"</a>
65+
<a href="/" class="nav-link home">"Home"</a>
6566
<a href="/resume" class="nav-link resume">"Resume"</a>
6667
<a href="/projects" class="nav-link projects"> "Projects" </a>
6768
</nav>
@@ -72,6 +73,7 @@ pub fn App() -> impl IntoView {
7273
<Route path=path!("/") view=Home />
7374
<Route path=path!("/resume") view=Resume />
7475
<Route path=path!("/projects") view=Projects />
76+
<Route path=path!("/*any") view=NotFound/>
7577
</Routes>
7678
</div>
7779
</main>

‎src/pages/home.rs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,23 @@ pub fn Home() -> impl IntoView {
3737
.social-btn.email:hover { border-color: var(--red); color: var(--red); }
3838
.social-btn.github:hover { border-color: var(--mauve); color: var(--mauve); }
3939
.social-btn.linkedin:hover { border-color: var(--green); color: var(--green); }
40+
.photo-credit {
41+
position: fixed;
42+
bottom: 1rem;
43+
right: 1rem;
44+
background-color: rgba(30, 30, 46, 0.65);
45+
backdrop-filter: blur(5px);
46+
-webkit-backdrop-filter: blur(5px);
47+
border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
48+
border-radius: 8px;
49+
padding: 0.5rem 0.8rem;
50+
font-size: 0.8rem;
51+
color: var(--text);
52+
z-index: 50;
53+
pointer-events: none; /* Ensures you can still click things underneath it */
54+
opacity: 0.5;
55+
transition: opacity 0.3s ease;
56+
}
4057
"
4158
</style>
4259
<section class="card about">
@@ -61,6 +78,10 @@ pub fn Home() -> impl IntoView {
6178
</a>
6279
</div>
6380
</section>
81+
<div class="photo-credit">
82+
"Spaceship Earth — Photographed by Artemis II in April 2026"
83+
84+
</div>
6485
<div class="built-with">
6586
"Built with 💖 and "
6687
<a href="https://leptos.dev/" target="_blank" rel="noopener noreferrer">"Leptos"</a>

‎src/pages/not_found.rs‎

Lines changed: 101 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,105 @@ use leptos::prelude::*;
33
/// 404 Not Found Page
44
#[component]
55
pub fn NotFound() -> impl IntoView {
6-
view! { <h1>"Uh oh!" <br /> "We couldn't find that page!"</h1> }
6+
view! {
7+
<style>
8+
"
9+
.lost-container {
10+
/* These rules ensure it covers the entire screen, hiding the global Earthrise background */
11+
position: fixed;
12+
top: 0;
13+
left: 0;
14+
width: 100vw;
15+
height: 100vh;
16+
z-index: 40;
17+
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
22+
/* The astronaut background with a slight dark tint for text readability */
23+
background: linear-gradient(
24+
rgba(30, 30, 46, 0.85),
25+
rgba(203, 166, 247, 0.15)
26+
), url('/assets/floatingastronaut.webp') no-repeat center center;
27+
background-size: cover;
28+
}
29+
30+
.lost-card {
31+
background-color: rgba(30, 30, 46, 0.75);
32+
backdrop-filter: blur(12px);
33+
-webkit-backdrop-filter: blur(12px);
34+
border: 2px solid var(--mauve);
35+
border-radius: 16px;
36+
padding: 3rem 2rem;
37+
max-width: 450px;
38+
text-align: center;
39+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
40+
}
41+
42+
.error-code {
43+
font-size: 6rem;
44+
color: var(--pink);
45+
margin: 0 0 0.5rem 0;
46+
font-weight: bold;
47+
text-shadow: 0 0 15px rgba(245, 194, 231, 0.4);
48+
line-height: 1;
49+
}
50+
51+
.error-msg {
52+
color: var(--text);
53+
font-size: 1.2rem;
54+
line-height: 1.6;
55+
margin-bottom: 2.5rem;
56+
}
57+
58+
.return-btn {
59+
display: inline-block;
60+
padding: 0.8rem 1.8rem;
61+
font-size: 1.1rem;
62+
font-weight: bold;
63+
color: var(--base);
64+
background-color: var(--mauve);
65+
border: none;
66+
border-radius: 8px;
67+
text-decoration: none;
68+
transition: all 0.2s ease;
69+
}
70+
71+
.return-btn:hover {
72+
transform: translateY(-3px);
73+
box-shadow: 0 6px 15px rgba(203, 166, 247, 0.4);
74+
background-color: var(--pink);
75+
}
76+
.photo-credit {
77+
position: fixed;
78+
bottom: 1rem;
79+
right: 1rem;
80+
background-color: rgba(30, 30, 46, 0.65);
81+
backdrop-filter: blur(5px);
82+
-webkit-backdrop-filter: blur(5px);
83+
border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
84+
border-radius: 8px;
85+
padding: 0.5rem 0.5rem;
86+
font-size: 0.8rem;
87+
color: var(--text);
88+
z-index: 50;
89+
pointer-events: none; /* Ensures you can still click things underneath it */
90+
opacity: 0.7;
91+
transition: opacity 0.3s ease;
92+
}
93+
"
94+
</style>
95+
96+
<div class="lost-container">
97+
<div class="lost-card">
98+
<h1 class="error-code">"404"</h1>
99+
<p class="error-msg">"Signal Lost. The satellite you are looking for has drifted out of orbit."</p>
100+
<a href="/" class="return-btn">" Return to Base"</a>
101+
</div>
102+
</div>
103+
<div class="photo-credit">
104+
"Astronaut Bruce McCandless Floating Free - Photographed by NASA (2011)"
105+
</div>
106+
}
7107
}

‎src/pages/projects.rs‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,20 @@ pub fn Projects() -> impl IntoView {
55
view! {
66
<style>
77
"
8+
body {
9+
background: linear-gradient(
10+
rgba(30, 30, 46, 0.85),
11+
rgba(203, 166, 247, 0.15)
12+
), url('/assets/palebluedot.jpg') no-repeat center center fixed !important;
13+
-webkit-background-size: cover !important;
14+
background-size: cover !important;
15+
}
816
.projects-header {
917
text-align: center;
1018
color: var(--red);
1119
margin: 2rem 0;
1220
font-size: 2.2rem;
21+
z-index: 1;
1322
}
1423
1524
.projects-grid {
@@ -26,7 +35,7 @@ pub fn Projects() -> impl IntoView {
2635
text-decoration: none;
2736
2837
background-color: rgba(30, 30, 46, 0.55);
29-
backdrop-filter: blur(10px);
38+
backdrop-filter: blur(5px);
3039
-webkit-backdrop-filter: blur(5px);
3140
border: 1px solid var(--surface-border);
3241
border-radius: 16px;
@@ -64,11 +73,29 @@ pub fn Projects() -> impl IntoView {
6473
font-size: 1rem;
6574
margin-bottom: 0;
6675
}
76+
.photo-credit {
77+
position: fixed;
78+
bottom: 1rem;
79+
right: 1rem;
80+
background-color: rgba(30, 30, 46, 0.65);
81+
backdrop-filter: blur(8px);
82+
-webkit-backdrop-filter: blur(8px);
83+
border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
84+
border-radius: 8px;
85+
padding: 0.5rem 0.8rem;
86+
font-size: 0.8rem;
87+
color: var(--text);
88+
z-index: 50;
89+
pointer-events: none; /* Ensures you can still click things underneath it */
90+
opacity: 0.7;
91+
transition: opacity 0.3s ease;
92+
}
6793
"
6894
</style>
6995

7096
<div>
71-
<h2 class="projects-header">"My Projects"</h2>
97+
<div class="pale-blue-dot-bg"></div>
98+
<div class="projects-header">"My Projects"</div>
7299
<div class="projects-grid">
73100

74101

@@ -108,7 +135,9 @@ pub fn Projects() -> impl IntoView {
108135
<div class="project-tech">"ROS2 • C++ • Python • Robotics"</div>
109136
<p class="project-desc">"Currently I am just playing with ROS2, in order to be able do venture into robotics in the future."</p>
110137
</a>
111-
138+
<div class="photo-credit">
139+
"Pale Blue Dot — Photographed by Voyager 1 (1990)"
140+
</div>
112141

113142
</div>
114143
</div>

‎src/pages/resume.rs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ pub fn Resume() -> impl IntoView {
55
view! {
66
<style>
77
"
8+
body {
9+
background: linear-gradient(
10+
rgba(30, 30, 46, 0.85),
11+
rgba(203, 166, 247, 0.15)
12+
), url('/assets/earthrise.jpg') no-repeat center center fixed !important;
13+
-webkit-background-size: cover !important;
14+
background-size: cover !important;
15+
}
816
.resume { border: 2px solid var(--green);
917
background-color: rgba(30, 30, 46, 0.55); /* Catppuccin dark base at 65% opacity */
1018
backdrop-filter: blur(5px); /* Softly blurs the Earthrise image behind the card */
@@ -26,6 +34,23 @@ pub fn Resume() -> impl IntoView {
2634
2735
.download-btn { background-color: var(--pink); color: var(--base); padding: 0.7rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; transition: opacity 0.2s; margin-bottom: 2rem; }
2836
.download-btn:hover { opacity: 0.8; }
37+
.photo-credit {
38+
position: fixed;
39+
bottom: 1rem;
40+
right: 1rem;
41+
background-color: rgba(30, 30, 46, 0.65);
42+
backdrop-filter: blur(5px);
43+
-webkit-backdrop-filter: blur(5px);
44+
border: 1px solid var(--surface-border, rgba(255,255,255,0.1));
45+
border-radius: 8px;
46+
padding: 0.5rem 0.8rem;
47+
font-size: 0.8rem;
48+
color: var(--text);
49+
z-index: 50;
50+
pointer-events: none; /* Ensures you can still click things underneath it */
51+
opacity: 0.7;
52+
transition: opacity 0.3s ease;
53+
}
2954
"
3055
</style>
3156
<section class="card resume">
@@ -76,6 +101,9 @@ pub fn Resume() -> impl IntoView {
76101
</div>
77102
</div>
78103
</section>
104+
<div class="photo-credit">
105+
"Earthrise — Photographed by Apollo 8 on Christmas Eve (1968)"
106+
</div>
79107
}
80108
}
81109

0 commit comments

Comments
 (0)