Skip to content

Commit 14c1c00

Browse files
Don-DamianoDon-Damiano
committed
Add HeroVisual component for enhanced visual presentation
- Introduced a new HeroVisual component to display a hero image with responsive design. - Implemented styles for image containment, aspect ratio, and visual effects. - Included accessibility features with alt text handling.
1 parent 4416355 commit 14c1c00

File tree

7 files changed

+169
-23
lines changed

7 files changed

+169
-23
lines changed

‎public/img/hero-rocket.png‎

1.69 MB
Loading

‎src/components/HeroVisual.astro‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
const {
3+
src = "/img/hero-rocket.png",
4+
alt = "",
5+
} = Astro.props;
6+
---
7+
8+
<div class="hero-visual" aria-hidden={alt ? undefined : "true"}>
9+
<img src={src} alt={alt} loading="eager" decoding="async" />
10+
</div>
11+
12+
<style>
13+
.hero-visual {
14+
position: relative;
15+
width: 100%;
16+
aspect-ratio: 3 / 2;
17+
18+
/* bezpiecznik, żeby nie było zbyt niskie */
19+
min-height: 220px;
20+
21+
border-radius: 18px;
22+
overflow: hidden;
23+
24+
border: 1px solid rgba(255,255,255,.08);
25+
background: rgba(255,255,255,.02);
26+
}
27+
28+
.hero-visual img {
29+
width: 100%;
30+
height: 100%;
31+
display: block;
32+
33+
object-fit: contain;
34+
object-position: center;
35+
36+
filter: saturate(.95) contrast(1.02);
37+
transform: none;
38+
}
39+
40+
.hero-visual::before {
41+
content: "";
42+
position: absolute;
43+
inset: 0;
44+
background:
45+
radial-gradient(120% 120% at 10% 20%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%),
46+
linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,0) 75%);
47+
pointer-events: none;
48+
}
49+
50+
.hero-visual::after {
51+
content: "";
52+
position: absolute;
53+
inset: 0;
54+
box-shadow:
55+
inset 0 0 0 1px rgba(255,255,255,.03),
56+
inset 0 0 90px rgba(0,0,0,.45);
57+
pointer-events: none;
58+
}
59+
60+
@media (max-width: 900px) {
61+
.hero-visual {
62+
min-height: 180px;
63+
border-radius: 16px;
64+
}
65+
}
66+
</style>

‎src/pages/en/contact.astro‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,47 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
44

55
<BaseLayout lang="en" title="Contact">
66
<h1 style="margin-top:0;">Contact</h1>
7+
78
<p class="lead">
8-
On platforms like Freelancer/Upwork I follow the rules — direct contact details are shared after engagement starts.
9+
Want to discuss a project, collaboration, or partnership?
10+
Reach out — we’ll suggest a reasonable next step.
911
</p>
1012

1113
<div class="section">
12-
<h2>find me</h2>
14+
<h2>contact</h2>
15+
16+
<div class="card">
17+
<div class="kicker">email</div>
18+
<h3>hello@rocketdeploy.dev</h3>
19+
<p>
20+
Entry point for collaboration discussions.
21+
</p>
22+
</div>
23+
</div>
24+
25+
<div class="section">
26+
<h2>where to find us</h2>
27+
1328
<div class="grid" style="grid-template-columns: repeat(2, 1fr);">
14-
<a class="card" href="https://github.com/rocketdeploy-dev" target="_blank" rel="noreferrer" style="border-bottom:none;">
29+
<a
30+
class="card"
31+
href="https://github.com/rocketdeploy-dev"
32+
target="_blank"
33+
rel="noreferrer"
34+
style="border-bottom:none;"
35+
>
1536
<div class="kicker">link</div>
1637
<h3>GitHub</h3>
17-
<p>Code, approach, projects.</p>
38+
<p>Code, approach, and public projects.</p>
1839
</a>
40+
1941
<div class="card">
20-
<div class="kicker">note</div>
21-
<h3>Direct contact</h3>
22-
<p>After contract/offer acceptance — platform rules friendly.</p>
42+
<div class="kicker">info</div>
43+
<h3>Engagement</h3>
44+
<p>
45+
Details about our process are described in “How we work”.
46+
</p>
2347
</div>
2448
</div>
2549
</div>
26-
</BaseLayout>
50+
</BaseLayout>

‎src/pages/en/index.astro‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
---
22
import BaseLayout from "../../layouts/BaseLayout.astro";
33
import HeroTerminal from "../../components/HeroTerminal.astro";
4+
import HeroVisual from "../../components/HeroVisual.astro";
45
---
56

67
<BaseLayout lang="en" title="Home">
78
<section class="hero">
89
<div>
910
<div style="font-family: var(--mono); color: rgba(255,255,255,.55); font-size: 13px;">
10-
systems · delivery · ops
11+
architecture · build · production
1112
</div>
1213

