Events: Migrate subdomains to subfolders

package.json

@@ -6,7 +6,7 @@
   "author": "FOSS@Amrita <amritapurifoss@gmail.com>",
   "dependencies": {
     "classnames": "^2.2.6",
-    "gatsby": "^2.5.5",
+    "gatsby": "^2.18.10",
     "gatsby-image": "^2.1.0",
     "gatsby-plugin-disqus": "^1.0.3",
     "gatsby-plugin-google-analytics": "^2.1.24",
@@ -29,6 +29,7 @@
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "react-load-script": "0.0.6",
+    "react-particles-js": "^2.7.0",
     "react-responsive-carousel": "^3.1.49",
     "react-typing-animation": "^1.6.2",
     "styled-components": "^4.2.0"

src/components/events/hacktoberfest/components/countdown.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+
+class Countdown extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+    };
+  }
+
+  componentWillMount() {
+    this.getTimeUntil(this.props.deadline);
+  }
+
+  componentDidMount() {
+    setInterval(() => this.getTimeUntil(this.props.deadline), 1000);
+  }
+
+  leading(num) {
+    return num < 10 ? '0' + num : num;
+  }
+
+  getTimeUntil(deadline) {
+    const time = Date.parse(deadline) - Date.parse(new Date());
+    if(time < 0) {
+      this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+    } else {
+      const seconds = Math.floor((time/1000)%60);
+      const minutes = Math.floor((time/1000/60)%60);
+      const hours = Math.floor((time/(1000*60*60))%24);
+      const days = Math.floor(time/(1000*60*60*24));
+
+      this.setState({ days, hours, minutes, seconds });
+    }
+
+  }
+
+  render() {
+    return(
+      <section id="counter" className="d-flex align-items-center">
+          <div className="row m-0 w-100">
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.days)}
+              <span>Days</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.hours)}
+              <span>Hours</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.minutes)}
+              <span>Minutes</span>
+            </div>
+            <div className="part p-4 col-6 col-md-3">
+              {this.leading(this.state.seconds)}
+              <span>Seconds</span>
+            </div>
+          </div>
+      </section>
+    );
+  }
+}
+export default Countdown;

src/components/events/hacktoberfest/components/footer.js

