diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..73f69e0 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..b5e8db5 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,15 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..d23208f --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..639900d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..6ded4db --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/runConfigurations.xml b/.idea/runConfigurations.xml new file mode 100644 index 0000000..797acea --- /dev/null +++ b/.idea/runConfigurations.xml @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 5b4079c..42fef98 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# Galeev_Artur \ No newline at end of file +# Galeev_Artur diff --git a/dist/app.js b/dist/app.js new file mode 100644 index 0000000..2024774 --- /dev/null +++ b/dist/app.js @@ -0,0 +1,54 @@ +// Если нужен такого рода импорт, придется поставить rollup scss plugin +// В остальных случаях все стили подтянет gulp, просто по маске src/styles/**/*.less и скомпилирует их в единый css файл +// import './styles/layout.scss'; + +function changeTheme() { + let bodyCardClassList = document.querySelector("body").classList; + bodyCardClassList.toggle("dark-theme"); + bodyCardClassList.toggle("light-theme"); +} + +document.addEventListener("DOMContentLoaded", function (event) { + document.body.addEventListener('click', changeTheme); +}); + +function toElement(name, progress) { + let newSkillDiv = document.createElement('div'); + newSkillDiv.classList.add('skills-list_skill'); + newSkillDiv.innerHTML = + '
' + + '
' + + ' ' + name.toString() + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + ' h' + + '
' + + '
' + ; + let img = newSkillDiv.getElementsByClassName("skill-right_delete_img").item(0); + img.addEventListener('click', () => { + newSkillDiv.remove(); + }); + return newSkillDiv; +} + + +var list = document.getElementById('skills_list'); +var applyBtn = document.getElementById("apply-button"); +var nameField = document.getElementById("name"); +var numberField = document.getElementById("number"); + +// Example +list.appendChild(toElement('JAVA', 90)); +list.appendChild(toElement('C++', 60)); + +applyBtn.addEventListener('click', () => { + if (!(nameField.value === '') && !(numberField.value === '') ) { + list.appendChild(toElement(nameField.value, numberField.value)); + } +}); diff --git a/dist/assets/face.jpg b/dist/assets/face.jpg new file mode 100644 index 0000000..2bcdf66 Binary files /dev/null and b/dist/assets/face.jpg differ diff --git a/dist/assets/git-logo.png b/dist/assets/git-logo.png new file mode 100644 index 0000000..6d13bfb Binary files /dev/null and b/dist/assets/git-logo.png differ diff --git a/dist/assets/tg-logo.png b/dist/assets/tg-logo.png new file mode 100644 index 0000000..0680a41 Binary files /dev/null and b/dist/assets/tg-logo.png differ diff --git a/dist/assets/vk-logo.png b/dist/assets/vk-logo.png new file mode 100644 index 0000000..8590f4b Binary files /dev/null and b/dist/assets/vk-logo.png differ diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..bd7b910 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,74 @@ + + + + + Curriculum vitae + + + + + +
+
+
+
+ photo +
+
+ Alex Smith +
+
+ Web Designer +
+
+ + vk-logo + + + telegram-logo + + + github-logo + +
+
+ +
+
+ © 2021 All rights reserved. +
+
+
+
+
+
+
+ Coding skills: +
+
+ +
+
+
+ + +
+

+
+ + +
+

