diff --git a/README.md b/README.md index a7ac464..6887030 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# rsschool-cv \ No newline at end of file +https://jaysuno0.github.io/rsschool-cv/ diff --git a/assets/fonts/Inter.ttf b/assets/fonts/Inter.ttf new file mode 100644 index 0000000..cc73944 Binary files /dev/null and b/assets/fonts/Inter.ttf differ diff --git a/assets/img/avatar.jpg b/assets/img/avatar.jpg new file mode 100644 index 0000000..3076164 Binary files /dev/null and b/assets/img/avatar.jpg differ diff --git a/assets/img/cv-icon.svg b/assets/img/cv-icon.svg new file mode 100644 index 0000000..02c1a60 --- /dev/null +++ b/assets/img/cv-icon.svg @@ -0,0 +1,96 @@ + + + + + + + paper + Created with Sketch. + + + + + + + + + + cv + + + + paper + + + + diff --git a/assets/img/rss-logo.svg b/assets/img/rss-logo.svg new file mode 100644 index 0000000..3b80540 --- /dev/null +++ b/assets/img/rss-logo.svg @@ -0,0 +1 @@ +rs_school_js \ No newline at end of file diff --git a/assets/img/skills-images/bem-logo.png b/assets/img/skills-images/bem-logo.png new file mode 100644 index 0000000..35b65f2 Binary files /dev/null and b/assets/img/skills-images/bem-logo.png differ diff --git a/assets/img/skills-images/css-logo.png b/assets/img/skills-images/css-logo.png new file mode 100644 index 0000000..639be8b Binary files /dev/null and b/assets/img/skills-images/css-logo.png differ diff --git a/assets/img/skills-images/git-logo.png b/assets/img/skills-images/git-logo.png new file mode 100644 index 0000000..b452158 Binary files /dev/null and b/assets/img/skills-images/git-logo.png differ diff --git a/assets/img/skills-images/html-logo.png b/assets/img/skills-images/html-logo.png new file mode 100644 index 0000000..d0ab676 Binary files /dev/null and b/assets/img/skills-images/html-logo.png differ diff --git a/assets/img/skills-images/js-logo.png b/assets/img/skills-images/js-logo.png new file mode 100644 index 0000000..660323f Binary files /dev/null and b/assets/img/skills-images/js-logo.png differ diff --git a/assets/img/skills-images/sass-logo.png b/assets/img/skills-images/sass-logo.png new file mode 100644 index 0000000..e663e1c Binary files /dev/null and b/assets/img/skills-images/sass-logo.png differ diff --git a/assets/img/skills-images/webpack-logo.png b/assets/img/skills-images/webpack-logo.png new file mode 100644 index 0000000..49374b2 Binary files /dev/null and b/assets/img/skills-images/webpack-logo.png differ diff --git a/css-components/code-snippet.css b/css-components/code-snippet.css new file mode 100644 index 0000000..3c12280 --- /dev/null +++ b/css-components/code-snippet.css @@ -0,0 +1,68 @@ +/* +Date: 17.V.2011 +Author: pumbur +*/ + +.hljs { + background: #222; +} + +.hljs-subst { + color: #aaa; +} + +.hljs-section { + color: #fff; +} + +.hljs-comment, +.hljs-quote, +.hljs-meta { + color: #444; +} + +.hljs-string, +.hljs-symbol, +.hljs-bullet, +.hljs-regexp { + color: #ffcc33; +} + +.hljs-number, +.hljs-addition { + color: #00cc66; +} + +.hljs-built_in, +.hljs-literal, +.hljs-type, +.hljs-template-variable, +.hljs-attribute, +.hljs-link { + color: #32aaee; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-name, +.hljs-selector-id, +.hljs-selector-class { + color: #5a0416; +} + +.hljs-title, +.hljs-variable, +.hljs-deletion, +.hljs-template-tag { + color: #ca6379; +} + +.hljs-section, +.hljs-doctag, +.hljs-strong { + font-weight: bold; +} + +.hljs-emphasis { + font-style: italic; +} \ No newline at end of file diff --git a/css-components/code.css b/css-components/code.css new file mode 100644 index 0000000..1b1afbd --- /dev/null +++ b/css-components/code.css @@ -0,0 +1,11 @@ +.code-task-text { + margin-bottom: 20px; +} + +.code-code { + padding: 10px; + overflow-x: auto; + border-radius: var(--border-radius); + background: var(--light-gray2); + box-shadow: inset 0px 0px 5px var(--dark-gray); +} \ No newline at end of file diff --git a/css-components/contacts.css b/css-components/contacts.css new file mode 100644 index 0000000..a83a612 --- /dev/null +++ b/css-components/contacts.css @@ -0,0 +1,7 @@ +.contacts-item { + margin: 15px; +} + +.contacts-link { + margin-left: 10px; +} \ No newline at end of file diff --git a/css-components/education.css b/css-components/education.css new file mode 100644 index 0000000..f884ad8 --- /dev/null +++ b/css-components/education.css @@ -0,0 +1,7 @@ +.education-item { + margin: 20px 0; +} + +.education-item a { + margin: 0 10px; +} diff --git a/css-components/footer.css b/css-components/footer.css new file mode 100644 index 0000000..73939cc --- /dev/null +++ b/css-components/footer.css @@ -0,0 +1,24 @@ +.footer { + padding: 30px; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: center; + + font-weight: bold; + color: var(--light-maroon); +} + +.footer-link { + margin: 0 20px; + font-size: 40px; +} + +.rss-logo { + width: 100%; + max-width: 150px; +} + +.footer-year { + font-size: 60px; +} \ No newline at end of file diff --git a/css-components/header.css b/css-components/header.css new file mode 100644 index 0000000..cf033e4 --- /dev/null +++ b/css-components/header.css @@ -0,0 +1,26 @@ +.nav { + position: fixed; + top: 0; + left: 0; + + width: 100%; + display: flex; + justify-content: center; + + background: var(--light-gray); + box-shadow: 0px 0px 10px var(--dark-gray); +} + +.nav-list { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + list-style:none; +} + +.nav-list-item { + padding: 16px 0px; + margin: 0px 20px; +} \ No newline at end of file diff --git a/css-components/profile.css b/css-components/profile.css new file mode 100644 index 0000000..24e0186 --- /dev/null +++ b/css-components/profile.css @@ -0,0 +1,64 @@ +.section.profile { + width: 100%; + max-width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +.profile-title { + font-size: 40px; + color: var(--dark-maroon); +} + +.profile-wrapper { + width: 35%; +} + +.profile-occupation { + margin: 20px 0px; + font-weight: bold; +} + +.profile-avatar { + width: 100%; + max-width: 300px; + margin: 10px 0px; + border-radius: var(--border-radius); +} + +.profile-text-wrapper { + width: 65%; + padding: 20px; + text-align: justify; +} + +.profile-text { + margin: 15px 0px; +} + +.profile-strengths-wrapper { + width: 100%; + margin-top: 20px; + padding: 20px; + border-radius: var(--border-radius); + background-color: var(--light-gray2); + box-shadow: inset 0px 0px 5px var(--dark-gray); +} + +.profile-strengths-title { + text-align: center; +} + +.profile-strengths-list { + width: 100%; + display: flex; + justify-content: space-evenly; + font-weight: bold; + font-size: 22px; +} + +.profile-strengths-item { + color: var(--dark-maroon); +} \ No newline at end of file diff --git a/css-components/projects.css b/css-components/projects.css new file mode 100644 index 0000000..6738e68 --- /dev/null +++ b/css-components/projects.css @@ -0,0 +1,3 @@ +.projects-item { + margin: 30px 0px; +} \ No newline at end of file diff --git a/css-components/skills.css b/css-components/skills.css new file mode 100644 index 0000000..200444c --- /dev/null +++ b/css-components/skills.css @@ -0,0 +1,25 @@ +.skills-list { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + align-items: flex-end; + list-style: none; +} + +.skills-list-item { + width: 12%; + text-transform: uppercase; + text-align: center; + cursor: pointer; +} + +.skills-list-item:hover .skills-logo{ + transform: rotateZ(20deg); +} + +.skills-logo { + max-width: 60%; + margin-bottom: 10px; + transition: 200ms; +} diff --git a/cv.md b/cv.md new file mode 100644 index 0000000..723db04 --- /dev/null +++ b/cv.md @@ -0,0 +1,77 @@ +### Daniil Kochkin +Junor frontend developer + +*** + +#### Contacts ++ telegram: [JaySun0](https://t.me/jaysun0) ++ discord: [JaySun0](https://discordapp.com/users/919525421001879582/) ++ email: jaysun0@yandex.ru + +*** + +#### About me +Hello! +I am 25 years old and the last 5 years I was trying to become a part of many different activities. Half of that time I was a student of the Institute of foreign languages in PetrSU (Petrozavodsk State Univercity). My english developed to a pretty good level there, but I understood that languages and pedagogy is not the way I want to go. As I left the University I tried plenty of different occupations, but most of them were able to hold my interest only for a couple of months. The situation changed with programming. A couple of years passed since I wrote my first "Hello World!". And it's great to understand that the deeper I go inside programming the more it interests me. I have a list of small "pet-rojects" and I got no "real work experience", but very eager to obtain it and of course "to help a world to become a better place". + +**strengths**: ++ diligent ++ reliable ++ honest + +**skills**: ++ HTML ++ CSS ++ JS ++ Git ++ BEM + +*** + +#### Code example: +[**Task from codewars**](https://www.codewars.com/kata/554b4ac871d6813a03000035): In this little assignment you are given a string of space separated numbers, and have to return the highest and lowest number. + +**my solution**: +```js +function highAndLow(dat){ + let strNumb = dat.split(' '); + strNumb.sort((a, b) =>{ + return a-b; + }).reverse(); + + return strNumb[0].concat(` ${strNumb[strNumb.length - 1]}`); +} +``` + +*** + +#### Work exprerience: +I have no work experience yet, but I try as hard as possible to simulate it while studying :) + +*** + +#### Education: +**Rolling Scopes Sсhool** ++ [RS School. Курс JS/Frontend-разработка. Подготовительный этап](https://github.com/rolling-scopes-school/tasks/tree/master/stage0) + +**Code Basics**: ++ [HTML](https://ru.code-basics.com/languages/html) ++ [CSS](https://ru.code-basics.com/languages/css) ++ [JS](https://ru.code-basics.com/languages/javascript) + +**Udemy** ++ [HTML, CSS](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/) ++ [JS](https://www.udemy.com/course/the-complete-javascript-course/) + +**PetrSU**: +* [foreign languages faculty](https://petrsu.ru/structure/450/institutinostrannykh) (2.5 years) + +*** + +#### English +**B1-B2** (upper-intermediate) +[IELTS](https://ielts.ru/) overall score: **7.0** + +*** + +_Thanks for your time!_ diff --git a/index.html b/index.html new file mode 100644 index 0000000..40f14eb --- /dev/null +++ b/index.html @@ -0,0 +1,272 @@ + + + + + + + + + + + CV | Daniil Kochkin + + +
+
+ +
+ +
+
+
+

