Merge pull request #80 from sproogen/release/1.8

Release/1.8

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    modern-resume-theme (1.7.1)
+    modern-resume-theme (1.8.0)
       github-pages (~> 198)
       jekyll-seo-tag (~> 2.1)
 
@@ -270,4 +270,4 @@ DEPENDENCIES
   modern-resume-theme!
 
 BUNDLED WITH
-   1.15.2
+   2.1.0

Procfile

@@ -1 +1 @@
-web: bundle exec jekyll serve --no-watch --port $PORT --host 0.0.0.0
+web: bundle exec jekyll serve --config _test/_config.yml --no-watch --port $PORT --host 0.0.0.0

_config.yml

@@ -9,9 +9,12 @@ email: Your email (optional)
 phone: Your phone number (optional)
 website: Your website (eg. https://google.com)(optional)
 
+darkmode: false
+
 # Social links
 twitter_username: jekyllrb
 github_username:  jekyll
+stackoverflow_username: "00000001"
 dribbble_username: jekyll
 facebook_username: jekyll
 flickr_username: jekyll
@@ -21,6 +24,22 @@ xing_username: jekyll
 pinterest_username: jekyll
 youtube_username: jekyll
 googleplus_username: +jekyll
+orcid_username: 0000-0000-0000-0000
+
+# Additional icon links
+additional_links:
+- title: Link name
+  icon: Font Awesome brand icon name (eg. fa-twitter) (https://fontawesome.com/icons?d=gallery&s=brands&m=free)
+  url: Link url (eg. https://google.com)
+# - title: another link
+#   icon: font awesome brand icon name (eg. fa-twitter) (https://fontawesome.com/icons?d=gallery&s=brands&m=free)
+#   url: Link url (eg. https://google.com)
+
+# Google Analytics and Tag Manager
+# Using more than one of these may cause issues with reporting
+# gtm: "GTM-0000000"
+# gtag: "UA-00000000-0"
+# google_analytics: "UA-00000000-0"
 
 # About Section
 # about_title: About Me (Use this to override about section title)
@@ -31,7 +50,7 @@ about_content: | # this will include new lines to allow paragraphs
   You can even add paragraphs by using empty lines like this and add anything else markdown supports such as
     - Lists
     - Tables
-    - Links
+    - <a href="google.com">Links</a>
     - Images
 
 # Projects Section

_includes/about.html

@@ -3,7 +3,7 @@ <h3>{{ site.about_title | default: "About Me" }}</h3>
   <div class="row clearfix">
     {%- if site.about_profile_image -%}
       <div class="col-xs-12 col-sm-4 col-md-3 no-print">
-        <span class="profile-img" style="background-image: url({{ site.about_profile_image | relative_url }})" />
+        <span class="profile-img" style="background-image: url({{ site.about_profile_image | relative_url }})"></span>
       </div>
     {%- endif -%}
     <div class="{{ 'col-xs-12 ' }}{%- if site.about_profile_image -%}col-sm-8 col-md-9 col-print-12{%- endif -%}">

_includes/google-analytics.html

@@ -1,3 +1,5 @@
+
+<!-- Google Analytics -->
 <script>
 if(!(window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1")) {
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -8,3 +10,4 @@
   ga('send', 'pageview');
 }
 </script>
+<!-- End Google Analytics -->

_includes/gtag.html

@@ -0,0 +1,10 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.gtag }}"></script>
+    <script>
+          window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', '{{ site.gtag }}');
+</script>
+<!-- End global site tag (gtag.js) - Google Analytics -->

_includes/gtm_body.html

@@ -0,0 +1,4 @@
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ site.gtm }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->

_includes/gtm_head.html

@@ -0,0 +1,7 @@
+<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','{{ site.gtm }}');</script>
+<!-- End Google Tag Manager -->

_includes/head.html

@@ -7,9 +7,15 @@
   {%- seo title=false -%}
 
   <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
-  <link rel="shortcut icon" type="image/x-icon" href="{{ site.favicon | relative_url }}">
+  <link rel="shortcut icon" type="image/x-icon" href="{{ site.favicon | default: '/assets/favicon.ico' | relative_url }}">
 
   {%- if jekyll.environment == 'production' and site.google_analytics -%}
     {%- include google-analytics.html -%}
   {%- endif -%}
+  {%- if jekyll.environment == 'production' and site.gtm -%}
+    {%- include gtm_head.html -%}
+  {%- endif -%}
+  {%- if jekyll.environment == 'production' and site.gtag -%}
+    {%- include gtag.html -%}
+  {%- endif -%}
 </head>

_includes/header.html

@@ -34,6 +34,13 @@ <h2>{{ site.title | escape }}</h2>
             </a>
           </li>
         {%- endif -%}
+        {%- if site.stackoverflow_username -%}
+          <li>
+            <a target="_blank" href="https://stackoverflow.com/users/{{ site.stackoverflow_username| cgi_escape | escape }}" class="button button--sacnite button--round-l">
+              <i class="fab fa-stack-overflow" title="Stackoverflow link"></i>
+            </a>
+          </li>
+        {%- endif -%}
         {%- if site.instagram_username -%}
           <li>
             <a target="_blank" href="https://www.instagram.com/{{ site.instagram_username| cgi_escape | escape }}" class="button button--sacnite button--round-l">
@@ -83,6 +90,20 @@ <h2>{{ site.title | escape }}</h2>
             </a>
           </li>
         {%- endif -%}
+        {%- if site.orcid_username -%}
+          <li>
+            <a target="_blank" href="https://orcid.org/{{ site.orcid_username | escape }}" class="button button--sacnite button--round-l">
+              <i class="fab fa-orcid" title="ORCiD link"></i>
+            </a>
+          </li>
+        {%- endif -%}
+        {% for link in site.additional_links %}
+          <li>
+            {% include a.html href=link.url class="button button--sacnite button--round-l" %}
+              <i class="fab {{ link.icon }}" title="{{ link.title | escape }}"></i>
+            </a>
+          </li>
+        {% endfor %}
       </ul>
 
       {%- if site.email -%}

_layouts/default.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: " en " }}">
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
 
 {%- include head.html -%}
 