+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/dist/style.css b/dist/style.css new file mode 100644 index 0000000..6b91b9a --- /dev/null +++ b/dist/style.css @@ -0,0 +1,1025 @@ +/*! 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; +} + +.right-part_main { + width: 100%; + height: 100%; +} +.right-part_second-page { + display: flex; + flex-direction: column; + padding-left: 2em; + padding-right: 2em; + padding-top: 1em; +} +.right-part_second-page_title { + font-size: 40px; +} +.right-part_second-page_skills-list { + margin-right: 3em; + margin-top: 2.2em; + margin-left: 3em; +} +.right-part_second-page_skills-list .skills-list_skill { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + justify-content: flex-start; + margin-bottom: 1em; + border: transparent 4px; + border-radius: 15px; + height: 5em; + min-width: 400px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + flex-grow: 6; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_name { + display: flex; + align-items: center; + font-size: 1.5em; + flex-grow: 5; + margin-left: 0.5em; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_progress { + box-sizing: border-box; + flex-grow: 1; + width: 100%; + height: 10%; + margin-bottom: 0.3em; + padding: 0.15em; + background-color: transparent; + border: solid 2px darkcyan; + border-radius: 15px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_progress .skill_bar { + margin-top: 0.04em; + width: 60%; + height: 100%; + background: darkcyan; + border-radius: 15px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right { + position: relative; + flex-grow: 1; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete { + transition: 0.4s; + box-sizing: border-box; + width: 100%; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete_img { + background: transparent; + position: absolute; + filter: drop-shadow(0 0 5px #151515); + top: 1em; + left: 1em; + box-sizing: border-box; + max-width: 3em; + height: auto; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete_img:hover { + transform: scale(1.2); + filter: drop-shadow(0.1em 0.1em 5px #151515); +} +.right-part_second-page_new-skill_form { + margin-top: 0.5em; + display: flex; + flex-flow: column; + align-items: center; +} +.right-part_second-page_new-skill_form .form { + position: relative; + width: 16em; + height: 2.7em; +} +.right-part_second-page_new-skill_form .form_input { + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 2px solid darkgray; + border-radius: 0.5em; + font-family: inherit; + font-size: inherit; + color: white; + outline: none; + padding-left: 1.25em; + background: none; +} +.right-part_second-page_new-skill_form .form_input:hover { + border-color: darkcyan; +} +.right-part_second-page_new-skill_form .form_input:focus { + border-color: cyan; +} +.right-part_second-page_new-skill_form .form_input:focus ~ .form_label, +.right-part_second-page_new-skill_form .form_input:not(:placeholder-shown).form_input:not(:focus) ~ .form_label { + top: -0.5em; + font-size: 0.8em; + left: 0.8em; +} +.right-part_second-page_new-skill_form .form_label { + position: absolute; + left: 1em; + top: 0.8em; + padding: 0 0.5rem; + color: white; + cursor: text; + transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; + background-color: #222222; +} +.right-part_second-page_new-skill_form .apply-button { + width: 9em; + color: darkcyan; + cursor: pointer; + border: 2px solid darkcyan; + padding: 0.25em 0.5em; + box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} +.right-part_second-page_new-skill_form .apply-button:active { + box-shadow: 0px 0px 0px 0px; + top: 5px; + left: 5px; +} + + +/*! 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; +} +.right-part_main { + width: 100%; + height: 100%; +} +.right-part_second-page { + display: flex; + flex-direction: column; + padding-left: 2em; + padding-right: 2em; + padding-top: 1em; +} +.right-part_second-page_title { + font-size: 40px; +} +.right-part_second-page_skills-list { + margin-right: 3em; + margin-top: 2.2em; + margin-left: 3em; +} +.right-part_second-page_skills-list .skills-list_skill { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + justify-content: flex-start; + margin-bottom: 1em; + border: transparent 4px; + border-radius: 15px; + height: 5em; + min-width: 400px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + flex-grow: 6; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_name { + display: flex; + align-items: center; + font-size: 1.5em; + flex-grow: 5; + margin-left: 0.5em; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_progress { + box-sizing: border-box; + flex-grow: 1; + width: 100%; + height: 10%; + margin-bottom: 0.3em; + padding: 0.15em; + background-color: transparent; + border: solid 2px darkcyan; + border-radius: 15px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-left_progress .skill_bar { + margin-top: 0.04em; + width: 60%; + height: 100%; + background: darkcyan; + border-radius: 15px; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right { + position: relative; + flex-grow: 1; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete { + transition: 0.4s; + box-sizing: border-box; + width: 100%; + height: 100%; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete_img { + background: transparent; + position: absolute; + filter: drop-shadow(0 0 5px #151515); + top: 1em; + left: 1em; + box-sizing: border-box; + max-width: 3em; + height: auto; +} +.right-part_second-page_skills-list .skills-list_skill .skill-right_delete_img:hover { + transform: scale(1.2); + filter: drop-shadow(0.1em 0.1em 5px #151515); +} +.right-part_second-page_new-skill_form { + margin-top: 0.5em; + display: flex; + flex-flow: column; + align-items: center; +} +.right-part_second-page_new-skill_form .form { + position: relative; + width: 16em; + height: 2.7em; +} +.right-part_second-page_new-skill_form .form_input { + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 2px solid darkgray; + border-radius: 0.5em; + font-family: inherit; + font-size: inherit; + color: white; + outline: none; + padding-left: 1.25em; + background: none; +} +.right-part_second-page_new-skill_form .form_input:hover { + border-color: darkcyan; +} +.right-part_second-page_new-skill_form .form_input:focus { + border-color: cyan; +} +.right-part_second-page_new-skill_form .form_input:focus ~ .form_label, +.right-part_second-page_new-skill_form .form_input:not(:placeholder-shown).form_input:not(:focus) ~ .form_label { + top: -0.5em; + font-size: 0.8em; + left: 0.8em; +} +.right-part_second-page_new-skill_form .form_label { + position: absolute; + left: 1em; + top: 0.8em; + padding: 0 0.5rem; + color: white; + cursor: text; + transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; + background-color: #222222; +} +.right-part_second-page_new-skill_form .apply-button { + width: 9em; + color: darkcyan; + cursor: pointer; + border: 2px solid darkcyan; + padding: 0.25em 0.5em; + box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} +.right-part_second-page_new-skill_form .apply-button:active { + box-shadow: 0px 0px 0px 0px; + top: 5px; + left: 5px; +} +:root .light-theme { + background-color: white; +} +:root .dark-theme { + background-color: black; +} +html { + width: 100%; + height: 100%; +} +body { + font-family: Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: #fff; +} +.main-card { + width: 1127px; + background: #444444; + border-radius: 30px; + display: flex; +} +.left-part_main { + display: flex; + height: 595px; + width: 380px; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.left-part_photo-img { + width: 180px; + height: 180px; + margin-top: 70px; + border-radius: 50%; + box-shadow: 12px 12px 0 0 #c4c4c4; +} +.left-part_employee-FIO { + margin-top: 29px; + font-weight: bold; + font-size: 38px; + color: #FFFFFF; +} +.left-part_employee-speciality { + margin-top: 8px; + font-size: 20px; + color: #FFFFFF; +} +.left-part_social-networks { + width: 110px; + display: flex; + align-self: center; + flex-direction: row; + justify-content: space-around; + margin-top: 16px; + height: 24px; +} +.left-part_social-networks-img { + border-radius: 50%; +} +.left-part_download-button { + margin-top: 57px; + width: 168px; + height: 46px; + background: transparent; + border: 3px solid #FFFFFF; + box-sizing: border-box; + border-radius: 40px; + font-size: 17px; + line-height: 20px; + color: #FFFFFF; +} +.left-part_copyright { + margin-bottom: 16px; + display: flex; + flex-grow: 1; + flex-direction: row; + align-items: flex-end; + height: 16px; + font-size: 14px; + color: #FFFFFF; +} +.right-part-wrapper { + flex-grow: 1; + background-color: #222222; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 30px; +} +.right-part_employee-name { + font-size: 62px; +} +.right-part_employee-position { + display: flex; + justify-content: center; + margin-top: 8px; + font-size: 22px; +} diff --git a/frontEnd.iml b/frontEnd.iml new file mode 100644 index 0000000..80cc739 --- /dev/null +++ b/frontEnd.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..54ac50f --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,87 @@ +const gulp = require('gulp'); +const concat = require('gulp-concat'); +const less = require('gulp-less'); +const inject = require('gulp-inject'); +const rollup = require('rollup'); +const image = require('gulp-image'); + +const assetsPath = 'src/assets/*'; +const stylesPath = './src/styles/**/*.scss'; +const jsPath = 'src/**/*.js'; +const htmlPath = './src/index.html'; +const distPath = './dist/'; +const rollupConfig = { + input: 'src/app.js', + plugins: [ + // Не используем в rollup, используем это в gulp + // scss(), // will output compiled styles to output.css + // html({ template }), + ] +} + +const imageOptimizingSettings = { + pngquant: true, + optipng: true, + zopflipng: true, + mozjpeg: true, + gifsicle: true, + svgo: true, + concurrent: 10, +}; + +/** + * Описание задачи на сборку javascript, с помощью rollup + */ +gulp.task('rollup', async (done) => { + const bundle = await rollup.rollup(rollupConfig); + + bundle.write({ + format: 'esm', + file: 'dist/app.js' + }); + + done(); +}); + +/** + * Простая задача на компиляцию scss файлов в файл style.css, ее отличие от rollup плагина rollup-plugin-scss + * в том, что файлы подключаются по маске, а в rollup они подключаются явно через import + **/ +gulp.task('css', () => { + return gulp.src(stylesPath) + .pipe(less()) + .pipe(concat('style.css')) + .pipe(gulp.dest(distPath)); +}); + +/** + * Вотчинг всех файлов которые мы + **/ +gulp.task('watch', function (done) { + gulp.watch(stylesPath, gulp.series('css')); + gulp.watch(jsPath, gulp.series('rollup')); + done(); +}); + +/** + * Копирование картинок и прочего из папки assets, картинки обжимаются с помощью наастроек imageOptimizingSettings + */ +gulp.task('assets', function () { + return gulp.src(assetsPath) + .pipe(image(imageOptimizingSettings)) + .pipe(gulp.dest(`${distPath}/assets/`)); +}); + +/** + * Описание задачи на вставку js & css файлов в наш шаблон index.html + */ +gulp.task('html', function () { + const target = gulp.src(htmlPath); + const sources = gulp.src(['./dist/**/*.js', './dist/**/*.css'], { read: false }); + + return target.pipe(inject(sources, { ignorePath: '../dist', relative: true, addPrefix: '.' })) + .pipe(gulp.dest(distPath)); +}); + +gulp.task('default', gulp.series('rollup', 'css', 'assets', 'html', 'watch')); +gulp.task('build', gulp.series('rollup', 'css', 'assets', 'html')); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..e6901b2 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "demo", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "gulp", + "build": "gulp build", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "gulp": "^4.0.2", + "gulp-concat": "^2.6.1", + "gulp-image": "6.2.1", + "gulp-inject": "^5.0.5", + "gulp-less": "^5.0.0", + "rollup": "^2.58.0", + "sass": "^1.43.2" + } +} diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..5e7b06d --- /dev/null +++ b/src/app.js @@ -0,0 +1,56 @@ +// Если нужен такого рода импорт, придется поставить rollup scss plugin +// В остальных случаях все стили подтянет gulp, просто по маске src/styles/**/*.less и скомпилирует их в единый css файл +// import './styles/layout.scss'; + +function changeTheme() { + let bodyCardClassList = document.querySelector("body").classList; + bodyCardClassList.toggle("dark-theme"); + bodyCardClassList.toggle("light-theme"); +} + +document.addEventListener("DOMContentLoaded", function (event) { + document.body.addEventListener('click', changeTheme); +}); + + +const tmpl = document.getElementById('template'); +const nameDiv = tmpl.content.querySelector('.skill-left_name'); +const skillDiv = tmpl.content.querySelector('.skill_bar'); + +function toElement(name, progress) { + nameDiv.textContent = name; + skillDiv.style.width = progress + '%'; + + let newSkillTemplate = tmpl.content.cloneNode(true); + let img = newSkillTemplate.querySelector('.skill-right_delete_img'); + let newSkillDiv = newSkillTemplate.querySelector('.skills-list_skill'); + img.addEventListener('click', () => { + + newSkillDiv.remove(); + }) + return newSkillTemplate; +} + +let list; +document.addEventListener("DOMContentLoaded", function (event) { + list = document.getElementById('skills_list'); +}); + +// Example +list.appendChild(toElement('JAVA', 90)); +list.appendChild(toElement('C++', 60)); + +let form; +document.addEventListener("DOMContentLoaded", function (event) { + form = document.getElementById('formElem'); +}); + +form.addEventListener('submit', (event) => { + event.preventDefault(); + + const nameField = form.querySelector('[name="nameField"]'), + numberField = form.querySelector('[name="numberField"]'); + if (!(nameField.value === '') && !(numberField.value === '')) { + list.appendChild(toElement(nameField.value, numberField.value)); + } +}); \ No newline at end of file diff --git a/src/assets/face.jpg b/src/assets/face.jpg new file mode 100644 index 0000000..10b74c7 Binary files /dev/null and b/src/assets/face.jpg differ diff --git a/src/assets/git-logo.png b/src/assets/git-logo.png new file mode 100644 index 0000000..b630925 Binary files /dev/null and b/src/assets/git-logo.png differ diff --git a/src/assets/tg-logo.png b/src/assets/tg-logo.png new file mode 100644 index 0000000..d196d12 Binary files /dev/null and b/src/assets/tg-logo.png differ diff --git a/src/assets/vk-logo.png b/src/assets/vk-logo.png new file mode 100644 index 0000000..eacbcd7 Binary files /dev/null and b/src/assets/vk-logo.png differ diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..0682c61 --- /dev/null +++ b/src/index.html @@ -0,0 +1,92 @@ + + + + + Curriculum vitae + + + + +
+
+
+
+ photo +
+
+ Alex Smith +
+
+ Web Designer +
+
+ + vk-logo + + + telegram-logo + + + github-logo + +
+
+ +
+
+ © 2021 All rights reserved. +
+
+
+
+
+
+
+ Coding skills: +
+
+ +
+
+
+
+ + +
+

