From d26ced4183c6b81f9ed0513eec641315f53d0483 Mon Sep 17 00:00:00 2001 From: Indar Basto Date: Sun, 22 Oct 2023 19:32:35 +0300 Subject: [PATCH 1/3] feat: edit skills section --- index.html | 1226 +++++++++-------- public/i18n/en.json | 13 +- public/i18n/ru.json | 13 +- src/scss/components/education/_education.scss | 5 +- src/scss/components/skills/_skills.scss | 87 +- 5 files changed, 727 insertions(+), 617 deletions(-) diff --git a/index.html b/index.html index 06d2c55..7f34ada 100644 --- a/index.html +++ b/index.html @@ -1,600 +1,734 @@ + + + + + + + + + + + + Indar Basto - Personal Page + - - - - - - - - - - - - Indar Basto - Personal Page - - - -
-
- -

Indar Basto

- - - -
- - -
-
-
-
-
-
-

- Frontend Developer -

-

- My mission is to create web applications that are eye-catching and - easy to use. -

- Profile picture -
-
-
-
-
-

- Hi, I’m Indar. Nice to meet you. -

-

- I create interfaces for web applications and websites using various - technologies such as HTML, CSS, JavaScript, React and many others. I - believe that well-written code should be understandable, modular, - scalable, and easy to maintain. I love working in a team and am - always ready to share my knowledge and experience with colleagues. - If you are looking for an experienced and responsible front-end - developer who is ready to take on any tasks related to creating - interfaces for web applications and websites, then I am ready to - help you implement your ideas and achieve the desired results. -

-
-
-
-
-

Skills

-
-
+ +
+
+
+

+ Frontend Developer +

+

+ My mission is to create web applications that are eye-catching and + easy to use. +

+ Profile picture +
+ +
+ +
+
+
+
+
+

+ Hi, I’m Indar. Nice to meet you. +

+

+ I create interfaces for web applications and websites using various + technologies such as HTML, CSS, JavaScript, React and many others. I + believe that well-written code should be understandable, modular, + scalable, and easy to maintain. I love working in a team and am + always ready to share my knowledge and experience with colleagues. + If you are looking for an experienced and responsible front-end + developer who is ready to take on any tasks related to creating + interfaces for web applications and websites, then I am ready to + help you implement your ideas and achieve the desired results. +

+
+
+
+
+

Skills

+
  • -

    HTML 5 / CSS 3 / SASS

    -
    -
    - -
    -

    80%

    -
    -
    • -
  • -

    Bootstrap

    -
    -
    - -
    -

    40%

    -
    -
    • -
  • -

    Javascript / Typescript

    -
    -
    - -
    -

    60%

    -
    +

    Basic

    +
      +
    • HTML
      • +
    • CSS
      • +
    • JavaScript
      • +
    • TypeScript
      • +
    • SASS/SCSS
      • +
    • PostCSS
      • +
    • BEM
      • +
  • -

    React / React Router

    -
    -
    - -
    -

    60%

    -
    +

    Frontend

    +
      +
    • React
      • +
    • Next.js
      • +
    • React Router
      • +
    • React Query
      • +
    • axios
      • +
    • Redux (Toolkit, Thunks, Saga)
      • +
    • Zustand
      • +
  • -

    React Query

    -
    -
    - -
    -

    20%

    -
    +

    Backend

    +
      +
    • Node
      • +
    • Express.js
      • +
    • NestJS
      • +
    • Swagger
      • +
    • PostgresQL
      • +
    • MySQL
      • +
    • MongoDB
      • +
    • Firebase
      • +
  • -

    Next.JS

    -
    -
    - -
    -

    50%

    -
    +

    UI Kit

    +
      +
    • Bootstrap
      • +
    • Ant Design
      • +
    • Material UI
      • +
    • Mantine UI
      • +
  • -

    Redux / RTK / Saga / Thunks

    -
    -
    - -
    -

    60%

    -
    +

    Deploy

    +
      +
    • Docker
      • +
    • AWS
      • +
    • Apache
      • +
    • Nginx
      • +
  • -

    Zustand

    -
    -
    - -
    -

    40%

    -
    +

    Tests

    +
      +
    • Jest
      • +
    • Vitest
      • +
    • Cypress
      • +
    • React Testing Library
      • +
  • -

    Ant Design / MUI / Mantine UI

    -
    -
    - -
    -

    70%

    -
    +

    Other Tools

    +
      +
    • Git
      • +
    • Webpack
      • +
    • Postman
      • +
    • Vite
      • +
    • Figma
      • +
    • Linux
      • +
