Merge pull request longpdo#4 from longpdo/fix/preloader

Fix/preloader
brycekinsey · May 28, 2020 · cdbc440 · cdbc440
2 parents 73319ff + 63eee95
commit cdbc440
Show file tree

Hide file tree

Showing 24 changed files with 22,651 additions and 188 deletions.
diff --git a/README.md b/README.md
@@ -24,9 +24,9 @@
   * [Installation](#installation)
 * [Usage](#usage)
   * [Personalize and Customize](#personalize-and-customize)
-    * [_config.yml](#configyml)
+    * [_config.yml](#_configyml)
     * [Github Metadata Plugin](#github-metadata-plugin)
-    * [_data/*.yml](#datayml)
+    * [_data/*.yml](#_datayml)
     * [Particles.js](#particlesjs)
 * [Contributing](#contributing)
 * [License](#license)
@@ -110,18 +110,12 @@ yarn
 
 ## Usage
 
-* Run and develop locally with live server at `http://localhost:4000`
+* Run and develop locally with live server at `http://localhost:4000`, this will also build production-ready `JS` and `SCSS` assets with every change
 
 ```sh
 gulp
 ```
 
-* Build production to minify `JS` and `SCSS` assets before pushing to upstream
-
-```sh
-gulp build
-```
-
 * After committing and pushing, see the `Settings` page of your repository to see where your site is published at via `Github Pages`.
 
 ### Personalize and Customize

diff --git a/_config.yml b/_config.yml
@@ -34,7 +34,7 @@ show_aboutme_card: true
 # about_me_title: The will be displayed as the title in the About Me section
 about_me_title: About Me
 # about_me_description: This will be displayed under the title.
-about_me_description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. If you like this theme and want to use it for yourself, checkout the source code and the documentation at <a class="highlight-link" href="https://github.com/longpdo/neumorphism" target="_blank" rel="noreferrer"> Github </a>. You can also find me on <a class="highlight-link" href="https://jamstackthemes.dev/theme/jekyll-neumorphism/" target="_blank" rel="noreferrer"> JAMstack Themes </a>.
+about_me_description: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. If you like this theme and want to use it for yourself, checkout the source code and the documentation at <a class="highlight-link" href="https://github.com/longpdo/neumorphism" target="_blank" rel="noreferrer"> Github </a>. You can also find me on <a class="highlight-link" href="https://jamstackthemes.dev/theme/jekyll-neumorphism/" target="_blank" rel="noreferrer">JAMstack Themes</a> and on <a class="highlight-link" href="https://jekyll-themes.com/neumorphism/" target="_blank" rel="noreferrer">Jekyll Themes</a>.
 
 # SKILLS SECTION
 # show_skills_card:

diff --git a/_includes/landing-page.html b/_includes/landing-page.html
@@ -16,7 +16,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fa fa-envelope"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/solid.svg#envelope"></use>
+            </svg>
           </div>
           <span class="label">E-Mail</span>
         </a>
@@ -30,7 +32,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fab fa-github" aria-hidden="true"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#github"></use>
+            </svg>
           </div>
           <span class="label">GitHub</span>
         </a>
@@ -44,7 +48,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fab fa-codepen" aria-hidden="true"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#codepen"></use>
+            </svg>
           </div>
           <span class="label">CodePen</span>
         </a>
@@ -58,7 +64,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fab fa-dev" aria-hidden="true"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#dev"></use>
+            </svg>
           </div>
           <span class="label">DEV</span>
         </a>
@@ -72,7 +80,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fab fa-linkedin-in" aria-hidden="true"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#linkedin-in"></use>
+            </svg>
           </div>
           <span class="label">LinkedIn</span>
         </a>
@@ -86,7 +96,9 @@ <h1>
             <circle cx="100" cy="100" r="80" />
           </svg>
           <div class="social">
-            <i class="fab fa-twitter" aria-hidden="true"></i>
+            <svg class="social-svg" viewBox="0 0 48 48">
+              <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#twitter"></use>
+            </svg>
           </div>
           <span class="label">Twitter</span>
         </a>

diff --git a/_includes/section-contact.html b/_includes/section-contact.html
@@ -5,7 +5,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   {% if site.email != null %}
   <a class="social-link" aria-label="My E-Mail" href="mailto:{{site.email}}">
     <div class="social">
-      <i class="fa fa-envelope"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/solid.svg#envelope"></use>
+      </svg>
     </div>
   </a>
   {% endif %}
@@ -14,7 +16,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   <a class="social-link" aria-label="My GitHub" target="_blank" rel="noreferrer"
     href="https://github.com/{{site.github_username}}">
     <div class="social">
-      <i class="fab fa-github" aria-hidden="true"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#github"></use>
+      </svg>
     </div>
   </a>
   {% endif %}
@@ -23,7 +27,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   <a class="social-link black" aria-label="My Codepen" target="_blank" rel="noreferrer"
     href="https://codepen.io/{{site.codepen_username}}">
     <div class="social">
-      <i class="fab fa-codepen" aria-hidden="true"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#codepen"></use>
+      </svg>
     </div>
   </a>
   {% endif %}
@@ -32,7 +38,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   <a class="social-link black" aria-label="My DEV" target="_blank" rel="noreferrer"
     href="https://dev.to/{{site.dev_username}}">
     <div class="social">
-      <i class="fab fa-dev" aria-hidden="true"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#dev"></use>
+      </svg>
     </div>
   </a>
   {% endif %}
@@ -41,7 +49,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   <a class="social-link linkedin" aria-label="My LinkedIn" target="_blank" rel="noreferrer"
     href="https://www.linkedin.com/in/{{site.linkedin_username}}">
     <div class="social">
-      <i class="fab fa-linkedin-in" aria-hidden="true"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#linkedin-in"></use>
+      </svg>
     </div>
   </a>
   {% endif %}
@@ -50,7 +60,9 @@ <h1 class="title">{{site.contact_title}}</h1>
   <a class="social-link twitter" aria-label="My Twitter" target="_blank" rel="noreferrer"
     href="https://twitter.com/{{site.twitter_username}}">
     <div class="social">
-      <i class="fab fa-twitter" aria-hidden="true"></i>
+      <svg class="social-svg" viewBox="0 0 48 48">
+        <use x="12" y="12" width="24" height="24" viewBox="0 0 48 48" xlink:href="/assets/img/brands.svg#twitter"></use>
+      </svg>
     </div>
   </a>
   {% endif %}

diff --git a/_includes/section-projects.html b/_includes/section-projects.html
@@ -5,15 +5,13 @@ <h1 class="title"><span>{{site.projects_title}}</span></h1>
       <div class="project neumorphism-card" data-aos="zoom-in-down">
         <div class="name-link-wrapper">
           <h3>{{project.name}}</h3>
-          <div class="links">
-            {% if project.demo %}
-            <a href="{{project.github}}" target="_blank" rel="noreferrer">
-              <i class="fas fa-external-link-alt"></i>
-            </a>
-            {% endif %}
-          </div>
         </div>
         <p>{{project.descr}}</p>
+        {% if project.demo %}
+        <a class="highlight-link" href="{{project.github}}" target="_blank" rel="noreferrer">
+          Demo
+        </a>
+        {% endif %}
         {% if project.tags %}
           <div class="tag-wrapper">
             {% for tag in project.tags %}
@@ -51,34 +49,36 @@ <h1 class="title">{{site.os_projects_title}}</h1>
           <div class="name-link-wrapper">
             <h3>{{ repository.name }}</h3>
             <div class="links">
-              <a href="{{repository.html_url}}" target="_blank" rel="noreferrer">
-                <i class="fab fa-github"></i>
+              {% if repository.stargazers_count != 0 %}
+              <a href="{{ repository.html_url }}/stargazers" class="project-stars-forks">
+                <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z">
+                  </path>
+                </svg>{{ repository.stargazers_count }}
               </a>
-              {% if repository.homepage != "" and repository.homepage != nil %}
-              <a href="{{repository.homepage}}" target="_blank" rel="noreferrer">
-                <i class="fas fa-external-link-alt"></i>
+              {% endif %}
+              {% if repository.forks_count != 0 %}
+              <a href="{{ repository.html_url }}/network/members" class="project-stars-forks">
+                <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+                  <path fill-rule="evenodd"
+                    d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
+                  </path>
+                </svg>{{ repository.forks_count }}
               </a>
               {% endif %}
             </div>
           </div>
           <p>{{repository.description}}</p>
-          {% if repository.stargazers_count != 0 %}
-            <a href="{{ repository.html_url }}/stargazers" class="project-stars-forks">
-              <svg class="svg-wrapper" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
-                <path fill-rule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z">
-                </path>
-              </svg>{{ repository.stargazers_count }}
-            </a>
-          {% endif %}
-          {% if repository.forks_count != 0 %}
-            <a href="{{ repository.html_url }}/network/members" class="project-stars-forks">
-              <svg class="svg-wrapper" viewBox="0 s0 10 16" version="1.1" width="10" height="16" aria-hidden="true">
-                <path fill-rule="evenodd"
-                  d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 0 0-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 0 0-1-3.72C.88 1 0 1.89 0 3a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z">
-                </path>
-              </svg>{{ repository.forks_count }}
-            </a>
+          {% if repository.homepage != "" and repository.homepage != nil %}
+          <a class="highlight-link" href="{{repository.homepage}}" target="_blank" rel="noreferrer">
+            Demo
+          </a>
           {% endif %}
+          <a class="highlight-link" href="{{repository.html_url}}" target="_blank" rel="noreferrer">
+            Github
+          </a>
+
+
           {% if repository.topics %}
             <div class="tag-wrapper">
               {% for topic in repository.topics %}

diff --git a/_js/app.js b/_js/app.js
@@ -1,46 +1,41 @@
-window.onbeforeunload = function() {
-  window.scrollTo(0, 0);
-};
-
-document.addEventListener(
-  'DOMContentLoaded',
-  function() {
-    // Fade out preloader
-    setTimeout(function() {
-      fadeOutPreloader(document.getElementById('preloader'), 69);
-    }, 1500);
-
-    /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
-    particlesJS.load('landing', 'assets/particles.json', function() {});
-
-    // Typing Text
-    var element = document.getElementById('txt-rotate');
-    var toRotate = element.getAttribute('data-rotate');
-    var period = element.getAttribute('data-period');
-    setTimeout(function() {
-      new TxtRotate(element, JSON.parse(toRotate), period);
-    }, 1500);
-
-    // INJECT CSS
-    var css = document.createElement('style');
-    css.type = 'text/css';
-    css.innerHTML = '#txt-rotate > .wrap { border-right: 0.08em solid #666 }';
-    document.body.appendChild(css);
-
-    // Initialize AOS
-    AOS.init({
-      disable: 'mobile',
-      offset: 200,
-      duration: 600,
-      easing: 'ease-in-sine',
-      delay: 100,
-      once: true
-    });
-
-    randomizeOrder();
-  },
-  false
-);
+setTimeout(function() {
+  fadeOutPreloader(document.getElementById('preloader'), 69);
+}, 1500);
+
+$(document).ready(function() {
+  $(window).on('beforeunload', function() {
+    window.scrollTo(0, 0);
+  });
+
+  /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+  particlesJS.load('landing', 'assets/particles.json', function() {});
+
+  // Typing Text
+  var element = document.getElementById('txt-rotate');
+  var toRotate = element.getAttribute('data-rotate');
+  var period = element.getAttribute('data-period');
+  setTimeout(function() {
+    new TxtRotate(element, JSON.parse(toRotate), period);
+  }, 1500);
+
+  // INJECT CSS
+  var css = document.createElement('style');
+  css.type = 'text/css';
+  css.innerHTML = '#txt-rotate > .wrap { border-right: 0.08em solid #666 }';
+  document.body.appendChild(css);
+
+  // Initialize AOS
+  AOS.init({
+    disable: 'mobile',
+    offset: 200,
+    duration: 600,
+    easing: 'ease-in-sine',
+    delay: 100,
+    once: true
+  });
+
+  randomizeOrder();
+});
 
 /* FUNCTIONS */
 /* Preloader */