Add particles

_config.yml

@@ -1,43 +1,28 @@
-# Welcome to Jekyll!
+title: espanso
-#
+subtitle: Cross-platform Text Expander written in Rust
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-title: Your awesome title
-email: your-email@example.com
 description: >- # this means to ignore newlines until "baseurl:"
-  Write an awesome description for your new site here. You can edit this
+  An Open Source, Cross-platform Text Expander written in Rust.
-  line in _config.yml. It will appear in your document head meta (for
-  Google search results) and in your feed.xml site description.
 baseurl: "" # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
+url: "https://espanso.org" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
+github_username:  federico-terzi
-github_username:  jekyll
+
+permalink: /blog/:title/
+highlighter: rouge
+
+collections:
+  portfolios:
 
 # Build settings
 markdown: kramdown
 theme: minima
 plugins:
   - jekyll-feed
+  - jekyll-sitemap
+  - jekyll-seo-tag
 
-# Exclude from processing.
+social:
-# The following items will not be processed, by default. Create a custom list
+  name: Federico Terzi
-# to override the default setting.
+  links:
-# exclude:
+    - https://www.youtube.com/c/FedericoTerzi
-#   - Gemfile
+    - https://www.linkedin.com/in/federico-terzi/
-#   - Gemfile.lock
+    - https://github.com/federico-terzi
-#   - node_modules
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/

_sass/_homepage.scss

@@ -122,4 +122,11 @@
             font-size: 1.3em;
         }
     }
+}
+
+#particles-js {
+    position: absolute;
+    width: 100%;
+    height: 700px;
+    z-index: -100;
 }

assets/css/main.css

@@ -1,109 +0,0 @@
-.navbar li {
-  padding: 0 6px 0 6px; }
-.navbar .logo-img {
-  height: 40px;
-  margin: 10px 0 0 5px; }
-.navbar .btn {
-  background-color: #00b894;
-  border: 0;
-  font-weight: 700;
-  color: white !important;
-  padding: 3px 20px 3px 20px !important;
-  margin: 3px 0 0 10px; }
-  @media screen and (max-width: 769px) {
-    .navbar .btn {
-      margin: 3px 0 0 0; } }
-
-.jumbotron {
-  background-color: transparent; }
-  .jumbotron h1 {
-    font-weight: 400;
-    margin: 120px 0 160px 0; }
-    @media screen and (max-width: 769px) {
-      .jumbotron h1 {
-        margin: 60px 0 90px 0;
-        font-size: 2.5em; } }
-  .jumbotron .btn {
-    font-weight: 700;
-    font-size: 1.6em;
-    background-color: #00b894;
-    color: white !important;
-    padding: 13px 30px 13px 30px;
-    border-radius: 50px;
-    border: 0; }
-    @media screen and (max-width: 769px) {
-      .jumbotron .btn {
-        font-size: 1.3em; } }
-  .jumbotron .btn-subtitle {
-    font-size: 1em;
-    margin: 10px;
-    color: #636e72; }
-
-.hiw {
-  background-image: url("/assets/images/background.svg");
-  background-position: center top;
-  background-size: cover;
-  background-repeat: no-repeat;
-  padding: 90px 10px 40px 10px;
-  color: white; }
-  @media screen and (max-width: 769px) {
-    .hiw {
-      padding: 70px 15px 40px 15px; } }
-  .hiw h2 {
-    font-weight: 700; }
-  .hiw .text-example {
-    font-size: 2em;
-    background-color: white;
-    color: #2d3436;
-    max-width: 500px;
-    padding: 15px 5px 15px 5px;
-    border-radius: 5px;
-    margin: auto; }
-
-.features {
-  margin-top: 50px; }
-  .features h2 {
-    font-weight: 700; }
-  .features h3 {
-    font-weight: 700; }
-  .features h4 {
-    font-weight: 700; }
-  .features .feature-col {
-    padding: 0 35px 0 35px;
-    margin: 20px 0 10px 0; }
-    .features .feature-col img {
-      height: 100px;
-      margin: 20px; }
-  .features .description {
-    min-height: 80px; }
-  .features .feature-example {
-    font-size: 1.5em;
-    background-color: #2d3436;
-    color: white;
-    height: 90px;
-    padding: 10px 20px 10px 20px;
-    border-radius: 5px;
-    margin: auto;
-    text-align: left; }
-  .features .extra-feature-col {
-    padding: 0 25px 0 25px;
-    margin: 10px 0 10px 0; }
-    .features .extra-feature-col img {
-      height: 70px;
-      margin: 0 0 30px 0; }
-  .features .btn {
-    font-weight: 700;
-    font-size: 1.4em;
-    background-color: #00b894;
-    color: white !important;
-    padding: 13px 30px 13px 30px;
-    border-radius: 40px;
-    border: 0; }
-    @media screen and (max-width: 769px) {
-      .features .btn {
-        font-size: 1.3em; } }
-
-body {
-  font-family: 'Raleway', sans-serif; }
-
-/*# sourceMappingURL=main.css.map */

assets/css/main.css.map

@@ -1,7 +0,0 @@
-{
-"version": 3,
-"mappings": "AACI,UAAG;EACC,OAAO,EAAE,WAAW;AAGxB,iBAAU;EACN,MAAM,EAAE,IAAI;EACZ,MAAM,EAAE,YAAY;AAGxB,YAAK;EACD,gBAAgB,ECXZ,OAAO;EDYX,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,GAAG;EAChB,KAAK,EAAE,gBAAgB;EACvB,OAAO,EAAE,4BAA4B;EACrC,MAAM,EAAE,YAAY;EAEpB,oCAA8C;IARlD,YAAK;MASG,MAAM,EAAE,SAAS;;AEnB7B,UAAW;EACP,gBAAgB,EAAE,WAAW;EAE7B,aAAG;IACC,WAAW,EAAE,GAAG;IAChB,MAAM,EAAE,eAAe;IAEvB,oCAA8C;MAJlD,aAAG;QAKK,MAAM,EAAE,aAAa;QACrB,SAAS,EAAE,KAAK;EAIxB,eAAK;IACD,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EDhBZ,OAAO;ICiBX,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,mBAAmB;IAC5B,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,CAAC;IAET,oCAA8C;MATlD,eAAK;QAUG,SAAS,EAAE,KAAK;EAIxB,wBAAc;IACV,SAAS,EAAE,GAAG;IACd,MAAM,EAAE,IAAI;IACZ,KAAK,ED5BD,OAAO;;ACgCnB,IAAK;EACD,gBAAgB,EAAE,oCAAoC;EACtD,mBAAmB,EAAE,UAAU;EAC/B,eAAe,EAAE,KAAK;EACtB,iBAAiB,EAAC,SAAS;EAC3B,OAAO,EAAE,mBAAmB;EAC5B,KAAK,EAAE,KAAK;EAEZ,oCAA8C;IARlD,IAAK;MASG,OAAO,EAAE,mBAAmB;EAGhC,OAAG;IACC,WAAW,EAAE,GAAG;EAGpB,kBAAc;IACV,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,KAAK;IACvB,KAAK,EDlDA,OAAO;ICmDZ,SAAS,EAAE,KAAK;IAChB,OAAO,EAAE,iBAAiB;IAC1B,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,IAAI;;AAIpB,SAAU;EACN,UAAU,EAAE,IAAI;EAEhB,YAAG;IACC,WAAW,EAAE,GAAG;EAGpB,YAAG;IACC,WAAW,EAAE,GAAG;EAGpB,YAAG;IACC,WAAW,EAAE,GAAG;EAGpB,sBAAa;IACT,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,aAAa;IAErB,0BAAI;MACA,MAAM,EAAE,KAAK;MACb,MAAM,EAAE,IAAI;EAIpB,sBAAa;IACT,UAAU,EAAE,IAAI;EAGpB,0BAAiB;IACb,SAAS,EAAE,KAAK;IAChB,gBAAgB,EDzFX,OAAO;IC0FZ,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,mBAAmB;IAC5B,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,IAAI;EAGpB,4BAAmB;IACf,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,aAAa;IAErB,gCAAI;MACA,MAAM,EAAE,IAAI;MACZ,MAAM,EAAE,UAAU;EAI1B,cAAK;IACD,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,KAAK;IAChB,gBAAgB,EDlHZ,OAAO;ICmHX,KAAK,EAAE,gBAAgB;IACvB,OAAO,EAAE,mBAAmB;IAC5B,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,CAAC;IAET,oCAA8C;MATlD,cAAK;QAUG,SAAS,EAAE,KAAK;;ACpH5B,IAAK;EACD,WAAW,EAAE,qBAAqB",
-"sources": ["../../_sass/_header.scss","../../_sass/_colors.scss","../../_sass/_homepage.scss","../../_sass/main.scss"],
-"names": [],
-"file": "main.css"
-}

assets/css/styles.scss

@@ -0,0 +1,3 @@
+---
+---
+@import "main";

assets/particles.json

@@ -0,0 +1,116 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#90f5da"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#55efc4"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#55efc4",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 4,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true,
+  "config_demo": {
+    "hide_card": false,
+    "background_color": "#b61924",
+    "background_image": "",
+    "background_position": "50% 50%",
+    "background_repeat": "no-repeat",
+    "background_size": "cover"
+  }
+}

