timothyde

import React, { useEffect, useState } from "react";

export default function Header() {
  const [small, setSmall] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener("scroll", () =>
        setSmall(window.pageYOffset > 200)
      );

timothyde

import React from 'react'
import styled from 'styled-components'
import { Link } from 'gatsby'
import { localeLink } from '../../utils/localeLink'

import signature from '../../images/signature.svg'

const Logo = styled.img`
  display: inline-block;
  margin: 0;

timothyde

// pass location from page as props
export const localeLink = location, to => {
  const keys = ['en', 'jp']

  const { pathname } = location

  const lang = keys.find(
    k => pathname.includes(`/${k}/`) || pathname.includes(`/${k}`)
  )

timothyde

import React from 'react'
import styled from 'styled-components'
import { Link } from 'gatsby'
import { localeLink } from '../../utils/localeLink'

import signature from '../../images/signature.svg'

const Logo = styled.img`
  display: inline-block;
  margin: 0;

timothyde

export const query = graphql`
  query {
    hero: file(relativePath: { eq: "hero.png" }) {
      childImageSharp {
        fluid(maxWidth: 1000) {
          ...GatsbyImageSharpFluid_tracedSVG
        }
      }
    }
  }

timothyde

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter'
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
        name: 'images'

timothyde

const Container = styled.div`
  margin-top: 8px;
  flex-grow: 1;
  overflow-y: scroll;
  margin: 0px -32px;
  margin-top: 8px;
  padding: 0px 32px;
`;

timothyde

const Container = styled.div`
  flex-grow: 1;
  overflow-y: scroll;
  margin-top: 8px;
`;

timothyde

import styled from 'styled-components';
import posed from 'react-pose';

const Perspective = styled.div`
  perspective: 800px;
  overflow: visible !important;
  transform-style: preserve-3d;
  width: 100%;
  display: flex;
  flex-direction: column;

timothyde

const PosedTopBar = posed(TopBar)({
  open: {
    opacity: 1,
    transition: {
      duration: 50
    }
  },
  closed: {
    delay: 200,
    opacity: 0,