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 = { ...@@ -19,13 +19,15 @@ module.exports = {
options: { options: {
apiURL: process.env.API_URL || 'http://localhost:1337', apiURL: process.env.API_URL || 'http://localhost:1337',
contentTypes: [ contentTypes: [
'layer',
'domain', 'domain',
'use-case', 'use-case',
'alternative', 'alternative',
], ],
singleTypes: [ singleTypes: [
`header`, 'header',
`about`, 'home',
'about',
], ],
queryLimit: 1000 queryLimit: 1000
} }
...@@ -42,7 +44,7 @@ module.exports = { ...@@ -42,7 +44,7 @@ module.exports = {
background_color: `#663399`, background_color: `#663399`,
theme_color: `#663399`, theme_color: `#663399`,
display: `minimal-ui`, 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 // this (optional) plugin enables Progressive Web App + Offline functionality
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
"version": "0.1.0", "version": "0.1.0",
"author": "Alain Otjens <alain@waag.org>", "author": "Alain Otjens <alain@waag.org>",
"dependencies": { "dependencies": {
"gatsby": "^2.24.32", "gatsby": "^2.24.37",
"gatsby-cli": "^2.12.77", "gatsby-cli": "^2.12.80",
"gatsby-image": "^2.4.9", "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-offline": "^3.2.22",
"gatsby-plugin-react-helmet": "^3.3.6", "gatsby-plugin-react-helmet": "^3.3.6",
"gatsby-plugin-sass": "^2.3.12", "gatsby-plugin-sass": "^2.3.12",
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"gatsby-source-filesystem": "^2.3.24", "gatsby-source-filesystem": "^2.3.24",
"gatsby-source-strapi": "^0.0.12", "gatsby-source-strapi": "^0.0.12",
"gatsby-transformer-sharp": "^2.5.7", "gatsby-transformer-sharp": "^2.5.7",
"gsap": "^3.3.4",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.12.0", "react": "^16.12.0",
......
...@@ -32,7 +32,7 @@ const Header = ({ siteTitle }) => ( ...@@ -32,7 +32,7 @@ const Header = ({ siteTitle }) => (
<div id="site-titles"> <div id="site-titles">
<h1 id="site-title"><Link to="/" >{ data.strapiHeader.title }</Link></h1> <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> </div>
<ul className="menu"> <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 Layout from "../components/layout"
import SEO from "../components/seo" import SEO from "../components/seo"
const IndexPage = () => ( 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> <Layout>
<SEO title="Home" /> <SEO title="Home" />
<h1>Index</h1>
<p>Lorem ipsum dolor kit</p> <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> </Layout>
) )
}
export default IndexPage 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 { #page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -9,7 +14,6 @@ main { ...@@ -9,7 +14,6 @@ main {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 3rem auto; margin: 3rem auto;
padding: 0 1rem;
} }
footer { footer {
...@@ -17,12 +21,14 @@ footer { ...@@ -17,12 +21,14 @@ footer {
} }
section { section {
min-height: 80vh;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
.row { .row {
display: flex; display: flex;
margin: 0 -1rem; margin: 0 -1rem;
//align-items: flex-start;
&.columns-1 .column { &.columns-1 .column {
width: 100%; 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%;
}
}