Commit f7a8db80 authored by alain's avatar alain 🐙
Browse files

first stub of home page and animation

parent 603aa5d9
......@@ -19,13 +19,15 @@ module.exports = {
options: {
apiURL: process.env.API_URL || 'http://localhost:1337',
contentTypes: [
'layer',
'domain',
'use-case',
'alternative',
],
singleTypes: [
`header`,
`about`,
'header',
'home',
'about',
],
queryLimit: 1000
}
......@@ -42,7 +44,7 @@ module.exports = {
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
icon: ``, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
......
......@@ -5,10 +5,10 @@
"version": "0.1.0",
"author": "Alain Otjens <alain@waag.org>",
"dependencies": {
"gatsby": "^2.24.32",
"gatsby-cli": "^2.12.77",
"gatsby": "^2.24.37",
"gatsby-cli": "^2.12.80",
"gatsby-image": "^2.4.9",
"gatsby-plugin-manifest": "^2.4.14",
"gatsby-plugin-manifest": "^2.4.22",
"gatsby-plugin-offline": "^3.2.22",
"gatsby-plugin-react-helmet": "^3.3.6",
"gatsby-plugin-sass": "^2.3.12",
......@@ -16,6 +16,7 @@
"gatsby-source-filesystem": "^2.3.24",
"gatsby-source-strapi": "^0.0.12",
"gatsby-transformer-sharp": "^2.5.7",
"gsap": "^3.3.4",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
......
......@@ -32,7 +32,7 @@ const Header = ({ siteTitle }) => (
<div id="site-titles">
<h1 id="site-title"><Link to="/" >{ data.strapiHeader.title }</Link></h1>
<h2 id="site-subtitle">{ data.strapiHeader.subtitle }</h2>
{/* <h2 id="site-subtitle">{ data.strapiHeader.subtitle }</h2> */}
</div>
<ul className="menu">
......
This diff is collapsed.
import React from "react"
import React, { useRef, useEffect } from "react"
import gsap, { Power1 } from 'gsap';
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Layout from "../components/layout"
import SEO from "../components/seo"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1>Index</h1>
<p>Lorem ipsum dolor kit</p>
</Layout>
)
import VisualPhone from "../images/phone.js"
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
const IndexPage = ({ data }) => {
let phone = useRef(null);
let phonePin = useRef(null);
let phoneTrigger = useRef(null);
useEffect(()=> {
const tl = gsap.timeline({
scrollTrigger: {
trigger: phoneTrigger,
start: "0px top",
end: "bottom 75%",
toggleActions: "play pause reverse reset",
//markers: true,
scrub: 0.25,
pin: phonePin,
},
ease: Power1.easeInOut
});
const keyframes = [
0.8,
2
]
tl.to(phone.querySelectorAll("#buttons"), { y: -300 }, keyframes[0])
.to(phone.querySelectorAll("#screen"), { y: -200 }, keyframes[0])
.to(phone.querySelectorAll("#front"), { y: -100 }, keyframes[0])
.to(phone.querySelectorAll("#capital"), { y: 150 }, keyframes[0])
.to(phone.querySelectorAll("#society"), { y: 400 }, keyframes[0])
.to(phone.querySelectorAll("#digits-bg"), { opacity: 1 }, keyframes[0])
.to(phone.querySelectorAll("#capital-bg"), { opacity: 1 }, keyframes[0])
.to(phone.querySelectorAll("#society-bg"), { opacity: 1 }, keyframes[0])
tl.to(phone.querySelectorAll("#digits-content"), { opacity: 1 }, keyframes[1])
.to(phone.querySelectorAll("#capital-content"), { opacity: 1 }, keyframes[1])
.to(phone.querySelectorAll("#society-content"), { opacity: 1 }, keyframes[1])
// motionPath: {
// path: [
// {x: 0, y: 0},
// {x: 100, y: 0},
// {x: 0, y: 0},
// ]
// },
})
return (
<Layout>
<SEO title="Home" />
<section>
<div className="row columns-2">
<div className="column" dangerouslySetInnerHTML={{__html: data.strapiHome.introduction }} />
<div className="column">[broodrooster]</div>
</div>
</section>
<section style={{background: "#F8F8F8"}} >
<div className="row columns-2">
<div className="column">
<div ref={el => phonePin = el}><div ref={el => phone = el}>
<VisualPhone />
</div></div>
</div>
<div className="column" ref={el => phoneTrigger = el}>
<div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_1 }}></div>
<div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_2 }}></div>
<div className="phone-part" dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_3 }}></div>
</div>
</div>
</section>
<section>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.layer_explanation_4 }}></div>
</section>
<section>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_1 }}></div>
</section>
<section>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_2 }}></div>
</section>
<section>
<div dangerouslySetInnerHTML={{__html: data.strapiHome.three_stacks_3 }}></div>
</section>
</Layout>
)
}
export default IndexPage
export const indexQuery = graphql`
query IndexQuery {
strapiHome {
introduction
layer_explanation_1
layer_explanation_2
layer_explanation_3
layer_explanation_4
three_stacks_intro
three_stacks_1
three_stacks_2
three_stacks_3
}
}
`
\ No newline at end of file
body {
padding: 0;
overflow-y: scroll;
}
#page {
display: flex;
flex-direction: column;
......@@ -9,7 +14,6 @@ main {
width: 100%;
max-width: 1200px;
margin: 3rem auto;
padding: 0 1rem;
}
footer {
......@@ -17,12 +21,14 @@ footer {
}
section {
min-height: 80vh;
margin-bottom: 4rem;
}
.row {
display: flex;
margin: 0 -1rem;
//align-items: flex-start;
&.columns-1 .column {
width: 100%;
......
#phone {
max-height: 80vh;
}
.phone-part {
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
}
\ No newline at end of file
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
audio:not([controls]) {
display: none;
height: 0;
}
progress {
vertical-align: baseline;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
outline-width: 0;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
svg:not(:root) {
overflow: hidden;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
html {
font: 112.5%/1.45em georgia, serif;
box-sizing: border-box;
overflow-y: scroll;
}
* {
box-sizing: inherit;
}
*:before {
box-sizing: inherit;
}
*:after {
box-sizing: inherit;
}
body {
color: #000;
font-weight: normal;
word-wrap: break-word;
font-kerning: normal;
-moz-font-feature-settings: "kern", "liga", "clig", "calt";
-ms-font-feature-settings: "kern", "liga", "clig", "calt";
-webkit-font-feature-settings: "kern", "liga", "clig", "calt";
font-feature-settings: "kern", "liga", "clig", "calt";
}
img {
max-width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
ul {
margin-left: 1.45rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
list-style-position: outside;
list-style-image: none;
}
ol {
margin-left: 1.45rem;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
list-style-position: outside;
list-style-image: none;
}
p {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
figure {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
pre {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 1.45rem;
font-size: 0.85rem;
line-height: 1.42;
background: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
overflow: auto;
word-wrap: normal;
padding: 1.45rem;
}
table {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
font-size: 1rem;
line-height: 1.45rem;
border-collapse: collapse;
width: 100%;
}
blockquote {
margin-left: 1.45rem;
margin-right: 1.45rem;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
noscript {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
iframe {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: 1.45rem;
}
hr {
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
margin-bottom: calc(1.45rem - 1px);
background: hsla(0, 0%, 0%, 0.2);
border: none;
height: 1px;
}
b {
font-weight: bold;
}
strong {
font-weight: bold;
}
dt {
font-weight: bold;
}
th {
font-weight: bold;
}
li {
margin-bottom: calc(1.45rem / 2);
}
ol li {
padding-left: 0;
}
ul li {
padding-left: 0;
}
li > ol {
margin-left: 1.45rem;
margin-bottom: calc(1.45rem / 2);
margin-top: calc(1.45rem / 2);
}
li > ul {
margin-left: 1.45rem;
margin-bottom: calc(1.45rem / 2);
margin-top: calc(1.45rem / 2);
}
blockquote *:last-child {
margin-bottom: 0;
}
li *:last-child {
margin-bottom: 0;
}
p *:last-child {
margin-bottom: 0;
}
li > p {
margin-bottom: calc(1.45rem / 2);
}
code {
font-size: 0.85rem;
line-height: 1.45rem;
}
thead {
text-align: left;
}
td,
th {
text-align: left;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
font-feature-settings: "tnum";
-moz-font-feature-settings: "tnum";
-ms-font-feature-settings: "tnum";
-webkit-font-feature-settings: "tnum";
padding-left: 0.96667rem;
padding-right: 0.96667rem;
padding-top: 0.725rem;
padding-bottom: calc(0.725rem - 1px);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
tt,
code {
background-color: hsla(0, 0%, 0%, 0.04);
border-radius: 3px;
font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
"Liberation Mono", Menlo, Courier, monospace;
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
}
pre code {
background: none;
line-height: 1.42;
}
code:before,
code:after,
tt:before,
tt:after {
letter-spacing: -0.2em;
content: " ";
}
pre code:before,
pre code:after,
pre tt:before,
pre tt:after {
content: "";
}
@media only screen and (max-width: 480px) {
html {
font-size: 100%;
}
}
/* Document
* ========================================================================== */
/**
* Add border box sizing in all browsers (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box;
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit; /* 1 */
vertical-align: inherit; /* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Change the line height in all browsers (opinionated).
* 3. Use a 4-space tab width in all browsers (opinionated).
* 4. Remove the grey highlight on links in iOS (opinionated).
* 5. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
* 6. Breaks words to prevent overflow in all browsers (opinionated).
*/
html {
cursor: default; /* 1 */
line-height: 1.5; /* 2 */
-moz-tab-size: 4; /* 3 */
tab-size: 4; /* 3 */
-webkit-tap-highlight-color: transparent /* 4 */;
-ms-text-size-adjust: 100%; /* 5 */
-webkit-text-size-adjust: 100%; /* 5 */
word-break: break-word; /* 6 */
}
/* Sections
* ========================================================================== */