Александра Кан

JS (ES6), HTML5, CSS3, TypeScript, Sass, семантическая верстка, npm, Webpack, Node.js, Express, Koa, WebSocket, SSE, Jest, Cypress, Figma, Photoshop, ООП, REST API/RESTful API, CRUD, Git, GitHub

Noemi Test Site Adaptive

Адаптивная главная страница блога, реализованная на чистом HTML5 и CSS3.

Проект включает поддержку трёх размеров экранов:

- Desktop (≥1200px)

- Tablet (768–1199px)

- Mobile (≤768px)

Особенности:

- Адаптивная верстка с использованием Flexbox.

- Подключение кастомных шрифтов через.

- Использование медиазапросов для разных размеров экранов.

- Чистая семантическая HTML-разметка.

- Организация стилей с разделением на несколько CSS-файлов для удобства поддержки.

- Стили и структура повторяют макеты в PSD.

Цель проекта: отработка навыков адаптивной верстки, работы с медиа-запросами и стилизации элементов интерфейса без использования JavaScript. Мой второй по счету проект верстки.

Creativia Non-Adaptive

Неадаптивный лендинг для несуществующей компании "Creativia", реализованный на HTML5 и SCSS.

Структура проекта включает модульное разделение стилей по компонентам: header, main, common.

Особенности:

- Использование SCSS с переменными, миксинами и вложенными селекторами для удобства поддержки и повторного использования кода.

- Кастомные интерактивные вкладки с анимацией, реализованные средствами CSS (radio buttons + content toggle).

- Чистая семантическая HTML-разметка.

- Стили и структура повторяют предоставленный PSD-макет.

Цель проекта: освоение SCSS, организация стилей в модульной структуре и создание интерактивных элементов без использования JavaScript. Мой первый опыт работы с SCSS.

Test Express Serve

Прототип системы управления тикетами (helpdesk) с клиентской частью на HTML5/CSS3 и серверной на Node.js/Express, с использованием Webpack для сборки.

Особенности:

- Серверная часть реализована на Express с REST API для получения, создания, редактирования и удаления тикетов.

- Использование Node.js и npm-зависимостей для сборки и запуска проекта (Webpack, Babel, CSS/Style loaders).

- Клиентская часть отображает список тикетов, позволяет создавать, редактировать и удалять записи через API-запросы.

- Голый HTML и CSS3 для верстки интерфейса тикетов.

- Хранение данных в локальном JSON-файле, реализация работы с ним на сервере.

Цель проекта: практика работы с Node.js и Express, построение REST API, интеграция фронтенда с серверной частью и базовое взаимодействие с данными без использования полноценной базы данных.

WebSocket Chat Express

Реализация онлайн-чата с использованием Node.js (Express) и WebSocket.
Проект включает регистрацию пользователей, отображение списка подключенных и обмен сообщениями в реальном времени.

Особенности:
- Реализация регистрации с резервированием никнейма на 1 час.
- Генерация случайного аватара для нового пользователя.
- Динамическое отображение подключенных пользователей.
- Поддержка отправки и получения сообщений через WebSocket.
- Чистая верстка на HTML и CSS3, без использования JS-фреймворков.
- Деплой проекта на Render (ссылка).

Цель проекта: отработка навыков работы с WebSocket и организации взаимодействия клиента с сервером в реальном времени, а также управление состоянием пользователей на сервере.

SSE Translation Widget

Онлайн-трансляция событий футбольного матча с использованием Server-Sent Events (SSE). Клиент получает сообщения от сервера в реальном времени, отображаемые в виде чата.

Особенности:

- Сервер реализован на Koa, поддержка SSE.

- Клиентская часть на HTML и CSS, динамическое обновление сообщений.

- Использование событий start, action, freekick, goal и finish для визуализации разных типов событий.

- Автоматическая прокрутка чата по мере поступления новых сообщений.

- Простая и чистая верстка виджета.

Цель проекта: изучение принципа работы SSE для односторонней передачи данных от сервера к клиенту, а также отображение потоковой информации в веб-интерфейсе.