-
    -
  • -

    Node.js

    -
    -
    - -
    -

    30%

    -
    -
    • -
  • -

    Express

    -
    -
    - -
    -

    30%

    -
    -
    • -
  • -

    NestJS

    -
    -
    - -
    -

    50%

    -
    -
    • -
  • -

    Swagger

    -
    -
    - -
    -

    70%

    +
    +
+
+
+

Education

+
+
    +
  • +

    2012 - 2016

    +

    + Design and technological support of machine-building industries +

    +
    +
    +
    +

    + Kuban State Technological University +

    +

    + Bachelor's degree in mechanical engineering. Design and + development of equipment for heavy engineering and machine tool + building. +

    • -
  • -

    PostgreSQL / MySQL

    -
    -
    - -
    -

    30%

    +
  • +

    2022 - 2023

    +

    + Frontend Developer +

    + +
    +
    +
    +

    + The Rolling Scopes School +

    +

    + Graduated from the preparatory and basic Frontend (Javascript) + development program. +

    • -
  • -

    MongoDB

    -
    -
    - -
    -

    30%

    +
  • +

    2023

    +

    + React Developer +

    + +
    +
    +
    +

    + The Rolling Scopes School +

    +

    + Graduated from a course on developing interfaces using the React + tool. +

    • -
  • -

    Firebase

    -
    -
    - -
    -

    15%

    +
+
+
+
+
+

Education

+
+
    +
  • + Beautiful Places Project +
    +

    Beautiful Places

    +

    + Find out about the beautiful places on our planet. +

    +
    • -
-
    -
  • -

    Webpack / Vite

    -
    -
    - -
    -

    60%

    +
  • + Songbird +
    +

    Songbird

    +

    + You need to guess the bird by its song. +

    +
    • -
  • -

    Git

    -
    -
    - -
    -

    80%

    +
  • + Songbird +
    +

    Online Store

    +

    + Team project for an electronics store. +

    +
    • -
  • -

    Vitest / Jest

    -
    -
    - -
    -

    70%

    +
  • + Songbird +
    +

    GraphiQL

    +

    + Sandbox team project for GraphQL API queries. +

    +
    • -
  • -

    Cypress

    -
    -
    - -
    -

    50%

    +
  • + School Book +
    +

    School Book (backend)

    +

    + Electronic diary for educational institutions. +

    +
    • -
  • -

    Apache / Nginx

    -
    -
    - -
    -

    25%

    +
  • + Water Status +
    +

    Water Status (Bot)

    +

    + A simple Telegram bot for control (manual) of the state of the + water heater in the house. +

    +
    • -
  • -

    Docker

    -
    -
    - -
    -

    25%

    +
  • + Armageddon +
    +

    Armageddon

    +

    + Learn about approaching asteroids and order their destruction +

    +
    • -
  • -

    AWS (Amazon)

    -
    -
    - -
    -

    35%

    +
  • + Google Books +
    +

    Google Books

    +

    + Online book search service using Google Books API. +

    +
-
-
-
-
-

Education

-
-
    -
  • -

    2012 - 2016

    -

    - Design and technological support of machine-building industries -

    -
    -
    -
    -
    -

    - Kuban State Technological University -

    -

    - Bachelor's degree in mechanical engineering. Design and - development of equipment for heavy engineering and machine tool - building. -

    -
    • -
  • -

    2022 - 2023

    -

    - Frontend Developer -

    - -
    -
    -
    -
    -

    - The Rolling Scopes School -

    -

    - Graduated from the preparatory and basic Frontend (Javascript) - development program. -

    -
    • -
  • -

    2023

    -

    - React Developer -

    +
