Skip to content

Instantly share code, notes, and snippets.

Avatar

Timothy timothyde

View GitHub Profile
View logo.js
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;
View localeLink.js
View logo.js
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;
View index.js
export const query = graphql`
query {
hero: file(relativePath: { eq: "hero.png" }) {
childImageSharp {
fluid(maxWidth: 1000) {
...GatsbyImageSharpFluid_tracedSVG
}
}
}
}
View gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter'
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/images`,
name: 'images'
View containerHacked.js
const Container = styled.div`
margin-top: 8px;
flex-grow: 1;
overflow-y: scroll;
margin: 0px -32px;
margin-top: 8px;
padding: 0px 32px;
`;
View container.js
const Container = styled.div`
flex-grow: 1;
overflow-y: scroll;
margin-top: 8px;
`;
View test.js
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;
View animations.js
const PosedTopBar = posed(TopBar)({
open: {
opacity: 1,
transition: {
duration: 50
}
},
closed: {
delay: 200,
opacity: 0,
View cover.js
const PosedCover = posed(Cover)({
open: {
rotateX: '0deg',
opacity: 1,
transition: {
type: 'spring',
mass: 0.5
},
delay: 150
},
You can’t perform that action at this time.