-<body>
+<body class="{% if site.darkmode %}dark{% endif %}">
 
   {%- include header.html -%}
 
   <main class="page-content" aria-label="Content">
     <div class="wrapper">
 
+      {%- if jekyll.environment == 'production' and site.gtm -%}
+        {%- include gtm_body.html -%}
+      {%- endif -%}
+
       {%- include about.html -%}
 
       {%- if site.data.projects.size > 0 -%}
@@ -32,7 +36,7 @@
   </main>
 
   {%- include footer.html -%}
-
+  <script src="{{ '/assets/js/index.js' | relative_url }}"></script>
 </body>
 
-</html>
+</html>

_sass/button.scss

@@ -15,12 +15,7 @@
 }
 
 .button {
-  float: left;
   min-width: 150px;
-  max-width: 250px;
-  display: block;
-  margin: 1em;
-  padding: 1em 2em;
   border: none;
   background: none;
   color: inherit;
@@ -29,13 +24,6 @@
   z-index: 1;
   -webkit-backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
-}
-
-.button--round-l {
-  border-radius: 40px;
-}
-
-.button {
   border-radius: 0;
   float: none;
   margin: 0 auto;
@@ -46,6 +34,10 @@
   max-width: 400px;
 }
 
+.button--round-l {
+  border-radius: 40px;
+}
+
 .button.button--sacnite {
   width: 60px;
   height: 60px;
@@ -64,4 +56,22 @@
   box-shadow: inset 0 0 0 2px #333;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
-}
+}
+
+.dark {
+  .button--sacnite::before {
+    box-shadow: inset 0 0 0 35px #e6e6e6;
+  }
+
+  .button.button--sacnite {
+    color: #222;
+  }
+
+  .button--sacnite:hover {
+    color: #e6e6e6;
+  }
+
+  .button--sacnite:hover::before {
+    box-shadow: inset 0 0 0 2px #e6e6e6;
+  }
+}

_sass/dark.scss

@@ -0,0 +1,16 @@
+.dark,
+.dark * {
+  background-color: #222;
+  color: #e6e6e6;
+}
+
+.dark {
+  mark {
+    color: #222;
+    background-color: #e6e6e6;
+  }
+
+  a {
+    color: #477dca;
+  }
+}

_sass/icons.scss

@@ -0,0 +1,54 @@
+ul.icons a:hover {
+  background: rgba(0, 0, 0, 0.025);
+}
+
+ul.icons li {
+  display: inline-block;
+  padding-left: 0.75em;
+}
+
+ul.icons a {
+  -moz-transition: background-color 0.25s ease-in-out;
+  -webkit-transition: background-color 0.25s ease-in-out;
+  -ms-transition: background-color 0.25s ease-in-out;
+  transition: background-color 0.25s ease-in-out;
+  display: inline-block;
+  width: 2.75em;
+  height: 2.75em;
+  line-height: 2.8em;
+  text-align: center;
+  border: 0;
+  box-shadow: none;
+  padding:0;
+  border-radius: 100%;
+  color: #aaa;
+}
+
+.icons i {
+  font-size: 30px;
+  line-height:60px;
+}
+
+.icons {
+  padding: 0;
+  font-size: 1em;
+  margin-bottom:20px;
+  text-align: right;
+}
+
+@media screen and (max-width: 768px) {
+  .icons {
+    text-align: center;
+  }
+}
+
+.dark {
+  .icons i {
+    background: none;
+    color: #222;
+  }
+
+  .icons a:hover i {
+    color: #e6e6e6;
+  }
+}