@@ -0,0 +1,28 @@
+import React from "react"
+import Digitalocean from '../images/digitalocean.svg'
+import Dev from '../images/dev.svg'
+import Github from '../images/github.png'
+
+const Footer = () => {
+  return(
+    <>
+      <h1 className="py-4 my-4 text-light text-center">#OctoberIsComing</h1>
+      <div className="text-center text-light">Thank You</div>
+      <div id="footer-logos" className="row m-0">
+        <div className="container my-2 d-flex justify-content-center">
+          <a href="https://www.digitalocean.com">
+            <img className="px-2" src={Digitalocean} alt="Digital Ocean" />
+          </a>
+          <a href="https://github.com/">
+            <img className="px-2" src={Github} alt="Github" />
+          </a>
+          <a href="https://dev.to/">
+            <img className="px-2" src={Dev} alt="Dev"/>
+          </a>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Footer

src/components/events/hacktoberfest/components/header.js

@@ -0,0 +1,105 @@
+import React from "react"
+import hacktoberfest19logo from '../../hacktoberfest/images/hacktoberfest19.png'
+import hacktoberfest19Art1 from '../../hacktoberfest/images/hacktoberfest_art_1.png'
+import hacktoberfest19Art2 from '../../hacktoberfest/images/hacktoberfest_art_2.png'
+import amFOSSLogo from '../../../../../src/images/amfoss_logo.png'
+import amritaLogo from '../../../../../src/images/amrita_logo.png'
+
+import Particles from 'react-particles-js';
+
+const Header = () => {
+  return (
+  <>
+    <div id="header-area">
+      <Particles
+        canvasClassName="particleBg"
+        params={{
+          "particles": {
+            "number": {
+              "value": 300,
+              "density": {
+                "enable": false
+              }
+            },
+            "size": {
+              "value": 3,
+              "random": true,
+              "anim": {
+                "speed": 10,
+                "size_min": 0.3
+              }
+            },
+            "line_linked": {
+              "enable": false
+            },
+            "move": {
+              "random": true,
+              "speed": 3,
+              "direction": "down",
+              "out_mode": "out"
+            }
+          },
+          "interactivity": {
+            "events": {
+              "onhover": {
+                "enable": true,
+                "mode": "bubble"
+              },
+              "onclick": {
+                "enable": true,
+                "mode": "repulse"
+              }
+            },
+            "modes": {
+              "bubble": {
+                "distance": 50,
+                "duration": 2,
+                "size": 0,
+                "opacity": 0
+              },
+              "repulse": {
+                "distance": 40,
+                "duration": 4
+              }
+            }
+          }
+        }}
+       />
+      <div id="top-bar" className="row m-0 p-4">
+        <div className="col-6">
+          <a href="https://amfoss.in">
+            <img alt="amFOSS Logo" className="amFOSSLogo" src={amFOSSLogo}/>
+          </a>
+        </div>
+        <div className="col-6 text-right">
+          <a href="https://www.amrita.edu/">
+            <img alt="Amrita Logo" className="amritaLogo" src={amritaLogo}/>
+          </a>
+        </div>
+      </div>
+      <img src={hacktoberfest19Art1} id="header-art-1"/>
+      <img src={hacktoberfest19Art2} id="header-art-2"/>
+      <div className="header-title d-flex align-items-center justify-content-center">
+          <div className="row m-0 w-100">
+            <div className="col-xl-8 col-lg-6 text-center p-0">
+              <img className="hacktoberLogo" src={hacktoberfest19logo} />
+            </div>
+            <div className="col">
+                <div className="d-flex align-items-center text-lg-left text-center justify-content-center h-100">
+                  <div>
+                    <h1>Amritapuri</h1>
+                    <h3>October 9 & 10, 4PM - 9PM</h3>
+                    <button className="button">
+                      <a href="#registration-form" style={{color: 'black', textDecoration: 'none'}}>REGISTER NOW</a>
+                    </button>
+                  </div>
+                </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  </>
+)
+}
+
+export default Header;

src/components/events/hacktoberfest/components/learnmore.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import DigitalOcean from '../../hacktoberfest/images/hacktoberdigital.svg'
+
+const LearnMore = () => {
+  return (
+    <section id="learn-more">
+      <div className="row m-0 w-100 d-flex align-items-center">
+        <div className="col-4">
+          <img src={DigitalOcean} alt="Image" />
+        </div>
+        <div className="col-8">
+          <p className="text-light p-2">
+            Hacktoberfest is an annual event hosted by DigitalOcean and DEV.to promoting and supporting Open Source collaboration. It's all about encouraging meaningful contributions to open source.<br />
+            Join Hacktoberfest meetup hosted by amFOSS on 9th and 10th of October and don't miss this oppurtunity to get a <span>limited edition T-shirt!</span>
+          </p>
+          <button className="button">
+            <a href="https://hacktoberfest.digitalocean.com/" style={{color: 'black', textDecoration: 'none'}}>LEARN MORE!</a>
+          </button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default LearnMore

src/components/events/hacktoberfest/components/map.js

@@ -0,0 +1,34 @@
+import React from "react"
+
+const Map = () => {
+
+  return(
+    <section id="venue-details">
+      <div className="row m-0 w-100">
+        <div className="col-lg-8 order-2 p-4">
+          <iframe
+            id="location-map"
+            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2555.517282504074!2d76.49219936127913!3d9.093913377090402!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xdc224ac2f7bde6dd!2sFOSS%40Amrita!5e0!3m2!1sen!2sin!4v1569567196585!5m2!1sen!2sin"
+            frameBorder="0"
+            allowFullScreen={false}
+          >
+          </iframe>
+        </div>
+        <div className="col p-4">
+          <h2>Venue</h2>
+          <h3>Amrita School of Engineering,</h3>
+          <div className="fs-4">Amritapuri Campus,</div>
+          <div className="fs-5">
+            Vallickavu, Karunagapally,
+          </div>
+          <div className="fs-6">
+            Kerala, India - 690525
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+
+}
+
+export default Map;