Skip to content

Commit 4348417

Browse files
zicklagzicklag
committed
feat: add splash image.
1 parent 98d4984 commit 4348417

7 files changed

Lines changed: 92 additions & 33 deletions

File tree

‎public/hero-image-colton-sturgeon-N4fdQbMJ0nI-unsplash.jpg‎

461 KB
Loading

‎src/components/splash.astro‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,17 @@ const widths = [450, 800];
1515
const sizes = "(min-width: 640px) 42vw, 67vw";
1616
---
1717

18-
<section class="relative h-full bg-black">
19-
<Starfield />
18+
<section class="splash relative flex h-full flex-col items-start justify-center">
19+
<!-- <Starfield /> -->
2020
<!-- <GitHubCorner /> -->
21-
<div id="splash-bg-fallback" class="absolute inset-0 hidden opacity-40">
21+
<!-- <div id="splash-bg-fallback" class="absolute inset-0 hidden opacity-40">
2222
<HeroImage />
23-
</div>
24-
<div class="relative grid h-full place-items-center sm:grid-cols-2">
25-
<h2
26-
class="flex flex-col items-center gap-2 self-end sm:gap-4 sm:self-auto sm:justify-self-end"
27-
>
28-
<Icon name="logomark" class="size-20 text-white md:size-32" />
29-
<div
30-
class="gradient-text text-center font-extrabold tracking-tighter text-6xl md:text-8xl"
31-
set:html={props.heroText}
32-
/>
33-
</h2>
34-
<div
23+
</div> -->
24+
<h2 class="text-8xl mt-12 font-bold ml-14">
25+
<!-- <Icon name="logomark" class="size-20 text-white md:size-32" /> -->
26+
<div set:html={props.heroText} />
27+
</h2>
28+
<!-- <div
3529
id="astronaut"
3630
class="w-2/3 max-w-3xl self-start sm:w-10/12 sm:self-auto sm:justify-self-start"
3731
>
@@ -43,19 +37,24 @@ const sizes = "(min-width: 640px) 42vw, 67vw";
4337
loading="eager"
4438
alt="A floating astronaut in a space suit"
4539
/>
46-
</div>
47-
</div>
40+
</div> -->
4841
</section>
4942

50-
<noscript>
51-
<style>
52-
#splash-bg-fallback {
53-
display: block;
54-
}
55-
</style>
56-
</noscript>
57-
5843
<style>
44+
.splash::before {
45+
content: "";
46+
z-index: -1;
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 100%;
52+
background-image: url("/hero-image-colton-sturgeon-N4fdQbMJ0nI-unsplash.jpg");
53+
background-size: cover;
54+
background-position: left;
55+
filter: saturate(0.7) brightness(0.6);
56+
}
57+
5958
@keyframes float {
6059
0% {
6160
transform: translate3d(0, 0, 0);

‎src/config.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ title: Kadima Solutions
22
description: Business technology consulting - Forward Thinking. Lasting Solutions.
33

44
# # Not used yet
5-
# heroText: Pure Innovationkk
5+
heroText: Kadima Solutions
66

77
sections:
88
- type: content
9-
title: Kadima Solutions
10-
lead: Business Technology Consulting<br /><br />Forward Thinking. Lasting Solutions.
9+
title: Business Technology Consulting
10+
lead: Forward Thinking. Lasting Solutions.
1111
- type: contact-form
1212
title: Contact Us
1313
lead: Let's get it done

‎src/env.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ declare global {
2727
declare module "~/config.yaml" {
2828
import type { FeatureItem } from "./types";
2929
type Section = { id: string; title: string; lead: string } & (
30+
| {
31+
type: "splash";
32+
heroText: string;
33+
}
3034
| {
3135
type: "content";
3236
icon?: string;

‎src/icons/logomark.svg‎

Lines changed: 54 additions & 1 deletion
Loading

‎src/pages/index.astro‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Splash from "~/components/splash.astro";
1010
import "~/styles/index.css";
1111
import config from "~/config.yaml";
1212
import ContactForm from "~/components/ContactForm.astro";
13+
import { undefined } from "astro:schema";
1314
1415
const { generator, site } = Astro;
1516
const image = new URL("social.jpg", site);
@@ -68,12 +69,14 @@ const description = config.description;
6869
<body
6970
class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
7071
>
71-
<!-- <Header />
72-
<Splash {...config} /> -->
72+
<!-- <Header /> -->
73+
{config.heroText ? <Splash {...config} /> : undefined}
74+
7375
<div class="space-y-24 px-8 py-32">
7476
{
7577
config.sections.map((section) => {
76-
if (section.type == "content") {
78+
if (section.type == "splash") {
79+
} else if (section.type == "content") {
7780
return <Intro {...section} />;
7881
} else if (section.type == "features") {
7982
return <Features {...section} />;

‎src/styles/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ a,
88

99
.gradient-text {
1010
@apply bg-clip-text text-transparent;
11-
@apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
11+
@apply bg-gradient-to-br from-sky-300 via-indigo-600 to-slate-400;
1212
}

0 commit comments

Comments
 (0)