Merge branch 'master' into master

.eslintrc

@@ -1,6 +1,7 @@
 extends:
   - standard
   - standard-react
+parser: babel-eslint
 rules:
   object-curly-spacing: [ error, always ]
   react/prop-types: off

.gitignore

@@ -1,4 +1,4 @@
-
+.vscode
 # created by git-ignore
 # Logs
 logs

components/HeroUnit.js

@@ -1,6 +1,7 @@
 import DownArrowIcon from '../resources/down-arrow-icon.svg'
 import NavigationBar from './NavigationBar'
-import ReactBKKLogo from '../resources/reactbkk.svg'
+import ReactBKKLogo from './ReactBKKLogo'
+import SimpleCrossfadeImages from './SimpleCrossfadeImages'
 import Scroll from 'react-scroll'
 import Countdown from 'react-countdown-now'
 
@@ -9,6 +10,7 @@ var Link = Scroll.Link
 export default function HeroUnit () {
   return (
     <header>
+      <SimpleCrossfadeImages />
       <div className='bg-overlay' />
       <div className='spacer' />
       <div className='center'>

components/MainLayout.js

@@ -30,6 +30,7 @@ export default function MainLayout ({ children }) {
         <link rel='apple-touch-icon' sizes='167x167' href='https://reactbkk.github.io/2.0.0/static/icon-ios-167.png' />
         <link rel='apple-touch-icon' sizes='180x180' href='https://reactbkk.github.io/2.0.0/static/icon-ios-180.png' />
         <script dangerouslySetInnerHTML={{ __html: ga }} />
+        <script defer src='static/service-worker-registration.js' />
         <link rel='manifest' href='static/manifest.json' />
       </Head>
       <style global jsx>{`

components/NavigationBar.js

@@ -5,7 +5,7 @@ export default function NavigationBar () {
     <nav>
       <NavigationLink href='#about' disabled>About</NavigationLink>
       <NavigationLink href='#tickets'>Tickets</NavigationLink>
-      <NavigationLink href='#sponsors' disabled>Sponsors</NavigationLink>
+      <NavigationLink href='#sponsors'>Sponsors</NavigationLink>
       <NavigationLink href='#speakers'>Speakers</NavigationLink>
       <NavigationLink href='#schedule' disabled>Schedule</NavigationLink>
       <NavigationLink href='#contact'>Contact</NavigationLink>

components/ReactBKKLogo/Logo.js

@@ -0,0 +1,59 @@
+import Lotus from './lotus.svg'
+import React from 'react'
+import RevealEllipse from './RevealEllipse'
+
+class Logo extends React.Component {
+  render () {
+    const width = 274
+    const height = 245
+    return (
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+        <g className='lotus'>
+          <style jsx>{`
+            .lotus {
+              opacity: 0;
+              transform-origin: center;
+              animation: fade-in 2.5s 0.8s;
+              animation-fill-mode: forwards;
+            }
+            @keyframes fade-in {
+              from {
+                opacity: 0;
+              }
+              to {
+                opacity: 1;
+              }
+            }
+          `}</style>
+          <Lotus />
+        </g>
+        <RevealEllipse
+          a={132}
+          b={51}
+          cx={width / 2}
+          cy={height / 2}
+          duration={1.5}
+        />
+        <RevealEllipse
+          a={132}
+          b={51}
+          cx={width / 2}
+          cy={height / 2}
+          rotate={60}
+          duration={0.8}
+          delay={150}
+        />
+        <RevealEllipse
+          a={132}
+          b={51}
+          cx={width / 2}
+          cy={height / 2}
+          rotate={120}
+          delay={250}
+        />
+      </svg>
+    )
+  }
+}
+
+export default Logo

components/ReactBKKLogo/RevealEllipse.js

@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+function generateRange (start, end, count) {
+  let result = []
+  for (let i = start; i <= end; i += count) {
+    result.push(i)
+  }
+  return result
+}
+
+function ellipsePoint (a, b, angle) {
+  return {
+    x: a * Math.cos(angle * Math.PI / 180),
+    y: b * Math.sin(angle * Math.PI / 180)
+  }
+}
+
+class RevealEllipse extends React.Component {
+  static propTypes = {
+    cx: PropTypes.number,
+    cy: PropTypes.number,
+    a: PropTypes.number,
+    b: PropTypes.number,
+    rotate: PropTypes.number,
+    duration: PropTypes.number,
+    delay: PropTypes.number
+  }
+  static defaultProps = {
+    cx: 0,
+    cy: 0,
+    a: 1,
+    b: 1,
+    rotate: 0,
+    duration: 1,
+    delay: 0
+  }
+  state = {
+    currentAngle: 0,
+    pointList: [ellipsePoint(this.props.a, this.props.b, 0)]
+  }
+  componentDidMount () {
+    this.delay = setTimeout(() => {
+      this.timer = Date.now()
+      this.raf = window.requestAnimationFrame(this.revealStep)
+    }, this.props.delay)
+  }
+  componentWillUnmount () {
+    window.cancelAnimationFrame(this.raf)
+    clearTimeout(this.delay)
+  }
+  revealStep = (time) => {
+    const deltaTime = this.lastTime ? time - this.lastTime : 0
+    this.lastTime = time
+    const { a, b, duration } = this.props
+    if (this.state.currentAngle >= 360) {
+      return window.cancelAnimationFrame(this.raf)
+    }
+    this.setState(({ currentAngle, pointList }) => {
+      const nextAngle = (currentAngle + 360 * deltaTime * 0.001 / duration)
+      const newPointList = this.getIntegratedAngles(currentAngle, nextAngle, 5)
+        .filter(angle => angle <= 360)
+        .map(angle => ellipsePoint(a, b, angle))
+      return {
+        currentAngle: nextAngle,
+        pointList: [ ...pointList, ...newPointList ]
+      }
+    })
+    this.raf = window.requestAnimationFrame(this.revealStep)
+  }
+  getIntegratedAngles (currentAngle, nextAngle, maxAngle) {
+    if (nextAngle - currentAngle > maxAngle) {
+      return generateRange(currentAngle, nextAngle, maxAngle)
+    }
+    return [ currentAngle ]
+  }
+  render () {
+    const { cx, cy, rotate } = this.props
+    const { currentAngle, pointList } = this.state
+    const path = pointList.map(({ x, y }) => x + ' ' + y).join(' ')
+    return (
+      <path
+        d={`M${path}${currentAngle >= 360 ? 'z' : ''}`}
+        transform={`
+          translate(${cx}, ${cy})
+          rotate(${rotate})
+        `}
+        strokeWidth='10px'
+        stroke='#00D8FF'
+        fill='none'
+    />)
+  }
+}
+
+export default RevealEllipse

components/ReactBKKLogo/index.js

@@ -0,0 +1,3 @@
+import Logo from './Logo'
+
+export default Logo

components/SimpleCrossfadeImages.js

@@ -0,0 +1,53 @@
+// Simple crossfade images
+// credit: http://css3.bradshawenterprises.com/cfimg/
+
+const images = [
+  'static/hero-bg.jpg',
+  'static/hero-bg-2.jpg',
+  'static/hero-bg-3.jpg'
+]
+
+export default () => (
+  <div className='container'>
+    {images.map(image => {
+      return <div key={image} className='image' style={{ backgroundImage: `url(${image})` }} />
+    })}
+    <style jsx>{`
+      .container {
+        top: 0;
+        left:0;
+        bottom:0;
+        overflow:hidden;
+        right:0;
+        position: absolute;
+      }
+      .image {
+        top: 0;
+        left:0;
+        bottom:0;
+        right:0;
+        background-size: cover;
+        background-position: center center;
+        position: absolute;
+        animation: SimpleCrossfade 12s linear infinite 0s;
+        transform-origin: center;
+      }
+      @keyframes SimpleCrossfade {
+        0% { opacity:1; transform: scale(1); }
+        25% { opacity:1; }
+        33.3333% { opacity:0; transform: scale(1.05); }
+        50% { transform: scale(1); }
+        91.66667% { opacity: 0; }
+        100% { opacity:1;  }
+      }
+      .image:nth-of-type(1) {
+        animation-delay: 7s;
+      }
+      .image:nth-of-type(2) {
+        animation-delay: 3s;
+      }
+      .image:nth-of-type(3) {
+        animation-delay: -1s;
+      }
+    `}</style>
+  </div>)

components/SponsorsSection.js

@@ -0,0 +1,97 @@
+import SectionTitle from './SectionTitle'
+
+const sponsorsGold = [
+  'programmer-thai',
+  'sprin3r'
+]
+const sponsorsSliver = [
+  'cleverse',
+  'integenxe',
+  'omise',
+  'pronto',
+  'taskworld',
+  'thinknet',
+  'wongnai'
+]
+
+export default function TicketsSection () {
+  return (
+    <div className='tickets'>
+      <SectionTitle>Sponsors</SectionTitle>
+
+      <div className='item-sponsors-box'>
+        <div>
+          {sponsorsGold.map(name => (
+            <ItemSponsor
+              key={name}
+              src={`static/sponsor/${name}.svg`}
+              type='gold'
+            />
+          ))}
+        </div>
+        <div>
+          {sponsorsSliver.map(name => (
+            <ItemSponsor
+              key={name}
+              src={`static/sponsor/${name}.svg`}
+              type='sliver'
+            />
+          ))}
+        </div>
+      </div>
+
+      <style jsx>{`
+        .tickets {
+          text-align: center;
+        }
+        .item-sponsors-box {
+          max-width: 960px;
+          text-align: center;
+          margin: 0 auto;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+function ItemSponsor ({ src, type }) {
+  return (
+    <div className={`sponsor-item-${type}`}>
+      <img src={src} width='100%' />
+
+      <style jsx>{`
+        .sponsor-item-gold, .sponsor-item-sliver {
+          display: inline-block;
+        }
+        .sponsor-item-gold {
+          width: 80%;
+          max-width: 300px;
+          padding: 0 30px;
+        }
+        .sponsor-item-sliver {
+          width: 30%;
+          max-width: 170px;
+          padding: 0 20px;
+        }
+
+        @media (max-width: 767px) {
+          .sponsor-item-gold {
+            max-width: 40%;
+            padding: 0 10px;
+          }
+          .sponsor-item-sliver {
+            width: 40%;
+            max-width: 150px;
+            padding: 0 10px;
+          }
+        }
+        @media (max-width: 480px) {
+          .sponsor-item-gold {
+            max-width: 100%;
+            padding: 0;
+          }
+        }
+      `}</style>
+    </div>
+  )
+}