diff --git a/README.md b/README.md index e69de29..5c70780 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,3 @@ +https://Forlocks.github.io/rsschool-cv/cv + +https://Forlocks.github.io/rsschool-cv/ \ No newline at end of file diff --git a/assets/fonts/Abel-Regular.ttf b/assets/fonts/Abel-Regular.ttf new file mode 100644 index 0000000..5245501 Binary files /dev/null and b/assets/fonts/Abel-Regular.ttf differ diff --git a/assets/fonts/KdamThmorPro-Regular.ttf b/assets/fonts/KdamThmorPro-Regular.ttf new file mode 100644 index 0000000..622f14f Binary files /dev/null and b/assets/fonts/KdamThmorPro-Regular.ttf differ diff --git a/assets/icons/favicon.ico b/assets/icons/favicon.ico new file mode 100644 index 0000000..39d3f26 Binary files /dev/null and b/assets/icons/favicon.ico differ diff --git a/assets/icons/gh.svg b/assets/icons/gh.svg new file mode 100644 index 0000000..0d58006 --- /dev/null +++ b/assets/icons/gh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/rss.svg b/assets/icons/rss.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/assets/icons/rss.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/assets/images/about_me.jpg b/assets/images/about_me.jpg new file mode 100644 index 0000000..3ff4572 Binary files /dev/null and b/assets/images/about_me.jpg differ diff --git a/assets/images/avatar.jpg b/assets/images/avatar.jpg new file mode 100644 index 0000000..d833bd2 Binary files /dev/null and b/assets/images/avatar.jpg differ diff --git a/assets/images/contact_information.jpg b/assets/images/contact_information.jpg new file mode 100644 index 0000000..aa0c1a3 Binary files /dev/null and b/assets/images/contact_information.jpg differ diff --git a/assets/images/education.jpg b/assets/images/education.jpg new file mode 100644 index 0000000..4116dc8 Binary files /dev/null and b/assets/images/education.jpg differ diff --git a/assets/images/languages.jpg b/assets/images/languages.jpg new file mode 100644 index 0000000..8185e35 Binary files /dev/null and b/assets/images/languages.jpg differ diff --git a/assets/images/projects.jpg b/assets/images/projects.jpg new file mode 100644 index 0000000..88687b0 Binary files /dev/null and b/assets/images/projects.jpg differ diff --git a/assets/images/skills.jpg b/assets/images/skills.jpg new file mode 100644 index 0000000..b2489c9 Binary files /dev/null and b/assets/images/skills.jpg differ diff --git a/assets/markers/english.svg b/assets/markers/english.svg new file mode 100644 index 0000000..4aef568 --- /dev/null +++ b/assets/markers/english.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/markers/russian.svg b/assets/markers/russian.svg new file mode 100644 index 0000000..f9d72be --- /dev/null +++ b/assets/markers/russian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/cv.md b/cv.md new file mode 100644 index 0000000..d77e2eb --- /dev/null +++ b/cv.md @@ -0,0 +1,54 @@ +# Alexey Shelukhin + +## Contact information +* **E-mail:** sheluhen@mail.ru +* **GitHub:** https://github.com/Forlocks +* **Discord server RSS:** Forlock (@Forlocks) + +## About me +I am 20 years old, study at the St. Petersburg State University of Aerospace Instrumentation. At the beginning of my second year at university, I became interested in the profession of a front-end developer, after which I began to take various free courses on learning HTML, CSS and JS. I hope to get more knowledge in the RS School courses so that I can become a junior front-end developer as a result. + +## Skills +* Markdown +* HTML +* CSS (+Bootstrap) +* JS (basics) +* Git and GitHub +* VSCode + +## Code example +``` +'use strict'; + +/* +A function that returns an array of integers +from the given number up to and including 1 +*/ + +function reverseArr(n) { + let arr = []; + let j = -1; + + while (n > 0) { + arr[++j] = n; + --n; + } + + return arr; +} +``` + +## Projects +* https://Forlocks.github.io/rsschool-cv/ +* Next projects coming soon... + +## Education +* Courses on the educational platform Stepik: + * Web Development for Beginners: HTML and CSS (100% + Certificate) + * JavaScript for Beginners (100% + Certificate) +* Learn.javascript (in the process) +* RS School Course «JavaScript/Front-end. Stage 0» (in the process) + +## Languages +* **English:** А2 (Elementary) +* **Russian:** 100% \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2cd1328 --- /dev/null +++ b/index.html @@ -0,0 +1,216 @@ + + + + + + Aleksey Shelukhin + + + + + + + +
+ +
+
+
+ My photo +

+ Aleksey Shelukhin +

+
+
+
+
+

CODE EXAMPLE

+ 
'use strict';
+
+/*
+A function that returns an array of integers
+from the given number up to and including 1
+*/
+
+function reverseArr(n) {
+  let arr = [];
+  let j = -1;
+
+  while (n > 0) {
+    arr[++j] = n;
+    --n;
+  }
+
+  return arr;
+}
+
+
+
+
+
+ Contact information +
+

