Tanguy Herbron

import Head from "next/head";
import CaseSection from "../components/CaseSection";
import HomeSection from "../components/HomeSection";
import React from "react";

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>Tanguy Herbron</title>
        <link rel="icon" href="/favicon.svg" />
      </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",
    profilePicture: "/images/profile-picture.png",
    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: "Dotfiles",
      short_description:
        "A set of Linux configuration files (dotfiles) I am using on a daily basis accross all of my machines. This includes configuration for my window manager, text editor and development environment. It also includes a set of custom scripts for various usages.",
      cover: "/images/dotfiles/cover.png",
      icon: "/images/dotfiles/icon.svg",
      link: "https://github.com/TanguyHerbron/dotfiles"
    },
    {
      title: "Halia",
      short_description:
        "Personal infrastructure grouping self-hosted production ready services, tinkering environment and more. As of now, it includes Bitwarden, Nextcloud, Jellyfin and Focalboard just to name a few.",
      cover: "/images/halia/cover.png",
      icon: "/images/halia/logo.svg",
      link: "https://wiki.halia.dev"
    },
    {
      title: "Moodl",
      short_description:
        "Android application for easy cryptocurrency and ICO portfolio tracking, with additional information such as global market volumes, global market share and more.",
      cover: "/images/moodl/cover.png",
      icon: "/images/moodl/icon.png",
      link: "https://github.com/TanguyHerbron/Moodl"
    },
  ];

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