index.html

@@ -10,12 +10,14 @@
   <meta name="author" content="Federico Terzi">
 
   <link rel="stylesheet" href="assets/css/bootstrap.min.css">
-  <link rel="stylesheet" type="text/css" href="assets/css/main.css">
+  <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
 
   <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">
 </head>
 
 <body>
+  <div id="particles-js"></div>
+
   <nav class="navbar navbar-expand-lg navbar-light">
     <a class="navbar-brand" href="#">
       <img src="assets/images/espanso.svg" class="logo-img">
@@ -52,11 +54,6 @@
     <p class="btn-subtitle">Also available for Windows and Linux</p>
   </div>
 
-  <script src="assets/js/jquery.slim.min.js"></script>
-  <script src="assets/js/popper.min.js"></script>
-  <script src="assets/js/bootstrap.min.js"></script>
-  <script src="assets/js/typeit.min.js"></script>
-
   <div class="container-fluid hiw text-center">
     <h2>How it works</h2>
     <h3 class="mt-5 mb-5">espanso detects when you type a <b>keyword</b></h3>
@@ -160,6 +157,12 @@
     <a class="btn btn-lg" href="#" role="button">Visit Documentation</a>
   </div>
 
+  <script src="assets/js/particles.min.js"></script>
+  <script src="assets/js/jquery.slim.min.js"></script>
+  <script src="assets/js/popper.min.js"></script>
+  <script src="assets/js/bootstrap.min.js"></script>
+  <script src="assets/js/typeit.min.js"></script>
+
   <script>
     function jumboText() {
       document.getElementById("jumbo-text").innerText = "";
@@ -295,6 +298,10 @@
     jumboText();
     hiw();
     features();
+
+    particlesJS.load('particles-js', 'assets/particles.json', function() {
+      console.log('callback - particles.js config loaded');
+    });
   </script>
 </body>
 </html>