Skip to content

Commit 3f6caac

Browse files
cheryllicherylli
committed
add revealContentContainer to wrap around components to be revealed on scrolling
1 parent 9b0085a commit 3f6caac

File tree

7 files changed

+122
-110
lines changed

7 files changed

+122
-110
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
2424
- footer copyright
2525
- Header.js component
2626
- reCAPTCHA
27+
- useIntersect Hook, Reveal container for scrolling using intersection API
2728

2829
### Fixed
2930

‎components/CardsColumns.js

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { useEffect, useState } from 'react';
21
import Card from './Card';
32
import Container from './Container';
43
import styles from '../styles/CardsColumns.module.scss';
5-
import { useIntersect } from '../hooks/useIntersect';
64

75
export default function CardsColumns({
86
images,
@@ -12,23 +10,9 @@ export default function CardsColumns({
1210
links,
1311
linkText,
1412
}) {
15-
const [ref, entry] = useIntersect({ threshold: 0.15 });
16-
const [firstLoad, setFirstLoad] = useState(true);
17-
const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
18-
19-
useEffect(() => {
20-
if (entry.isIntersecting && firstLoad) {
21-
setHiddenStyle('');
22-
setFirstLoad(false);
23-
}
24-
}, [entry.isIntersecting]);
25-
2613
return (
2714
<Container>
28-
<div
29-
ref={ref}
30-
className={`${styles.inner__content} ${styles[hiddenStyle]}`}
31-
>
15+
<div className={`${styles.inner__content}`}>
3216
{titles.map((title, index) => {
3317
return (
3418
<Card

‎components/Footer.js

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,42 @@ import { linksNav } from '../utils/links';
44
import NewsletterSubscribe from './mailchimp/NewsletterSubscribe';
55
import Image from 'next/image';
66
import Container from './Container';
7+
import RevealContentContainer from './RevealContentContainer';
78

89
export default function Footer() {
910
return (
10-
<footer className={footerStyles.footer}>
11-
<NewsletterSubscribe />
12-
<Container className={footerStyles.footer__inner}>
13-
<nav className={footerStyles.footer__nav} aria-label="Main">
14-
<ul className={footerStyles.footer__navList}>
15-
{linksNav.map(link => (
16-
<li className={footerStyles.footer__navItem} key={link.text}>
17-
<Link href={link.href}>
18-
<a title={link.text}>{link.text}</a>
19-
</Link>
20-
</li>
21-
))}
22-
</ul>
23-
</nav>
24-
<Link href="/">
25-
<a className={footerStyles.footer__logo} title="Go to the Homepage">
26-
<Image
27-
src="/images/svg/logo.svg"
28-
height={250}
29-
width={250}
30-
alt="Logo"
31-
/>
32-
</a>
33-
</Link>
34-
</Container>
35-
<Container>
36-
<p className={footerStyles.footer__copyright}>
37-
© Web Dev Path {new Date().getFullYear()}. All rights reserved.
38-
</p>
39-
</Container>
40-
</footer>
11+
<RevealContentContainer>
12+
<footer className={footerStyles.footer}>
13+
<NewsletterSubscribe />
14+
<Container className={footerStyles.footer__inner}>
15+
<nav className={footerStyles.footer__nav} aria-label="Main">
16+
<ul className={footerStyles.footer__navList}>
17+
{linksNav.map(link => (
18+
<li className={footerStyles.footer__navItem} key={link.text}>
19+
<Link href={link.href}>
20+
<a title={link.text}>{link.text}</a>
21+
</Link>
22+
</li>
23+
))}
24+
</ul>
25+
</nav>
26+
<Link href="/">
27+
<a className={footerStyles.footer__logo} title="Go to the Homepage">
28+
<Image
29+
src="/images/svg/logo.svg"
30+
height={250}
31+
width={250}
32+
alt="Logo"
33+
/>
34+
</a>
35+
</Link>
36+
</Container>
37+
<Container>
38+
<p className={footerStyles.footer__copyright}>
39+
© Web Dev Path {new Date().getFullYear()}. All rights reserved.
40+
</p>
41+
</Container>
42+
</footer>
43+
</RevealContentContainer>
4144
);
4245
}

‎components/RevealContentContainer.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useEffect, useState } from 'react';
2+
import { useIntersect } from '../hooks/useIntersect';
3+
import styles from '../styles/RevealContainer.module.scss';
4+
5+
const RevealContentContainer = ({ children }) => {
6+
const [ref, entry] = useIntersect({ threshold: 0.15 });
7+
const [firstLoad, setFirstLoad] = useState(true);
8+
const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
9+
10+
useEffect(() => {
11+
if (entry.isIntersecting && firstLoad) {
12+
setHiddenStyle('');
13+
setFirstLoad(false);
14+
}
15+
}, [entry.isIntersecting]);
16+
17+
return (
18+
<div ref={ref} className={`${styles.wrapper} ${styles[hiddenStyle]}`}>
19+
{children}
20+
</div>
21+
);
22+
};
23+
24+
export default RevealContentContainer;

‎components/TwoColumn.js

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { useEffect, useState } from 'react';
21
import Image from 'next/image';
32
import ButtonLink from './ButtonLink';
43
import Container from './Container';
54
import styles from '../styles/TwoColumn.module.scss';
6-
import { useIntersect } from '../hooks/useIntersect';
75

86
export default function TwoColumn({
97
image,
@@ -27,23 +25,8 @@ export default function TwoColumn({
2725
},
2826
};
2927

30-
const [ref, entry] = useIntersect({ threshold: 0.15 });
31-
const [firstLoad, setFirstLoad] = useState(true);
32-
const [hiddenStyle, setHiddenStyle] = useState('section__hidden');
33-
34-
useEffect(() => {
35-
if (entry.isIntersecting && firstLoad) {
36-
setHiddenStyle('');
37-
setFirstLoad(false);
38-
}
39-
}, [entry.isIntersecting]);
40-
4128
return (
42-
<section
43-
ref={ref}
44-
className={`${styles.wrapper} ${styles[hiddenStyle]}`}
45-
style={styleProps.wrapper}
46-
>
29+
<section className={`${styles.wrapper}`} style={styleProps.wrapper}>
4730
<Container
4831
className={`${styles.inner} ${styles[customInnerClass]}`}
4932
styles={{ flexDirection: rowOrder }}

‎pages/index.js

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,67 @@
1-
import { useRef, useEffect, useState } from 'react';
21
import Bracket from '../components/Bracket';
32
import Stick from '../components/Stick';
43
import TwoColumn from '../components/TwoColumn';
54
import CardsColumns from '../components/CardsColumns';
65
import styles from '../styles/Home.module.scss';
76
import { white, primary } from '../styles/TwoColumn.module.scss';
7+
import RevealContentContainer from '../components/RevealContentContainer';
88

99
export default function Home() {
10-
const aboutIsVisible = true; //temp
11-
1210
return (
1311
<>
14-
<TwoColumn
15-
title="Let's grow together."
16-
image="/images/join-us.jpg"
17-
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
18-
link="/about"
19-
customBtnClass="inverted-grey"
20-
/>
21-
<Bracket className={styles.bracket} />
12+
<RevealContentContainer>
13+
<TwoColumn
14+
title="Let's grow together."
15+
image="/images/join-us.jpg"
16+
content="The Web Dev Path is a team of professional developers project that aims to provide a comprehensive path for people who seek to begin their web development journey."
17+
link="/about"
18+
customBtnClass="inverted-grey"
19+
/>
20+
</RevealContentContainer>
2221

23-
<TwoColumn
24-
title="Get involved."
25-
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
26-
rowOrder="row-reverse"
27-
customInnerClass="get-involved"
28-
bgColor={white}
29-
/>
22+
<RevealContentContainer>
23+
<Bracket className={styles.bracket} />
24+
<TwoColumn
25+
title="Get involved."
26+
content="Web Dev Path runs on volunteers. Here are the ways you can get involved with us:"
27+
rowOrder="row-reverse"
28+
customInnerClass="get-involved"
29+
bgColor={white}
30+
/>
31+
</RevealContentContainer>
3032

31-
<CardsColumns
32-
titles={['Join us', 'Volunteer', 'Become a mentor']}
33-
images={[
34-
'/images/join-us.jpg',
35-
'/images/volunteer.jpg',
36-
'/images/mentor.jpg',
37-
]}
38-
altTags={['Join us', 'Volunteer', 'Become a mentor']}
39-
content={[
40-
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
41-
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
42-
'Are you an experienced web dev who wants to become a mentor? Welcome!',
43-
]}
44-
links={['/about', '/contact', '/about']}
45-
linkText={['Learn more', 'Contact us', 'Learn more']}
46-
/>
33+
<RevealContentContainer>
34+
<CardsColumns
35+
titles={['Join us', 'Volunteer', 'Become a mentor']}
36+
images={[
37+
'/images/join-us.jpg',
38+
'/images/volunteer.jpg',
39+
'/images/mentor.jpg',
40+
]}
41+
altTags={['Join us', 'Volunteer', 'Become a mentor']}
42+
content={[
43+
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
44+
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
45+
'Are you an experienced web dev who wants to become a mentor? Welcome!',
46+
]}
47+
links={['/about', '/contact', '/about']}
48+
linkText={['Learn more', 'Contact us', 'Learn more']}
49+
/>
50+
</RevealContentContainer>
4751

48-
<Stick className={styles.stick} />
52+
<RevealContentContainer>
53+
<Stick className={styles.stick} />
4954

50-
<TwoColumn
51-
title="Nonprofit?"
52-
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
53-
color={white}
54-
bgColor={primary}
55-
link="/about"
56-
customInnerClass="non-profit"
57-
customBtnClass="inverted-white"
58-
/>
55+
<TwoColumn
56+
title="Nonprofit?"
57+
content="Web Dev Path can help your nonprofit with web projects of various sizes. Connect with us to find out how."
58+
color={white}
59+
bgColor={primary}
60+
link="/about"
61+
customInnerClass="non-profit"
62+
customBtnClass="inverted-white"
63+
/>
64+
</RevealContentContainer>
5965
</>
6066
);
6167
}

‎styles/RevealContainer.module.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use './variables' as *;
2+
@use './mixins' as *;
3+
4+
.section__hidden {
5+
opacity: 0;
6+
transform: translateY(8rem);
7+
}
8+
9+
.wrapper {
10+
transition: transform 1s, opacity 1s;
11+
}

0 commit comments

Comments
 (0)