+
+ See CV (English) +
+ Посмотреть резюме (Русский) +
+
+ + + + + + + diff --git a/public/i18n/en.json b/public/i18n/en.json index 0fc87ce..266314d 100644 --- a/public/i18n/en.json +++ b/public/i18n/en.json @@ -20,7 +20,18 @@ "title": "Hi, I’m Indar. Nice to meet you.", "description": "I create interfaces for web applications and websites using various technologies such as HTML, CSS, JavaScript, React and many others. I believe that well-written code should be understandable, modular, scalable, and easy to maintain. I love working in a team and am always ready to share my knowledge and experience with colleagues. If you are looking for an experienced and responsible front-end developer who is ready to take on any tasks related to creating interfaces for web applications and websites, then I am ready to help you implement your ideas and achieve the desired results." }, - "skills": "Skills", + "skills": { + "title": "Skills", + "subtitle": { + "basic": "Basic", + "frontend": "Frontend", + "backend": "Backend", + "uikit": "UI Kit", + "deploy": "Deploy", + "tests": "Tests", + "tools": "Other Tools" + } + }, "education": { "title": "Education", "university": { diff --git a/public/i18n/ru.json b/public/i18n/ru.json index 231f915..8337140 100644 --- a/public/i18n/ru.json +++ b/public/i18n/ru.json @@ -20,7 +20,18 @@ "title": "Привет, я Индар. Рад приветствовать тебя.", "description": "Я создаю интерфейсы для веб-приложений и сайтов с использованием различных технологий, таких как HTML, CSS, JavaScript, React и многих других. Я считаю, что хорошо написанный код должен быть понятным, модульным, масштабируемым и простым в обслуживании. Люблю работать в команде и всегда готов поделиться своими знаниями и опытом с коллегами. Если вы ищете опытного и ответственного фронтенд-разработчика, готового взять на себя любые задачи, связанные с созданием интерфейсов для веб-приложений и сайтов, то я готов помочь вам реализовать ваши идеи и добиться желаемых результатов." }, - "skills": "Навыки", + "skills": { + "title": "Навыки", + "subtitle": { + "basic": "Базовые", + "frontend": "Фронтенд", + "backend": "Бэкенд", + "uikit": "Дизайн-системы", + "deploy": "Развертывание", + "tests": "Тестирование", + "tools": "Другие инструменты" + } + }, "education": { "title": "Образование", "university": { diff --git a/src/scss/components/education/_education.scss b/src/scss/components/education/_education.scss index cafc478..d44b0e8 100644 --- a/src/scss/components/education/_education.scss +++ b/src/scss/components/education/_education.scss @@ -28,7 +28,7 @@ .education-list { padding: 0; - margin: 120px 0 0; + margin: 95px 0 0; list-style: none; display: flex; justify-content: center; @@ -37,8 +37,7 @@ @include responsive(xs, sm) { flex-direction: column; - margin-top: 70px; - gap: 0px; + gap: 0; } &__item { diff --git a/src/scss/components/skills/_skills.scss b/src/scss/components/skills/_skills.scss index 4256680..afeb846 100644 --- a/src/scss/components/skills/_skills.scss +++ b/src/scss/components/skills/_skills.scss @@ -17,61 +17,24 @@ &__hr { margin-top: 43px; } - - &__wrapper { - margin-top: 143px; - width: 100%; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, auto); - justify-items: center; - gap: 50px; - grid-template-areas: - 'skills-frontend skills-backend' - 'skills-common skills-common'; - @include responsive(xs, sm) { - margin-top: 80px; - gap: 29px; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - grid-template-areas: - 'skills-frontend' - 'skills-backend' - 'skills-common'; - } - } } .skills-list { padding: 0; - margin: 0; + margin: 95px 0 0; list-style: none; - display: flex; - flex-direction: column; - gap: 29px; - width: 100%; - max-width: 531px; - - &:nth-child(1) { - grid-area: skills-frontend; - justify-self: self-end; - } - &:nth-child(2) { - grid-area: skills-backend; - justify-self: self-start; - } - - &:nth-child(3) { - grid-area: skills-common; - } + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 50px; + width: 100%; &__title { margin: 0; - margin-right: 50px; font: $t1; line-height: 30px; text-transform: uppercase; + white-space: nowrap; @include theme-style('theme-light') { color: $light-fc-second; } @@ -80,34 +43,26 @@ &__item { display: flex; flex-direction: column; + gap: 10px; } } -.progress-bar { +.hard-skills { + margin: 0; + padding: 0; + list-style: none; display: flex; - gap: 18px; - align-items: center; - &__container { - width: 100%; - height: 6px; - border-radius: 6px; - overflow: hidden; - @include theme-style('theme-light') { - background-color: $light-pb-color; - } - @include theme-style('theme-dark') { - background-color: $dark-pb-color; - } - } - &__content { - display: block; - height: 100%; + flex-wrap: wrap; + gap: 15px; + + &__item { background-color: $link-active; + padding: 10px; border-radius: 6px; - } - - &__info { - margin: 0; font: $t1; + line-height: 30px; + text-transform: uppercase; + color: $dark-fc-primary; + white-space: nowrap; } -} +} \ No newline at end of file From 53b38c8a9f8f44621d6e2ed3f9cad545359fe9b1 Mon Sep 17 00:00:00 2001 From: Indar Basto Date: Sun, 22 Oct 2023 19:58:29 +0300 Subject: [PATCH 2/3] feat: optimize images --- index.html | 47 +++++++++++++++++-------- src/assets/img/armageddon.png | Bin 71420 -> 0 bytes src/assets/img/armageddon.webp | Bin 0 -> 25504 bytes src/assets/img/beautiful_places.png | Bin 105047 -> 0 bytes src/assets/img/beautiful_places.webp | Bin 0 -> 23794 bytes src/assets/img/google-books.png | Bin 262409 -> 0 bytes src/assets/img/google-books.webp | Bin 0 -> 34282 bytes src/assets/img/grahiql-playground.jpg | Bin 100959 -> 0 bytes src/assets/img/grahiql-playground.webp | Bin 0 -> 20972 bytes src/assets/img/online-store.jpg | Bin 117440 -> 0 bytes src/assets/img/online-store.webp | Bin 0 -> 24660 bytes src/assets/img/profile.webp | Bin 462786 -> 32738 bytes src/assets/img/schoolbook.jpg | Bin 97006 -> 0 bytes src/assets/img/schoolbook.webp | Bin 0 -> 19730 bytes src/assets/img/songbird.jpg | Bin 107219 -> 0 bytes src/assets/img/songbird.webp | Bin 0 -> 21712 bytes src/assets/img/water-status.jpg | Bin 73744 -> 0 bytes src/assets/img/water-status.webp | Bin 0 -> 18186 bytes 18 files changed, 32 insertions(+), 15 deletions(-) delete mode 100644 src/assets/img/armageddon.png create mode 100644 src/assets/img/armageddon.webp delete mode 100644 src/assets/img/beautiful_places.png create mode 100644 src/assets/img/beautiful_places.webp delete mode 100644 src/assets/img/google-books.png create mode 100644 src/assets/img/google-books.webp delete mode 100644 src/assets/img/grahiql-playground.jpg create mode 100644 src/assets/img/grahiql-playground.webp delete mode 100644 src/assets/img/online-store.jpg create mode 100644 src/assets/img/online-store.webp delete mode 100644 src/assets/img/schoolbook.jpg create mode 100644 src/assets/img/schoolbook.webp delete mode 100644 src/assets/img/songbird.jpg create mode 100644 src/assets/img/songbird.webp delete mode 100644 src/assets/img/water-status.jpg create mode 100644 src/assets/img/water-status.webp diff --git a/index.html b/index.html index 7f34ada..02d6099 100644 --- a/index.html +++ b/index.html @@ -221,7 +221,9 @@

Skills