diff --git a/README.md b/README.md index a7ac464..8deacb4 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# rsschool-cv \ No newline at end of file +# rsschool-cv +https://Sollar2022.github.io/rsschool-cv/ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..536c485 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 0000000..33314d0 Binary files /dev/null and b/assets/img/logo.png differ diff --git a/assets/img/photo.jpg b/assets/img/photo.jpg new file mode 100644 index 0000000..dcc3d4b Binary files /dev/null and b/assets/img/photo.jpg differ diff --git a/assets/svg/1.svg b/assets/svg/1.svg new file mode 100644 index 0000000..17f4aec --- /dev/null +++ b/assets/svg/1.svg @@ -0,0 +1,5 @@ + + +1 + + \ No newline at end of file diff --git a/assets/svg/2.svg b/assets/svg/2.svg new file mode 100644 index 0000000..5a3bce4 --- /dev/null +++ b/assets/svg/2.svg @@ -0,0 +1,5 @@ + + +2 + + \ No newline at end of file diff --git a/assets/svg/3.svg b/assets/svg/3.svg new file mode 100644 index 0000000..2ad3a06 --- /dev/null +++ b/assets/svg/3.svg @@ -0,0 +1,5 @@ + + +3 + + \ No newline at end of file diff --git a/assets/svg/4.svg b/assets/svg/4.svg new file mode 100644 index 0000000..ca002f8 --- /dev/null +++ b/assets/svg/4.svg @@ -0,0 +1,5 @@ + + +4 + + \ No newline at end of file diff --git a/assets/svg/5.svg b/assets/svg/5.svg new file mode 100644 index 0000000..79bc0d4 --- /dev/null +++ b/assets/svg/5.svg @@ -0,0 +1,5 @@ + + +5 + + \ No newline at end of file diff --git a/assets/svg/6.svg b/assets/svg/6.svg new file mode 100644 index 0000000..ff880fe --- /dev/null +++ b/assets/svg/6.svg @@ -0,0 +1,5 @@ + + +66 + + \ No newline at end of file diff --git a/assets/svg/rss.svg b/assets/svg/rss.svg new file mode 100644 index 0000000..8484dfc --- /dev/null +++ b/assets/svg/rss.svg @@ -0,0 +1,5 @@ + + +rss + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2fab293 --- /dev/null +++ b/index.html @@ -0,0 +1,162 @@ + + + + CV + + + + + + + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ +
+

Luchko Hennadii

+

Junior Front-End Developer

+
+
+
+

Contacts

+ +
+
+

Summary

+

+ I’m interested in Web Development because this occupation provides endless possibilities for professional growth, besides there’s a huge amount of free high quality resources for self-education and a large community of developers. + I believe, that my ability to learn and to gain new skills will lead me through this path of becoming a proficient Frontend Developer. +

+
+
+

Tech Skills

+
    +
  • + Web-development: HTML5, CSS3, JavaScript +
    • +
  • + Frameworks and libraries: React +
    • +
  • + Version control: GIT, Github +
    • +
  • + Graphics: Figma +
    • +
+
+
+

My strengths

+
    +
  • Quick learner
    • +
  • Full immersion in the essence of the problems
    • +
  • Diligence
    • +
  • Team playing
    • +
  • Punctual
    • +
+
+
+

Soft Skills

+
    +
  • Scrum
    • +
  • Agile
    • +
  • GTD
    • +
  • Teamwork
    • +
+
+
+

Code

+ 
+			  
+function multiply(a, b){
+return a * b
+}
+
+
+

Courses

+
    +
  • + GOIT - HTML+CSS for beginner +
    • +
  • + FreeCodeCamp - Basic HTML, CSS +
    • +
  • + RS Schools Course - JavaScript/Front-end. Stage 0 (in progress) +
    • +
+
+
+

Projects

+ +
+
+

Education

+

National Aerospace University «Kharkiv Aviation Institute»

+
+
+

English

+

A2 - Elementary

