├── README.md ├── src ├── sass │ ├── base │ │ ├── _variables.scss │ │ └── _mixins.scss │ ├── blocks │ │ ├── _button.scss │ │ ├── _portfolio.scss │ │ ├── _promo.scss │ │ ├── _sidepanel.scss │ │ ├── _title.scss │ │ ├── _price.scss │ │ ├── _about.scss │ │ ├── _skills.scss │ │ ├── _contacts.scss │ │ ├── _resume.scss │ │ ├── _menu.scss │ │ └── _media.scss │ ├── style.scss │ └── libs │ │ └── _bootstrap-reboot.min.scss ├── img │ ├── bg.png │ ├── main_bg.jpg │ ├── main_bg.png │ ├── main_photo.jpg │ ├── main_photo1.png │ ├── main_photo2.png │ └── works │ │ ├── bread.jpg │ │ ├── ipad.jpg │ │ ├── plans.jpg │ │ ├── pulse.jpg │ │ ├── uber.jpg │ │ └── minimalizm.jpg ├── icons │ ├── favicon │ │ ├── favicon.ico │ │ ├── apple-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-96x96.png │ │ ├── ms-icon-70x70.png │ │ ├── apple-icon-57x57.png │ │ ├── apple-icon-60x60.png │ │ ├── apple-icon-72x72.png │ │ ├── apple-icon-76x76.png │ │ ├── ms-icon-144x144.png │ │ ├── ms-icon-150x150.png │ │ ├── ms-icon-310x310.png │ │ ├── android-icon-36x36.png │ │ ├── android-icon-48x48.png │ │ ├── android-icon-72x72.png │ │ ├── android-icon-96x96.png │ │ ├── apple-icon-114x114.png │ │ ├── apple-icon-120x120.png │ │ ├── apple-icon-144x144.png │ │ ├── apple-icon-152x152.png │ │ ├── apple-icon-180x180.png │ │ ├── android-icon-144x144.png │ │ ├── android-icon-192x192.png │ │ ├── apple-icon-precomposed.png │ │ ├── browserconfig.xml │ │ └── manifest.json │ ├── social │ │ ├── facebook_straight.png │ │ ├── instagram_straight.png │ │ ├── telegram.svg │ │ ├── facebook.svg │ │ ├── instagram.svg │ │ └── github.svg │ ├── about_me │ │ ├── web_development.svg │ │ ├── mobile_dev.svg │ │ └── design.svg │ ├── skills │ │ ├── js.svg │ │ ├── css3.svg │ │ ├── html5.svg │ │ ├── jquery.svg │ │ ├── react.svg │ │ ├── node.js.svg │ │ └── mongo.db.svg │ └── experience │ │ ├── courses.svg │ │ ├── developer.svg │ │ ├── university.svg │ │ └── designer.svg ├── js │ └── script.js └── index.html ├── .gitignore ├── package.json └── gulpfile.js /README.md: -------------------------------------------------------------------------------- 1 | # portfolio 2 | -------------------------------------------------------------------------------- /src/sass/base/_variables.scss: -------------------------------------------------------------------------------- 1 | $main-color: #FFA501; 2 | 3 | -------------------------------------------------------------------------------- /src/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/bg.png -------------------------------------------------------------------------------- /src/img/main_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/main_bg.jpg -------------------------------------------------------------------------------- /src/img/main_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/main_bg.png -------------------------------------------------------------------------------- /src/img/main_photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/main_photo.jpg -------------------------------------------------------------------------------- /src/img/main_photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/main_photo1.png -------------------------------------------------------------------------------- /src/img/main_photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/main_photo2.png -------------------------------------------------------------------------------- /src/img/works/bread.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/bread.jpg -------------------------------------------------------------------------------- /src/img/works/ipad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/ipad.jpg -------------------------------------------------------------------------------- /src/img/works/plans.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/plans.jpg -------------------------------------------------------------------------------- /src/img/works/pulse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/pulse.jpg -------------------------------------------------------------------------------- /src/img/works/uber.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/uber.jpg -------------------------------------------------------------------------------- /src/img/works/minimalizm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/img/works/minimalizm.jpg -------------------------------------------------------------------------------- /src/icons/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/favicon.ico -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon.png -------------------------------------------------------------------------------- /src/icons/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /src/icons/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /src/icons/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /src/icons/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /src/icons/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/icons/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /src/icons/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /src/icons/social/facebook_straight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/social/facebook_straight.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /src/icons/social/instagram_straight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/social/instagram_straight.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /src/icons/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /src/icons/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-kudinov/portfolio-maxim/HEAD/src/icons/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /src/sass/blocks/_button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | height: 45px; 3 | background: $main-color; 4 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15); 5 | padding: 12px 25px; 6 | } -------------------------------------------------------------------------------- /src/icons/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /src/sass/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin before-circle { 2 | &:before { 3 | content: ''; 4 | position: absolute; 5 | z-index: -1; 6 | top: -25%; 7 | left: 0; 8 | width: 36px; 9 | height: 36px; 10 | border-radius: 100%; 11 | background-color: $main-color; 12 | 13 | } 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | /dist 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /src/js/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector('.hamburger'), 2 | menu = document.querySelector('.menu'), 3 | closeElem = document.querySelector('.menu__close'); 4 | 5 | hamburger.addEventListener('click', () => { 6 | menu.classList.add('active'); 7 | }); 8 | 9 | closeElem.addEventListener('click', () => { 10 | menu.classList.remove('active'); 11 | }); 12 | 13 | const counters = document.querySelectorAll('.skills__ratings-counter'), 14 | lines = document.querySelectorAll('.skills__ratings-line span'); 15 | 16 | counters.forEach((item, i) => { 17 | lines[i].style.width = item.innerHTML; 18 | }) -------------------------------------------------------------------------------- /src/icons/social/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/social/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "project_uber", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "browser-sync": "^2.27.10", 13 | "gulp": "^4.0.2", 14 | "gulp-autoprefixer": "^8.0.0", 15 | "gulp-clean-css": "^4.3.0", 16 | "gulp-cli": "^2.3.0", 17 | "gulp-imagemin": "^7.1.0", 18 | "gulp-install": "^1.1.0", 19 | "gulp-rename": "^2.0.0", 20 | "gulp-sass": "^5.1.0", 21 | "sass": "^1.52.1" 22 | }, 23 | "dependencies": { 24 | "gulp-htmlmin": "^5.0.1" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/sass/blocks/_portfolio.scss: -------------------------------------------------------------------------------- 1 | .portfolio { 2 | padding-top: 120px; 3 | &__wrapper { 4 | margin-top: 60px; 5 | display: grid; 6 | grid-template: repeat(2, 280px) / repeat(4, 280px); 7 | grid-auto-rows: 280px; 8 | gap: 5px; 9 | .vertical { 10 | grid-row: 1 / 3; 11 | grid-column: 4 / 5; 12 | } 13 | .horizontal { 14 | grid-column: 2 / 4; 15 | grid-row: 2 / 3; 16 | } 17 | } 18 | &__item { 19 | transition: all 0.4s; 20 | img { 21 | width: 100%; 22 | } 23 | &:hover { 24 | transform: scale(1.02); 25 | filter: grayscale(60%); 26 | } 27 | } 28 | 29 | } -------------------------------------------------------------------------------- /src/icons/about_me/web_development.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sass/blocks/_promo.scss: -------------------------------------------------------------------------------- 1 | .promo { 2 | min-height: 100vh; 3 | position: relative; 4 | background: url('../img/bg.png') no-repeat 50%/cover; 5 | padding-top: 205px; 6 | &__title { 7 | width: 535px; 8 | margin-top: 10px; 9 | } 10 | &__subtitle { 11 | @include before-circle; 12 | position: relative; 13 | padding-left: 10px; 14 | z-index: 2; 15 | } 16 | &__btns { 17 | margin-top: 25px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-between; 21 | width: 250px; 22 | } 23 | &__link { 24 | color: #000; 25 | font-weight: bold; 26 | &:hover { 27 | color: #000; 28 | text-decoration: none; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /src/sass/blocks/_sidepanel.scss: -------------------------------------------------------------------------------- 1 | .sidepanel { 2 | position: fixed; 3 | top: 225px; 4 | left: 50px; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: space-between; 8 | align-items: center; 9 | height: 340px; 10 | z-index: 3; 11 | &__link { 12 | &:hover { 13 | svg path { 14 | fill: $main-color; 15 | } 16 | } 17 | } 18 | &__divider { 19 | width: 1.1px; 20 | height: 70px; 21 | background-color: #000; 22 | } 23 | &__text { 24 | height: 150px; 25 | width: 25px; 26 | span { 27 | transform: rotate(-90deg) translate(-15%,-260%); 28 | display: block; 29 | width: 150px; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /src/sass/blocks/_title.scss: -------------------------------------------------------------------------------- 1 | .title { 2 | font-weight: bold; 3 | font-size: 36px; 4 | line-height: 60px; 5 | &_fz14 { 6 | font-size: 14px; 7 | line-height: 21px; 8 | } 9 | &_fz16 { 10 | font-size: 16px; 11 | line-height: 24px; 12 | 13 | } 14 | &_fz36 { 15 | font-size: 36px; 16 | } 17 | &_fz20 { 18 | font-size: 20px; 19 | line-height: 30px; 20 | } 21 | &_fz48 { 22 | font-size: 48px; 23 | color: #fff; 24 | } 25 | &__section-title { 26 | position: relative; 27 | text-align: center; 28 | @include before-circle; 29 | &:before { 30 | top: -5px; 31 | left: 50%; 32 | transform: translateX(-50%); 33 | } 34 | } 35 | &__section-subtitle { 36 | text-align: center; 37 | } 38 | } -------------------------------------------------------------------------------- /src/sass/style.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/bootstrap-reboot.min'; 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap'); 3 | 4 | @import 'base/variables'; 5 | @import 'base/mixins'; 6 | 7 | 8 | 9 | * { 10 | font-family: 'Poppins', sans-serif; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | .container { 16 | width: 1140px; 17 | margin: 0 auto; 18 | } 19 | .divider { 20 | width: 60px; 21 | height: 3px; 22 | background-color: $main-color; 23 | margin: 25px auto 0 auto; 24 | } 25 | 26 | @import 'blocks/promo'; 27 | @import 'blocks/title'; 28 | @import 'blocks/button'; 29 | @import 'blocks/sidepanel'; 30 | @import 'blocks/menu'; 31 | @import 'blocks/about'; 32 | @import 'blocks/resume'; 33 | @import 'blocks/skills'; 34 | @import 'blocks/portfolio'; 35 | @import 'blocks/price'; 36 | @import 'blocks/contacts'; 37 | @import 'blocks/media'; 38 | 39 | -------------------------------------------------------------------------------- /src/icons/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /src/icons/skills/js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/icons/social/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/icons/skills/css3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/sass/blocks/_price.scss: -------------------------------------------------------------------------------- 1 | .price { 2 | padding-top: 60px; 3 | &__wrapper { 4 | margin-top: 60px; 5 | padding: 0 60px; 6 | display: grid; 7 | grid-template: repeat(3, minmax(45px, auto)) / repeat(2, 365px); 8 | grid-auto-rows: minmax(45px, auto); 9 | row-gap: 15px; 10 | justify-content: space-between; 11 | } 12 | &__item { 13 | position: relative; 14 | display: grid; 15 | grid-template: repeat(2, minmax(21px, auto)) / repeat(2, auto); 16 | row-gap: 5px; 17 | padding-left: 25px; 18 | &:before { 19 | content: ''; 20 | width: 15px; 21 | height: 15px; 22 | background-color: $main-color; 23 | border-radius: 100%; 24 | position: absolute; 25 | top: 5px; 26 | } 27 | } 28 | &__type, &__count { 29 | font-weight: bold; 30 | font-size: 14px; 31 | line-height: 21px; 32 | } 33 | &__count { 34 | justify-self: end; 35 | } 36 | &__descr { 37 | grid-column: 1 / 3; 38 | font-size: 12px; 39 | line-height: 18px; 40 | } 41 | } -------------------------------------------------------------------------------- /src/icons/social/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/experience/courses.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/icons/skills/html5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/sass/blocks/_about.scss: -------------------------------------------------------------------------------- 1 | .about { 2 | padding-top: 120px; 3 | &__wrapper { 4 | display: grid; 5 | grid-template-columns: 400px 670px; 6 | grid-template-rows: minmax(245px, auto) minmax(255px, auto); 7 | grid-auto-rows: minmax(245px, auto); 8 | column-gap: 70px; 9 | row-gap: 40px; 10 | } 11 | &__photo { 12 | grid-row: 1/3; 13 | img { 14 | width: 100%; 15 | } 16 | } 17 | &__descr { 18 | padding-top: 6px; 19 | .divider { 20 | margin: 0; 21 | } 22 | } 23 | &__title { 24 | position: relative; 25 | padding-left: 12px; 26 | padding-top: 1px; 27 | @include before-circle; 28 | } 29 | &__text { 30 | font-size: 14px; 31 | line-height: 21px; 32 | margin-top: 20px; 33 | } 34 | &__skills { 35 | display: grid; 36 | grid-template: repeat(2, minmax(115px, auto)) / repeat(2, 260px); 37 | grid-auto-rows: 1fr; 38 | column-gap: 50px; 39 | row-gap: 20px; 40 | &-item { 41 | display: grid; 42 | grid-template-columns: 40px 200px; 43 | column-gap: 20px; 44 | } 45 | 46 | &-circle { 47 | position: relative; 48 | padding: 15px 0 0 15px; 49 | @include before-circle; 50 | &:before { 51 | top: 0; 52 | } 53 | } 54 | &-text { 55 | font-size: 12px; 56 | line-height: 18px; 57 | margin-top: 6px; 58 | } 59 | } 60 | } -------------------------------------------------------------------------------- /src/sass/blocks/_skills.scss: -------------------------------------------------------------------------------- 1 | .skills { 2 | padding-top: 120px; 3 | &__items { 4 | margin-top: 60px; 5 | padding: 0 10px; 6 | display: grid; 7 | grid-template-columns: repeat(4, 270px); 8 | grid-auto-columns: 270px; 9 | column-gap: 13px; 10 | grid-template-rows: repeat(2, minmax(270px, auto)); 11 | grid-auto-rows: minmax(270px, auto); 12 | row-gap: 13px; 13 | } 14 | &__item { 15 | border: 1px solid black; 16 | padding: 30px 30px 25px 30px; 17 | &-img { 18 | display: flex; 19 | align-items: center; 20 | min-height: 65px; 21 | } 22 | h3 { 23 | margin-top: 20px; 24 | margin-bottom: 0; 25 | } 26 | p { 27 | margin-top: 15px; 28 | font-size: 12px; 29 | line-height: 18px; 30 | margin-bottom: 0; 31 | } 32 | } 33 | &__ratings { 34 | margin-top: 120px; 35 | display: grid; 36 | grid-template: repeat(2, minmax(70px, auto)) / repeat(3, 350px); 37 | column-gap: 45px; 38 | row-gap: 35px; 39 | &-item { 40 | display: grid; 41 | grid-template: minmax(21px, auto) 14px / 200px 35px; 42 | justify-content: space-between; 43 | align-content: space-between; 44 | } 45 | &-title { 46 | position: relative; 47 | padding: 2px 0 0 13px; 48 | 49 | @include before_circle; 50 | } 51 | &-counter { 52 | font-size: 14px; 53 | line-height: 21px; 54 | } 55 | &-line { 56 | width: 350px; 57 | height: 14px; 58 | background-color: #E8E4DE; 59 | border-radius: 4px; 60 | grid-column: 1 / 3; 61 | span { 62 | display: block; 63 | height: 100%; 64 | background-color: $main-color; 65 | border-radius: 4px; 66 | } 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /src/sass/blocks/_contacts.scss: -------------------------------------------------------------------------------- 1 | .contacts { 2 | padding: 120px 0 90px 0; 3 | &__wrapper { 4 | padding: 0px 32px 0 52px; 5 | display: grid; 6 | grid-template-columns: 400px 585px; 7 | justify-content: space-between; 8 | } 9 | &__photo { 10 | img { 11 | width: 100%; 12 | } 13 | } 14 | &__descr { 15 | padding-top: 6px; 16 | .divider { 17 | margin: 0; 18 | } 19 | } 20 | &__title { 21 | position: relative; 22 | padding-left: 12px; 23 | padding-top: 1px; 24 | @include before-circle; 25 | } 26 | &__text { 27 | margin-top: 20px; 28 | } 29 | &__social { 30 | margin-top: 20px; 31 | 32 | } 33 | &__link { 34 | margin-right: 25px; 35 | img { 36 | max-width: 30px; 37 | max-height: 30px; 38 | 39 | } 40 | } 41 | &__form { 42 | margin-top: 30px; 43 | display: grid; 44 | grid-template: 45px 190px 45px / repeat(2, 280px); 45 | justify-content: space-between; 46 | row-gap: 28px; 47 | label { 48 | display: block; 49 | position: absolute; 50 | height: 18px; 51 | padding: 0 8px 0 8px; 52 | background-color: #fff; 53 | font-size: 12px; 54 | margin-bottom: 0; 55 | top: -9px; 56 | left: 12px; 57 | } 58 | } 59 | &__input { 60 | position: relative; 61 | input { 62 | width: 100%; 63 | height: 100%; 64 | padding-left: 20px; 65 | font-size: 14px; 66 | font-weight: 500; 67 | } 68 | } 69 | &__textarea { 70 | position: relative; 71 | grid-column: 1 / 3; 72 | textarea { 73 | width: 100%; 74 | height: 100%; 75 | padding: 20px; 76 | font-size: 13px; 77 | font-weight: 500; 78 | resize: none; 79 | } 80 | } 81 | &__btn { 82 | border: none; 83 | font-weight: bold; 84 | font-size: 14px; 85 | line-height: 21px; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /src/sass/blocks/_resume.scss: -------------------------------------------------------------------------------- 1 | .resume { 2 | padding-top: 120px; 3 | &__wrapper { 4 | padding: 60px 65px 0 65px; 5 | display: grid; 6 | grid-template-columns: repeat(2, 425px); 7 | column-gap: 135px; 8 | } 9 | &__column { 10 | &-title { 11 | position: relative; 12 | padding-left: 35px; 13 | &:before { 14 | content: ''; 15 | position: absolute; 16 | width: 15px; 17 | height: 15px; 18 | background-color: $main-color; 19 | border-radius: 100%; 20 | left: -7px; 21 | top: 50%; 22 | transform: translateY(-50%); 23 | 24 | } 25 | } 26 | } 27 | ul { 28 | list-style-type: none; 29 | li { 30 | position: relative; 31 | &:after { 32 | content: ''; 33 | width: 1px; 34 | height: calc(100% + 16px); 35 | position: absolute; 36 | top: -16px; 37 | left: 0; 38 | background-color: black; 39 | } 40 | } 41 | } 42 | &__item { 43 | position: relative; 44 | &:before { 45 | content: ''; 46 | height: 1px; 47 | width: 45px; 48 | position: absolute; 49 | top: 67px; 50 | background-color: black; 51 | } 52 | &-head { 53 | position: relative; 54 | padding: 45px 0 0 100px; 55 | h4 { 56 | margin-bottom: 0; 57 | } 58 | } 59 | &-body { 60 | padding-left: 43px; 61 | margin-top: 12px; 62 | } 63 | &-icon { 64 | position: absolute; 65 | top: 50px; 66 | left: 45px; 67 | @include before-circle; 68 | img { 69 | position: absolute; 70 | left: 17px; 71 | top: 14px; 72 | } 73 | } 74 | &-location { 75 | font-size: 12px; 76 | line-height: 18px; 77 | margin-top: 5px; 78 | } 79 | &-body { 80 | font-size: 12px; 81 | line-height: 18px 82 | } 83 | } 84 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const browserSync = require('browser-sync'); 3 | const sass = require('gulp-sass')(require('sass')); 4 | const cleanCSS = require('gulp-clean-css'); 5 | const autoprefixer = require('gulp-autoprefixer'); 6 | const rename = require("gulp-rename"); 7 | const imagemin = require('gulp-imagemin'); 8 | const htmlmin = require('gulp-htmlmin'); 9 | 10 | gulp.task('server', function() { 11 | 12 | browserSync({ 13 | server: { 14 | baseDir: "dist" 15 | } 16 | }); 17 | 18 | gulp.watch("src/*.html").on('change', browserSync.reload); 19 | }); 20 | 21 | gulp.task('styles', function() { 22 | return gulp.src("src/sass/**/*.+(scss|sass)") 23 | .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 24 | .pipe(rename({suffix: '.min', prefix: ''})) 25 | .pipe(autoprefixer()) 26 | .pipe(cleanCSS({compatibility: 'ie8'})) 27 | .pipe(gulp.dest("dist/css")) 28 | .pipe(browserSync.stream()); 29 | }); 30 | 31 | gulp.task('watch', function() { 32 | gulp.watch("src/sass/**/*.+(scss|sass|css)", gulp.parallel('styles')); 33 | gulp.watch("src/*.html").on('change', gulp.parallel('html')); 34 | gulp.watch("src/js/**/*.js").on('change', gulp.parallel('scripts')); 35 | gulp.watch("src/fonts/**/*").on('all', gulp.parallel('fonts')); 36 | gulp.watch("src/icons/**/*").on('all', gulp.parallel('icons')); 37 | gulp.watch("src/img/**/*").on('all', gulp.parallel('images')); 38 | }); 39 | 40 | gulp.task('html', function () { 41 | return gulp.src("src/*.html") 42 | .pipe(htmlmin({ collapseWhitespace: true })) 43 | .pipe(gulp.dest("dist/")); 44 | }); 45 | 46 | gulp.task('scripts', function () { 47 | return gulp.src("src/js/**/*.js") 48 | .pipe(gulp.dest("dist/js")) 49 | .pipe(browserSync.stream()); 50 | }); 51 | 52 | gulp.task('fonts', function () { 53 | return gulp.src("src/fonts/**/*") 54 | .pipe(gulp.dest("dist/fonts")) 55 | .pipe(browserSync.stream()); 56 | }); 57 | 58 | gulp.task('icons', function () { 59 | return gulp.src("src/icons/**/*") 60 | .pipe(gulp.dest("dist/icons")) 61 | .pipe(browserSync.stream()); 62 | }); 63 | 64 | gulp.task('images', function () { 65 | return gulp.src("src/img/**/*") 66 | .pipe(imagemin()) 67 | .pipe(gulp.dest("dist/img")) 68 | .pipe(browserSync.stream()); 69 | }); 70 | 71 | gulp.task('default', gulp.parallel('watch', 'server', 'styles', 'scripts', 'fonts', 'icons', 'html', 'images')); 72 | 73 | gulp.task('build', gulp.parallel('styles', 'scripts', 'fonts', 'icons', 'html', 'images')); 74 | -------------------------------------------------------------------------------- /src/sass/blocks/_menu.scss: -------------------------------------------------------------------------------- 1 | .hamburger { 2 | position: absolute; 3 | top: 20px; 4 | right: 30px; 5 | height: 21px; 6 | display: flex; 7 | flex-direction: column; 8 | justify-content: space-between; 9 | align-items: flex-end; 10 | cursor: pointer; 11 | span { 12 | display: block; 13 | width: 30px; 14 | height: 3px; 15 | background: #151812; 16 | } 17 | span.long { 18 | width: 36px; 19 | } 20 | } 21 | 22 | .menu { 23 | position: fixed; 24 | top: 0; 25 | left: -100%; 26 | width: 100%; 27 | height: 100vh; 28 | z-index: 10; 29 | visibility: hidden; 30 | opacity: 0; 31 | transition: all 0.6s; 32 | &.active { 33 | left: 0; 34 | visibility: visible; 35 | opacity: 1; 36 | } 37 | &__block { 38 | position: relative; 39 | width: 345px; 40 | background-color: $main-color; 41 | height: 100%; 42 | padding-top: 140px; 43 | padding-left: 40px; 44 | transition: all 0.6s; 45 | z-index: 10; 46 | } 47 | &__close { 48 | position: absolute; 49 | top: 25px; 50 | right: 25px; 51 | cursor: pointer; 52 | } 53 | &__list { 54 | list-style-type: none; 55 | padding-left: 35px; 56 | } 57 | &__link { 58 | position: relative; 59 | font-weight: 700; 60 | font-size: 24px; 61 | line-height: 36px; 62 | margin-bottom: 15px; 63 | &:before { 64 | content: ''; 65 | position: absolute; 66 | left: -35px; 67 | top: 10px; 68 | width: 15px; 69 | height: 15px; 70 | border-radius: 100%; 71 | border: 1px solid #000000; 72 | transition: all 0.6s; 73 | } 74 | &:hover { 75 | &:before { 76 | background-color: #000000 ; 77 | } 78 | } 79 | a { 80 | color: #FFFFFF; 81 | } 82 | } 83 | &__social { 84 | position: absolute; 85 | bottom: 50px; 86 | left: 50%; 87 | transform: translateX(-50%); 88 | width: 90px; 89 | display: flex; 90 | justify-content: space-between; 91 | align-items: center; 92 | } 93 | &__overlay { 94 | position: fixed; 95 | left: 0; 96 | top: 0; 97 | width: 100%; 98 | height: 100%; 99 | background-color: #FFFFFF; 100 | opacity: 0.75; 101 | } 102 | } -------------------------------------------------------------------------------- /src/icons/experience/developer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/sass/libs/_bootstrap-reboot.min.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) 3 | * Copyright 2011-2019 The Bootstrap Authors 4 | * Copyright 2011-2019 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important} 8 | -------------------------------------------------------------------------------- /src/icons/about_me/mobile_dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/experience/university.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/icons/experience/designer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/skills/jquery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/icons/skills/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/sass/blocks/_media.scss: -------------------------------------------------------------------------------- 1 | @media (max-width: 1439px) { 2 | .sidepanel { 3 | display: none; 4 | } 5 | } 6 | @media (max-width: 1200px) { 7 | .container { 8 | max-width: 960px; 9 | } 10 | .about { 11 | &__wrapper { 12 | grid-template-columns: 400px 520px; 13 | column-gap: 40px; 14 | } 15 | &__skills { 16 | column-gap: 20px; 17 | grid-template: repeat(2,minmax(115px,auto))/repeat(2,250px); 18 | &-item { 19 | grid-template-columns: 40px 195px; 20 | column-gap: 15px; 21 | } 22 | } 23 | } 24 | .resume { 25 | &__wrapper { 26 | padding: 40px 20px 0 20px; 27 | column-gap: 80px; 28 | } 29 | } 30 | .skills { 31 | &__items { 32 | grid-template-columns: repeat(auto-fit, 270px); 33 | justify-content: space-between; 34 | } 35 | &__ratings { 36 | grid-template-columns: repeat(auto-fit, 350px); 37 | grid-auto-rows: minmax(70px, auto); 38 | justify-content: space-between; 39 | padding: 0 30px; 40 | } 41 | } 42 | .portfolio { 43 | &__wrapper { 44 | grid-template-columns: repeat(auto-fit, 280px); 45 | grid-auto-rows: 280px; 46 | justify-content: space-around; 47 | row-gap: 35px; 48 | .horizontal, .vertical { 49 | grid-row: unset; 50 | grid-column: unset; 51 | } 52 | img { 53 | height: 100%; 54 | object-fit: cover; 55 | } 56 | } 57 | } 58 | .contacts { 59 | &__wrapper { 60 | padding: 0; 61 | grid-template-columns: 400px 520px; 62 | } 63 | &__form { 64 | grid-template: 45px 190px 45px / repeat(2, 250px); 65 | } 66 | } 67 | } 68 | 69 | @media (max-width: 992px) { 70 | .container { 71 | max-width: 720px; 72 | } 73 | .title { 74 | &_fz36 { 75 | font-size: 30px; 76 | line-height: 42px; 77 | margin-top: 26px; 78 | } 79 | } 80 | .divider { 81 | margin: 15px auto 0 auto; 82 | } 83 | .about { 84 | &__wrapper { 85 | grid-template-columns: 300px 380px; 86 | } 87 | &__skills { 88 | grid-template-columns: 380px; 89 | grid-auto-rows: minmax(115px,auto); 90 | &-item { 91 | grid-template-columns: 40px 320px; 92 | column-gap: 20px; 93 | } 94 | } 95 | } 96 | .resume { 97 | &__wrapper { 98 | column-gap: 60px; 99 | grid-template-columns: repeat(2,320px); 100 | } 101 | } 102 | .skills { 103 | &__items { 104 | padding: 0 20px; 105 | } 106 | &__ratings { 107 | grid-template-columns: repeat(auto-fit, 320px); 108 | justify-content: space-between; 109 | padding: 0; 110 | column-gap: 0; 111 | &-line { 112 | width: 100%; 113 | } 114 | } 115 | } 116 | .price { 117 | &__wrapper { 118 | grid-template-columns: repeat(auto-fit, 350px); 119 | padding: 0; 120 | } 121 | } 122 | .contacts { 123 | &__wrapper { 124 | grid-template-columns: 300px 400px; 125 | } 126 | &__form { 127 | grid-template: 45px 190px 45px / repeat(2, 195px); 128 | } 129 | &__btn { 130 | padding: 8px 25px; 131 | line-height: 16px; 132 | } 133 | } 134 | } 135 | 136 | @media (max-width: 768px) { 137 | .container { 138 | max-width: 540px; 139 | } 140 | .title { 141 | &_fz48 { 142 | font-size: 28px; 143 | } 144 | } 145 | .promo { 146 | &__title { 147 | line-height: 39px; 148 | width: 300px; 149 | } 150 | } 151 | .about { 152 | padding-top: 40px; 153 | &__wrapper { 154 | grid-template: 400px auto auto / 1fr; 155 | } 156 | &__photo { 157 | display: none; 158 | } 159 | &__skills { 160 | grid-template-columns: repeat(2, 260px); 161 | &-item { 162 | grid-template-columns: 40px 200px; 163 | column-gap: 20px; 164 | } 165 | } 166 | } 167 | .resume { 168 | padding-top: 40px; 169 | &__wrapper { 170 | grid-template-columns: 1fr; 171 | column-gap: 60px; 172 | row-gap: 40px; 173 | } 174 | } 175 | .skills { 176 | padding-top: 40px; 177 | &__items { 178 | padding: 0; 179 | justify-content: center; 180 | gap: 20px; 181 | } 182 | &__ratings { 183 | grid-template-columns: repeat(auto-fit, 320px); 184 | grid-auto-rows: minmax(70px, auto); 185 | justify-content: center; 186 | margin-top: 40px; 187 | &-line { 188 | width: 100%; 189 | } 190 | } 191 | } 192 | .portfolio { 193 | padding-top: 40px; 194 | } 195 | .price { 196 | padding-top: 40px; 197 | &__wrapper { 198 | margin-top: 20px; 199 | justify-content: center; 200 | } 201 | } 202 | .contacts { 203 | padding-top: 40px; 204 | &__photo { 205 | display: none; 206 | } 207 | &__wrapper { 208 | grid-template-columns: 1fr; 209 | } 210 | &__form { 211 | grid-template: 45px 190px 45px / repeat(2, 250px); 212 | } 213 | } 214 | } 215 | 216 | @media (max-width: 576px) { 217 | .container { 218 | width: 100%; 219 | padding: 0 10px; 220 | } 221 | .title { 222 | &_fz48 { 223 | font-size: 26px; 224 | } 225 | &_fz36 { 226 | font-size: 24px; 227 | line-height: 36px; 228 | } 229 | } 230 | .hamburger { 231 | right: 20px; 232 | } 233 | .menu { 234 | &__block { 235 | width: 250px; 236 | padding-left: 20px; 237 | } 238 | } 239 | .promo { 240 | &__btns { 241 | margin-top: 30px; 242 | } 243 | } 244 | .about { 245 | &__wrapper { 246 | grid-template: 340px auto auto / 1fr; 247 | } 248 | &__skills { 249 | grid-template-columns: 1fr; 250 | } 251 | } 252 | .resume { 253 | &__wrapper { 254 | padding: 40px 5px 0 5px; 255 | } 256 | } 257 | .skills { 258 | &__items { 259 | margin-top: 20px; 260 | } 261 | &__ratings { 262 | grid-template-columns: repeat(auto-fit,300px); 263 | } 264 | } 265 | .price { 266 | &__wrapper { 267 | grid-template-columns: repeat(auto-fit, 295px); 268 | } 269 | } 270 | .contacts { 271 | padding-bottom: 50px; 272 | &__form { 273 | grid-template: 45px 45px 190px minmax(45px, auto) / 1fr; 274 | } 275 | &__textarea { 276 | grid-column: unset; 277 | width: 100%; 278 | } 279 | &__triggers { 280 | grid-column: unset; 281 | grid-template-columns: 1fr; 282 | column-gap: unset; 283 | row-gap: 20px; 284 | } 285 | &__btn { 286 | order: 2; 287 | max-width: 220px; 288 | margin: 0 auto; 289 | } 290 | } 291 | 292 | } -------------------------------------------------------------------------------- /src/icons/about_me/design.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/icons/skills/node.js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/icons/skills/mongo.db.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Portfolio 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 68 | 69 |
70 |
71 |
72 | 73 | 74 | 75 |
76 | 77 | 87 | 88 | 107 |
108 |
109 |
110 | 111 |
112 |
113 | 114 | 115 | 116 |
117 |
118 |
My name is Maksim Ivanovskiy
119 |

