Skip to content

Commit 95a14a6

Browse files
kylejoekylejoe
committed
Adds typewriter effect and scrolling to different sections
1 parent 2ea0b65 commit 95a14a6

File tree

7 files changed

+254
-25
lines changed

7 files changed

+254
-25
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"next": "^13.4.6",
2222
"react": "^18.2.0",
2323
"react-dom": "^18.2.0",
24+
"react-simple-typewriter": "^5.0.1",
2425
"typescript": "5.1.3"
2526
},
2627
"main": "index.js",

‎src/app/components/Header.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ import {
1111
Image,
1212
} from "@mantine/core";
1313
import { useDisclosure } from "@mantine/hooks";
14+
import { useScrollIntoView } from "@mantine/hooks";
1415

1516
const HEADER_HEIGHT = rem(60);
1617

1718
const useStyles = createStyles((theme) => ({
1819
root: {
19-
position: "relative",
20+
position: "fixed",
2021
zIndex: 1,
2122
marginBottom: 0,
2223
backgroundColor: "transparent",
@@ -138,6 +139,7 @@ export function HeaderResponsive({ links }: HeaderResponsiveProps) {
138139
event.preventDefault();
139140
setActive(link.link);
140141
close();
142+
// useScrollIntoView();
141143
}}
142144
>
143145
{link.label}
@@ -163,6 +165,7 @@ export function HeaderResponsive({ links }: HeaderResponsiveProps) {
163165
onClick={toggle}
164166
className={classes.burger}
165167
size="sm"
168+
color="white"
166169
/>
167170

168171
<Transition transition="pop-top-right" duration={200} mounted={opened}>

‎src/app/components/Typewriter.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import { Typewriter } from "react-simple-typewriter";
3+
import { Text } from "@mantine/core";
4+
5+
const TypewriterComponent = () => {
6+
const handleType = (count: number) => {
7+
// access word count number
8+
console.log(count);
9+
};
10+
11+
const handleDone = () => {
12+
console.log(`Done after 5 loops!`);
13+
};
14+
15+
return (
16+
<div>
17+
<Text fz="xl" color="white">
18+
{/* Style will be inherited from the parent element */}
19+
<Typewriter
20+
words={[
21+
"Full Stack Software Development",
22+
"Transforming ideas into digital reality",
23+
"Building digital bridges for your business",
24+
"Helping you reach your customers",
25+
"Creating a digital presence for your business",
26+
"Driving growth through technology",
27+
"Delivering unparalleled web services",
28+
"Driving innovation, one website at a time",
29+
]}
30+
loop={5}
31+
cursor
32+
cursorStyle="|"
33+
typeSpeed={50}
34+
deleteSpeed={50}
35+
delaySpeed={1000}
36+
onLoopDone={handleDone}
37+
onType={handleType}
38+
cursorColor="#FFFFFF"
39+
/>
40+
</Text>
41+
</div>
42+
);
43+
};
44+
45+
export { TypewriterComponent };

‎src/app/globals.css

+18-10
Original file line numberDiff line numberDiff line change
@@ -85,16 +85,6 @@ body {
8585
overflow-x: hidden;
8686
}
8787

88-
/* body {
89-
color: rgb(var(--foreground-rgb));
90-
background: linear-gradient(
91-
to bottom,
92-
transparent,
93-
rgb(var(--background-end-rgb))
94-
)
95-
rgb(var(--background-start-rgb));
96-
} */
97-
9888
a {
9989
color: inherit;
10090
text-decoration: none;
@@ -105,3 +95,21 @@ a {
10595
color-scheme: dark;
10696
}
10797
}
98+
99+
/* html:not([data-scroll="0"]) {
100+
.mantine-Header-root {
101+
width: 100%;
102+
height: 9vh;
103+
display: flex;
104+
align-items: center;
105+
color: black;
106+
background: white;
107+
font-size: 0.6rem;
108+
padding-left: 4%;
109+
padding-right: 4%;
110+
position: fixed;
111+
top: 0;
112+
border-bottom: 1px solid black;
113+
z-index: 99;
114+
}
115+
} */

‎src/app/page.module.css

+66-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.main {
2-
/* display: flex;
3-
flex-direction: column;
2+
/* display: flex; */
3+
/* flex-direction: column;
44
justify-content: space-between;
55
align-items: center;
66
padding: 6rem; */
@@ -228,17 +228,73 @@
228228
}
229229
}
230230

231+
/* Custom Styles */
232+
231233
.backgroundImage {
234+
/* Find a way to do this without absolute position */
235+
background-repeat: no-repeat;
232236
position: absolute;
233237
top: 0;
234238
left: 0;
235-
width: 100%;
236-
height: 100%;
237-
background-image: url("/colchuck-lake.jpeg");
238-
background-size: cover;
239-
background-position: center;
240-
background-repeat: no-repeat;
239+
height: 100vh;
241240
z-index: -1;
242-
/* filter: blur(2px);
243-
opacity: 0.5; */
241+
}
242+
243+
.contentContainer {
244+
display: flex;
245+
flex-direction: column;
246+
justify-content: center;
247+
align-items: center;
248+
height: 100%;
249+
}
250+
251+
.pageTitle {
252+
color: white;
253+
/* Add this font get from google?? */
254+
/* font-family: "Russo One"; */
255+
justify-content: center;
256+
margin-top: 175px;
257+
}
258+
259+
.cardContainer {
260+
position: absolute;
261+
top: 100vh;
262+
}
263+
264+
/* Custom animations */
265+
266+
.slideDown {
267+
opacity: 0;
268+
animation: slideDownOpacity ease-in 1;
269+
animation-fill-mode: forwards;
270+
animation-duration: 2s;
271+
}
272+
273+
@keyframes slideDownOpacity {
274+
0% {
275+
opacity: 0;
276+
transform: translateY(-30px);
277+
}
278+
100% {
279+
opacity: 1;
280+
transform: translateY(0px);
281+
}
282+
}
283+
284+
.fadeOut {
285+
opacity: 1;
286+
animation: fadeOut ease-in 1;
287+
animation-fill-mode: forwards;
288+
animation-duration: 1s;
289+
}
290+
291+
@keyframes fadeOut {
292+
0% {
293+
opacity: 1;
294+
transform: translateY(0px);
295+
}
296+
100% {
297+
opacity: 0;
298+
transform: translateY(-30px);
299+
}
244300
}

‎src/app/page.tsx

+115-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
"use client";
1+
// https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp
2+
"use client"; // This is a client component 👈🏽
23

34
import styles from "./page.module.css";
45
import { HeaderResponsive } from "./components/Header";
5-
import { Image, Card, Text, Badge, Button, Group } from "@mantine/core";
6+
import {
7+
Image,
8+
Card,
9+
Text,
10+
Badge,
11+
Button,
12+
Group,
13+
Title,
14+
BackgroundImage,
15+
} from "@mantine/core";
16+
17+
import { TypewriterComponent } from "./components/Typewriter";
618

719
const links = [
820
{ label: "Home", link: "/" },
@@ -14,9 +26,108 @@ const links = [
1426
export default function Home() {
1527
return (
1628
<main className={styles.main}>
17-
<div className={styles.backgroundImage}></div>
29+
<BackgroundImage
30+
src="/colchuck-lake.jpeg"
31+
className={styles.backgroundImage}
32+
/>
1833
<HeaderResponsive links={links} />
19-
<div>Hello darkness my old friend I've come to talk with you again</div>
34+
<div className={styles.contentContainer}>
35+
<Title order={1} className={`${styles.slideDown} ${styles.pageTitle}`}>
36+
Colchuck Consulting
37+
</Title>
38+
<TypewriterComponent />
39+
<div className={styles.cardContainer}>
40+
{/* About */}
41+
<div className={styles.aboutUs} id="aboutUs">
42+
<Title order={2}>About Us</Title>
43+
<br />
44+
<br />
45+
<br />
46+
<br />
47+
<br />
48+
<br />
49+
<br />
50+
<br />
51+
<br />
52+
<br />
53+
<br />
54+
<br />
55+
<br />
56+
<br />
57+
<br />
58+
<br />
59+
<br />
60+
<br />
61+
<br />
62+
<br />
63+
<br />
64+
<br />
65+
<br />
66+
<br />
67+
<br />
68+
<br />
69+
<br />
70+
<br />
71+
<br />
72+
<br />
73+
<br />
74+
<br />
75+
<br />
76+
<br />
77+
<br />
78+
<br />
79+
<br />
80+
<br />
81+
<br />
82+
<br />
83+
<br />
84+
</div>
85+
<div className={styles.projects} id="projects">
86+
<Title order={2}>Projects</Title>
87+
<br />
88+
<br />
89+
<br />
90+
<br />
91+
<br />
92+
<br />
93+
<br />
94+
<br />
95+
<br />
96+
<br />
97+
<br />
98+
<br />
99+
<br />
100+
<br />
101+
<br />
102+
<br />
103+
<br />
104+
<br />
105+
<br />
106+
<br />
107+
<br />
108+
<br />
109+
<br />
110+
<br />
111+
<br />
112+
<br />
113+
<br />
114+
<br />
115+
<br />
116+
<br />
117+
<br />
118+
<br />
119+
<br />
120+
<br />
121+
<br />
122+
<br />
123+
<br />
124+
<br />
125+
<br />
126+
<br />
127+
<br />
128+
</div>
129+
</div>
130+
</div>
20131
</main>
21132
);
22133
}

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -2198,6 +2198,11 @@ react-remove-scroll@^2.5.5:
21982198
use-callback-ref "^1.3.0"
21992199
use-sidecar "^1.1.2"
22002200

2201+
react-simple-typewriter@^5.0.1:
2202+
version "5.0.1"
2203+
resolved "https://registry.yarnpkg.com/react-simple-typewriter/-/react-simple-typewriter-5.0.1.tgz#cfdb896c868a55ed4d5f1f06d62b3a9d0f5ad9d7"
2204+
integrity sha512-vA5HkABwJKL/DJ4RshSlY/igdr+FiVY4MLsSQYJX6FZG/f1/VwN4y1i3mPXRyfaswrvI8xii1kOVe1dYtO2Row==
2205+
22012206
react-style-singleton@^2.2.1:
22022207
version "2.2.1"
22032208
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"

0 commit comments

Comments
 (0)