Contact information

+ +
+
+
+
+
+
+

About me

+

+ I am 20 years old, study at the St. Petersburg State University of Aerospace Instrumentation. + At the beginning of my second year at university, I became interested in the profession of a front-end developer, + after which I began to take various free courses on learning HTML, CSS and JS. + I hope to get more knowledge in the RS School courses so that I can become a junior front-end developer as a result. +

+
+ About me +
+
+
+
+ Skills +
+

Skills

+
    +
  • + Markdown +
    • +
  • + HTML +
    • +
  • + CSS (+Bootstrap) +
    • +
  • + JS (basics) +
    • +
  • + Git and GitHub +
    • +
  • + VSCode +
    • +
+
+
+
+
+
+
+

Projects

+ +
+ Projects +
+
+
+
+ Education +
+

Education

+
    +
  • + Courses on the educational platform Stepik: +
      +
    • + Web Development for Beginners: HTML       and CSS (100% + Certificate) +
      • +
    • + JavaScript for Beginners (100% +       Certificate) +
      • +
    +
    • +
  • + Learn.javascript (in the process) +
    • +
  • + RS School Course «JavaScript/Front-end.       Stage 0» (in the process) +
    • +
+
+
+
+
+
+
+

Languages

+
    +
  • + English: A2 (Elementary) +
    • +
  • + Russian: 100% +
    • +
