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) { export default function Example(props) {
return ( return (
<button className={styles.example} {...props}> <button className={styles.container} {...props}>
{props.label} {props.label}
</button> </button>
); );

10
components/HomeSection.js
View File

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

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

@ -1,6 +1,32 @@
.container { .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; border-radius: 5px;
padding: 0.75rem; 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 { .bg {
position: absolute; position: absolute;
right: 0%; right: 0%;
width: 50vw; width: 50%;
height: 100%; height: 100%;
background-color: var(--lightDark); background-color: var(--lightDark);
} }
@ -22,3 +22,23 @@
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; 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;
}

16
pages/index.js
View File

@ -1,8 +1,18 @@
import Head from "next/head"; import Head from "next/head";
import HomeSection from "../components/HomeSection";
import CaseSection from "../components/CaseSection"; import CaseSection from "../components/CaseSection";
import HomeSection from "../components/HomeSection";
export default function Home({ person, caseStudies }) { 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 ( return (
<div className="container"> <div className="container">
<Head> <Head>
@ -10,10 +20,12 @@ export default function Home({ person, caseStudies }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<HomeSection person={person} /> <HomeSection scrollFunction={scrollToRef.bind(this)} person={person} />
<div ref={caseSectionRef}>
<CaseSection caseStudies={caseStudies} /> <CaseSection caseStudies={caseStudies} />
</div> </div>
</div>
); );
} }

1
styles/global.css
View File

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