Vladislav ushmankin. Portfolio main image

Цей сайт

Детальний опис сайту

На цьому сайті я застосував більшість знань, які я отримав протягом своєї кар'єри. Від адаптивної верстки та розробки дизайну в FIGMA до настройки SEO та SSR

Стек

Angular

Typescript

Sentry

Figma

NestJS

SSR

Відвідати сайт Github

Дизайн

Значна частина часу, який я присвятив цьому проекту, була виділена на створення дизайну.

1.1.

Figma

Розробляючи цей сайт, я вирішив створити свій власний дизайн. Оскільки дизайн не є моїм основним напрямком, я вирішив піти більш простим шляхом. Я зібрав референси більш ніж 50 дизайнів різних сайтів і намагався зрозуміти, що мені в них подобається і чому. На основі зібраних референсів я створив дизайн свого власного сайту.

1.2.

AI Зображення

~90% усіх зображень на цьому сайті, таких як фони, логотип, фотографії, були створені за допомогою Midjourney. Кожне зображення підбиралося з урахуванням стилю сайту і колірних схем.

1.3.

Світла тема сайту

Я вирішив реалізувати зміну кольорової схеми на сайті. Чому б і ні?

SSR

Для сайту було розроблено Server Side Rendering, що забезпечує коректне відображення сайту не тільки для користувачів, але й для ботів, які погано працюють зі скриптами.

Багатомовність

Сайт було адаптовано для 4 мов, у тому числі англійською. Кожна сторінка також коректно відображається у пререндерах з використанням Server Side Rendering.

Адаптивність

Сайт, як на етапі дизайну, так і на етапі розробки, був зосереджений на тому, щоб весь контент був адаптований для всіх популярних пристроїв.

Анімації

Головне, що я хотів зробити на сайті - плавні анімації, які можуть вразити.

5.1.

Безкінечний скролл

Мені дуже сподобалося, як реалізований безкінечний скролл у сучасних популярних додатках на кшталт TikTok, де користувач може постійно скролити вертикально. Вирішив зробити подібне на головних сторінках сайту. На десктопі можна безкінечно скролити вгору або вниз

На головну Portfolio animation demonstration. Vladislav Ushmankin

5.2.

Прилипання блоку на сторінці "детальніше про мене"

Відвідати цю сторінку Portfolio animation demonstration. Vladislav Ushmankin

Це лише пара прикладів анімацій на сайті. Сподіваюся, що ви звернете увагу на інші анімації.

Accessibility

Сайт був адаптований для користувачів з обмеженими можливостями, у тому числі для сліпих, з використанням спеціального синтаксису aria. Ви можете протестувати це, включивши програми для озвучування вмісту сайту. Наприклад, NVDA (для Windows)

Sentry

Для цього сайту я використовував Sentry для моніторингу та виправлення помилок, які виникають у користувачів

Google Tag Manager

Особливу увагу я приділив підключенню метрик на сайті. Я вирішив використовувати GTM

SEO

Велика частина роботи над сайтом займала SEO. Була проведена велика робота з оптимізації з використанням кращих сучасних практик

9.1.

head Title, Description

Заголовок і meta title/description у head динамічно змінюються залежно від того, на якій сторінці знаходиться користувач і на якій мові ця сторінка

9.2.

Семантика

Кожна сторінка створена з використанням семантичної верстки, що позитивно впливає на SEO

9.3.

Sitemap

Для сайту була розроблена sitemap, яка містить посилання на кожну необхідну для SEO сторінку та на кожну її мовну версію

Переглянути sitemap

9.4.

Robots.txt

Розроблений robots.txt, який читають боти

Переглянути robots.txt

9.5.

Schema

Створена schema для кожної сторінки сайту, яка додає контекст для пошукових систем та збільшує ймовірність появи розширених сніпетів

