diff --git a/README.md b/README.md deleted file mode 100644 index 12715de..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -https://kolem1.github.io/rsschool-cv/cv \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7b2883b --- /dev/null +++ b/css/style.css @@ -0,0 +1,816 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +body { + font-size: 16px; + font-family: 'Montserrat', sans-serif; + font-weight: 400; + color: #2d3038; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + display: block; + max-width: 100%; + + object-fit: cover; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + border: 0; + clip: rect(0 0 0 0) +} + +.container { + max-width: 1500px; + padding: 0 20px; + margin: 0 auto; +} + +.wrapper { + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.header { + position: fixed; + z-index: 100; + + width: 100%; + + color: #fff; + + background: #2d3038; +} + +.header__inner { + display: flex; + justify-content: space-between; + margin: 0 -10px; +} + +.header__item { + padding: 0 10px; +} + +.header__overlay { + position: absolute; + top: 100%; + left: 0; + z-index: -1; + + display: none; + width: 100vw; + height: 100vh; +} + +.header.active .header__overlay { + display: block; +} + +.header__burger { + display: none; +} + +.burger { + position: relative; + + width: 25px; + height: 25px; + + background-color: transparent; + border: none; +} + +.burger::before, +.burger::after { + content: ''; +} + +.burger::before, +.burger::after, +.burger__line { + position: absolute; + left: 0; + + width: 100%; + height: 2px; + + background-color: #fff; + + transition: all 0.3s; +} + +.burger::before { + top: 0; +} + +.burger::after { + bottom: 0; +} + +.burger__line { + top: 50%; + transform: translateY(-50%); +} + +.header.active .burger__line { + opacity: 0; +} + +.header.active .burger::before { + top: 50%; + + transform: rotate(45deg); +} + +.header.active .burger::after { + bottom: 42%; + + transform: rotate(-45deg); +} + +.logo { + display: flex; + align-items: center; + padding: 10px 0; + + font-family: "Sacramento", cursive; + font-size: 40px; + line-height: 40px; +} + +.logo__img { + width: 58px; + height: 58px; + margin-right: 10px; + + border-radius: 50%; +} + +.logo__text { + margin-top: 10px; +} + +.menu { + text-transform: uppercase; + display: flex; +} + +.menu__list { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + + list-style: none; +} + +.menu__item { + display: flex; +} + +.menu__link { + position: relative; + z-index: 1; + + display: flex; + align-items: center; + padding: 0 18px; + + background-color: #2d3038; + + transition: all 0.3s; +} + +.menu__link:hover, +.menu__link:focus, +.menu__link.active { + z-index: 10; + transform: scale(1.1) perspective(10px); +} + +.menu__item:nth-child(1n) .menu__link:hover, +.menu__item:nth-child(1n) .menu__link:focus, +.menu__item:nth-child(1n) .menu__link.active { + background-color: #b52d2d; +} + +.menu__item:nth-child(2n) .menu__link:hover, +.menu__item:nth-child(2n) .menu__link:focus, +.menu__item:nth-child(2n) .menu__link.active { + background-color: #b5712d; +} + +.menu__item:nth-child(3n) .menu__link:hover, +.menu__item:nth-child(3n) .menu__link:focus, +.menu__item:nth-child(3n) .menu__link.active { + background-color: #b5af2d; +} + +.menu__item:nth-child(4n) .menu__link:hover, +.menu__item:nth-child(4n) .menu__link:focus, +.menu__item:nth-child(4n) .menu__link.active { + background-color: #3e943e; +} + +.menu__item:nth-child(5n) .menu__link:hover, +.menu__item:nth-child(5n) .menu__link:focus, +.menu__item:nth-child(5n) .menu__link.active { + background-color: #3e9494; +} + +.menu__item:nth-child(6n) .menu__link:hover, +.menu__item:nth-child(6n) .menu__link:focus, +.menu__item:nth-child(6n) .menu__link.active { + background-color: #3e3e94; +} + +.menu__item:nth-child(7n) .menu__link:hover, +.menu__item:nth-child(7n) .menu__link:focus, +.menu__item:nth-child(7n) .menu__link.active { + background-color: #693e94; +} + +.section { + padding: 30px 0; +} + +.home { + padding: 0; + padding-top: 78px; + + background-color: #f0f0f0; +} + +.home__inner { + min-height: 650px; + display: flex; + align-items: center; + + background-image: url('../img/avatar_wb.jpg'); + background-size: auto 650px; + background-position: right; + background-repeat: no-repeat; +} + +.home-info { + font-size: 24px; + line-height: 1; +} + +.home-info__title { + margin: 0; + margin-bottom: 10px; + + font-size: 3.7em; +} + +.home-info__profession { + margin: 0; + + font-size: 1em; + letter-spacing: 20px; + text-transform: uppercase; +} + +.section--even { + background-color: #f0f0f0; +} + +.section__inner { + display: flex; +} + +.section__title { + margin-top: 0; + width: calc(100% / 3); + + font-size: 50px; +} + +.section__body { + width: calc(100% * 2 / 3); +} + +.contacts { + padding: 0; + + font-size: 18px; + + list-style: none; +} + +.contacts > div { + margin-bottom: 15px; +} + +.contacts__title { + display: inline; + + font-weight: 700; +} + +.contacts__description { + display: inline; + margin: 0; +} + +.skills-list { + display: flex; + flex-direction: column; + align-items: flex-start; + margin: 0; + padding: 0; + + font-size: 20px; + + list-style: none; +} + +.skills-list__item { + display: flex; + align-items: center; +} + +.skills-list__item::before { + content: ""; + + display: inline-block; + margin-right: 5px; + + width: 40px; + min-height: 40px; + + background-position: center; + background-size: 35px auto; + background-repeat: no-repeat; + + transition: transform 0.4s; +} + +.skills-list__item--html::before { + background-image: url("../img/html.svg"); +} + +.skills-list__item--css::before { + background-image: url("../img/css.svg"); +} + +.skills-list__item--js::before { + background-image: url("../img/js.svg"); +} + +.skills-list__item--php::before { + background-image: url("../img/php.svg"); + background-size: 30px; +} + +.skills-list__item--wordpress::before { + background-image: url("../img/wordpress.svg"); + background-size: 30px; +} + +.skills-list__item--git::before { + background-image: url("../img/git.svg"); +} + +.skills-list__item--gulp::before { + background-image: url("../img/gulp.svg"); + background-size: 30px auto; + border-radius: 50%; +} + +.skills-list__item--figma::before { + background-image: url("../img/figma.svg"); +} + +.skills-list__item:hover::before { + transform: rotate(360deg); +} + +.projects-grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 30px; +} + +.project { + background-color: transparent; + border: 1px solid #f1f1f1; + + overflow: hidden; +} + +.project__inner { + position: relative; + width: 100%; +} + +.project__hidden-part { + width: 100%; + height: 100%; +} + +.project__img-wrapper { + position: relative; +} + +.project__img { + width: 100%; + height: 250px; + + object-position: top; +} + +.project__hidden-part { + position: absolute; + top: 0; + + display: flex; + align-items: flex-end; + padding: 20px; + + color: #ffffff; + text-align: left; + + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0, rgba(0, 0, 0, 0.8) 100%); + + opacity: 0; + + transition: opacity 0.4s; +} + +.project__inner:hover .project__hidden-part { + opacity: 1; +} + +.project__title { + display: block; + margin: 0; + margin-bottom: 10px; + + font-size: 24px; + font-weight: 700; +} + +.project__img-link::before { + content: ''; + + position: absolute; + top: 0; + left: 0; + z-index: 10; + + width: 100%; + height: 100%; +} + +.project__description { + margin: 0; +} + +.education-list { + padding: 0; + margin: 0; + + list-style: none; +} + +.education-item:not(:last-child) { + margin-bottom: 10px; +} + +.education-item__logo { + max-width: 400px; +} + +.education-item__title { + margin: 0; + margin-bottom: 5px; + + font-size: 24px; +} + +.education-item__subtitle { + margin: 0; + + font-size: 22px; +} + +.education-item__profession { + margin-bottom: 5px; + + font-weight: 700; +} + +.education-item__years { + margin: 0; + + font-weight: 700; +} + +.languages-list { + display: flex; + padding: 0; + margin: 0 -10px; + flex-wrap: wrap; + + text-align: center; + + list-style: none; +} + +.languages-list__item { + width: 25%; + padding: 0 10px; +} + +.language__level { + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + margin: 0 auto; + + font-size: 20px; + font-weight: 700; + color: #ffffff; + + border-radius: 50%; +} + +.language:nth-child(1n) .language__level { + background-color: #b90162; +} + +.language:nth-child(2n) .language__level { + background-color: #873e95; +} + +.language:nth-child(3n) .language__level { + background-color: #3c70b4; +} + +.language:nth-child(4n) .language__level { + background-color: #05ac80; +} + +.footer { + margin-top: auto; + padding: 15px 0; + + color: #fff; + + background-color: #2d3038; +} + +.footer__inner { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer__icons { + display: flex; + align-items: center; + margin: 0 -10px; +} + +.footer__icon { + padding: 0 10px; +} + +.footer__icon:hover .footer__github-icon { + filter: contrast(0.4); +} + +.footer__icon:hover .footer__rsschool { + filter: invert(1) contrast(0.4); +} + +.footer__github-icon { + height: 40px; + transition: filter 0.3s; +} + +.footer__rsschool { + width: 100px; + + filter: invert(1); + + transition: filter 0.3s; +} + +@media screen and (max-width: 1368px) { + .home-info { + max-width: 700px; + } +} + +@media screen and (max-width: 1200px) { + .logo { + font-size: 35px; + } + + .logo__img { + width: 40px; + height: 40px; + } + + .logo__text { + margin-top: 6px; + } + + .menu__link { + padding: 0 10px; + } + + .home { + padding-top: 66px; + } + + .home__inner { + min-height: 450px; + + background-size: auto 450px; + } + + .home-info { + font-size: 20px; + } + + .home-info__profession { + letter-spacing: 10px; + } +} + +@media screen and (max-width: 1024px) { + .header__inner { + align-items: center; + margin: 0; + } + + .header__burger { + display: block; + } + + .header__menu { + position: absolute; + top: 100%; + right: -100%; + + width: 100%; + max-width: 500px; + padding: 0; + + visibility: hidden; + + transition: right 0.3s; + } + + .header.active .header__menu { + left: auto; + right: 0; + + height: auto; + + visibility: visible; + } + + .menu__list { + display: block; + width: 100%; + } + + .menu__link { + width: 100%; + padding: 20px; + } + + .projects-grid { + display: block; + } + + .project { + display: flex; + flex-direction: column-reverse; + } + + .project__inner { + display: flex; + } + + .project__img-wrapper { + flex: 1 0 50%; + } + + .project__hidden-part { + position: static; + + color: inherit; + + background: transparent; + opacity: 1; + } +} + +@media screen and (max-width: 920px) { + .home__inner { + background-position: right -70px top; + } + + .section__inner { + display: block; + } + + .section__title, + .section__body { + width: 100%; + } + + .skills-list { + display: grid; + grid-template-columns: 1fr 1fr; + } +} + +@media screen and (max-width: 780px) { + .home-info { + max-width: 400px; + + font-size: 16px; + } + + .container { + padding: 0 10px; + } +} + +@media screen and (max-width: 650px) { + .home__inner { + background-size: auto 330px; + background-position: center bottom; + } + + .home-info { + align-self: flex-start; + padding: 20px; + + font-size: 14px; + } + + .home-info__title { + font-size: 3em; + } + + .home-info__profession { + letter-spacing: 5px; + } + + .section__title { + font-size: 36px; + } + + .project__inner { + flex-wrap: wrap; + } + + .languages-list__item { + width: calc(100% / 3); + } + + .footer__inner { + flex-direction: column; + align-items: center; + } + + .footer__copy { + margin-bottom: 10px; + } +} + +@media screen and (max-width: 450px) { + .skills-list { + grid-template-columns: 1fr; + } + + .languages-list__item { + width: calc(100% / 2); + } +} \ No newline at end of file diff --git a/cv.md b/cv.md new file mode 100644 index 0000000..1c431de --- /dev/null +++ b/cv.md @@ -0,0 +1,82 @@ +# Konstantin Lemko + +--- + +## Contacts + +* Phone: [+7 (913) 554-63-53](tel:+79135546353) +* E-mail: [lemko99@bk.ru](mailto:lemko99@bk.ru) +* Telegram [@kolem1212](https://t.me/kolem1212) + +## About Me + +I am 22 years old and have just graduated from the Oil and Gas Institute. But already at the end of the 3rd year, I realized that I would not work in this specialty, since I did not like it. It was then that I got involved in web programming and continue to this day. This is really very interesting and I want to develop in the direction of front-end development. + +## Skills + +* HTML5 +* CSS3 (SCSS) +* BEM +* JavaScript +* PHP +* Wordpress +* Git/GitHub +* Gulp +* Figma +* Photoshop + +## Code Example + +**Roman Numerals Encoder Kata from Codewars:** + +Create a function taking a positive integer as its parameter and returning a string containing the Roman Numeral representation of that integer. + +**Solution:** + +```javascript +function solution(num) { + let lookup = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1}, + result = ''; + for (let i in lookup ) { + while ( num >= lookup[i] ) { + result += i; + num -= lookup[i]; + } + } + return result; +} +``` + +## Work experience + +**Freelance experience:** +1. [LSTKPromStroy](https://lstkpromstroy.ru/) - Website for the construction company \ + Stack: + * HTML, CSS + * JavaScript + * Wordpress +2. [ClassikDent](https://classikdent.ru/) - Dentistry website \ + Stack: + * HTML, CSS + * JavaScript + * Wordpress +3. [CKI](http://polzunova.vtkteam.ru/) - Site for a cultural center \ + Stack: + * HTML, CSS + * JavaScript + * Wordpress +4. [AVTK](http://tensib.beget.tech/avtk/) - Online Store \ + Stack + * HTML, CSS + * JavaScript + +## Education + +* Institute of Oil and Gas + * Oil and Gas Engineering + +## Language + +Russian - Native Speaker\ +English - B1\ +German - A1 \ No newline at end of file diff --git a/img/GitHub_Logo.png b/img/GitHub_Logo.png new file mode 100644 index 0000000..9d48f2a Binary files /dev/null and b/img/GitHub_Logo.png differ diff --git a/img/avatar.jpg b/img/avatar.jpg new file mode 100644 index 0000000..a6f7bfb Binary files /dev/null and b/img/avatar.jpg differ diff --git a/img/avatar_wb.jpg b/img/avatar_wb.jpg new file mode 100644 index 0000000..7de4d8a Binary files /dev/null and b/img/avatar_wb.jpg differ diff --git a/img/avtk.png b/img/avtk.png new file mode 100644 index 0000000..e5e57da Binary files /dev/null and b/img/avtk.png differ diff --git a/img/cki.png b/img/cki.png new file mode 100644 index 0000000..e4cec2e Binary files /dev/null and b/img/cki.png differ diff --git a/img/classikdent.png b/img/classikdent.png new file mode 100644 index 0000000..df56324 Binary files /dev/null and b/img/classikdent.png differ diff --git a/img/css.svg b/img/css.svg new file mode 100644 index 0000000..3d8959a --- /dev/null +++ b/img/css.svg @@ -0,0 +1 @@ +file_type_css \ No newline at end of file diff --git a/img/figma.svg b/img/figma.svg new file mode 100644 index 0000000..0911519 --- /dev/null +++ b/img/figma.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/git.svg b/img/git.svg new file mode 100644 index 0000000..55fd4de --- /dev/null +++ b/img/git.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/gulp.svg b/img/gulp.svg new file mode 100644 index 0000000..eedd9c4 --- /dev/null +++ b/img/gulp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/html.svg b/img/html.svg new file mode 100644 index 0000000..a0152d8 --- /dev/null +++ b/img/html.svg @@ -0,0 +1 @@ +file_type_html \ No newline at end of file diff --git a/img/js.svg b/img/js.svg new file mode 100644 index 0000000..bcfade4 --- /dev/null +++ b/img/js.svg @@ -0,0 +1 @@ +file_type_js_official \ No newline at end of file diff --git a/img/logo_sfu.svg b/img/logo_sfu.svg new file mode 100644 index 0000000..861954f --- /dev/null +++ b/img/logo_sfu.svg @@ -0,0 +1,199 @@ + +image/svg+xml \ No newline at end of file diff --git a/img/lstk.png b/img/lstk.png new file mode 100644 index 0000000..f27a56d Binary files /dev/null and b/img/lstk.png differ diff --git a/img/php.svg b/img/php.svg new file mode 100644 index 0000000..62f3c07 --- /dev/null +++ b/img/php.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/img/rs_school_js.svg b/img/rs_school_js.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/img/rs_school_js.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/img/wordpress.svg b/img/wordpress.svg new file mode 100644 index 0000000..916903f --- /dev/null +++ b/img/wordpress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..21c871b --- /dev/null +++ b/index.html @@ -0,0 +1,305 @@ + + + + + + Konstantin Lemko - CV + + + + + + + + +
+
+
+
+
+ +
+
+ + +
+
+
+
+
+
+
+
+

