Skip to content

Commit 7c7aaea

Browse files
kylejoekylejoe
committed
Add particles component and minor changes
1 parent 8a51d35 commit 7c7aaea

11 files changed

+678
-30
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,9 @@
2222
"react": "^18.2.0",
2323
"react-dom": "^18.2.0",
2424
"react-simple-typewriter": "^5.0.1",
25+
"react-tsparticles": "^2.10.1",
2526
"tabler-icons-react": "^1.56.0",
27+
"tsparticles": "^2.10.1",
2628
"typescript": "5.1.3"
2729
},
2830
"devDependencies": {

‎public/colchuck-lake.jpeg ‎public/images/colchuck-lake.jpeg

File renamed without changes.

‎src/app/components/About.tsx

+4-7
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ import {
88
} from "@mantine/core";
99

1010
const useStyles = createStyles((theme) => ({
11-
wrapper: {
12-
background: "linear-gradient(to bottom right, white, green)",
13-
},
1411
inner: {
1512
display: "flex",
1613
justifyContent: "space-between",
@@ -29,7 +26,7 @@ const useStyles = createStyles((theme) => ({
2926
},
3027

3128
title: {
32-
color: theme.white,
29+
color: theme.black,
3330
fontFamily: `Greycliff CF, ${theme.fontFamily}`,
3431
fontSize: rem(44),
3532
lineHeight: 1.2,
@@ -68,20 +65,20 @@ const useStyles = createStyles((theme) => ({
6865
export function About() {
6966
const { classes } = useStyles();
7067
return (
71-
<div id="about" className={classes.wrapper}>
68+
<div id="about">
7269
<Container>
7370
<div className={classes.inner}>
7471
<div className={classes.content}>
7572
<Title className={classes.title}>Who We Are</Title>
76-
<Text color="white" mt="md">
73+
<Text color="black" mt="md">
7774
Our company was envisioned during a trip to Colchuck Lake, in the
7875
Enchantments of Washington State in 2018. We were inspired by the
7976
beauty of the lake, and the surrounding mountains. We wanted to
8077
bring that same beauty to our software. Founded by two industry
8178
experts, with a combined 40 years of experience, ready to make
8279
your dreams a reality.
8380
</Text>
84-
<Text color="white" mt="md">
81+
<Text color="black" mt="md">
8582
Focused on excellence for our clients, we are well established,
8683
with a reputation for great service and a high-quality product. We
8784
are a team of experienced developers and designers, who are

‎src/app/components/Header.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const HEADER_HEIGHT = rem(60);
1616

1717
const useStyles = createStyles((theme) => ({
1818
root: {
19-
position: "fixed",
19+
position: "relative", //TODO: set to fixed in the future to make it sticky
2020
zIndex: 1,
2121
marginBottom: 0,
2222
backgroundColor: "transparent",
@@ -60,7 +60,7 @@ const useStyles = createStyles((theme) => ({
6060
marginTop: "5px",
6161
width: 0,
6262
height: "2px",
63-
backgroundColor: "#a8c196",
63+
backgroundColor: "#98ff98",
6464
content: '""',
6565
opacity: 0,
6666
transition: "width 0.6s, opacity 0.8s",
@@ -70,7 +70,7 @@ const useStyles = createStyles((theme) => ({
7070
opacity: 1,
7171
},
7272
"&:hover": {
73-
color: "#a8c196",
73+
color: "#98ff98",
7474
},
7575
},
7676
},
@@ -81,6 +81,10 @@ const useStyles = createStyles((theme) => ({
8181
},
8282
},
8383

84+
logo: {
85+
marginLeft: "-28px" /* fix for mobile */,
86+
},
87+
8488
link: {
8589
display: "block",
8690
lineHeight: 1,
@@ -140,13 +144,19 @@ export function HeaderResponsive({ links }: HeaderResponsiveProps) {
140144
));
141145

142146
return (
143-
<Header height={HEADER_HEIGHT} mb={120} className={classes.root}>
147+
<Header
148+
height={HEADER_HEIGHT}
149+
mb={120}
150+
className={classes.root}
151+
id="header"
152+
>
144153
<Container className={classes.header}>
145154
<Image
146155
src="/cc-white-mtn.svg"
147156
height={100}
148157
width={200}
149158
alt="Colchuck Consulting Logo"
159+
className={classes.logo}
150160
/>
151161

152162
<Group spacing={5} className={classes.links}>

‎src/app/components/ParticlesComponent.tsx

+253
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
// react particles
2+
import { useCallback } from "react";
3+
import Particles from "react-tsparticles";
4+
import { loadFull } from "tsparticles";
5+
6+
// css styling
7+
import styles from "../page.module.css";
8+
9+
const ParticlesComponent = () => {
10+
// initialize TsParticles library
11+
const particlesInit = useCallback(async (engine: any) => {
12+
await loadFull(engine);
13+
}, []);
14+
15+
const particlesLoaded = useCallback(async (container: any) => {
16+
await console.log(container);
17+
}, []);
18+
19+
return (
20+
<Particles
21+
id="tsparticles"
22+
className={styles.particles}
23+
init={particlesInit}
24+
loaded={particlesLoaded}
25+
options={{
26+
autoPlay: true,
27+
background: {
28+
color: { value: "#567698" },
29+
image:
30+
"linear-gradient(160deg, #00873d 10%, #0f8f4a 20%, #1e9757 30%, #2d9f64 40%, #3ca771 50%, #4baf7e 60%, #5ab78b 70%, #69bf98 80%, #78c7a5 90%, #87cfb2 100%)",
31+
position: "",
32+
repeat: "",
33+
size: "",
34+
opacity: 1,
35+
},
36+
backgroundMask: {
37+
composite: "destination-out",
38+
cover: { color: { value: "#fff" }, opacity: 1 },
39+
enable: false,
40+
},
41+
backgroundMode: { enable: false, zIndex: -1 },
42+
detectRetina: true,
43+
infection: {
44+
cure: false,
45+
delay: 0,
46+
enable: false,
47+
infections: 0,
48+
stages: [],
49+
},
50+
interactivity: {
51+
detectsOn: "canvas",
52+
events: {
53+
onClick: { enable: true, mode: "repulse" },
54+
onDiv: { selectors: [], enable: false, mode: [], type: "circle" },
55+
onHover: {
56+
enable: true,
57+
mode: "bubble",
58+
parallax: { enable: false, force: 2, smooth: 10 },
59+
},
60+
resize: true,
61+
},
62+
modes: {
63+
attract: { distance: 200, duration: 0.4, speed: 1 },
64+
bounce: { distance: 200 },
65+
bubble: { distance: 250, duration: 2, opacity: 0, size: 0 },
66+
connect: { distance: 80, links: { opacity: 0.5 }, radius: 60 },
67+
grab: {
68+
distance: 400,
69+
links: { blink: false, consent: false, opacity: 1 },
70+
},
71+
light: {
72+
area: {
73+
gradient: {
74+
start: { value: "#ffffff" },
75+
stop: { value: "#000000" },
76+
},
77+
radius: 1000,
78+
},
79+
shadow: { color: { value: "#000000" }, length: 2000 },
80+
},
81+
push: { quantity: 4 },
82+
remove: { quantity: 2 },
83+
repulse: { distance: 400, duration: 0.4, speed: 1 },
84+
slow: { factor: 3, radius: 200 },
85+
trail: { delay: 1, quantity: 1 },
86+
},
87+
},
88+
manualParticles: [],
89+
motion: { disable: false, reduce: { factor: 4, value: false } },
90+
particles: {
91+
bounce: {
92+
horizontal: {
93+
random: { enable: false, minimumValue: 0.1 },
94+
value: 1,
95+
},
96+
vertical: {
97+
random: { enable: false, minimumValue: 0.1 },
98+
value: 1,
99+
},
100+
},
101+
collisions: {
102+
bounce: {
103+
horizontal: {
104+
random: { enable: false, minimumValue: 0.1 },
105+
value: 1,
106+
},
107+
vertical: {
108+
random: { enable: false, minimumValue: 0.1 },
109+
value: 1,
110+
},
111+
},
112+
enable: false,
113+
mode: "bounce",
114+
},
115+
color: {
116+
value: "#ffffff",
117+
animation: { enable: false, speed: 1, sync: true },
118+
},
119+
life: {
120+
count: 0,
121+
delay: {
122+
random: { enable: false, minimumValue: 0 },
123+
value: 0,
124+
sync: false,
125+
},
126+
duration: {
127+
random: { enable: false, minimumValue: 0.0001 },
128+
value: 0,
129+
sync: false,
130+
},
131+
},
132+
links: {
133+
blink: false,
134+
color: { value: "#ffffff" },
135+
consent: false,
136+
distance: 150,
137+
enable: false,
138+
frequency: 1,
139+
opacity: 0.4,
140+
shadow: { blur: 5, color: { value: "#00ff00" }, enable: false },
141+
triangles: { enable: false, frequency: 1 },
142+
width: 1,
143+
warp: false,
144+
},
145+
move: {
146+
angle: { offset: 45, value: 90 },
147+
attract: { enable: false, rotate: { x: 600, y: 600 } },
148+
direction: "none",
149+
distance: 0,
150+
enable: true,
151+
gravity: { acceleration: 9.81, enable: false, maxSpeed: 50 },
152+
noise: {
153+
delay: { random: { enable: false, minimumValue: 0 }, value: 0 },
154+
enable: false,
155+
},
156+
outModes: {
157+
default: "out",
158+
bottom: "out",
159+
left: "out",
160+
right: "out",
161+
top: "out",
162+
},
163+
random: true,
164+
size: false,
165+
speed: 1,
166+
straight: false,
167+
trail: {
168+
enable: false,
169+
length: 10,
170+
fillColor: { value: "#000000" },
171+
},
172+
vibrate: false,
173+
warp: false,
174+
},
175+
number: {
176+
density: { enable: true, area: 800, factor: 1000 },
177+
limit: 0,
178+
value: 160,
179+
},
180+
opacity: {
181+
random: { enable: true, minimumValue: 1 },
182+
value: 1,
183+
animation: {
184+
enable: true,
185+
minimumValue: 0,
186+
speed: 1,
187+
sync: false,
188+
},
189+
},
190+
reduceDuplicates: false,
191+
rotate: {
192+
random: { enable: false, minimumValue: 0 },
193+
value: 0,
194+
animation: { enable: false, speed: 0, sync: false },
195+
direction: "clockwise",
196+
path: false,
197+
},
198+
shadow: {
199+
blur: 0,
200+
color: { value: "#000000" },
201+
enable: false,
202+
offset: { x: 0, y: 0 },
203+
},
204+
shape: {
205+
options: {
206+
polygon: { nb_sides: 5 },
207+
star: { nb_sides: 5 },
208+
image: {
209+
src: "https://cdn.matteobruni.it/images/particles/github.svg",
210+
width: 100,
211+
height: 100,
212+
},
213+
images: {
214+
src: "https://cdn.matteobruni.it/images/particles/github.svg",
215+
width: 100,
216+
height: 100,
217+
},
218+
},
219+
type: "circle",
220+
},
221+
size: {
222+
random: { enable: true, minimumValue: 1 },
223+
value: 3,
224+
animation: {
225+
destroy: "none",
226+
enable: false,
227+
minimumValue: 0.3,
228+
speed: 4,
229+
startValue: "max",
230+
sync: false,
231+
},
232+
},
233+
stroke: {
234+
width: 0,
235+
color: {
236+
value: "#000000",
237+
animation: { enable: false, speed: 1, sync: true },
238+
},
239+
},
240+
twinkle: {
241+
lines: { enable: false, frequency: 0.05, opacity: 1 },
242+
particles: { enable: false, frequency: 0.05, opacity: 1 },
243+
},
244+
},
245+
pauseOnBlur: true,
246+
pauseOnOutsideViewport: false,
247+
themes: [],
248+
}}
249+
/>
250+
);
251+
};
252+
253+
export { ParticlesComponent };

‎src/app/components/Skills.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
CloudComputing,
1414
Devices,
1515
Seo,
16-
Message2,
1716
Users,
1817
} from "tabler-icons-react";
1918

‎src/app/components/Typewriter.tsx ‎src/app/components/TypewriterComponent.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,21 @@
11
import React from "react";
22

33
import { Typewriter } from "react-simple-typewriter"; // https://www.npmjs.com/package/react-simple-typewriter
4-
import { Text } from "@mantine/core";
4+
import { Text, createStyles } from "@mantine/core";
5+
6+
const useStyles = createStyles(() => ({
7+
typewriterWrapper: {
8+
span: {
9+
position: "relative",
10+
},
11+
},
12+
}));
513

614
const TypewriterComponent = () => {
15+
const { classes, cx } = useStyles();
16+
717
return (
8-
<div>
18+
<div className={classes.typewriterWrapper}>
919
<Text fz="xl" color="white">
1020
{/* Style will be inherited from the parent element */}
1121
<Typewriter

0 commit comments

Comments
 (0)