senaduka/old-v2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding page transitions, image tilting option and design tweaks

Browse Source
This commit is contained in:
Moris Zen
2018-08-30 11:07:16 +02:00
parent 7b76680ec4
commit b925c2d7ea
10 changed files with 163 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
gatsby-config.js
View File

@@ -4,6 +4,7 @@ module.exports = {
}, },
plugins: [ plugins: [
'gatsby-plugin-netlify', 'gatsby-plugin-netlify',
'gatsby-plugin-page-transitions',
'gatsby-plugin-react-helmet', 'gatsby-plugin-react-helmet',
{ {
resolve: 'gatsby-source-wordpress', resolve: 'gatsby-source-wordpress',

2
package.json
View File

@@ -4,10 +4,12 @@
"version": "0.1.0", "version": "0.1.0",
"author": "Saburly <info@saburly.com>", "author": "Saburly <info@saburly.com>",
"dependencies": { "dependencies": {
"aos": "^2.3.3",
"gatsby": "^1.9.247", "gatsby": "^1.9.247",
"gatsby-image": "^1.0.54", "gatsby-image": "^1.0.54",
"gatsby-link": "^1.6.40", "gatsby-link": "^1.6.40",
"gatsby-plugin-netlify": "^1.0.21", "gatsby-plugin-netlify": "^1.0.21",
"gatsby-plugin-page-transitions": "^1.0.7",
"gatsby-plugin-react-helmet": "^2.0.10", "gatsby-plugin-react-helmet": "^2.0.10",
"gatsby-plugin-sharp": "^1.6.48", "gatsby-plugin-sharp": "^1.6.48",
"gatsby-remark-prismjs": "^2.0.5", "gatsby-remark-prismjs": "^2.0.5",

109
src/components/PageIntro.js
View File

@@ -1,51 +1,72 @@
import React from 'react' import React, { Component } from 'react'
import SectionIntro from './SectionIntro' import SectionIntro from './SectionIntro'
import Button from './Button' import Button from './Button'
const PageIntro = ({ ...props }) => ( class PageIntro extends Component {
<section className="saburly-intro bg-saburly-light relative"> componentDidMount() {
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4"> let tiltjs = require('vanilla-tilt')
<title>bg-saburly-white</title> if (this.props.tiltImage) {
<path tiltjs.init(document.querySelector('.tiltImage'), {
d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z" max: 20,
transform="translate(0 0)" speed: 400,
style={{ fill: '#fff' }} easing: 'cubic-bezier(.03,.98,.52,.99)',
/> glare: true,
</svg> 'max-glare': 0.8,
<div 'glare-prerender': false,
className={`relative container mx-auto items-center flex lg:flex-row flex-col ${ })
props.reversed ? 'flex-col-reverse' : '' }
} p-4`} }
> render() {
<div className="text-center lg:text-left"> return (
{props.children} <section className="saburly-intro bg-saburly-light relative">
<SectionIntro <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
header <title>bg-saburly-white</title>
intro={props.intro} <path
classes={`lg:text-left lg:max-w-sm content-center ${ d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
props.sectionClasses transform="translate(0 0)"
}`} style={{ fill: '#fff' }}
headline={props.headline}
text={props.text}
/>
{props.button && (
<Button
text={props.buttonText}
url={props.url}
classes={props.buttonClasses}
/> />
)} </svg>
</div> <div
{props.image && ( className={`relative container mx-auto items-center flex lg:flex-row flex-col ${
<img this.props.reversed ? 'flex-col-reverse' : ''
src={props.image} } p-4`}
className={`${props.imgClasses} md:max-h-sm md:max-w-md mx-auto`} >
alt="Software Development Agency" <div className="text-center lg:text-left">
/> {this.props.children}
)} <SectionIntro
</div> header
</section> intro={this.props.intro}
) classes={`lg:text-left lg:max-w-sm content-center ${
this.props.sectionClasses
}`}
headline={this.props.headline}
text={this.props.text}
/>
{this.props.button && (
<Button
text={this.props.buttonText}
url={this.props.url}
classes={this.props.buttonClasses}
/>
)}
</div>
{this.props.image && (
<div>
<img
src={this.props.image}
className={`${
this.props.imgClasses
} tiltImage md:max-h-sm md:max-w-md mx-auto`}
alt="Software Development Agency"
/>
</div>
)}
</div>
</section>
)
}
}
export default PageIntro export default PageIntro

76
src/pages/about.js
View File

@@ -6,53 +6,39 @@ import SectionIntro from '../components/SectionIntro'
import IntroImage from '../images/web-development-consultancy.jpg' import IntroImage from '../images/web-development-consultancy.jpg'
import MeaningSaburly from '../images/coding-practice.svg' import MeaningSaburly from '../images/coding-practice.svg'
class AboutPage extends Component { import PageTransition from 'gatsby-plugin-page-transitions'
componentDidMount() {
let tiltjs = require('vanilla-tilt')
tiltjs.init(document.querySelector('.tiltImage'), {
max: 35,
speed: 400,
scale: 1.1,
glare: true,
'max-glare': 0.8,
'glare-prerender': false,
easing: 'cubic-bezier(.03,.98,.52,.99)',
})
}
render() { const AboutPage = () => (
return ( <PageTransition>
<div> <PageIntro
<PageIntro tiltImage
headline="Founded by developers" headline="Founded by developers"
text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact." text="Saburly was founded in 2017 by experienced software developers that understand what it takes to create modern digital solutions. Our focus is on gathering and guiding the best talents in the industry in order to create digital experiences that make valuable impact."
image={IntroImage} image={IntroImage}
imgClasses="border-white border-8 rounded tiltImage -mb-12" imgClasses="border-white border-8 rounded -mb-12"
/>
<section className="container mx-auto my-12 p-4">
<div className="md:flex justify-center items-center">
<img
src={MeaningSaburly}
className="hidden lg:block max-h-xs"
alt="User Experience Design Agency"
/>
<SectionIntro
headline="Meaning of Saburly"
text="...Patience. ...Our goal is long-term engagement."
/> />
<section className="container mx-auto my-12 p-4">
<div className="md:flex justify-center items-center">
<img
src={MeaningSaburly}
className="hidden lg:block max-h-xs"
alt="User Experience Design Agency"
/>
<SectionIntro
headline="Meaning of Saburly"
text="...Patience. ...Our goal is long-term engagement."
/>
</div>
</section>
<section className="container mx-auto my-12 p-4">
<SectionIntro
headline="The Team"
text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
/>
</section>
</div> </div>
) </section>
}
} <section className="container mx-auto my-12 p-4">
<SectionIntro
headline="The Team"
text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
/>
</section>
</PageTransition>
)
export default AboutPage export default AboutPage

6
src/pages/contact.js
View File

@@ -8,8 +8,10 @@ import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg' import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/contact-web-consultancy.svg' import FormImage from '../images/contact-web-consultancy.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const ContactPage = () => ( const ContactPage = () => (
<div> <PageTransition>
<PageIntro <PageIntro
headline="Let's make things happen" headline="Let's make things happen"
text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do." text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
@@ -155,7 +157,7 @@ const ContactPage = () => (
className="text-center block m-x-auto md:max-w-lg mx-auto" className="text-center block m-x-auto md:max-w-lg mx-auto"
/> />
</section> </section>
</div> </PageTransition>
) )
export default ContactPage export default ContactPage

6
src/pages/index.js
View File

@@ -20,8 +20,10 @@ import LogoRicoh from '../images/logo-ricoh-color.svg'
import LogoKinnarps from '../images/logo-kinnarps-color.svg' import LogoKinnarps from '../images/logo-kinnarps-color.svg'
import LogoCoor from '../images/logo-coor-color.svg' import LogoCoor from '../images/logo-coor-color.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const IndexPage = ({ ...props }) => ( const IndexPage = ({ ...props }) => (
<div> <PageTransition>
<PageIntro <PageIntro
text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies." text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
image={ImgIntro} image={ImgIntro}
@@ -138,7 +140,7 @@ const IndexPage = ({ ...props }) => (
/> />
</section> </section>
</main> </main>
</div> </PageTransition>
) )
export const query = graphql` export const query = graphql`

7
src/pages/services.js
View File

@@ -11,9 +11,12 @@ import WebdevServices from '../images/custom-software-development.svg'
import UXdesign from '../images/user-experience-design-services.svg' import UXdesign from '../images/user-experience-design-services.svg'
import HowWeWork from '../images/flexible-workflow.svg' import HowWeWork from '../images/flexible-workflow.svg'
import PageTransition from 'gatsby-plugin-page-transitions'
const ServicesPage = () => ( const ServicesPage = () => (
<div> <PageTransition>
<PageIntro <PageIntro
tiltImage
buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20" buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
headline="Agile Practitioners" headline="Agile Practitioners"
text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality." text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
@@ -150,7 +153,7 @@ const ServicesPage = () => (
</div> </div>
<WorkStyle /> <WorkStyle />
</div> </div>
</div> </PageTransition>
) )
export default ServicesPage export default ServicesPage

6
src/templates/blog.js
View File

@@ -4,11 +4,13 @@ import Link from 'gatsby-link'
import PageIntro from '../components/PageIntro' import PageIntro from '../components/PageIntro'
import Card from '../components/Card' import Card from '../components/Card'
import PageTransition from 'gatsby-plugin-page-transitions'
class Blog extends Component { class Blog extends Component {
render() { render() {
const data = this.props.data const data = this.props.data
return ( return (
<main> <PageTransition>
<PageIntro <PageIntro
headline="Bugs keep us busy" headline="Bugs keep us busy"
text="but occasionally we have fun & publish" text="but occasionally we have fun & publish"
@@ -31,7 +33,7 @@ class Blog extends Component {
</div> </div>
))} ))}
</div> </div>
</main> </PageTransition>
) )
} }
} }

6
src/templates/post-default.js
View File

@@ -4,6 +4,8 @@ import Prism from 'prismjs'
require('prismjs/themes/prism-solarizedlight.css') require('prismjs/themes/prism-solarizedlight.css')
import PageTransition from 'gatsby-plugin-page-transitions'
class PostDefault extends Component { class PostDefault extends Component {
componentDidMount() { componentDidMount() {
Prism.highlightAll() Prism.highlightAll()
@@ -11,7 +13,7 @@ class PostDefault extends Component {
render() { render() {
const { data } = this.props const { data } = this.props
return ( return (
<div> <PageTransition>
<Helmet <Helmet
title={`${data.wordpressPost.title} - Saburly.com`} title={`${data.wordpressPost.title} - Saburly.com`}
meta={[ meta={[
@@ -32,7 +34,7 @@ class PostDefault extends Component {
}} }}
/> />
</main> </main>
</div> </PageTransition>
) )
} }
} }

45
yarn.lock
View File

@@ -260,6 +260,14 @@ anymatch@^1.3.0:
micromatch "^2.1.5" micromatch "^2.1.5"
normalize-path "^2.0.0" normalize-path "^2.0.0"
aos@^2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/aos/-/aos-2.3.3.tgz#bddbe68fc73f7e90ff95f5d0f3810fee5acacbe2"
dependencies:
classlist-polyfill "^1.0.3"
lodash.debounce "^4.0.6"
lodash.throttle "^4.0.1"
aproba@^1.0.3: aproba@^1.0.3:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a" resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1950,6 +1958,10 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classlist-polyfill@^1.0.3:
version "1.2.0"
resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
cli-boxes@^1.0.0: cli-boxes@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143" resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
@@ -2828,7 +2840,7 @@ dom-converter@~0.1:
dependencies: dependencies:
utila "~0.3" utila "~0.3"
dom-helpers@^3.2.1: dom-helpers@^3.2.1, dom-helpers@^3.3.1:
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -3871,6 +3883,14 @@ gatsby-plugin-page-creator@^1.0.1:
parse-filepath "^1.0.1" parse-filepath "^1.0.1"
slash "^1.0.0" slash "^1.0.0"
gatsby-plugin-page-transitions@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/gatsby-plugin-page-transitions/-/gatsby-plugin-page-transitions-1.0.7.tgz#e6c5a858d3c59fbccfefb19d0bd0834c36535d48"
dependencies:
history "^4.7.2"
prop-types "^15.6.2"
react-transition-group "^2.4.0"
gatsby-plugin-react-helmet@^2.0.10: gatsby-plugin-react-helmet@^2.0.10:
version "2.0.11" version "2.0.11"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a" resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-2.0.11.tgz#a2db81755f5b41d54e0e535ca1d9a008d3ccff0a"
@@ -5778,6 +5798,10 @@ lodash.clonedeep@^4.5.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
lodash.debounce@^4.0.6:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
lodash.defaults@^4.0.1: lodash.defaults@^4.0.1:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -5926,6 +5950,10 @@ lodash.templatesettings@^4.0.0:
dependencies: dependencies:
lodash._reinterpolate "~3.0.0" lodash._reinterpolate "~3.0.0"
lodash.throttle@^4.0.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
lodash.toarray@^4.4.0: lodash.toarray@^4.4.0:
version "4.4.0" version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
@@ -7833,7 +7861,7 @@ promise@^7.1.1:
dependencies: dependencies:
asap "~2.0.3" asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1: prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2" version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies: dependencies:
@@ -8073,6 +8101,10 @@ react-hot-loader@^3.0.0-beta.6:
redbox-react "^1.3.6" redbox-react "^1.3.6"
source-map "^0.6.1" source-map "^0.6.1"
react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
react-proxy@^3.0.0-alpha.0: react-proxy@^3.0.0-alpha.0:
version "3.0.0-alpha.1" version "3.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07" resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -8117,6 +8149,15 @@ react-side-effect@^1.1.0:
exenv "^1.2.1" exenv "^1.2.1"
shallowequal "^1.0.1" shallowequal "^1.0.1"
react-transition-group@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
dependencies:
dom-helpers "^3.3.1"
loose-envify "^1.3.1"
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"
react-typed@^1.0.9: react-typed@^1.0.9:
version "1.0.9" version "1.0.9"
resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-1.0.9.tgz#ad06dc0c7283b1869b9f0e012244ab3eb1a03be1" resolved "https://registry.yarnpkg.com/react-typed/-/react-typed-1.0.9.tgz#ad06dc0c7283b1869b9f0e012244ab3eb1a03be1"