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": "Ангуляр, SSR (Server Side Rendering), SEO, GIT, Unit тесты, Typescript, Анимации, HTML5, CSS4, Адаптивная верстка",
  "additionalSkills": "Figma, Руководство, Soft скилы",
  "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": "Junior фронтенд разработчик",
      "responsibilities": "Разработка форм, разделов и простых компонентов"
    },
    {
      "@type": "Occupation",
      "name": "Junior фронтенд разработчик",
      "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": "Ангуляр, SSR (Server Side Rendering), SEO, GIT, Unit тесты, Typescript, Анимации, HTML5, CSS4, Адаптивная верстка"
    }
  ]
}

9.6.

Canonical и alternates

Для каждой страницы сайта устанавливаются 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.

Favicons & Touch icons

Иконки сайта адаптированы под все популярные устройства. Логотип сайта адаптирован под более чем 20 различных размеров, что гарантирует корректное отображение на всех популярных устройствах

Примеры favicons и touch icons на этом сайте
<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 за вклад в разработку концепций контента сайта.
Благодарю друзей за помощь в первых тестах сайта.