diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ab561f3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5fd356f --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# Logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Directories +.vscode/* +.idea +logs +node_modules +dist +dist-ssr + +# Files +*.local +!.vscode/extensions.json +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md deleted file mode 100644 index 5c5d8b8..0000000 --- a/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# rsschool-cv -**Preview:** https://quiddlee.github.io/rsschool-cv \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/cv.md b/cv.md deleted file mode 100644 index 0e89842..0000000 --- a/cv.md +++ /dev/null @@ -1,36 +0,0 @@ -# **Bogdan Scherbina** | **Frontend Developer** - -# **Contact:** -+ **E-mail** **-** bogdanscherbinadev@gmail.com -+ **Telegram** **-** [t.me/quiddle](https://t.me/quiddle) -+ **Tel.** **-** +38 (099)-674-4615 - -# **About** -I enjoy implementing aesthetically pleasing interfaces, and to pay extra attention to details such as animations or UX. - -RS School is the place where i can learn more, practice much more and grow further as a developer, so I am super excited to be part of that event. - -# **Skills** -+ **TypeScript** -+ **JavaScript** -+ **Css** -+ **HTML** -+ **BEM** -+ **Git/GitHub** -+ **VSCode/WebStorm** - -# **Education** -**Donbass State Engineering Academy** -Bachelor's degree, Information systems and technologies -Sept. 2022 - present - -# **Certificates** -+ [Understanding TypeScript](https://www.udemy.com/certificate/UC-38671e3c-a60b-4a6b-b340-15f707d10cb7/) -+ [Modern TypeScript Full course](https://www.udemy.com/certificate/UC-63323c8e-e298-4b0e-aca5-31f8bbd21ee0/) -+ [Advanced JavaScript](https://www.udemy.com/certificate/UC-972d9b88-32b5-414f-8782-4ad0197103e6/) -+ [Advanced CSS and Sass: Flexbox, Grid, Animations and More!](https://www.udemy.com/certificate/UC-9051b2f9-c30a-4d38-b0d4-b860e7abe014/) -+ [HTML/Css Technologies](https://www.udemy.com/certificate/UC-df2abf76-de53-43b0-a630-46e8b1402a7b/) -+ [The EF Standard English Test (EF SET)](https://www.efset.org/cert/2JhWMH) - -# **Languages** -**English** - B2 (Upper Intermediate) \ No newline at end of file diff --git a/font.css b/font.css new file mode 100644 index 0000000..92b83f6 --- /dev/null +++ b/font.css @@ -0,0 +1,7 @@ +@font-face { + font-family: "Google Sans"; + src: url("//fonts.gstatic.com/s/googlesans/v58/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIKln.woff2"), + url("//fonts.gstatic.com/s/googlesans/v58/4Ua_rENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RFD48TE63OOYKtrwEIKln.woff2"); + font-weight: 400; + font-style: normal; +} diff --git a/img/Aw2YEp9Z_2x.jpg b/img/Aw2YEp9Z_2x.jpg deleted file mode 100644 index d88cac3..0000000 Binary files a/img/Aw2YEp9Z_2x.jpg and /dev/null differ diff --git a/img/SVG/mail.svg b/img/SVG/mail.svg new file mode 100644 index 0000000..d258946 --- /dev/null +++ b/img/SVG/mail.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/SVG/phone.svg b/img/SVG/phone.svg new file mode 100644 index 0000000..a8174e5 --- /dev/null +++ b/img/SVG/phone.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/SVG/telegram.svg b/img/SVG/telegram.svg new file mode 100644 index 0000000..60cf930 --- /dev/null +++ b/img/SVG/telegram.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/cv.png b/img/cv.png new file mode 100644 index 0000000..5288da4 Binary files /dev/null and b/img/cv.png differ diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..cf4d0d4 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/icons.svg b/img/icons.svg new file mode 100644 index 0000000..f67d0a6 --- /dev/null +++ b/img/icons.svg @@ -0,0 +1,28 @@ + diff --git a/img/portfolio-preview/SushiSushi.jpg b/img/portfolio-preview/SushiSushi.jpg new file mode 100644 index 0000000..68cf43b Binary files /dev/null and b/img/portfolio-preview/SushiSushi.jpg differ diff --git a/img/portfolio-preview/cinemania-preview.gif b/img/portfolio-preview/cinemania-preview.gif new file mode 100644 index 0000000..d8330a9 Binary files /dev/null and b/img/portfolio-preview/cinemania-preview.gif differ diff --git a/img/portfolio-preview/css-dinner-preview.png b/img/portfolio-preview/css-dinner-preview.png new file mode 100644 index 0000000..22ad884 Binary files /dev/null and b/img/portfolio-preview/css-dinner-preview.png differ diff --git a/img/portfolio-preview/forkify-preview.jpg b/img/portfolio-preview/forkify-preview.jpg new file mode 100644 index 0000000..d75e817 Binary files /dev/null and b/img/portfolio-preview/forkify-preview.jpg differ diff --git a/img/portfolio-preview/graphiql-preview.png b/img/portfolio-preview/graphiql-preview.png new file mode 100644 index 0000000..64bb619 Binary files /dev/null and b/img/portfolio-preview/graphiql-preview.png differ diff --git a/img/portfolio-preview/minesweeper-preview.gif b/img/portfolio-preview/minesweeper-preview.gif new file mode 100644 index 0000000..a619d5d Binary files /dev/null and b/img/portfolio-preview/minesweeper-preview.gif differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..e539fad --- /dev/null +++ b/index.css @@ -0,0 +1,816 @@ +:root { + --color-secondary-light: #f8f8ff; + --color-tertiary-light: #fff; + --color-grey-dark-light: #363636; + --color-grey-lightest-light: #707070; + --switch-icon-light: '🌚'; + + --color-secondary-dark: #0F0F0F; + --color-tertiary-dark: #0A0A0A; + --color-grey-dark-dark: #d0d0d0; + --color-grey-lightest-dark: #a2a2a2; + --switch-icon-dark: '🌞'; + + --color-primary: #ffcc01; + --color-secondary: var(--color-secondary-light); + --color-tertiary: var(--color-tertiary-light); + + --color-grey-dark: var(--color-grey-dark-light); + --color-grey-lightest: var(--color-grey-lightest-light); + --switch-icon: var(--switch-icon-light); + + --color-grey-shadow: #0000004d; + + --theme-switch-width: 6rem; +} + +*, +*::after, +*::before { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; + scroll-behavior: smooth; +} + +.body { + font-family: Google Sans, sans-serif; + font-weight: 400; + line-height: 1.4; + background-color: var(--color-secondary); +} + +.app { + color: var(--color-grey-dark); + font-size: 1.8rem; + background-image: linear-gradient( + to right, var(--color-secondary) 61%, var(--color-tertiary) 10% + ); + + @media only screen and (max-width: 62.5em) { + font-size: 1.5rem; + } + + @media only screen and (max-width: 50em) { + font-size: 1.2rem; + } + + @media only screen and (max-width: 37.5em) { + background-image: none; + background-color: var(--color-tertiary); + } +} + +.mt-3 { + margin-top: 3rem; + + @media only screen and (max-width: 62.5em) { + margin-top: 1.5rem; + } + + @media only screen and (max-width: 50em) { + margin-top: 1rem; + } +} + +.mt-8 { + margin-top: 8rem; + + @media print { + margin-top: 1.3cm; + } + + @media only screen and (max-width: 62.5em) { + margin-top: 6rem; + } + + @media only screen and (max-width: 50em) { + margin-top: 4rem; + } + + @media only screen and (max-width: 37.5em) { + margin-top: 0; + } +} + +.link--secondary { + color: var(--color-grey-dark); +} + +.link { + position: relative; + + &:after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: var(--color-primary); + transform-origin: bottom right; + transition: transform 0.25s ease-out; + } + + &:hover::after { + transform: scaleX(1); + transform-origin: bottom left; + } +} + +.title { + color: var(--color-primary); + font-weight: 700; + text-transform: uppercase; + font-size: 3.5rem; + line-height: 3rem; + letter-spacing: .5rem; + + @media print { + font-size: 22.5pt; + } + + @media only screen and (max-width: 62.5em) { + font-size: 2.5rem; + } + + @media only screen and (max-width: 50em) { + font-size: 2rem; + letter-spacing: .3rem; + } +} + +.theme-switch { + position: absolute; + height: 0; + width: 0; + opacity: 0; +} + +.theme-switch:checked ~ .app { + --color-secondary: var(--color-secondary-dark); + --color-tertiary: var(--color-tertiary-dark); + + --color-grey-dark: var(--color-grey-dark-dark); + --color-grey-lightest: var(--color-grey-lightest-dark); + --switch-icon: var(--switch-icon-dark); +} + +.theme-switch:checked ~ .app .switch-label:before { + /* 2rem - switch width; .6rem - padding left + right*/ + translate: calc(var(--theme-switch-width) - 2rem - .6rem); +} + +.switch-label { + display: flex; + align-items: center; + + padding: .3rem; + + position: absolute; + top: 3rem; + right: 5rem; + + width: var(--theme-switch-width); + height: 3rem; + + cursor: pointer; + background-color: var(--color-primary); + border-radius: 100rem; + font-size: 2rem; + + @media print { + display: none; + } + + @media only screen and (max-width: 50em) { + font-size: 1.2rem; + + width: 4rem; + height: 2rem; + + top: 2.5rem; + right: 7rem; + } + + @media only screen and (max-width: 37.5em) { + right: unset; + top: 2.5rem; + left: 2.5rem; + } + + &:before { + content: var(--switch-icon); + transition: .3s; + } +} + +.navigation__checkbox:checked ~ .navigation__background { + scale: 90; +} + +.navigation__checkbox:checked ~ .navigation__nav { + opacity: 1; + visibility: visible; + width: 100%; +} + +.navigation__checkbox:checked + .navigation__btn .burger-label__icon { + background-color: transparent; +} + +.navigation__checkbox:checked + .navigation__btn .burger-label__icon:after { + top: 1.9rem; + rotate: -135deg; + transition: .5s all cubic-bezier(.23, .45, .18, 1.20); +} + +.navigation__checkbox:checked + .navigation__btn .burger-label__icon:before { + top: 1.9rem; + rotate: 135deg; + transition: .5s all cubic-bezier(.23, .45, .18, 1.20); +} + +.navigation { + .navigation__checkbox { + display: none; + } + + .navigation__nav { + position: fixed; + opacity: 0; + visibility: hidden; + width: 0; + height: 100dvh; + z-index: 200; + transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.75); + + .navigation__list { + display: grid; + justify-items: center; + align-content: center; + gap: 2rem; + + position: absolute; + inset: 0; + margin: auto; + + .navigation__item { + list-style: none; + font-size: 2.3rem; + + .navigation__link, + .navigation__num { + color: var(--color-grey-dark-light); + } + + .navigation__link { + text-decoration: none; + text-transform: uppercase; + margin-left: .5rem; + + &:active { + + } + } + } + } + } + + .navigation__background { + display: none; + position: fixed; + right: 2rem; + top: 2rem; + + border-radius: 100rem; + background-color: var(--color-primary); + scale: 1; + + height: 3rem; + width: 3rem; + + z-index: 100; + transition: all .7s cubic-bezier(0.86, 0, 0.07, 1); + + @media only screen and (max-width: 50em) { + display: unset; + } + } +} + +.navigation__btn { + display: none; + + position: fixed; + top: 1.5rem; + right: 1.5rem; + + width: 4rem; + height: 4rem; + border-radius: 100rem; + z-index: 300; + + background-color: var(--color-secondary); + box-shadow: .1rem .3rem 3.5rem var(--color-grey-shadow); + + .burger-label__icon { + display: block; + height: .16rem; + width: 1.7rem; + background-color: var(--color-primary); + + &:after, + &:before { + content: ''; + display: block; + position: absolute; + height: inherit; + width: inherit; + background-color: var(--color-primary); + transition: .35s all cubic-bezier(.23, .45, .18, 1.17); + } + + &:before { + top: 1.4rem; + } + + &:after { + bottom: 1.4rem; + } + } + + @media only screen and (max-width: 50em) { + display: grid; + justify-content: center; + align-items: center; + } +} + +.container { + position: relative; + display: grid; + grid-template-columns: [main-start] 1fr [main-end aside-start] .6fr [aside-end]; + + max-width: 131rem; + padding: 10rem 5rem; + margin: 0 auto; + column-gap: 15rem; + + background-image: linear-gradient( + to right, var(--color-secondary) 61%, var(--color-tertiary) 10% + ); + + grid-template-areas: + "header image" + "contact image" + "profile aside" + "experience aside" + "certificates ."; + + @media print { + padding: 1.5cm 8mm; + column-gap: 8mm; + + grid-template-areas: + "header image" + "contact aside" + "profile aside" + "experience aside" + "certificates ."; + } + + @media only screen and (max-width: 75em) { + grid-template-columns: [main-start] 1fr [main-end aside-start] .6fr [aside-end]; + column-gap: 7rem; + } + + @media only screen and (max-width: 50em) { + grid-template-columns: [main-start] 1fr [main-end aside-start] .6fr [aside-end]; + column-gap: 3rem; + padding: 7rem 2.5rem; + } + + @media only screen and (max-width: 37.5em) { + grid-template-columns: [main-start] 1fr [main-end]; + grid-template-areas: + "header" + "image" + "contact" + "profile" + "experience" + "aside" + "certificates"; + + justify-content: center; + align-items: center; + gap: 4rem; + background-image: unset; + padding-top: 8rem; + } +} + +.main { + padding: 10rem 5rem; + background-color: var(--color-secondary); + + @media only screen and (max-width: 50em) { + padding: 7rem 3rem; + } +} + +.aside { + display: grid; + margin-left: 2rem; + grid-area: aside; + align-content: start; + + @media only screen and (max-width: 37.5em) { + margin-left: 0; + gap: inherit; + } +} + +.list { + display: grid; + gap: 2rem; + + @media only screen and (max-width: 50em) { + gap: 1rem; + } + + .list__item { + font-weight: 700; + list-style: none; + + &:before { + content: '▪'; + color: var(--color-primary); + margin-right: 2rem; + } + + @media only screen and (max-width: 37.5em) { + &:before { + margin-right: 1.2rem; + } + } + } +} + +.resources { + display: grid; + gap: .5rem; + + .resources__resource { + text-decoration: none; + color: var(--color-grey-lightest); + } +} + +.header { + grid-area: header; + + .header__heading, + .header__surname { + font-size: 5.5rem; + text-transform: uppercase; + line-height: 5.3rem; + max-width: 70rem; + + @media print { + font-size: 26.25pt; + line-height: 8mm; + } + + @media only screen and (max-width: 75em) { + font-size: 3.5rem; + max-width: 50rem; + line-height: 4.4rem; + } + + @media only screen and (max-width: 50em) { + font-size: 2.5rem; + max-width: 30rem; + line-height: 3rem; + } + + @media only screen and (max-width: 37.5em) { + font-size: 2.45rem; + line-height: 2.4rem; + } + } + + .header__sub-heading { + letter-spacing: .7rem; + font-size: 3.5rem; + font-weight: 400; + + @media print { + font-size: 11.25pt; + } + + @media only screen and (max-width: 75em) { + font-size: 2.5rem; + } + + @media only screen and (max-width: 50em) { + font-size: 1.5rem; + letter-spacing: .3rem; + } + } +} + +.contact { + margin-top: 10rem; + display: flex; + align-items: center; + gap: 2.5rem; + + grid-area: contact; + + @media print { + margin-top: -2cm; + } + + @media only screen and (max-width: 62.5em) { + margin-top: 8rem; + } + + @media only screen and (max-width: 50em) { + margin-top: 6rem; + gap: 1.5rem; + } + + @media only screen and (max-width: 37.5em) { + margin-top: 1rem; + } + + .contact__icons { + padding: .5rem 0; + display: grid; + align-items: center; + justify-content: center; + + border: .35rem solid var(--color-primary); + border-radius: 10rem; + + min-width: 3.7rem; + min-height: 11.5rem; + + @media only screen and (max-width: 62.5em) { + min-width: 3.3rem; + min-height: 10rem; + } + + @media only screen and (max-width: 50em) { + border-width: .3rem; + min-width: 2.7rem; + min-height: 8rem; + } + } + + .contact__icon { + max-width: 1.8rem; + max-height: 1.8rem; + + @media only screen and (max-width: 50em) { + width: 1.2rem; + } + } +} + +.profile { + grid-area: profile; +} + +.experience { + grid-area: experience; + + .experience__projects-wrapper { + display: grid; + gap: 2rem; + } + + .experience__project__link { + text-decoration: none; + color: inherit; + } + + .experience__project__description { + margin-top: 1rem; + } + + .experience__project__preview { + margin-top: 3rem; + width: 100%; + border-radius: .6rem; + box-shadow: 0 0 2rem var(--color-grey-shadow); + } + + .minesweeper-image { + width: 50%; + + @media only screen and (max-width: 37.5em) { + width: 60%; + } + } +} + +.certificates { + grid-area: certificates; +} + +.image { + position: relative; + grid-area: image; + + display: flex; + justify-content: center; + align-items: center; + + width: 30rem; + height: 30rem; + + border-radius: 100rem; + border: .5rem solid var(--color-secondary); + + @media print { + width: 5.3cm; + height: 5.3cm; + } + + @media only screen and (max-width: 62.5em) { + width: 20rem; + height: 20rem; + } + + @media only screen and (max-width: 37.5em) { + justify-self: right; + } + + &:before { + content: ''; + + display: block; + position: absolute; + bottom: 3rem; + left: 2rem; + + width: 10%; + height: 10%; + + border-radius: 100rem; + background-color: var(--color-primary); + } + + @media only screen and (max-width: 62.5em) { + &:before { + bottom: 1rem; + } + } + + @media print { + &:before { + bottom: 2.5mm; + } + } + + &:after { + content: ''; + + position: absolute; + border-radius: 10rem; + + right: -2.8%; + bottom: 49.5%; + + width: 1rem; + height: .9rem; + + background-color: var(--color-primary); + } + + @media only screen and (max-width: 62.5em) { + &:after { + width: .5rem; + right: -2.35%; + bottom: 49%; + } + } + + @media only screen and (max-width: 50em) { + &:after { + right: -2.5%; + } + } + + @media only screen and (max-width: 37.5em) { + &:after { + right: -2.6%; + } + } + + @media print { + &:after { + width: 1mm; + right: -1.3mm; + bottom: 49%; + } + } + + .image__semicircle { + position: absolute; + left: -.2rem; + bottom: -.2rem; + + width: inherit; + height: inherit; + + border: 1rem solid var(--color-primary); + border-radius: 100rem; + + clip-path: circle(50% at 100% 0); + + @media only screen and (max-width: 62.5em) { + border: .5rem solid var(--color-primary); + left: -.5rem; + bottom: -.5rem; + } + + @media print { + border: 1.3mm solid var(--color-primary); + left: -1.3mm; + bottom: -1.3mm; + } + } + + .image__rounder { + position: absolute; + top: -.7rem; + right: 47%; + border-radius: 10rem; + + width: 1rem; + height: .9rem; + + background-color: var(--color-primary); + + @media only screen and (max-width: 62.5em) { + width: .5rem; + height: .5rem; + top: -2.5%; + right: 49%; + } + + @media only screen and (max-width: 37.5em) { + top: -.5rem; + } + + @media print { + width: 1.3mm; + height: 1.3mm; + top: -1.37mm; + right: 49%; + } + } + + .image__frame { + display: flex; + justify-content: center; + align-items: end; + + width: 80%; + height: 80%; + + background-color: var(--color-primary); + border-radius: 100rem; + + overflow: hidden; + } + + .image__photo { + width: 70%; + } +} + +.education { + margin-top: 10rem; + + @media only screen and (max-width: 37.5em) { + margin-top: 0; + } + + .education__university__year { + color: var(--color-grey-lightest) + } + + .education__university__degree-major { + font-weight: 300; + } +} diff --git a/index.html b/index.html index e69de29..db9ede1 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,283 @@ + + + + + + + + + + + CV // Bohdan Shcherbyna + + + +
+
+ + +
+ +
+ +
+ + +
+

