Create Next App

import Head from "next/head";
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>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <HomeSection scrollFunction={scrollToRef.bind(this)} person={person} />

      <div ref={caseSectionRef}>
        <CaseSection caseStudies={caseStudies} />
      </div>
    </div>
  );
}

export async function getStaticProps() {
  const person = {
    firstName: "Tanguy",
    lastName: "Herbron",
    description: "Full Stack Developer",
    infos: {
      location: {
        value: "Copenhagen, Denmark",
        link: "https://www.visitcopenhagen.com/",
      },
      github: {
        value: "/TanguyHerbron",
        link: "https://github.com/TanguyHerbron",
      },
      linkedin: {
        value: "Tanguy Herbron",
        link: "https://linkedin.com/in/tanguy-herbron-5a3772150",
      },
      email: {
        value: "tanguy.herbron@outlook.com",
        link: "mailto:tanguy.herbron@outlook.com",
      },
    },
  };

  const caseStudies = [
    {
      title: "Moodle",
      short_description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
      date: "June 12, 2020",
      cover: "/images/bongo.png",
    },
    {
      title: "Doodle",
      short_description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
      date: "June 12, 2020",
      cover: "/images/bongo.png",
    },
    {
      title: "Poodle",
      short_description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.",
      date: "June 12, 2020",
      cover: "/images/bongo.png",
    },
  ];

  return {
    props: {
      person: person,
      caseStudies: caseStudies,
    },
  };
}