I am a Front-end developer from Israel

120 |
121 | Portfolio 122 | About me 123 |
124 |
125 |
126 | 127 |
128 |
129 |
130 |
131 | photo 132 |
133 |
134 |

About me

135 |
My name is Maksim
136 |
137 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

138 |
139 |
140 |
141 |
142 | web-dev 143 |
144 |
145 |
146 | Web development 147 |
148 |
149 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 150 |
151 |
152 |
153 |
154 |
155 | mobile-dev 156 |
157 |
158 |
159 | Apps development 160 |
161 |
162 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 163 |
164 |
165 |
166 |
167 |
168 | design 169 |
170 |
171 |
172 | UX/UI design 173 |
174 |
175 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 |
185 |
186 |

Experience

187 |
Education
188 |
189 | 190 |
191 |
192 |

Education

193 |
    194 |
  • 195 |
    196 |
    197 |
    198 | university 199 |
    200 |

    Rostov State University of Economics

    201 |
    Specialist | Taganrog (2007-2013)
    202 |
    203 |
    204 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo. 205 |
    206 |
    207 |
    • 208 |
  • 209 |
    210 |
    211 |
    212 | courses 213 |
    214 |

    Udemy

    215 |
    Web-development courses
    216 |
    217 |
    218 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo. 219 |
    220 |
    221 |
    • 222 |
