Skip to content

Commit d71191c

Browse files
webstackdevwebstackdev
committed
Pass props for content to home page hero and intro
1 parent 575f866 commit d71191c

5 files changed

Lines changed: 137 additions & 149 deletions

File tree

‎src/components/Animations/Hero/index.astro‎

Lines changed: 64 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -11,84 +11,79 @@ const { pretitle, benefits } = Astro.props as Props
1111
---
1212

1313
<home-hero class="block" data-testid="home-hero">
14-
<section
15-
class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12"
16-
aria-labelledby="home-hero-title"
17-
>
18-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
19-
<div class="hidden lg:block lg:order-2">
20-
<ComputersAnimation />
21-
</div>
22-
23-
<div class="order-2 lg:order-1 space-y-4 font-mono">
24-
<div class="text-primary ml-1 mb-1">$ whoami</div>
14+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
15+
<div class="hidden lg:block lg:order-2">
16+
<ComputersAnimation />
17+
</div>
2518

26-
<h1
27-
id="home-hero-title"
28-
class="text-4xl md:text-5xl lg:text-7xl font-bold text-content-active leading-none"
29-
>
30-
Senior<br />
31-
Platform<br />
32-
<span class="text-content-offset">Authority.</span>
33-
</h1>
19+
<div class="order-2 lg:order-1 space-y-4 font-mono">
20+
<div class="text-primary ml-1 mb-1">$ whoami</div>
3421

35-
<p class="text-base md:text-lg text-content font-sans max-w-xl">{pretitle}</p>
22+
<h1
23+
id="home-hero-title"
24+
class="text-4xl md:text-5xl lg:text-7xl font-bold text-content-active leading-none"
25+
>
26+
Senior<br />
27+
Platform<br />
28+
<span class="text-content-offset">Authority.</span>
29+
</h1>
3630

37-
<div
38-
class="bg-content text-page-base p-6 rounded-lg transition-transform duration-200 ease-out will-change-transform hover:scale-[1.02] hover:-translate-y-px"
39-
>
40-
<div class="text-xs text-page-base/60 mb-3">// What I deliver</div>
41-
<ul class="space-y-2 text-sm">
42-
{benefits.map(benefit => (
43-
<li class="flex items-center gap-2">
44-
<span class="text-success">✓</span>
45-
<span>{benefit}</span>
46-
</li>
47-
))}
31+
<p class="text-base md:text-lg text-content font-sans max-w-xl">{pretitle}</p>
4832

33+
<div
34+
class="bg-content text-page-base p-6 rounded-lg transition-transform duration-200 ease-out will-change-transform hover:scale-[1.02] hover:-translate-y-px"
35+
>
36+
<div class="text-xs text-page-base/60 mb-3">// What I deliver</div>
37+
<ul class="space-y-2 text-sm">
38+
{benefits.map(benefit => (
4939
<li class="flex items-center gap-2">
50-
<span class="text-success">$</span>
51-
<a
52-
href="/contact"
53-
class="inline-flex items-center gap-1 no-underline text-success transition-colors hover:text-success-offset focus-visible:text-success-offset"
54-
data-hero-ready-link
55-
aria-label="ready"
56-
>
57-
<span aria-hidden="true"> </span>
58-
<span data-hero-ready-text aria-hidden="true"></span>
59-
</a>
40+
<span class="text-success">✓</span>
41+
<span>{benefit}</span>
6042
</li>
61-
</ul>
62-
</div>
43+
))}
44+
45+
<li class="flex items-center gap-2">
46+
<span class="text-success">$</span>
47+
<a
48+
href="/contact"
49+
class="inline-flex items-center gap-1 no-underline text-success transition-colors hover:text-success-offset focus-visible:text-success-offset"
50+
data-hero-ready-link
51+
aria-label="ready"
52+
>
53+
<span aria-hidden="true"> </span>
54+
<span data-hero-ready-text aria-hidden="true"></span>
55+
</a>
56+
</li>
57+
</ul>
58+
</div>
6359

