Skip to content

Commit 83b9629

Browse files
kylejoekylejoe
committed
Adds HeroImageBackground component, removes tsparticles, adds new background image
1 parent d0db2b5 commit 83b9629

8 files changed

+144
-740
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@
2727
"react-simple-typewriter": "^5.0.1",
2828
"react-tsparticles": "^2.10.1",
2929
"tabler-icons-react": "^1.56.0",
30-
"tsparticles": "^2.10.1",
3130
"typescript": "5.1.3"
3231
},
3332
"devDependencies": {

‎public/images/aasgard-pass.jpg

1.38 MB
Loading

‎src/app/components/About.tsx

+45-42
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
rem,
77
Anchor,
88
Grid,
9+
Container,
910
} from "@mantine/core";
1011

1112
import { Carousel } from "@mantine/carousel";
@@ -39,51 +40,53 @@ export function About() {
3940
const autoplay = useRef(Autoplay({ delay: 3000 }));
4041
return (
4142
<div id="about">
42-
<Grid>
43-
<Grid.Col sm={6} xs={12}>
44-
<Title className={classes.title}>Who We Are</Title>
45-
<Text color="black" mt="md">
46-
Our company was envisioned during a trip to{" "}
47-
<Anchor
48-
href="https://earth.google.com/web/search/Colchuck+Lake,+Leavenworth,+WA/@47.4984306,-120.8333841,1702.27471821a,686.05166596d,35y,0h,45t,0r/data=CokBGl8SWQolMHg1NDlhNDUwMzM0MzU2MmYzOjB4Y2FjM2E0MDRiMWM0OThkNxmvKeuSzL9HQCFooEMqVjVewCoeQ29sY2h1Y2sgTGFrZSwgTGVhdmVud29ydGgsIFdBGAIgASImCiQJkgGtdGnAR0ARThROffS0R0AZnKRRKqssXsAh0LA3KDs1XsAoAg"
49-
target="_blank"
43+
<Container size={1100} style={{ marginTop: "100px" }}>
44+
<Grid>
45+
<Grid.Col sm={6} xs={12}>
46+
<Title className={classes.title}>Who We Are</Title>
47+
<Text color="black" mt="md">
48+
Our company was envisioned during a trip to{" "}
49+
<Anchor
50+
href="https://earth.google.com/web/search/Colchuck+Lake,+Leavenworth,+WA/@47.4984306,-120.8333841,1702.27471821a,686.05166596d,35y,0h,45t,0r/data=CokBGl8SWQolMHg1NDlhNDUwMzM0MzU2MmYzOjB4Y2FjM2E0MDRiMWM0OThkNxmvKeuSzL9HQCFooEMqVjVewCoeQ29sY2h1Y2sgTGFrZSwgTGVhdmVud29ydGgsIFdBGAIgASImCiQJkgGtdGnAR0ARThROffS0R0AZnKRRKqssXsAh0LA3KDs1XsAoAg"
51+
target="_blank"
52+
>
53+
Colchuck Lake
54+
</Anchor>
55+
, in the Enchantments of Washington State in 2018. We were
56+
inspired by the beauty of the lake, and the surrounding mountains.
57+
We wanted to bring that same beauty to our software. Founded by
58+
two industry experts, with a combined 40 years of experience,
59+
ready to make your dreams a reality.
60+
</Text>
61+
<Text color="black" mt="md">
62+
Focused on excellence for our clients, we are well established,
63+
with a reputation for great service and a high-quality product. We
64+
are a team of experienced developers and designers, who are
65+
passionate about building beautiful, easy to use software.
66+
</Text>
67+
</Grid.Col>
68+
<Grid.Col sm={6} xs={12}>
69+
<Carousel
70+
withControls
71+
withIndicators
72+
loop={true}
73+
plugins={[autoplay.current]}
74+
onMouseEnter={autoplay.current.stop}
75+
onMouseLeave={autoplay.current.reset}
5076
>
51-
Colchuck Lake
52-
</Anchor>
53-
, in the Enchantments of Washington State in 2018. We were inspired
54-
by the beauty of the lake, and the surrounding mountains. We wanted
55-
to bring that same beauty to our software. Founded by two industry
56-
experts, with a combined 40 years of experience, ready to make your
57-
dreams a reality.
58-
</Text>
59-
<Text color="black" mt="md">
60-
Focused on excellence for our clients, we are well established, with
61-
a reputation for great service and a high-quality product. We are a
62-
team of experienced developers and designers, who are passionate
63-
about building beautiful, easy to use software.
64-
</Text>
65-
</Grid.Col>
66-
<Grid.Col sm={6} xs={12}>
67-
<Carousel
68-
withControls
69-
withIndicators
70-
loop={true}
71-
plugins={[autoplay.current]}
72-
onMouseEnter={autoplay.current.stop}
73-
onMouseLeave={autoplay.current.reset}
74-
>
75-
<Carousel.Slide>
76-
<Image src="./images/colchuck-lake.jpeg" />
77-
</Carousel.Slide>
78-
<Carousel.Slide>
79-
<Image src="./images/founders.png" />
80-
</Carousel.Slide>
81-
{/* <Carousel.Slide>
77+
<Carousel.Slide>
78+
<Image src="./images/colchuck-lake.jpeg" />
79+
</Carousel.Slide>
80+
<Carousel.Slide>
81+
<Image src="./images/founders.png" />
82+
</Carousel.Slide>
83+
{/* <Carousel.Slide>
8284
<Image src="./images/15401560621_9c96b7b02a_o.jpeg" />
8385
</Carousel.Slide> */}
84-
</Carousel>
85-
</Grid.Col>
86-
</Grid>
86+
</Carousel>
87+
</Grid.Col>
88+
</Grid>
89+
</Container>
8790
</div>
8891
);
8992
}