+
+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3249a12 --- /dev/null +++ b/styles.css @@ -0,0 +1,407 @@ +:root { + --main-color: #2D826E; + --main-text-color: #16B78F; + --main-white-color: #fff; + --border-bottom-color: #08345D; + --profile-border-color: #98A6AD; + --subtitle-color: #878680; + --primary-background-color: #FCEDBA; +} + +* { + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + display: flex; + flex-direction: column; + justify-content: space-between; + min-width: 320px; + min-height: 100vh; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.5; + color: var(--main-text-color); + background-color: var(--primary-background-color); + } + + .container { + max-width: 1440px; + margin: 0 auto; + min-height: 50px; + } + + .header { + background-color: var(--main-color); + } + + .header-container { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + align-items: center; + } + + .nav-logo { + width: 5vw; + height: 2.5vw; + } + + .logo { + margin-right: 200px; + } + + .nav-list { + display: flex; + justify-content: flex-end; + align-items: center; + list-style: none; + } + + .nav-link { + position: relative; + padding: 0 12px; + text-decoration: none; + font-size: 20px; + font-weight: 300; + line-height: 2.5; + color: var(--main-white-color); + } + + .nav-link::after { + content: ""; + position: absolute; + left: 12px; + bottom: -5px; + width: calc(100% - 24px); + height: 2px; + background-color: var(--main-white-color); + opacity: 0; + transition: .3s; + } + + .nav-link:hover::after { + opacity: 1; + animation-name: slidein; + animation-duration: 1s; + animation-fill-mode: forwards; + } + + @keyframes slidein { + from { + width: 0; + } + to { + width: calc(100% - 24px); + } + } + + .main { + margin-bottom: auto; + } + + .main-container { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .section { + width: calc(50% - 20px); + padding: 10px; + padding-bottom: 35px; + border-bottom: 1px solid var(--border-bottom-color); + } + + .section-title { + margin-bottom: 20px; + font-size: 20px; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 5px; + color: var(--main-color); + } + + .section-profile { + display: flex; + justify-content: space-around; + width: 100%; + padding: 50px 30px 35px; + border-bottom: 8px solid var(--profile-border-color); + } + + .pre { + padding: 5px 50px; + margin: 0; + border: 1px solid var(--main-color); + border-radius: 30px; + background: var(--main-white-color); + color: var(--main-color); + } + + .section-profile-title { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + text-align: center; + text-transform: uppercase; + } + + .main-title { + position: relative; + padding: 0; + margin-bottom: 20px; + color: var(--main-text-color); + font-size: 32px; + font-weight: 300; + letter-spacing: 10px; + line-height: 1.56; + word-spacing: 3px; + } + + .main-title::after { + content: ""; + position: absolute; + bottom: -19px; + left: 50%; + margin-left: -100px; + width: 200px; + height: 2px; + background-color: var(--main-color); + } + + .section-subtitle { + margin-top: 20px; + color: var(--subtitle-color); + font-weight: 400; + font-size: 22px; + line-height: 2.27; + letter-spacing: 2px; + } + + .section-profile-logo { + width: 250px; + height: 250px; + object-fit: cover; + border-radius: 50%; + box-shadow: 0 1px 4px rgba(0, 0, 0, .6); + filter: grayscale(0.2) brightness(1.05); + transition: .3s; + } + + .section-profile-logo:hover { + filter: none; + } + + .section-list { + margin: 0; + padding: 0; + list-style: none; + } + + .section-item { + position: relative; + margin: 0; + margin-bottom: 10px; + padding: 0; + padding-left: 30px; + } + + .section-item::before { + content: ""; + position: absolute; + top: 5px; + left: 2px; + width: 14px; + height: 14px; + background-size: 14px 14px; + background-image: url("assets/svg/6.svg"); + } + + .section-item span { + color: var(--subtitle-color); + } + + .section-item a { + text-decoration: none; + color: var(--subtitle-color); + transition: color 0.5s; + } + + .section-item a:hover { + color: var(--main-text-color); + } + + .contacts-item:before { + content: ""; + position: absolute; + top: 1px; + left: 0px; + width: 24px; + height: 24px; + background-size: contain; + background-repeat: no-repeat; + } + + .contacts-item:nth-child(1):before { + background-image: url("assets/svg/1.svg"); + } + + .contacts-item:nth-child(2):before { + top: 3px; + left: 0px; + width: 21px; + height: 21px; + background-image: url("assets/svg/2.svg"); + } + + .contacts-item:nth-child(3):before { + top: 4px; + left: 0px; + width: 19px; + height: 19px; + background-image: url("assets/svg/3.svg"); + } + + .contacts-item:nth-child(4):before { + top: 3px; + left: 0px; + width: 21px; + height: 21px; + background-image: url("assets/svg/4.svg"); + } + + .contacts-item:nth-child(5):before { + background-image: url("assets/svg/5.svg"); + } + + .section-education, + .section-english { + border-bottom: 0; + } + + .footer { + background-color: var(--main-color); + padding: 20px; + } + + .footer-container { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; + color: var(--main-white-color); + } + + .github { + color: var(--link-color); + text-decoration: none; + line-height: 45px; + } + + .rss { + width: 95px; + height: 35px; + background-image: url("./assets/svg/rss.svg"); + background-size: contain; + background-repeat: no-repeat; + } + + .toggle { + display: none; + flex-direction: column; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + margin-top: 5px; + margin-left: auto; + cursor: pointer; + user-select: none; + z-index: 15; + } + + .toggle div { + width: 80%; + height: 2px; + background: #fff; + margin: 3px 0; + z-index: 15; + } + + .toggle.collapsed .line1 { + transform: rotate(-45deg) translate(-5px, 6px); + } + + .toggle.collapsed .line2 { + opacity: 0; + } + + .toggle.collapsed .line3 { + transform: rotate(45deg) translate(-5px, -6px); + } + + @media (max-width: 1440px) { + .container { + padding: 0 20px; + } + } + + @media (max-width: 768px) { + .section { + width: 100%; + } + .section-profile { + flex-direction: column; + align-items: center; + } + .section-education { + border-bottom: 1px solid var(--border-bottom-color); + } + .footer-container { + flex-direction: column; + align-items: center; + } + .nav { + display: none; + } + .toggle { + display: flex; + } + .nav.collapsed { + position: absolute; + left: 0; + top: 0; + z-index: 2; + display: flex; + width: 100%; + height: 100vh; + min-height: 525px; + flex-direction: column; + background-color: var(--main-color); + } + .nav-list.collapsed { + display: flex; + align-items: center; + justify-content: flex-start; + width: 100%; + height: 100%; + flex-direction: column; + padding-top: 50px; + } + } + + @media (max-width: 410px) { + .main-title { + font-size: 24px; + letter-spacing: 4px; + } + } \ No newline at end of file