64-
<div class="flex items-center gap-4 ml-1">
65-
<Button href="/about" variant="success" text="Read My Story" />
66-
<a
67-
href="/contact"
68-
class:list={[
69-
[
70-
'py-3', 'sm:ml-6', 'transition-colors',
71-
],
72-
[
73-
'text-content', 'font-bold',
74-
],
75-
[
76-
'underline', 'underline-offset-4', 'decoration-2', 'decoration-dotted', 'decoration-content',
77-
],
78-
[
79-
'hover:text-content-offset', 'hover:decoration-content-offset',
80-
],
81-
[
82-
'focus-visible:text-content-offset', 'focus-visible:underline', 'focus-visible:decoration-2', 'focus-visible:decoration-dotted', 'focus-visible:decoration-content-offset',
83-
],
84-
]}
85-
>
86-
Get in Touch <span aria-hidden="true" class="md:text-3xl">→</span>
87-
</a>
88-
</div>
60+
<div class="flex items-center gap-4 ml-1">
61+
<Button href="/about" variant="success" text="Read My Story" />
62+
<a
63+
href="/contact"
64+
class:list={[
65+
[
66+
'py-3', 'sm:ml-6', 'transition-colors',
67+
],
68+
[
69+
'text-content', 'font-bold',
70+
],
71+
[
72+
'underline', 'underline-offset-4', 'decoration-2', 'decoration-dotted', 'decoration-content',
73+
],
74+
[
75+
'hover:text-content-offset', 'hover:decoration-content-offset',
76+
],
77+
[
78+
'focus-visible:text-content-offset', 'focus-visible:underline', 'focus-visible:decoration-2', 'focus-visible:decoration-dotted', 'focus-visible:decoration-content-offset',
79+
],
80+
]}
81+
>
82+
Get in Touch <span aria-hidden="true" class="md:text-3xl">→</span>
83+
</a>
8984
</div>
9085
</div>
91-
</section>
86+
</div>
9287
</home-hero>
9388

9489
<script>

‎src/components/Home/Backstage/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-title">
88
<div class="space-y-6">
99
<p class="text-xs font-bold text-primary uppercase tracking-widest">Backstage IDP Implementation</p>
10-
<h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
11-
Give your developers <span class="text-primary">superpowers</span>
12-
</h2>
1310
</div>
1411
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
1512
<!-- Left column: headline + image -->
1613
<div class="lg:col-span-2 space-y-6">
14+
<h2 id="backstage-title" class="text-3xl md:text-4xl font-black text-content leading-tight">
15+
Give your developers <span class="text-primary">superpowers</span>
16+
</h2>
1717
<p class="text-lg text-content-offset leading-relaxed">
1818
Backstage is Spotify's open-source internal developer portal. I customize and deploy it
1919
for your team—starting small, proving value fast, then scaling across your organization.

‎src/components/Home/Intro/index.astro‎

Lines changed: 34 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,37 @@
33
* The Intro component serves as the welcoming section of the homepage, providing
44
* a concise overview of Webstack Builders' mission and value proposition
55
*/
6-
---
6+
export interface Props {
7+
pretitle: string
8+
benefits: {
9+
title: string
10+
description: string
11+
}[]
12+
}
713
8-
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-6" aria-labelledby="home-about-title">
9-
<div class="text-center space-y-8">
10-
<div class="max-w-3xl mx-auto">
11-
<h2 id="home-about-title" class="text-3xl md:text-4xl font-bold mb-6">
12-
Building the Future of Software Development
13-
</h2>
14-
<p class="text-xl text-content-active leading-relaxed mb-8">
15-
I'm a freelance software engineer specializing in platform engineering, cloud
16-
architecture, and developer experience optimization. With deep expertise in modern
17-
technologies and a focus on scalable solutions, I help businesses transform their
18-
technical infrastructure and accelerate development workflows. SOC-2 ready.
19-
</p>
20-
</div>
14+
const { pretitle, benefits } = Astro.props as Props
2115
22-
<ul class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 list-none p-0 m-0">
23-
<li class="text-center">
24-
<div
25-
class="w-16 h-16 bg-spotlight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4"
26-
>
27-
<svg
28-
class="w-8 h-8 text-primary"
29-
fill="none"
30-
stroke="currentColor"
31-
viewBox="0 0 24 24"
32-
aria-hidden="true"
33-
focusable="false"
34-
>
35-
<path
36-
stroke-linecap="round"
37-
stroke-linejoin="round"
38-
stroke-width="2"
39-
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
40-
</svg>
41-
</div>
42-
<h3 class="mb-2 font-semibold text-content-active">Platform Engineering</h3>
43-
<p class="text-content">
44-
Scalable infrastructure, internal developer platforms, and CI/CD pipelines built for rapid, reliable iteration
45-
</p>
46-
</li>
16+
const svgPath = [
17+
'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
18+
'M13 10V3L4 14h7v7l9-11h-7z',
19+
'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
20+
]
21+
22+
const visibleBenefits = benefits.slice(0, 3)
23+
---
4724