223 |
224 |
225 |

Experience

226 |
    227 |
  • 228 |
    229 |
    230 |
    231 | developer 232 |
    233 |

    Front-End Developer

    234 |
    EPAM | Москва (2018-2019)
    235 |
    236 |
    237 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo. 238 |
    239 |
    240 |
    • 241 |
  • 242 |
    243 |
    244 |
    245 | design 246 |
    247 |

    UI/UX Designer

    248 |
    Squad Team | Москва (2018)
    249 |
    250 |
    251 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo. 252 |
    253 |
    254 |
    • 255 |
256 |
257 |
258 |
259 |
260 |
261 | 262 |
263 |
264 |

Skills

265 |
What do I use in my work
266 |
267 | 268 |
269 |
270 |
271 | html 272 |
273 |

HTML5

274 |

It creates the framework of your site or application, and the fifth version will allow me to create a more SEO-optimized structure of your product

275 |
276 |
277 |
278 | css 279 |
280 |

CSS3

281 |

This style language allows me to create absolutely any look for your site or application. Everything is limited only by your imagination!

282 |
283 |
284 |
285 | JavaScript 286 |
287 |

Java Script

288 |

This programming language allows you to bring anything to life: sliders, windows, tooltips, tabs, receiving data from the server, and much more.

289 |
290 |
291 |
292 | jquery 293 |
294 |

