therbron/Personal-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adding button & scroll action

Browse Source
This commit is contained in:
Romain 2020-06-14 16:20:45 +02:00
parent 8d05300b6a
commit 250c8c2d6b
6 changed files with 76 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Button.js
View File

@ -4,7 +4,7 @@ import styles from "./modules/Button.module.css";
export default function Example(props) {
return (
<button className={styles.example} {...props}>
<button className={styles.container} {...props}>
{props.label}
</button>
);

10
components/HomeSection.js
View File

@ -5,6 +5,8 @@ import Infos from "../components/Infos";
import Presentation from "../components/Presentation";
import styles from "./modules/HomeSection.module.css";
import Section from "./Section";
import Button from "./Button";
import DownIcon from "../public/icons/arrow-down.svg";
export default function HomeSection(props) {
const person = props.person;
@ -23,6 +25,14 @@ export default function HomeSection(props) {
<Infos infos={person.infos} />
</div>
<div className={styles.buttonContainer}>
<Button
label={"Case Studies"}
onClick={() => props.scrollFunction()}
/>
<DownIcon className={styles.icon} />
</div>
</div>
</Section>
);

30
components/modules/Button.module.css
View File

@ -1,6 +1,32 @@
.container {
background: #fafafa;
position: relative;
z-index: 1;
cursor: pointer;
outline: none;
border: none;
margin: 0 auto;
width: fit-content;
background-color: var(--quinary);
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: var(--fontFamily);
font-weight: 900;
line-height: 23px;
letter-spacing: 0.05em;
text-transform: uppercase;
transform: translateY(0);
transition: background-color 0.3s ease-out, transform 0.3s ease-out;
}
.container:hover {
background-color: var(--quaternary);
transform: translateY(-15%);
}

22
components/modules/HomeSection.module.css
View File

@ -1,7 +1,7 @@
.bg {
position: absolute;
right: 0%;
width: 50vw;
width: 50%;
height: 100%;
background-color: var(--lightDark);
}
@ -22,3 +22,23 @@
justify-content: space-evenly;
align-items: center;
}
.icon {
width: 1.25rem;
height: 1.25rem;
margin: 1rem auto;
}
.buttonContainer {
position: absolute;
bottom: 0%;
padding: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}

18
pages/index.js
View File

@ -1,8 +1,18 @@
import Head from "next/head";
import HomeSection from "../components/HomeSection";
import CaseSection from "../components/CaseSection";
import HomeSection from "../components/HomeSection";
export default function Home({ person, caseStudies }) {
const caseSectionRef = React.useRef();
function scrollToRef() {
console.log(caseSectionRef.current.offsetTop);
if (typeof window !== "undefined") {
console.log(caseSectionRef.current.offsetTop);
window.scrollTo(0, caseSectionRef.current.offsetTop);
}
}
return (
<div className="container">
<Head>
@ -10,9 +20,11 @@ export default function Home({ person, caseStudies }) {
<link rel="icon" href="/favicon.ico" />
</Head>
<HomeSection person={person} />
<HomeSection scrollFunction={scrollToRef.bind(this)} person={person} />
<CaseSection caseStudies={caseStudies} />
<div ref={caseSectionRef}>
<CaseSection caseStudies={caseStudies} />
</div>
</div>
);
}

1
styles/global.css
View File

@ -28,6 +28,7 @@ body {
background: var(--dark);
color: var(--light);
font-family: var(--fontFamily);
scroll-behavior: smooth;
}
.wrapper {