adding facebook meta tags

_config.dev.yml

@@ -1,4 +1,4 @@
-title: rKovtun Portfolio
+title: Roman Kovtun Portfolio
 logo: rKovtun
 email: [email protected]
 description: >

_includes/__head/facebook.html

@@ -0,0 +1,28 @@
+<!--Facebook Pixel-->
+<meta property="og:url"
+      content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"/>
+<meta property="fb:app_id" content="855777757936979"/>
+<meta property="og:type" content="profile"/>
+<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}"/>
+<meta property="og:description" content="Front-end Web Developer with 4 years of experience in developing, analyzing user interface/experience, testing, debugging, deploying, and training staff within landing pages and eCommerce technologies. "/>
+<meta property="og:image"
+      content="image/roman-kovtun.jpg"/>
+
+<script>
+    window.fbAsyncInit = function() {
+        FB.init({
+            appId      : '855777757936979',
+            cookie     : true,
+            xfbml      : true,
+            version    : 'v2.11'
+        });
+        FB.AppEvents.logPageView();
+    };
+    (function(d, s, id){
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) {return;}
+        js = d.createElement(s); js.id = id;
+        js.src = "https://connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+</script>

_includes/head.html

@@ -5,7 +5,7 @@
 
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-  <meta name="description" content="Front-end Web Developer with 4 years of experience in developing, analyzing user interface/experience, testing, debugging, deploying, and training staff within landing pages and eCommerce technologies. ">
+  <meta name="description" content="Front-end Web Developer with 4 years of experience in developing, analyzing user interface/experience, testing, debugging, deploying, and training staff within landing pages and eCommerce technologies.">
 
   <link rel="stylesheet" href="{{ "/css/styles.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
@@ -20,4 +20,7 @@
 
       gtag('config', 'UA-107302025-1');
   </script>
+
+  {% include __head/facebook.html %}
+
 </head>

_includes/home/portfolio.html

@@ -19,6 +19,7 @@ <h4 class="hero_text"><span>Portfolio</span></h4>
     <div class="portfolio__item">
       <div class="portfolio__card">
         <a target="_blank" href="http://www.ocwatchguy.com"><img src="images/under-repair.jpg" alt="">
+
         <span>OCWatchGuy</span></a>
       </div>
     </div>

_sass/base/_grid.scss

@@ -2,4 +2,9 @@
     width:  1000px;
     margin-left: auto;
     margin-right: auto;
+    @include maxW(1000px) {
+        width: 100%;
+        padding-left: 15px;
+        padding-right: 15px;
+    }
 }

_sass/base/_media.scss

@@ -0,0 +1,26 @@
+@mixin maxW($param) {
+    @media (max-width: $param) {
+        @content;
+    }
+}
+
+@mixin small-phone {
+    @media (max-width: 320px) {
+        @content;
+    }
+}
+@mixin xs {
+    @media (max-width: 767px) {
+        @content;
+    }
+}
+@mixin sm {
+    @media (max-width: 991px) {
+        @content;
+    }
+}
+@mixin md {
+    @media (max-width: 1199px) {
+        @content;
+    }
+}

_sass/main.scss

@@ -1,6 +1,6 @@
 @import "base/reboot";
 @import "base/colors";
-
+@import "base/media";
 
 @import "base/root";
 @import "base/layout_classes";

_sass/site/_portfolio.scss

@@ -1,40 +1,59 @@
 .portfolio {
-    width: 100%;
+    width   : 100%;
     padding : 40px 50px 0;
+    @include sm {
+        padding : 20px 30px 0;
+    }
+    @include small-phone {
+        padding: 20px 15px 0;
+    }
 }
 .portfolio__wrapper {
-    display: flex;
-    justify-content: flex-start;
-    margin-right: -10px;
-    margin-left: -10px;
-    max-width: 100%;
-    flex-wrap: wrap;
+    display         : flex;
+    justify-content : flex-start;
+    margin-right    : -10px;
+    margin-left     : -10px;
+    max-width       : 100%;
+    flex-wrap       : wrap;
+    @include sm {
+        justify-content : center;
+        margin-left     : 0;
+        margin-right    : 0;
+    }
 }
 .portfolio__item {
-    flex : 0 0 (100%/3);
-    max-width: (100%/3);
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-bottom: 15px;
+    flex          : 0 0 (100%/3);
+    max-width     : (100%/3);
+    padding-left  : 10px;
+    padding-right : 10px;
+    margin-bottom : 15px;
+    @include sm {
+        max-width : 50%;
+        flex      : 0 0 50%;
+    }
+    @include maxW(701px) {
+        max-width : 100%;
+        flex      : 0 0 100%;
+    }
 }
 .portfolio__card {
     box-shadow       : 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-    background-color: $white;
-    border-radius: 4px;
-    overflow: hidden;
+    background-color : $white;
+    border-radius    : 4px;
+    overflow         : hidden;
     a:hover {
-        text-decoration: none;
+        text-decoration : none;
     }
     img {
-        width: 100%;
-        height: auto;
+        width      : 100%;
+        height     : auto;
         //TODO: remove later
-        min-height: 185px;
+        min-height : 185px;
     }
     span {
-        font-weight: 300;
-        padding: 10px 14px;
-        text-align: center;
-        display: block;
+        font-weight : 300;
+        padding     : 10px 14px;
+        text-align  : center;
+        display     : block;
     }
 }

_sass/site/_profile.scss

@@ -24,6 +24,14 @@
         top :-15px;
         border: 2px solid $black;
         border-radius: 100%;
+        @include xs {
+            width: 230px;
+            height: 230px;
+        }
+    }
+    @include xs {
+        width: 200px;
+        height: 200px;
     }
 }
 .profile__name {

_sass/site/_wrapper.scss

@@ -7,7 +7,12 @@
     margin-bottom    : 100px;
     box-shadow       : 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
     display          : flex;
-    flex-wrap: wrap;
+    flex-wrap        : wrap;
+    @include sm {
+        margin-top    : 50px;
+        margin-bottom : 50px;
+        padding       : 50px 0;
+    }
 }
 .wrapper__aside {
     width    : 400px;
@@ -23,8 +28,35 @@
         top              : 0;
         background-color : $black;
     }
+    @include maxW(1000px) {
+        max-width : 40%;
+        flex      : 0 0 40%;
+        padding   : 0 30px;
+    }
+    @include maxW(701px) {
+        max-width : 100%;
+        flex      : 0 0 100%;
+        &:after {
+            display: none;
+        }
+    }
+    @include small-phone {
+        padding: 0 15px;
+    }
 }
 .wrapper__content {
     width   : 600px;
     padding : 0 50px;
+    @include maxW(1000px) {
+        max-width : 60%;
+        flex      : 0 0 60%;
+        padding   : 0 30px;
+    }
+    @include maxW(701px) {
+        max-width : 100%;
+        flex      : 0 0 100%;
+    }
+    @include small-phone {
+        padding: 0 15px;
+    }
 }

_sass/site/partial/_hero_title.scss

@@ -15,7 +15,7 @@
 .hero_text {
     text-transform: uppercase;
     font-weight: 600;
-    letter-spacing: 5px;
+    letter-spacing: 3px;
     position: relative;
     &:after {
         content: '';
@@ -36,4 +36,7 @@
         z-index :2;
         position : relative;
     }
+    @include maxW(425px) {
+        font-size: 1rem;
+    }
 }