Daniil Kochkin

+

Junor frontend developer

+ authors-photo +
+ +
+

+ Hello!
+ I am 25 years old and the last 5 years I was trying to become a part of many different activities. Half of that time I was a student of the Institute of foreign languages in PetrSU (Petrozavodsk State Univercity). My english developed to a pretty good level there, but I understood that languages and pedagogy is not the way I want to go. +

+ +

+ As I left the University I tried plenty of different occupations, but most of them were able to hold my interest only for a couple of months. The situation changed with programming. A couple of years passed since I wrote my first "Hello World!". And it's great to understand that the deeper I go inside programming the more it interests me. +

+ +

+ I have a list of small "pet-rojects" and I got no "real work experience", but very eager to obtain it and of course "to help a world to become a better place". +

+
+ +
+

strengths

+
    +
  • +

    diligent

    +

  • +
  • +

    reliable

    +

  • +
  • +

    honest

    +

  • +
+
+
+ +
+

contacts

+
    +
  • +

    telegram: JaySun0

    +
  • +
  • +

    discord: JaySun0

    +
  • +
  • +

    email: jaysun0@yandex.ru

    +
  • +
+
+ +
+

skills

+ +
+ +
+

code example

+ task from codewars: +

Write a "nouveau" function that replicates all the behavior of the new operator.

