Replace gulp in favor of webpack

.editorconfig

@@ -4,7 +4,7 @@ root = true
 
 [*]
 charset = utf-8
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.gitignore

@@ -52,3 +52,6 @@ node_modules/
 
 # Other
 archive
+.vscode/*
+package-lock.json
+dist/*

dist/index.html

@@ -32,7 +32,8 @@
             <!-- Header -->
             <header class="align--center pt3 pb2">
                 <div class="container">
-                    <h1 class="mb3 reveal-on-scroll is-revealing" title="Workshop on Javascript"><img src="/img/WoJS_Variant2logo.svg" alt="Workshop on Javascript">
+                    <h1 class="mb3 reveal-on-scroll is-revealing" title="Workshop on Javascript"><img
+                            src="/img/WoJS_Variant2logo.svg" alt="Workshop on Javascript">
                     </h1>
                     <h2 class="mb3 reveal-on-scroll is-revealing">Una conferencia de desarrolladores para
                         desarrolladores.</h2>
@@ -43,7 +44,8 @@ <h2 class="mb3 reveal-on-scroll is-revealing">Una conferencia de desarrolladores
                 <section class="align--center pt3 pb3">
                     <p class="h3 mb2 reveal-on-scroll is-revealing">Sigue el evento..!</p>
                     <a href="" class="btn btn--outline reveal-on-scroll is-revealing">Descargar agenda</a>
-                    <a href="https://www.eventbrite.com/" class="btn btn--default reveal-on-scroll is-revealing">Transmisión Youtube →</a>
+                    <a href="https://www.eventbrite.com/"
+                        class="btn btn--default reveal-on-scroll is-revealing">Transmisión Youtube →</a>
                 </section>
             </header>
 
@@ -75,21 +77,33 @@ <h2 class="mb3 reveal-on-scroll is-revealing">Una conferencia de desarrolladores
                     <section class="pt3 pb3 align--center">
                         <h3 class="mb1">Los ponentes</h3>
                         <div class="grid-row">
-                            <div class="grid-column span-6 mt2">
-                                <img class="mb1" src="img/andros.jpg" alt="Foto Andros Fenollosa">
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/woman1.jpg" alt="Alyssa Long">
                                 <p class="small">Andros Fenollosa</p>
                             </div>
-                            <div class="grid-column span-6 mt2">
-                                <img class="mb1" src="img/jimena.jpg" alt="Foto Jimena Escobar">
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/man1.jpg" alt="Jonathan Foster">
                                 <p class="small">Jimena Escobar</p>
                             </div>
-                            <div class="grid-column span-6 mt2">
-                                <img class="mb1" src="img/santos.jpg" alt="Foto Santos Gallegos">
-                                <p class="small">Santos Gallegos</p>
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/woman2.jpg" alt="Kiara Taylor">
+                                <p class="small">Jorge Padilla</p>
+                            </div>
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/man2.jpg" alt="Elijah Rhodes">
+                                <p class="small">Oscar Barajas</p>
+                            </div>
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/woman3.jpg" alt="Anita Gonzalez">
+                                <p class="small">Ramon Chancay</p>
                             </div>
-                            <div class="grid-column span-6 mt2">
-                                <img class="mb1" src="img/leonidas.jpg" alt="Foto Leonidas Esteban">
-                                <p class="small">Leonidas Esteban</p>
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/man3.jpg" alt="Adrian Sosa">
+                                <p class="small">Sacha Lifszyc</p>
+                            </div>
+                            <div class="grid-column span-2 mt2">
+                                <img class="mb1" src="/img/man3.jpg" alt="Adrian Sosa">
+                                <p class="small">Santos Gallegos</p>
                             </div>
                         </div>
                     </section>
@@ -133,7 +147,8 @@ <h3 class="align--center mb2">Objetivos</h3>
                     <section class="align--center pt3 pb3">
                         <p class="h3 mb2 reveal-on-scroll is-revealing">Quieres conocer de mas eventos como este...!</p>
                         <a href="" class="btn btn--outline reveal-on-scroll is-revealing">Subscribirme a Eventos</a>
-                        <a href="https://www.eventbrite.com/" class="btn btn--default reveal-on-scroll is-revealing">Saludar en telegram →</a>
+                        <a href="https://www.eventbrite.com/"
+                            class="btn btn--default reveal-on-scroll is-revealing">Saludar en telegram →</a>
                         <p class="small mt1 text--gray">Usamos Eventbrite para nuestros eventos, también eres bienvenido
                             a
                             interactuar en el chat.</p>
@@ -145,12 +160,17 @@ <h3 class="align--center mb2">Objetivos</h3>
             <!-- Footer -->
             <footer class="mt2 pb3 align--center">
                 <ul class="no-bullets list--inline mb0">
-                    <li class="m1 block-on-mobile"><a href="https://www.twitter.com" class="link"><img class="icon" src="/img/twitter.svg" alt="Twitter"> Twitter</a></li>
-                    <li class="m1 block-on-mobile"><a href="https://www.facebook.com" class="link"><img class="icon" src="/img/facebook.svg" alt="Facebook"> Github</a></li>
-                    <li class="m1 block-on-mobile"><a href="https://www.instagram.com" class="link"><img class="icon" src="/img/instagram.svg" alt="Instagram"> Telegram</a></li>
-                    <li class="m1 block-on-mobile"><a href="https://www.youtube.com" class="link"><img class="icon" src="/img/youtube.svg" alt="YouTube"> YouTube</a></li>
+                    <li class="m1 block-on-mobile"><a href="https://www.twitter.com" class="link"><img class="icon"
+                                src="/img/twitter.svg" alt="Twitter"> Twitter</a></li>
+                    <li class="m1 block-on-mobile"><a href="https://www.facebook.com" class="link"><img class="icon"
+                                src="/img/facebook.svg" alt="Facebook"> Github</a></li>
+                    <li class="m1 block-on-mobile"><a href="https://www.instagram.com" class="link"><img class="icon"
+                                src="/img/instagram.svg" alt="Instagram"> Telegram</a></li>
+                    <li class="m1 block-on-mobile"><a href="https://www.youtube.com" class="link"><img class="icon"
+                                src="/img/youtube.svg" alt="YouTube"> YouTube</a></li>
                 </ul>
-                <p class="mt1 small text--gray">Design by <a href="https://www.papayatemplates.com" class="link">Papaya</a>.</p>
+                <p class="mt1 small text--gray">Design by <a href="https://www.papayatemplates.com"
+                        class="link">Papaya</a>.</p>
             </footer>
 
         </div>

package.json

@@ -1,24 +1,29 @@
 {
-    "name": "pear-gulp",
-    "version": "1.0.0",
-    "author": "Jordan Bowman",
-    "description": "This is a Gulp boilerplate that is part of the Pear HTML/Sass boilerplate",
-    "private": true,
-    "devDependencies": {
-        "browser-sync": "^2.26.3",
-        "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^5.0.0",
-        "gulp-clean-css": "^4.0.0",
-        "gulp-concat": "^2.6.1",
-        "gulp-file-include": "^2.0.1",
-        "gulp-htmlmin": "^5.0.1",
-        "gulp-imagemin": "^5.0.3",
-        "gulp-plumber": "^1.2.1",
-        "gulp-rename": "^1.4.0",
-        "gulp-sass": "^4.0.2",
-        "gulp-size": "^3.0.0",
-        "gulp-uglify": "^3.0.1",
-        "gulp-util": "^3.0.8",
-        "gulp-watch": "^4.2.4"
-    }
+  "name": "wojsec2021",
+  "version": "1.0.0",
+  "author": "Jordan Bowman",
+  "description": "This is a Gulp boilerplate that is part of the Pear HTML/Sass boilerplate",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack --mode development --config webpack.config.dev.js",
+    "watch": "webpack --watch --mode production",
+    "prod": "webpack --mode production"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^3.0.0",
+    "dotenv-webpack": "^7.0.2",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "node-sass": "^6.0.0",
+    "sass": "^1.34.0",
+    "sass-loader": "^11.1.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.2",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0"
+  }
 }

public/index.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en-us">
+
+<head>
+  <!-- Meta -->
+  <meta charset="utf-8" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>Huddle</title>
+  <meta name="description" content="" />
+
+  <!-- The compiled CSS file -->
+  <link rel="stylesheet" href="styles.css" />
+
+  <!-- Web fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700" rel="stylesheet" />
+
+  <!-- favicon.ico. Place these in the root directory. -->
+  <link rel="shortcut icon" href="favicon.ico" />
+</head>
+
+<body class="has-animations">
+  <!-- Create outer border -->
+  <div class="page-border">
+    <div class="bg--white">
+
+      <!-- Header -->
+      <header class="align--center pt3 pb2">
+        <div class="container">
+          <h1 class="mb3 reveal-on-scroll is-revealing" title="Huddle"><img src="/img/logo.svg" alt="Huddle"></h1>
+          <h2 class="mb3 reveal-on-scroll is-revealing">Workshop on Javascrit, una conferencia por Javascrit
+            Ecuador</h2>
+          <p class="mb1">12 Junio 2021</p>
+          <p>Ecuador</p>
+        </div>
+      </header>
+
+      <!-- Body -->
+      <main>
+        <div class="container">
+
+          <!-- Info -->
+          <section class="pt2 pb3">
+            <img class="mb3" src="/img/presentor.jpg" alt="Huddle presentation">
+            <div class="grid-row">
+              <div class="grid-column span-one-third mt1 reveal-on-scroll is-revealing">
+                <img class="icon mb1" src="/img/bucket.svg">
+                <p>Equidem soleo etiam quod uno Graeci, si aliter non possum idem&nbsp;pluribus.</p>
+              </div>
+              <div class="grid-column span-one-third mt1 reveal-on-scroll is-revealing">
+                <img class="icon mb1" src="/img/flask.svg">
+                <p>Nonne videmus quanta perturbatio rerum omnium consequatur&nbsp;quanta.</p>
+              </div>
+              <div class="grid-column span-one-third mt1 reveal-on-scroll is-revealing">
+                <img class="icon mb1" src="/img/aircraft.svg">
+                <p>Hoc enim constituto in philosophia constituta sunt omnia aliter&nbsp;possum.</p>
+              </div>
+            </div>
+
+          </section>
+
+          <!-- Presenters -->
+          <section class="pt3 pb3 align--center">
+            <h3 class="mb1">The talkers</h3>
+            <div class="grid-row">
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/woman1.jpg" alt="Alyssa Long">
+                <p class="small">Alyssa Long</p>
+              </div>
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/man1.jpg" alt="Jonathan Foster">
+                <p class="small">Jonathan Foster</p>
+              </div>
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/woman2.jpg" alt="Kiara Taylor">
+                <p class="small">Kiara Taylor</p>
+              </div>
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/man2.jpg" alt="Elijah Rhodes">
+                <p class="small">Elijah Rhodes</p>
+              </div>
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/woman3.jpg" alt="Anita Gonzalez">
+                <p class="small">Anita Gonzalez</p>
+              </div>
+              <div class="grid-column span-2 mt2">
+                <img class="mb1" src="/img/man3.jpg" alt="Adrian Sosa">
+                <p class="small">Adrian Sosa</p>
+              </div>
+            </div>
+          </section>
+
+          <!-- Sponsors -->
+          <section class="pt3 pb3 align--center">
+            <h3 class="mb2">Some generous peeps</h3>
+            <img class="m1" src="/img/stripe.svg" alt="Stripe" style="height: 50px;">
+            <img class="m1" src="/img/segment.svg" alt="Segment" style="height: 45px;">
+            <img class="m1" src="/img/newrelic.svg" alt="New Relic" style="height: 35px;">
+            <img class="m1" src="/img/drift.svg" alt="Drift" style="height: 50px;">
+            <img class="m1" src="/img/zopim.svg" alt="Zopim" style="height: 50px;">
+          </section>
+
+          <!-- Testimonials -->
+          <section class="pt2 pb3">
+            <h3 class="align--center mb2">On the record</h3>
+            <div class="grid-row">
+              <div class="grid-column span-one-third mt1">
+                <blockquote class="blockquote">
+                  <p>This conference changed my life because I found my wife&nbsp;there.</p>
+                  <p>> <cite>Randy Johnson</cite></p>
+                </blockquote>
+              </div>
+              <div class="grid-column span-one-third mt1">
+                <blockquote class="blockquote">
+                  <p>It takes a really long time to get to this event. Worth it?&nbsp;Maybe.</p>
+                  <p>> <cite>Jill Carson</cite></p>
+                </blockquote>
+              </div>
+              <div class="grid-column span-one-third mt1">
+                <blockquote class="blockquote">
+                  <p>Sometimes I like to be glamorous. It makes me feel good&nbsp;inside.</p>
+                  <p>> <cite>Chase Harrop</cite></p>
+                </blockquote>
+              </div>
+            </div>
+          </section>
+
+          <!-- CTA -->
+          <section class="align--center pt3 pb3">
+            <p class="h3 mb2 reveal-on-scroll is-revealing">Tickets start at&nbsp;$950.</p>
+            <a href="" class="btn btn--outline reveal-on-scroll is-revealing">Download Schedule</a>
+            <a href="https://www.eventbrite.com/" class="btn btn--default reveal-on-scroll is-revealing">Get a
+              ticket →</a>
+            <p class="small mt1 text--gray">Tickets available on Eventbrite.</p>
+          </section>
+
+        </div>
+      </main>
+
+      <!-- Footer -->
+      <footer class="mt2 pb3 align--center">
+        <ul class="no-bullets list--inline mb0">
+          <li class="m1 block-on-mobile"><a href="https://www.twitter.com" class="link"><img class="icon"
+                src="/img/twitter.svg" alt="Twitter"> Twitter</a></li>
+          <li class="m1 block-on-mobile"><a href="https://www.facebook.com" class="link"><img class="icon"
+                src="/img/facebook.svg" alt="Facebook"> Facebook</a></li>
+          <li class="m1 block-on-mobile"><a href="https://www.instagram.com" class="link"><img class="icon"
+                src="/img/instagram.svg" alt="Instagram"> Instagram</a></li>
+          <li class="m1 block-on-mobile"><a href="https://www.youtube.com" class="link"><img class="icon"
+                src="/img/youtube.svg" alt="YouTube"> YouTube</a></li>
+        </ul>
+        <p class="mt1 small text--gray">Design by <a href="https://www.papayatemplates.com" class="link">Papaya</a>.
+        </p>
+      </footer>
+
+    </div>
+  </div>
+
+  <div id="main"></div>
+
+
+  <!-- Scroll reveal -->
+  <script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>
+</body>
+
+</html>

src/js/main.js

@@ -1 +1,26 @@
-!function(){window;const e=document.documentElement;if(e.classList.remove("no-js"),e.classList.add("js"),document.body.classList.contains("has-animations")){(window.sr=ScrollReveal()).reveal(".reveal-on-scroll",{duration:600,distance:"20px",easing:"cubic-bezier(0.5, -0.01, 0, 1.005)",origin:"top",interval:100})}}();
+import '../scss/main.scss'
+import Template from "./template.js";
+
+!(function () {
+    window;
+    const e = document.documentElement;
+    if (
+        (e.classList.remove("no-js"),
+        e.classList.add("js"),
+        document.body.classList.contains("has-animations"))
+    ) {
+        (window.sr = ScrollReveal()).reveal(".reveal-on-scroll", {
+            duration: 600,
+            distance: "20px",
+            easing: "cubic-bezier(0.5, -0.01, 0, 1.005)",
+            origin: "top",
+            interval: 100,
+        });
+    }
+})();
+
+
+(function App() {
+    const main = null || document.getElementById("main");
+    main.innerHTML = Template();
+})();