Jquery

295 |

The Jquery library will speed up development. We will not integrate it into the project unnecessarily, but the skill of working with it is present.

296 |
297 |
298 |
299 | react 300 |
301 |

React

302 |

This library allows you to create web applications. We can create the most interactive product for your purposes.

303 |
304 |
305 |
306 | node 307 |
308 |

Node.js

309 |

This platform allows you to create a backend for your product - "brains" that will perform actions that an user does not see.

310 |
311 |
312 |
313 | mongo 314 |
315 |

Mongo.db

316 |

This is a non-relational database that will store your website or application data.

317 |
318 |
319 |
320 |
321 |
Website development
322 |
100%
323 |
324 | 325 |
326 |
327 |
328 |
App development
329 |
85%
330 |
331 | 332 |
333 |
334 |
335 |
Working with data
336 |
90%
337 |
338 | 339 |
340 |
341 |
342 |
Creativity
343 |
75%
344 |
345 | 346 |
347 |
348 |
349 |
Design creation
350 |
90%
351 |
352 | 353 |
354 |
355 |
356 |
Soft skills
357 |
95%
358 |
359 | 360 |
361 |
362 |
363 |
364 |
365 | 366 |
367 |
368 |

Portfolio

369 |
My works
370 |
371 | 372 |
373 | 374 | uber 375 | 376 | 377 | pulse 378 | 379 | 380 | test 381 | 382 | 383 | test 384 | 385 | 386 | test 387 | 388 | 389 | test 390 | 391 |
392 |
393 |
394 | 395 |
396 |
397 |