+
+ + +
+

+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000..b0c1902 --- /dev/null +++ b/src/styles/reset.scss @@ -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; +} \ No newline at end of file diff --git a/src/styles/span.scss b/src/styles/span.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000..cebad79 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,130 @@ +@import './reset.scss'; +@import "./secondSlide.scss"; + +:root .light-theme { + background-color: white; +} + +:root .dark-theme { + background-color: black; +} + +html { + width: 100%; + height: 100%; +} + +body { + font-family: Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + + display: flex; + justify-content: center; + align-items: center; + height: 100%; + color: #fff; +} + +.main-card { + width: 1127px; + background: #444444; + border-radius: 30px; + + display: flex; +} + +.left-part_main { + display: flex; + height: 595px; + width: 380px; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.left-part_photo-img { + width: 180px; + height: 180px; + margin-top: 70px; + border-radius: 50%; + box-shadow: 12px 12px 0 0 rgb(196 196 196); +} + +.left-part_employee-FIO { + margin-top: 29px; + + font-weight: bold; + font-size: 38px; + + color: #FFFFFF; +} + +.left-part_employee-speciality { + margin-top: 8px; + font-size: 20px; + + color: #FFFFFF; +} + +.left-part_social-networks { + width: 110px; + display: flex; + align-self: center; + flex-direction: row; + justify-content: space-around; + margin-top: 16px; + height: 24px; +} + +.left-part_social-networks-img { + border-radius: 50%; +} + +.left-part_download-button { + margin-top: 57px; + width: 168px; + height: 46px; + + background: transparent; + border: 3px solid #FFFFFF; + box-sizing: border-box; + border-radius: 40px; + + font-size: 17px; + line-height: 20px; + color: #FFFFFF; +} + +.left-part_copyright { + margin-bottom: 16px; + display: flex; + flex-grow: 1; + flex-direction: row; + align-items: flex-end; + height: 16px; + font-size: 14px; + color: #FFFFFF; +} + +.right-part-wrapper { + flex-grow: 1; + background-color: rgba(34, 34, 34, 1); + padding: 16px; + display: flex; + + align-items: center; + justify-content: center; + border-radius: 30px; +} + +.right-part_employee-name { + font-size: 62px; +} + +.right-part_employee-position { + display: flex; + justify-content: center; + margin-top: 8px; + font-size: 22px; +} \ No newline at end of file