Added some styles, particle.js

omkar-79 · Jan 16, 2017 · 35b76dd · 35b76dd
1 parent 98213a1
commit 35b76dd
Show file tree

Hide file tree

Showing 12 changed files with 193 additions and 9 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,3 +1,13 @@
 # Site settings
 title: A blog about lorem ipsum dolor sit amet
 description: A blog about lorem ipsum dolor sit amet
+
+# User settings
+username: Lorem Ipsum
+user_description: Anon Developer at Lorem Ipsum Dolor
+user_title: Anon Developer
+email: anon@anon.com
+twitter_username: lorem_ipsum
+github_username:  lorem_ipsum
+gplus_username:  lorem_ipsum
+disqus_username: lorem_ipsum
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1 +1,2 @@
+<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
 <script src="{{ "/assets/js/main.js" | prepend: site.baseurl }}"></script>
diff --git a/_includes/head.html b/_includes/head.html
@@ -7,5 +7,6 @@
   <meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">
+  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
 </head>
diff --git a/_includes/header.html b/_includes/header.html
@@ -0,0 +1,14 @@
+<div id="particles-js">
+  <div class="content">
+      <h1>
+          <span class="site-title">{{site.username}}</span>
+          <span class="site-description">{{site.user_title}}</span>
+      </h1>
+      <div class="icons">
+          <a aria-label="Send email" href="mailto:{{site.email}}"><i class="icon fa fa-envelope"></i></a>
+          <a aria-label="My Twitter" target="_blank" href="https://twitter.com/{{site.twitter_username}}"><i class="icon fa fa-twitter"></i></a>
+          <a aria-label="My Google Plus" target="_blank" href="https://plus.google.com/{{site.gplus_username}}/posts"><i class="icon fa fa-google-plus"></i></a>
+          <a aria-label="My Github" target="_blank" href="https://github.com/{{site.github_username}}"><i class="icon fa fa-github"></i></a>
+      </div>
+  </div>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,12 +2,9 @@
 <html lang="en">
   {% include head.html %}
   <body>
-    <div class="container">
-      <div class="row">
-        <div class="twelve columns">
-          {{ content }}
-          {% include footer.html %}
-        </div>
-      </div>
+    <div class"container">
+      {% include header.html %}
+      {{ content }}
+      {% include footer.html %}
     </div>
   </body>
diff --git a/assets/css/main.css b/assets/css/main.css
diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/assets/particles.json b/assets/particles.json
@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "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": 10,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 80,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 300,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 2
+    },
+    "move": {
+      "enable": true,
+      "speed": 12,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "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": 800,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 800,
+        "size": 80,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,3 @@
 ---
 layout: default
 ---
-
-<h1>Welcome to particle</h1>
diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,4 @@
+/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+particlesJS.load('particles-js', 'assets/particles.json', function() {
+  console.log('callback - particles-js config loaded');
+});
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -0,0 +1,43 @@
+$main: #1a222c;
+$sec: #FFF;
+$cut: 37.5rem;
+
+body {
+  margin: 0;
+}
+
+#particles-js {
+  background: $main;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.icons {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    padding: 15px;
+    margin: 2px;
+    border-radius: 50px;
+    border: 2px solid $sec;
+    line-height: 0;
+    transition: all .7s;
+    &:hover {
+      background: $sec;
+      .icon {
+        fill: $main;
+      }
+    }
+  }
+
+  @media only screen and (min-width:$cut) {
+    width: 30px;
+    height: 30px
+  }
+
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1471,6 +1471,10 @@ parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
 
+particles.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/particles.js/-/particles.js-2.0.0.tgz#21386c4328d6c7f96780a201e96eedfc09c736f6"
+
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
		<script src="{{ "/assets/js/main.js" \| prepend: site.baseurl }}"></script>