Прайс-лист

398 |
399 | 400 |
401 |
402 |
Landing-page
403 |
от 8000 руб.
404 |
405 | Одностраничный сайт для презентации услуг/товаров/... 406 |
407 |
408 |
409 |
Web-приложение
410 |
от 28000 руб.
411 |
412 | Приложение внутри браузера для лучшего комфорта 413 |
414 |
415 |
416 |
Корпоративный сайт
417 |
от 20000 руб.
418 |
419 | Сайт для вашего бизнеса или компании 420 |
421 |
422 |
423 |
Android/IOS Приложение
424 |
от 25000 руб.
425 |
426 | Приложение для смартфона любой ОС 427 |
428 |
429 |
430 |
Интернет-магазин
431 |
от 30000 руб.
432 |
433 | Инструмент для ваших продаж в сети 434 |
435 |
436 |
437 |
Дизайн
438 |
Индивидуально
439 |
440 | Создам дизайн для вашего сайта/приложения... 441 |
442 |
443 |
444 |
445 |
446 | 447 |
448 |
449 |
450 |
451 | photo 452 |
453 |
454 |

Contacts

455 |
Please contact me
456 |
457 | 458 |
459 | In any convenient way for you: 460 |
461 | 472 |
473 | Or leave your details and I can contact you: 474 |
475 | 476 |
477 |
478 | 479 | 480 |
481 |
482 | 483 | 484 |
485 |
486 | 487 | 488 |
489 |
490 | 491 |
492 |
493 |
494 |
495 |
496 |
497 | 498 | 499 | 500 | --------------------------------------------------------------------------------