+
+              
+function nouveau(Constructor, ...args) {
+  let obj = Object.create(Constructor.prototype);
+  const constructorResult = Constructor.apply(obj, args);
+
+  if (constructorResult && (typeof constructorResult === 'object' || typeof constructorResult === 'function')) obj = constructorResult;
+  
+  return obj;
+}
+            
+
+ +
+

projects

+
    +
  • + YouTube Bot +

    Telegram Bot to download from YouTube.

    +
  • +
  • + ownview +

    Simple way to create image gallery online.

    +
  • +
  • + memory cards +

    Cards-game to train your memory.

    +
  • +
  • + app to learn english +

    Textbook with more than 3500 popular words, 2 interesting "word-training" games and statistics.

    +
  • +
  • + shop-laptop +

    Simple online store to train different types of filtering and also TypeScript, Webpack and Sass.

    +
  • +
  • + seamige +

    Image search with inbuilt gallery and option to download images.

    +
  • +
  • + ccanvass +

    Web-page demonstrating <canvas> element possibilities.

    +
  • +
  • + hidee +

    Simple way to ecncrypt your messages.

    +
  • +
  • + sssnake +

    Snake game.

    +
  • +
  • + audio-player +

    Custom web audio-player.

    +
  • +
  • + portfolio +

    Personal web-page for a photographer.

    +
  • +
  • + keyboard +

    Custom virtual keyboard.

    +
  • +
  • + bike-shop +

    Static webpage to train css-grid.

    +
  • +
  • + stop-cube +

    Simple reaction game.

    +
  • +
  • + btn-mob +

    Examples of simple buttons' designs with css-code snippets.

    +
  • +
  • + click pick +

    Small app to learn english words with cards.

    +
  • +
