Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
code
Public Stack Site
Commits
f7a8db80
Commit
f7a8db80
authored
Aug 09, 2020
by
alain
🐙
Browse files
first stub of home page and animation
parent
603aa5d9
Changes
14
Expand all
Hide whitespace changes
Inline
Side-by-side
frontend/gatsby-config.js
View file @
f7a8db80
...
@@ -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
...
...
frontend/package.json
View file @
f7a8db80
...
@@ -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.3
2
"
,
"gatsby"
:
"^2.24.3
7
"
,
"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"
,
...
...
frontend/src/components/header.js
View file @
f7a8db80
...
@@ -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
"
>
...
...
frontend/src/images/gatsby-astronaut.png
deleted
100644 → 0
View file @
603aa5d9
163 KB
frontend/src/images/gatsby-icon.png
deleted
100644 → 0
View file @
603aa5d9
20.7 KB
frontend/src/images/phone.js
0 → 100644
View file @
f7a8db80
This diff is collapsed.
Click to expand it.
frontend/src/pages/index.js
View file @
f7a8db80
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
"
<
Layout
>
<
SEO
title
=
"
Home
"
/>
gsap
.
registerPlugin
(
MotionPathPlugin
,
ScrollTrigger
);
<
h1
>
Index
<
/h1
>
<
p
>
Lorem
ipsum
dolor
kit
<
/p
>
const
IndexPage
=
({
data
})
=>
{
<
/Layout
>
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
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
frontend/src/styles/_layout.scss
View file @
f7a8db80
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%
;
...
...
frontend/src/styles/_page-index.scss
0 → 100644
View file @
f7a8db80
#phone
{
max-height
:
80vh
;
}
.phone-part
{
min-height
:
90vh
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
}
\ No newline at end of file
frontend/src/styles/_reset.scss
deleted
100644 → 0
View file @
603aa5d9
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%
;
}
}
frontend/src/styles/_sanitize.scss
0 → 100644