diff --git a/_config.dev.yml b/_config.dev.yml index ca8bb33..3204b43 100644 --- a/_config.dev.yml +++ b/_config.dev.yml @@ -1,4 +1,4 @@ -title: rKovtun Portfolio +title: Roman Kovtun Portfolio logo: rKovtun email: gyto23@gmail.com description: > diff --git a/_includes/__head/facebook.html b/_includes/__head/facebook.html new file mode 100644 index 0000000..19ed954 --- /dev/null +++ b/_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> \ No newline at end of file diff --git a/_includes/head.html b/_includes/head.html index 3522a27..a049b18 100644 --- a/_includes/head.html +++ b/_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> \ No newline at end of file diff --git a/_includes/home/portfolio.html b/_includes/home/portfolio.html index 78f7b33..04f196e 100644 --- a/_includes/home/portfolio.html +++ b/_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> diff --git a/_sass/base/_grid.scss b/_sass/base/_grid.scss index 25fe0d2..dc1838e 100644 --- a/_sass/base/_grid.scss +++ b/_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; + } } \ No newline at end of file diff --git a/_sass/base/_media.scss b/_sass/base/_media.scss new file mode 100644 index 0000000..5c0b451 --- /dev/null +++ b/_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; + } +} \ No newline at end of file diff --git a/_sass/main.scss b/_sass/main.scss index 5d87a5c..82d6eb0 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -1,6 +1,6 @@ @import "base/reboot"; @import "base/colors"; - +@import "base/media"; @import "base/root"; @import "base/layout_classes"; diff --git a/_sass/site/_portfolio.scss b/_sass/site/_portfolio.scss index ffdb7dd..2be7dc5 100644 --- a/_sass/site/_portfolio.scss +++ b/_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; } } \ No newline at end of file diff --git a/_sass/site/_profile.scss b/_sass/site/_profile.scss index c7c093b..810196d 100644 --- a/_sass/site/_profile.scss +++ b/_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 { diff --git a/_sass/site/_wrapper.scss b/_sass/site/_wrapper.scss index ba4ec7c..f5f5d15 100644 --- a/_sass/site/_wrapper.scss +++ b/_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; + } } \ No newline at end of file diff --git a/_sass/site/partial/_hero_title.scss b/_sass/site/partial/_hero_title.scss index 6c4aa3b..61eb681 100644 --- a/_sass/site/partial/_hero_title.scss +++ b/_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; + } } \ No newline at end of file