Skip to content

Commit d87f479

Browse files
carms-ngcarms-ng
authored
Merge pull request #13 from coderbunker/aos
[ADD] animation on scroll
2 parents 4b09320 + b9a176f commit d87f479

18 files changed

+85
-68
lines changed

‎package-lock.json

Lines changed: 41 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"author": "Carms Ng",
77
"dependencies": {
88
"@react-icons/all-files": "^4.1.0",
9+
"aos": "^2.3.4",
910
"babel-plugin-styled-components": "^1.12.0",
1011
"gatsby": "^3.2.1",
1112
"gatsby-plugin-gatsby-cloud": "^2.2.0",

‎src/components/bg-image.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ export default function BackgroundImage({style, imgStyle}) {
66
const data = useStaticQuery(graphql`{
77
fileName: file(relativePath: {eq: "bunker.png"}) {
88
childImageSharp {
9-
gatsbyImageData(width: 1000, quality: 80, layout: CONSTRAINED)
9+
gatsbyImageData(
10+
width: 1000,
11+
placeholder: BLURRED
12+
layout: CONSTRAINED
13+
)
1014
}
1115
}
1216
}

‎src/components/button.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ function CallToAction() {
1313
)
1414
}
1515

16-
function ButtonRed({ type, text, className, style }) {
16+
function ButtonRed({ type, text, className, style, dataAos, dataAosDelay }) {
1717
return (
1818
<ButtonStyle>
19-
<button type={type} className={`px-4 md:px-6 py-2 text-lg md:text-xl ${className ? className : ""}`} style={style}>{text}</button>
19+
<button data-aos={dataAos} data-aos-delay={dataAosDelay} type={type} className={`px-4 md:px-6 py-2 text-lg md:text-xl ${className ? className : ""}`} style={style}>{text}</button>
2020
</ButtonStyle>
2121
)
2222
}

‎src/components/carousel.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ export default function Carousel() {
1313
node {
1414
base
1515
childImageSharp {
16-
gatsbyImageData(width: 500, quality: 80, layout: FULL_WIDTH)
16+
gatsbyImageData(
17+
width: 500,
18+
placeholder: BLURRED,
19+
layout: CONSTRAINED
20+
)
1721
}
1822
id
1923
}

‎src/components/contact-form.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default function ContactForm() {
137137
value={formState.message}
138138
/>
139139
<input type="hidden" name="form-name" value="contact" />
140-
<ButtonRed type="submit" text="Send" style={{ float: `right` }} />
140+
<ButtonRed dataAos="fade-right" dataAosDelay="200" type="submit" text="Send" style={{ float: `right` }} />
141141
</ContactFormStyles>
142142
)
143143
}

‎src/components/contact.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default function Contact() {
5252
className="absolute"
5353
style={{zIndex: `-1`, width: `50vw`, left: `0`, bottom: `5vh`}}>
5454
<StaticImage
55+
placeholder="blurred"
5556
src="../assets/images/map.png"
5657
width={1000}
5758
alt="Map outline of Canada"

‎src/components/header.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default function Header() {
3434
{/* TODO: center logo */}
3535
<Link to="/">
3636
<StaticImage
37+
placeholder="blurred"
3738
src="../assets/images/coderbunker-logo-black.png"
3839
alt="Coderbunker Logo"
3940
width={50}

‎src/components/hero.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function Hero() {
4646

4747
{/* Hero Image*/}
4848
<div className="flex-1 hidden md:block p-16">
49-
<StaticImage src="../assets/images/coders.png" alt="Coderbunker Coders"/>
49+
<StaticImage placeholder="blurred" src="../assets/images/coders.png" alt="Coderbunker Coders"/>
5050
</div>
5151
</div>
5252

‎src/components/join.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export default function Join() {
2727
<p className="text-lg lg:text-xl md:my-4 md:pb-8 text-center">#SoftwareDevelopment #EmbeddedSystems #Blockchain #DigitalIdentity #PublicKeyInfrastructure #SystemAdministration #Cybersecurity #Encryption #Linux #FPGA #ARM #RISC-V #Ethereum #PGP #PostgreSQL #AWS #Azure #GoogleCloud #etc</p>
2828
<div style={{maxWidth: `70vw`, width: `500px`, margin: `0 auto`, padding: `2rem`}}>
2929
<StaticImage
30+
placeholder="blurred"
3031
src="../assets/images/coders.png"
3132
alt="Coderbunker Coders Coworking"
3233
/>

‎src/components/logo-garden.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ export default function LogoGarden() {
1313
node {
1414
base
1515
childImageSharp {
16-
gatsbyImageData(width: 150, quality: 80, layout: CONSTRAINED)
16+
gatsbyImageData(
17+
width: 150,
18+
placeholder: BLURRED,
19+
layout: CONSTRAINED
20+
)
1721
id
1822
}
1923
}

‎src/components/service.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function Service() {
2424
{/* Cards */}
2525
<div className="flex-grow flex flex-col md:flex-row">
2626
{/* Card */}
27-
<div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1">
27+
<div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1" data-aos="fade-right" data-aos-delay="200">
2828
<div className="card-header flex items-center text-xl lg:text-2xl">
2929
<div className="icon-wrapper">
3030
<FaCube />
@@ -55,7 +55,7 @@ export default function Service() {
5555
</ul>
5656
</div>
5757
{/* Card */}
58-
<div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1">
58+
<div className="card my-2 md:m-6 lg:m-12 p-4 md:p-8 flex-1" data-aos="fade-up" data-aos-delay="200">
5959
<div className="card-header flex items-center text-xl lg:text-2xl">
6060
<div className="icon-wrapper">
6161
<FaChalkboardTeacher />

‎src/components/stacked-avatar.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ export default function StackedAvatar() {
1010
node {
1111
base
1212
childImageSharp {
13-
gatsbyImageData(width: 75, layout: FIXED)
13+
gatsbyImageData(
14+
width: 75,
15+
placeholder: BLURRED,
16+
layout: FIXED
17+
)
1418
id
1519
}
1620
}
@@ -33,7 +37,8 @@ export default function StackedAvatar() {
3337
key={pic.node.childImageSharp.id}
3438
alt="pic.node.base.split('.')[0]" />
3539
);
36-
})}
40+
}).slice(0, 7)}
41+
{/* TODO: handle representation for members with count above 7 */}
3742
</div>
3843
);
3944
}

‎src/components/steps.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function Steps() {
2323
{/* cards */}
2424
<div className="cards flex flex-col md:flex-row">
2525
{/* card */}
26-
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
26+
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up">
2727
<div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
2828
<FaSignature />
2929
</div>
@@ -37,7 +37,7 @@ export default function Steps() {
3737
</div>
3838
</div>
3939
{/* card */}
40-
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
40+
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up" data-aos-delay="200">
4141
<div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
4242
<FaRocket />
4343
</div>
@@ -51,7 +51,7 @@ export default function Steps() {
5151
</div>
5252
</div>
5353
{/* card */}
54-
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8">
54+
<div className="card flex flex-row sm:flex-col items-center text-left sm:text-center md:flex-1 my-2 p-4 md:p-8" data-aos="fade-up" data-aos-delay="400">
5555
<div className="icon-wrapper text-xl lg:text-2xl mr-4 sm:m-4">
5656
<FaCubes />
5757
</div>

‎src/pages/index.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as React from "react"
1+
import React, { useEffect } from "react"
22
import { useTranslation } from 'gatsby-plugin-react-i18next';
33
import { graphql } from 'gatsby';
44
import Layout from "../components/layout"
@@ -10,7 +10,15 @@ import Steps from "../components/steps";
1010
import Join from "../components/join";
1111
import Contact from "../components/contact";
1212

13+
import AOS from 'aos';
14+
import 'aos/dist/aos.css';
15+
1316
export default function IndexPage() {
17+
useEffect(() => {
18+
// initialize Animation on Scroll
19+
AOS.init();
20+
});
21+
1422
const {t} = useTranslation();
1523
return (
1624
<Layout>

‎src/pages/using-typescript.tsx

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎src/utils/.gitkeep

Whitespace-only changes.

‎src/utils/helper.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)