+
+ Languages +
+
+
+
+
+ + + \ No newline at end of file diff --git a/styles/adaptive.css b/styles/adaptive.css new file mode 100644 index 0000000..9f9927b --- /dev/null +++ b/styles/adaptive.css @@ -0,0 +1,69 @@ +@media (max-width: 1500px) { + header { + height: 150px; + } + + header ul { + justify-content: center; + flex-wrap: wrap; + } + + header li { + margin-left: 25px; + margin-right: 25px; + } + + h1 { + width: 560px; + } +} + +@media (max-width: 1250px) { + .contacts { + justify-content: center; + } + + .about { + justify-content: center; + } + + .skills { + justify-content: center; + } + + .projects { + justify-content: center; + } + + .education { + justify-content: center; + } + + .languages { + justify-content: center; + } + + .contacts_container { + margin-right: 0; + } + + .about_container { + margin-left: 0; + } + + .skills_container { + margin-right: 0; + } + + .projects_container { + margin-left: 0; + } + + .education_container { + margin-right: 0; + } + + .languages_container { + margin-left: 0; + } +} \ No newline at end of file diff --git a/styles/animation.css b/styles/animation.css new file mode 100644 index 0000000..460e18b --- /dev/null +++ b/styles/animation.css @@ -0,0 +1,78 @@ + +@keyframes right_container { + from { + margin-bottom: 0px; + margin-right: 100px; + } + + to { + margin-bottom: 25px; + margin-right: 125px; + } +} + +@keyframes left_container { + from { + margin-bottom: 0px; + margin-left: 100px; + } + + to { + margin-bottom: 25px; + margin-left: 125px; + } +} + +header li:hover { + background: linear-gradient(#FCFCFC, 15%, #185b4d); +} + +main a:visited { + color: #FCFCFC; +} + +main a:hover { + color: #00eaff; +} + +.contacts_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: right_container; + animation-fill-mode: forwards; +} + +.about_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: left_container; + animation-fill-mode: forwards; +} + +.skills_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: right_container; + animation-fill-mode: forwards; +} + +.projects_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: left_container; + animation-fill-mode: forwards; +} + +.education_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: right_container; + animation-fill-mode: forwards; +} + +.languages_container:hover { + animation-duration: 1s; + animation-iteration-count: 1; + animation-name: left_container; + animation-fill-mode: forwards; +} \ No newline at end of file diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 0000000..904d1c1 --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,43 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, sub, sup, tt, var, +b, u, i, center, fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video, ul, ol, li, button { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} + +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..4502483 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,560 @@ +@font-face { + font-family: Kdam; + src: url("../assets/fonts/KdamThmorPro-Regular.ttf"); + font-size: 40px; +} + +@font-face { + font-family: Abel; + src: url("../assets/fonts/Abel-Regular.ttf"); + font-size: 24px; +} + +* { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + display: block; + max-width: 1920px; + margin: 0 auto; +} + +header { + display: flex; + width: 100%; + height: 100px; + border-bottom: 5px solid #7cd2b0; + margin-top: -2px; + background-color: #106482; +} + +nav { + display: flex; + width: 100%; + height: 100%; +} + +header ul { + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 100%; +} + +header li { + display: block; + width: 200px; + height: 50px; + border-radius: 25px; +} + +header form { + display: block; + width: 200px; + height: 50px; + border-radius: 25px; +} + +header button { + display: flex; + justify-content: center; + align-items: center; + width: 200px; + height: 50px; + border-radius: 25px; + text-align: center; + font-family: Kdam, sans-serif; + font-size: 20px; + color: #FCFCFC; + background: linear-gradient(#FFFFFF, 15%, #21806d); + cursor: pointer; +} + +header button:hover { + background: linear-gradient(#FCFCFC, 15%, #185b4d); +} + +main { + display: flex; + flex-direction: column; + width: 100%; +} + +.title { + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 700px; + margin-top: -2px; + background-color: #21806d; +} + +.title img { + display: block; + width: 400px; + height: 400px; + border: 5px solid #7cd2b0; + border-radius: 200px; +} + +h1 { + display: block; + width: 1015px; + text-align: center; + font-family: Kdam, sans-serif; + font-size: 120px; + line-height: normal; + color: #FCFCFC; +} + +.transition_one { + display: block; + width: 100%; + height: 200px; + margin-top: -2px; + background: linear-gradient(#21806d, 50%, #0c4458); +} + +.code { + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + width: 100%; + height: 800px; + margin-top: -2px; + background-color: #0c4458; +} + +.code h2 { + display: block; + width: 100%; + text-align: center; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +pre { + display: block; + font-family: Abel, sans-serif; + font-size: 26px; + line-height: 34px; + color: #FCFCFC; +} + +.transition_two { + display: block; + width: 100%; + height: 200px; + margin-top: -2px; + background: linear-gradient(#0c4458, 50%, #106482); +} + +.contacts { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.contacts_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-right: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.contacts img { + width: 400px; + height: 100%; + border-right: 5px solid #7cd2b0; + border-top-left-radius: 95px; + border-bottom-left-radius: 95px; +} + +.contacts_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.contacts h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.contacts ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 93%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 35px; + line-height: 80px; + list-style-type: none; + color: #FCFCFC; +} + +.about { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.about_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-left: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.about img { + width: 400px; + height: 100%; + border-left: 5px solid #7cd2b0; + border-top-right-radius: 95px; + border-bottom-right-radius: 95px; +} + +.about_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.about h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.about p { + display: block; + width: 87%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 26px; + line-height: 34px; + color: #FCFCFC; +} + +.skills { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.skills_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-right: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.skills img { + width: 400px; + height: 100%; + border-right: 5px solid #7cd2b0; + border-top-left-radius: 95px; + border-bottom-left-radius: 95px; +} + +.skills_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.skills h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.skills ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 49%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 35px; + line-height: 50px; + color: #FCFCFC; + list-style-position: inside; +} + +.projects { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.projects_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-left: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.projects img { + width: 400px; + height: 100%; + border-left: 5px solid #7cd2b0; + border-top-right-radius: 95px; + border-bottom-right-radius: 95px; +} + +.projects_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.projects h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.projects ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 87%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 42px; + line-height: 60px; + color: #FCFCFC; + list-style-position: inside; +} + +.education { + display: flex; + flex-direction: row-reverse; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.education_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-right: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.education img { + width: 400px; + height: 100%; + border-right: 5px solid #7cd2b0; + border-top-left-radius: 95px; + border-bottom-left-radius: 95px; +} + +.education_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.education h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.education ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 90%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 28px; + line-height: 38px; + color: #FCFCFC; + list-style-position: inside; +} + +ul#education_ul { + width: 84%; + list-style-type: disc; +} + +.languages { + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + height: 850px; + margin-top: -2px; + background-color: #106482; +} + +.languages_container { + display: flex; + align-items: center; + width: 1000px; + height: 410px; + border: 5px solid #7cd2b0; + border-radius: 100px; + margin-left: 100px; + background-color: #21806d; + box-shadow: 75px 75px 100px 0px #072631; +} + +.languages img { + width: 400px; + height: 100%; + border-left: 5px solid #7cd2b0; + border-top-right-radius: 95px; + border-bottom-right-radius: 95px; +} + +.languages_description { + display: flex; + flex-direction: column; + align-items: center; + height: 100%; + width: 100%; +} + +.languages h2 { + display: block; + margin-top: 15px; + font-family: Kdam, sans-serif; + font-size: 50px; + line-height: 1; + color: #FCFCFC; + text-decoration: underline #FCFCFC; +} + +.languages ul { + display: flex; + flex-direction: column; + justify-content: space-evenly; + width: 73%; + margin: auto; + font-family: Abel, sans-serif; + font-size: 42px; + line-height: 80px; + color: #FCFCFC; + list-style-position: inside; +} + +#english { + list-style-image: url("../assets/markers/english.svg"); +} + +#russian { + list-style-image: url("../assets/markers/russian.svg"); +} + +.transition_three { + display: block; + width: 100%; + height: 150px; + margin-top: -2px; + background: linear-gradient(#106482, 50%, #0c4458); +} + +footer { + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + height: 200px; + margin-top: -2px; + font-family: Abel, sans-serif; + font-size: 25px; + line-height: 1; + color: #FCFCFC; + background-color: #0c4458; + list-style-position: inside; +} \ No newline at end of file