+ Bohdan Shcherbyna
+ JavaScript developer +

+
+ +
+ + + +
+ +
+

profile

+

I enjoy building interactive web applications with aesthetically pleasing + interfaces, + and with paying extra attention to details such as animations or UX +

+
+ +
+

experience

+ +
+ + + + + + + + + + + +
+
+ + + +
+
+
+
+ CV photo +
+
+ + +
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 0000000..3dcf8ef --- /dev/null +++ b/index.js @@ -0,0 +1,24 @@ +'use strict'; + +const themeSwitchCheckbox = document.getElementById('theme-switch'); +const navigationList = document.querySelector('.navigation__list'); +const navButton = document.querySelector('.navigation__btn'); +const currTheme = localStorage.getItem('theme'); +themeSwitchCheckbox.checked = currTheme === 'dark'; + +function handleThemeSwitchStateSave(e) { + const themeToggler = e.target; + const isThemeToggled = themeToggler.checked; + + localStorage.setItem('theme', isThemeToggled ? 'dark' : 'light'); +} + +function handleCloseNavOnAnchorClick(e) { + const element = e.target; + const isAnchorLink = element?.classList.contains('navigation__link'); + + if (isAnchorLink) navButton.click(); +} + +themeSwitchCheckbox.addEventListener('input', handleThemeSwitchStateSave); +navigationList.addEventListener('click', handleCloseNavOnAnchorClick);