+
+ +
+

education

+ +
+
+ + +
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..5afd607 --- /dev/null +++ b/style.css @@ -0,0 +1,321 @@ +/***** GENERAL STYLES *****/ +@import url('css-components/header.css'); +@import url('css-components/profile.css'); +@import url('css-components/contacts.css'); +@import url('css-components/skills.css'); +@import url('css-components/code.css'); +@import url('css-components/code-snippet.css'); +@import url('css-components/projects.css'); +@import url('css-components/education.css'); +@import url('css-components/footer.css'); + +@font-face { + font-family: Inter; + src: url("assets/fonts/Inter.ttf"); +} + +:root { + --border-radius: 7px; + /* colors */ + --light-gray: #cdcdcd; + --light-gray2: #b0b0b0; + --gray1: #888888; + --gray2: #666666; + --dark-gray: #333333; + --dark-maroon: #5a0416; + --light-maroon: #f27590; +} + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + scroll-behavior: smooth; +} + +body { + font-size: 20px; + font-family: Inter, sans-serif; + word-spacing: 4px; + background: linear-gradient(var(--gray1), var(--gray2)); +} + +a { + text-decoration: none; + font-weight: bold; + font-size: 22px; + color: var(--dark-maroon); +} + +a:hover { + color: var(--light-maroon); +} + +h2 { + margin-bottom: 20px; +} + +.container { + width: 80%; + max-width: 1200px; + margin: 0px auto; + padding: 100px 0px 20px 0px; +} + +.main { + width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; +} + +.section { + width: 80%; + max-width: 95%; + margin: 30px 0px; + padding: 40px 80px 60px 80px; + + border-radius: var(--border-radius); + background-color: var(--light-gray); + box-shadow: 7px 7px 12px var(--dark-gray); +} + +.section-title { + text-align: center; + margin-bottom: 40px; +} + +.right-side-section { + align-self: flex-end; +} + +.code-code .hljs { + background: var(--gray); +} + +/***** MEDIA QUERIES *****/ +@media screen and (max-width: 1300px){ + + .skills-list-item { + width: 25%; + } +} + +@media screen and (max-width: 1200px){ + + .profile-wrapper { + width: 40%; + } + + .profile-text-wrapper { + width: 60%; + padding-right: 0px; + } + +} + +@media screen and (max-width: 1100px) { + .container { + width: 90%; + } + + .profile-wrapper { + width: 100%; + + display: grid; + grid-column-gap: 40px; + grid-template-columns: 200px 1fr; + grid-template-rows: repeat(5, 1fr); + } + + .profile { + display: flex; + flex-direction: column; + } + + .profile-avatar { + width: 100%; + max-width: 200px; + grid-row: 1/6; + grid-column: 1/2; + border-radius: var(--border-radius); + } + + .profile-title { + grid-row: 2 / 3; + align-self: end; + } + + .profile-occupation { + grid-row: 3 / 4; + } + + .profile-text-wrapper { + width: auto; + padding: 10px 0px; + text-align: justify; + } + + .profile-strengths-list { + align-items: center; + } + .profile-strengths-item { + margin: 10px 0; + } + + .skills-logo { + max-width: 70%; + margin-top: 10px; + } + +} + + +@media screen and (max-width: 800px) { + .section { + width: 90%; + padding: 40px 50px 60px 50px; + } + + .profile-strengths-list { + flex-direction: column; + } +} + +@media screen and (max-width: 700px) { + + .nav-list-item { + padding: 10px 5px; + margin: 0px 5px; + } + + .nav-list-item a { + font-size: 18px; + } + + .profile-wrapper { + grid-column-gap: 40px; + grid-template-columns: 150px 1fr; + grid-template-rows: repeat(2, 1fr); + } + + .profile-avatar { + max-width: 150px; + grid-row: 1/3; + } + + .profile-title { + grid-row: 1 / 2; + } + + .profile-occupation { + grid-row: 2 / 3; + } + +} + +@media screen and (max-width: 600px) { + .section { + max-width: 100%; + width: 100%; + padding: 20px; + } + + .contacts-list { + padding-left: 20px; + } + + .education-list{ + list-style: none; + text-align: center; + } + + .education-item p { + margin: 20px 0px; + display: flex; + flex-flow: wrap column; + align-items: center; + } + + .projects-list { + list-style: none; + } +} + +@media screen and (max-width: 450px) { + body { + font-size: 18px; + } + + .nav-list { + width: 70%; + } + + .nav-list-item { + padding: 5px; + } + + .profile-wrapper { + display: flex; + flex-flow: column wrap; + align-items: center; + text-align: center; + } + + .profile-avatar { + max-width: 80%; + } + + .profile-title { + align-self: center; + } + + .profile-text-wrapper { + text-align: left; + } + + .contacts { + display: flex; + flex-flow: wrap column; + align-items: center; + } + + .contacts-item { + width: 100%; + } + + .skills-list { + justify-content: center; + align-items: center; + gap: 10px; + } + + .skills-list-item { + display: inline-block; + width: 45%; + font-size: 22px; + text-transform: uppercase; + text-align: center; + } + + .footer { + gap: 10px; + flex-direction: column; + } +} + +@media screen and (max-width: 350px) { + body { + font-size: 16px; + } + + .contacts-list { + padding: 0px; + list-style: none; + } + + .nav-list { + width: 90%; + } +}