Приклад schema з головної сторінки
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Владислав Ушманкін",
  "jobTitle": "Фронтенд-розробник Angular",
  "url": "https://vladislavushmankin.com",
  "image": "https://vladislavushmankin.com/me.png",
  "workLocation": {
    "@type": "Place",
    "address": "Південна Корея"
  },
  "description": "Досвідчений фронтенд-розробник, спеціаліст з Angular та сучасних веб-технологій, включаючи SSR та оптимізацію SEO.",
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "NeeProgram@gmail.com",
    "telephone": "+7(965)470-60-47",
    "contactType": "customer support",
    "availableLanguage": [
      "Російська",
      "Англійська",
      "Українська"
    ]
  },
  "skills": "Angular, SSR (Server Side Rendering), SEO, GIT, Unit Tests, TypeScript, Анімації, HTML5, CSS4, Адаптивний веб-дизайн",
  "additionalSkills": "Figma, Керівництво, Soft Skills",
  "sameAs": [
    "https://t.me/NeeProgram",
    "https://vk.com/newnee",
    "https://wa.me/89654706047",
    "https://github.com/NeeIt",
    "https://www.linkedin.com/in/vladislav-ushmankin-187088266/"
  ],
  "hasOccupation": [
    {
      "@type": "Occupation",
      "name": "Молодший фронтенд розробник",
      "responsibilities": "Розробка форм, розділів та простих компонентів"
    },
    {
      "@type": "Occupation",
      "name": "Молодший фронтенд розробник",
      "responsibilities": "Розробка розділів, функціоналу та редизайну"
    },
    {
      "@type": "Occupation",
      "name": "Middle фронтенд розробник. Керівник проекту HELLTV.STORE",
      "responsibilities": "Керівництво проектом, розробка функціоналу, покращення SEO та продуктивності проектів"
    }
  ],
  "hasWorkedOn": [
    {
      "@type": "CreativeWork",
      "name": "Цей сайт",
      "description": "На цьому сайті я застосував більшість знань, які я отримав протягом своєї кар'єри. Від адаптивної верстки та розробки дизайну в FIGMA до настройки SEO та SSR"
    },
    {
      "@type": "CreativeWork",
      "name": "CSGOFAST",
      "description": "Популярний сайт для гемблінгу в грі CS:GO, пропонуючи PvP/PvE ігри. Відрізняється своєю безпекою та легітимністю. Включає живий чат для спілкування гравців та забезпечує активну підтримку користувачів."
    },
    {
      "@type": "CreativeWork",
      "name": "HELLTV STORE",
      "description": "Сервіс, який пропонує гравцям можливість відкривати кейси та вигравати шкіри CS:GO/CS2. Користувачі можуть виводити виграші на свій Steam-акаунт. Також доступний режим апгрейду для обміну шкір на більш цінні. Сайт включає реферальну програму та можливість отримання безкоштовних кейсів."
    },
    {
      "@type": "CreativeWork",
      "name": "SCLOUD",
      "description": "Scloud.ru — це сервіс для віддаленої роботи з послугами 1С, призначений для спрощення бухгалтерського обліку та управління бізнесом. Також надає додаткові послуги, включаючи консультації, навчання та IT-супровід."
    },
    {
      "@type": "CreativeWork",
      "name": "KFC - корпоративний портал",
      "description": "Внутрішній портал для співробітників KFC, який забезпечує управління корпоративними ресурсами та бізнес-процесами в організації. Включає інструменти для ведення документації, полегшуючи робочий процес"
    }
  ],
  "award": "Ініціатива щодо переходу веб-сайту на серверний рендеринг (SSR), що істотно покращило SEO та позитивно вплинуло на доходи компанії; Одноосібне керівництво проектом, який отримав високу оцінку від клієнтів та роботодавців за інноваційні рішення та вражаючі результати; Керівництво та наставництво двох молодших колег, сприяння їхньому професійному зростанню та розвитку навичок; Внесок у вдосконалення процесів розробки, підвищення ефективності та якості проектів",
  "hasOccupationalCredential": [
    {
      "@type": "EducationalOccupationalCredential",
      "credentialCategory": "Досвідчений фронтенд-розробник, спеціаліст з Angular та сучасних веб-технологій, включаючи SSR та оптимізацію SEO.",
      "competencyRequired": "Angular, SSR (Server Side Rendering), SEO, GIT, Unit Tests, TypeScript, Анімації, HTML5, CSS4, Адаптивний веб-дизайн"
    }
  ]
}

9.6.

Canonical & alternates

пошукових систем про взаємозв'язки між сторінками.

Приклад для цієї сторінки
<link href="https://vladislavushmankin.com/ru/portfolio" rel="canonical">
<link rel="alternate" hreflang="x-default" href="https://vladislavushmankin.com/portfolio">
<link rel="alternate" hreflang="ru" href="https://vladislavushmankin.com/ru/portfolio">
<link rel="alternate" hreflang="en" href="https://vladislavushmankin.com/portfolio">
<link rel="alternate" hreflang="ja" href="https://vladislavushmankin.com/ja/portfolio">
<link rel="alternate" hreflang="uk" href="https://vladislavushmankin.com/uk/portfolio">

9.7.

Сторінка 404

На сайті є сторінка 404, яка відображається, якщо користувач потрапляє на неіснуючу адресу.

Переглянути сторінку 404

На цій сторінці є пасхалка, яку можна активувати з 5% шансом при відвідуванні.

9.8.

Фавіконки та Тач-іконки

Іконки сайту адаптовані під усі популярні пристрої. Логотип сайту адаптований під більше ніж 20 різних розмірів, що гарантує коректне відображення на всіх популярних пристроях.

Приклади фавіконок та тач-іконок на цьому сайті
<link type="image/x-icon" sizes="57x57" rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon-57x57.ico">
<link type="image/x-icon" sizes="512x512" rel="icon" href="/assets/favicons/android-icon-512x512.ico">

9.9.

Manifest.json

Файл JSON, який містить метадані про веб-додаток, такі як назва, опис, іконки та інші налаштування, що дозволяють веб-додатку функціонувати як нативний додаток на платформі користувача.

Переглянути manifest.json

9.10.

Інше

Окрім вищезазначеного, сайт містить багато інших конфігурацій, які допомагають пошуковим системам краще індексувати цей сайт.

Подяки

Особлива подяка досвідченому тестеру K00pa за грунтовне тестування цього сайту.
Дякую Lupa Niko за творчу допомогу з ідеями для наповнення сайту.
Вдячність друзям за вирішальний внесок у перші тести сайту.