‎src/app/components/HeroImageBackground.tsx

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import {
2+
Title,
3+
Text,
4+
Container,
5+
Overlay,
6+
createStyles,
7+
rem,
8+
keyframes,
9+
} from "@mantine/core";
10+
import { TypewriterComponent } from "./TypewriterComponent";
11+
import { ChevronsDown } from "tabler-icons-react";
12+
13+
export const bounce = keyframes({
14+
"from, 20%, 53%, 80%, to": { transform: "translate3d(0, 0, 0)" },
15+
"40%, 43%": { transform: "translate3d(0, -1.875rem, 0)" },
16+
"70%": { transform: "translate3d(0, -0.9375rem, 0)" },
17+
"90%": { transform: "translate3d(0, -0.25rem, 0)" },
18+
});
19+
20+
export const slideDownOpacity = keyframes({
21+
from: { opacity: 0, transform: "translateY(-20px)" },
22+
to: { opacity: 1, transform: "translateY(0)" },
23+
});
24+
25+
const useStyles = createStyles((theme) => ({
26+
wrapper: {
27+
position: "absolute",
28+
top: 0,
29+
width: "100vw",
30+
height: "100vh",
31+
backgroundImage: `url("./images/aasgard-pass.jpg")`,
32+
backgroundSize: "cover",
33+
backgroundPosition: "center",
34+
},
35+
36+
title: {
37+
fontWeight: 800,
38+
fontSize: rem(60),
39+
letterSpacing: rem(-1),
40+
marginTop: "275px",
41+
position: "relative",
42+
paddingLeft: theme.spacing.md,
43+
paddingRight: theme.spacing.md,
44+
color: theme.white,
45+
marginBottom: theme.spacing.xs,
46+
textAlign: "center",
47+
fontFamily: `Georgia, ${theme.fontFamily}`,
48+
animation: `${slideDownOpacity} ease-in 1s`,
49+
animationFillMode: "forwards",
50+
animationDuration: "2s",
51+
52+
[theme.fn.smallerThan("xs")]: {
53+
fontSize: rem(28),
54+
textOverflow: "ellipsis",
55+
},
56+
},
57+
58+
description: {
59+
color: theme.colors.gray[0],
60+
textAlign: "center",
61+
62+
[theme.fn.smallerThan("xs")]: {
63+
fontSize: theme.fontSizes.md,
64+
},
65+
},
66+
67+
chevronsDown: {
68+
position: "absolute",
69+
left: "0",
70+
right: "0",
71+
bottom: "0",
72+
marginBottom: "20px",
73+
animation: `${bounce} 3s ease-in-out infinite`,
74+
textAlign: "center",
75+
marginLeft: "auto",
76+
marginRight: "auto",
77+
},
78+
}));
79+
80+
export function HeroImageBackground() {
81+
const { classes, cx } = useStyles();
82+
83+
return (
84+
<div className={classes.wrapper}>
85+
<Overlay color="#808080" opacity={0.45} zIndex={0} />
86+
<Title order={1} className={classes.title}>
87+
Colchuck Consulting
88+
</Title>
89+
<Container size={640}>
90+
<Text className={classes.description}>
91+
<TypewriterComponent />
92+
</Text>
93+
</Container>
94+
<ChevronsDown color="white" size={48} className={classes.chevronsDown} />
95+
</div>
96+
);
97+
}

0 commit comments

Comments
 (0)