Konstantin Lemko

+

Frontend Developer

+
+
+
+
+
+
+
+

About Me

+
+

I am 22 years old and have just graduated from the Oil and Gas Institute. But already at the end of the 3rd year, I realized that I would not work in this specialty, since I did not like it. It was then that I got involved in web programming and continue to this day. This is really very interesting and I want to develop in the direction of front-end development.

+

Contacts

+ +
+
+
+
+
+
+
+

Skills

+
+
    +
  • HTML5
    • +
  • CSS
    • +
  • JavaScript
    • +
  • PHP
    • +
  • Wordpress
    • +
  • Git
    • +
  • Gulp
    • +
  • Figma
    • +
+
+
+
+
+
+
+
+

Code Example

+
+

Roman Numerals Encoder Kata from Codewars:

+

Create a function taking a positive integer as its parameter and returning a string containing the Roman Numeral representation of that integer.

+

Solution:

+ 
+                
+function solution(num) {
+  let lookup = {M:1000, CM:900, D:500, CD:400, C:100, XC:90, L:50, XL:40, X:10, IX:9, V:5, IV:4, I:1},
+    result = '';
+  for (let i in lookup ) {
+    while ( num >= lookup[i] ) {
+      result += i;
+      num -= lookup[i];
+    }
+  }
+  return result;
+}
+                
+
+
+
+
+
+
+
+
+