25+
<div class="text-center space-y-8 bg-page-offset p-8 rounded-xl">
26+
<div class="max-w-3xl mx-auto">
27+
<h2 id="home-about-title" class="text-3xl md:text-4xl font-bold mb-6">
28+
Building the Future of Software Development
29+
</h2>
30+
<p class="text-xl text-content-active leading-relaxed mb-8">
31+
{pretitle}
32+
</p>
33+
</div>
34+
35+
<ul class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 list-none p-0 m-0">
36+
{visibleBenefits.map((benefit, index) => (
4837
<li class="text-center">
4938
<div
5039
class="w-16 h-16 bg-spotlight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4"
@@ -61,38 +50,14 @@
6150
stroke-linecap="round"
6251
stroke-linejoin="round"
6352
stroke-width="2"
64-
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
53+
d={svgPath[index]}></path>
6554
</svg>
6655
</div>
67-
<h3 class="mb-2 font-semibold text-content-active">Cloud Architecture</h3>
56+
<h3 class="mb-2 text-content-active">{benefit.title}</h3>
6857
<p class="text-content">
69-
Cloud-native architectures across AWS, Azure, GCP, and beyond that scale with your business and budget
58+
{benefit.description}
7059
</p>
7160
</li>
72-
73-
<li class="text-center">
74-
<div
75-
class="w-16 h-16 bg-spotlight bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4"
76-
>
77-
<svg
78-
class="w-8 h-8 stroke-primary text-content"
79-
fill="none"
80-
viewBox="0 0 24 24"
81-
aria-hidden="true"
82-
focusable="false"
83-
>
84-
<path
85-
stroke-linecap="round"
86-
stroke-linejoin="round"
87-
stroke-width="2"
88-
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
89-
</svg>
90-
</div>
91-
<h3 class="mb-2 font-semibold text-content-active">Developer Experience</h3>
92-
<p class="text-content">
93-
Purpose-built toolchains, automated workflows, and developer documentation that remove friction and boost velocity
94-
</p>
95-
</li>
96-
</ul>
97-
</div>
98-
</section>
61+
))}
62+
</ul>
63+
</div>

‎src/pages/index.astro‎

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,44 @@ const pageTitle = 'Web Development & Digital Solutions - Webstack Builders, Inc.
1515

1616
<BaseLayout description={pageDescription} pageTitle={pageTitle} path={'/'}>
1717
<!-- Hero Section -->
18-
<Hero
19-
pretitle="I turn deployment nightmares into one-click operations. Legacy migrations, CI/CD pipelines, observability stacks—built to survive production."
20-
benefits={["Zero-downtime migrations", "Self-healing infrastructure", "Developer-friendly golden paths"]}
21-
/>
18+
<section
19+
class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12"
20+
aria-labelledby="home-hero-title"
21+
>
22+
<Hero
23+
pretitle="I turn deployment nightmares into one-click operations. Legacy migrations, CI/CD pipelines, observability stacks—built to survive production."
24+
benefits={["Zero-downtime migrations", "Self-healing infrastructure", "Developer-friendly golden paths"]}
25+
/>
26+
</section>
2227

2328
<!-- Intro Section -->
24-
<Intro />
29+
<section
30+
class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8 lg:py-12"
31+
aria-labelledby="home-about-title"
32+
>
33+
<Intro
34+
pretitle="I'm a freelance software engineer specializing in platform engineering, cloud architecture, and developer experience optimization. With deep expertise in modern technologies and a focus on scalable solutions, I help businesses transform their technical infrastructure and accelerate development workflows. SOC-2 ready."
35+
benefits={[
36+
{
37+
title: "Platform Engineering",
38+
description: "Scalable infrastructure, internal developer platforms, and CI/CD pipelines built for rapid, reliable iteration",
39+
},
40+
{
41+
title: "Cloud Architecture",
42+
description: "Modern cloud-native architectures designed for scalability, resilience, and cost-efficiency",
43+
},
44+
{
45+
title: "Developer Experience",
46+
description: "Optimized workflows, tools, and documentation to empower your development teams and boost productivity",
47+
},
48+
]}
49+
/>
50+
</section>
2551

2652
<!-- Turn-Key Backstage IDP Implementation -->
27-
<Backstage />
53+
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16" aria-labelledby="backstage-title">
54+
<Backstage />
55+
</section>
2856

2957
<!-- Skills/Technologies Preview -->
3058
<Skills />

‎src/styles/typography.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
* Help prevent overflow of long words/names/URLs
149149
* (Enhancement not in Tailwind Preflight)
150150
*/
151-
hyphens: auto;
151+
hyphens: none;
152152
line-height: var(--line-height-tight);
153153
overflow-wrap: break-word;
154154
}
@@ -225,7 +225,7 @@
225225
*/
226226
li {
227227
/** Allow hyphens */
228-
hyphens: auto;
228+
hyphens: manual;
229229
overflow-wrap: break-word;
230230
}
231231

0 commit comments

Comments
 (0)