1314
<h1>We design & ship systems.</h1>
@@ -43,9 +44,24 @@ import HeroTerminal from "../../components/HeroTerminal.astro";
4344
</div>
4445
</div>
4546

46-
<div>
47-
<HeroTerminal lang="en" />
47+
<div class="hero-right">
48+
<HeroVisual src="/img/hero-rocket.png" />
49+
<div class="hero-terminal-wrap">
50+
<HeroTerminal lang="en" />
51+
</div>
4852
</div>
53+
54+
<style>
55+
.hero-right {
56+
display: grid;
57+
gap: 14px;
58+
}
59+
@media (max-width: 900px) {
60+
.hero-visual-slot {
61+
display: none;
62+
}
63+
}
64+
</style>
4965
</section>
5066

5167
<section class="section">

‎src/pages/pl/index.astro‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
---
22
import BaseLayout from "../../layouts/BaseLayout.astro";
33
import HeroTerminal from "../../components/HeroTerminal.astro";
4+
import HeroVisual from "../../components/HeroVisual.astro";
45
---
56

67
<BaseLayout lang="pl" title="Start">
78
<section class="hero">
89
<div>
910
<div style="font-family: var(--mono); color: rgba(255,255,255,.55); font-size: 13px;">
10-
systems · delivery · ops
11+
architecture · build · production
1112
</div>
1213

1314
<h1>Projektujemy i dowozimy systemy.</h1>
@@ -44,9 +45,24 @@ import HeroTerminal from "../../components/HeroTerminal.astro";
4445
</div>
4546
</div>
4647

47-
<div>
48-
<HeroTerminal lang="pl" />
48+
<div class="hero-right">
49+
<HeroVisual src="/img/hero-rocket.png" />
50+
<div class="hero-terminal-wrap">
51+
<HeroTerminal lang="pl" />
52+
</div>
4953
</div>
54+
55+
<style>
56+
.hero-right {
57+
display: grid;
58+
gap: 14px;
59+
}
60+
@media (max-width: 900px) {
61+
.hero-visual-slot {
62+
display: none;
63+
}
64+
}
65+
</style>
5066
</section>
5167

5268
<section class="section">

‎src/pages/pl/kontakt.astro‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,47 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
44

55
<BaseLayout lang="pl" title="Kontakt">
66
<h1 style="margin-top:0;">Kontakt</h1>
7+
78
<p class="lead">
8-
Na platformach typu Freelancer/Upwork trzymam się zasad — dane kontaktowe przekazuję po rozpoczęciu współpracy.
9+
Chcesz porozmawiać o projekcie, współpracy lub partnerstwie?
10+
Napisz do nas — wrócimy z propozycją kolejnego kroku.
911
</p>
1012

1113
<div class="section">
12-
<h2>gdzie mnie znaleźć</h2>
14+
<h2>kontakt</h2>
15+
16+
<div class="card">
17+
<div class="kicker">email</div>
18+
<h3>hello@rocketdeploy.dev</h3>
19+
<p>
20+
Punkt startowy do rozmowy o współpracy.
21+
</p>
22+
</div>
23+
</div>
24+
25+
<div class="section">
26+
<h2>gdzie nas znaleźć</h2>
27+
1328
<div class="grid" style="grid-template-columns: repeat(2, 1fr);">
14-
<a class="card" href="https://github.com/rocketdeploy-dev" target="_blank" rel="noreferrer" style="border-bottom:none;">
29+
<a
30+
class="card"
31+
href="https://github.com/rocketdeploy-dev"
32+
target="_blank"
33+
rel="noreferrer"
34+
style="border-bottom:none;"
35+
>
1536
<div class="kicker">link</div>
1637
<h3>GitHub</h3>
17-
<p>Kod, podejście, projekty.</p>
38+
<p>Kod, podejście i publiczne projekty.</p>
1839
</a>
40+
1941
<div class="card">
20-
<div class="kicker">note</div>
21-
<h3>Kontakt bezpośredni</h3>
22-
<p>Po zaakceptowaniu oferty / kontraktu – zgodnie z zasadami platform.</p>
42+
<div class="kicker">info</div>
43+
<h3>Współpraca</h3>
44+
<p>
45+
Szczegóły procesu opisujemy w sekcji „Jak pracujemy”.
46+
</p>
2347
</div>
2448
</div>
2549
</div>
26-
</BaseLayout>
50+
</BaseLayout>

‎src/styles/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ a:hover{ border-bottom-color: rgba(122,162,255,.85); }
147147
}
148148
}
149149

150-
main{ padding: 58px 0 70px; }
150+
main{ padding: 10px 0 70px; }
151151

152152
.hero{
153153
display:grid;

0 commit comments

Comments
 (0)