Projects

+
+
+
+
+
+ + + +
+
+
+

Website for the construction company on Wordpress

+

Technologies used:

+
    +
  • HTML
    • +
  • CSS (SCSS)
    • +
  • JS
    • +
  • PHP
    • +
  • Wordpress
    • +
+
+
+
+

LSKTPromStroy

+
+
+
+
+ + + +
+
+
+

Dentistry website on Wordpress

+

Technologies used:

+
    +
  • HTML
    • +
  • CSS (SCSS)
    • +
  • JS
    • +
  • PHP
    • +
  • Wordpress
    • +
+
+
+
+

ClassikDent

+
+
+
+
+ + + +
+
+
+

Site for a cultural center on Wordpress

+

Technologies used:

+
    +
  • HTML
    • +
  • CSS (SCSS)
    • +
  • JS
    • +
  • PHP
    • +
  • Wordpress
    • +
+
+
+
+

CKI

+
+
+
+
+ + + +
+
+
+

Online Store Layout

+

Technologies used:

+
    +
  • HTML
    • +
  • CSS (SCSS)
    • +
  • JS
    • +
+
+
+
+

AVTK

+
+
+
+
+
+
+
+
+
+

Education

+
+
    +
  • + +

    Siberian Federal University

    +

    Institute of Oil and Gas

    +

    Oil and Gas Engineering

    +

    2016 - 2021

    +
    • +
+
+
+
+
+
+
+
+

Languages

+
+
    +
  • +
    Native
    +

    Russian

    +
    • +
  • +
    B1
    +

    English

    +
    • +
  • +
    A1
    +

    German

    +
    • +
+
+
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..8bce112 --- /dev/null +++ b/js/script.js @@ -0,0 +1,71 @@ +const burger = document.querySelector('.burger'); +const overlay = burger.previousElementSibling; + +burger.addEventListener('click', function() { + this.closest('.header').classList.toggle('active'); +}) + +overlay.addEventListener('click', function() { + this.closest('.header').classList.toggle('active'); +}) + +const anchors = document.querySelectorAll('a[href^="#"]'); + +anchors.forEach(anchor => { + anchor.addEventListener('click', (e) =>{ + e.preventDefault(); + const id = anchor.getAttribute('href'); + const target = document.querySelector(id); + const topOffset = document.querySelector('.header').offsetHeight; + + const targerPosition = target.getBoundingClientRect().top; + const offsetPosition = targerPosition - topOffset; + window.scrollBy({ + top: offsetPosition, + behavior: 'smooth' + }) + if(document.documentElement.clientWidth < 1024) { + document.querySelector('.header').classList.remove('active'); + } + anchor.blur(); + }) +}) + +const sections = document.querySelectorAll('.section'); +const sectionsCoord = {}; + +sections.forEach(item => { + sectionsCoord[item.id] = item.offsetTop; +}); + +window.onscroll = function() { + const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop; + + for(let section in sectionsCoord) { + if(sectionsCoord[section] <= scrollPosition + 80) { + document.querySelector('a[href^="#"].active').classList.remove('active'); + document.querySelector('a[href*=' + section + ']').classList.add('active'); + } + } +} + +const selfCheck = ` + 150/150 + 1. Верстка валидная +10 + 2. Верстка семантичная - используются теги: h1, h2, h3, h4, header, nav, main, footer, section, article +20 + 3. Используются CSS стили +10 + 4. Контент размещается в блоке, который горизонтально центрируется на странице +10 + 5. Верстка адаптивная +10 + 6. Есть адаптивное бургер меню. При клике на пункт реализован плавный скролл +10 + 7. Есть аватарка. Атрибут alt присутствует (пустой) +10 + 8. Контакты и навыки оформлены через ul>li +10 + 9. Содержится информация о себе, контакты, навыки, а так же уровень английского +10 + 10. Есть пример кода с подсветкой через Highlight.js +10 + 11. Есть секция с проектами. Каждый проект имеет изображение, название, описание и перечень технологий. Ссылка открывается в новой вкладке +10 + 12. CV на английском +10 + 13. Выполнены требования к Pull Request +10 + 14. Видеорезюме отсутствует +0 + 15. +10 + `; + +console.log(selfCheck); \ No newline at end of file