# Парт-тайм вакансія: HTML/CSS верстальник (Middle)

Ми шукаємо верстальника рівня **Middle** для створення адаптивних HTML-компонентів.  
Робота віддалена, гнучкий графік, невелике стабільне навантаження.

## Що потрібно робити
- Верстати **адаптивні секції сайтів** (лендинги, промо-блоки, контентні секції).
- Верстати **UI-елементи адмін панелі** — таблиці, компонети, форми, навігаційні елементи, модальні вікна тощо.
- Працювати з існуючими дизайн-макетами або технічним описом компонентів.

## Вимоги
- Володіння **HTML5**, **CSS3**, адаптивної та кросбраузерної верстки.
- Верстка за допомогою **Flexbox**.
- Базові знання **JavaScript** (події, прості скрипти, мінімальні DOM-маніпуляції).
- Акуратність у коді, вміння підтримувати єдиний стиль.
- Досвід роботи з Git.

## Буде плюсом
- Володіння на базовому рівні фреймворком Vue3, або розуміння як пишуться Vue3 компоненти.   
- Розуміння принципів UI/UX.
- Знання основ анімацій у CSS та JavaScript.

## Умови
- Парт-тайм.
- Віддалена робота.
- Оплата погодинна або за компонент.
- Використовуйте AI-інструменти, якщо це прискорює результат.

## Технічні деталі

Ми верстаємо всі сторінки або необхідні нам елементи через компоненти. Верстка компонентів передбачає створення окремої папки та двох файлів: ```[component-name].html``` і ```[component-name].css``` у ній.  Для сторінок діє те саме правило, але папка сторінки повинна містити файл із такою ж назвою. Приклад - сторінка у цьому репозиторії ```src/pages/example.html``` 

Ви можете клонувати цей репозиторій і переглянути технічну реалізацію.

#### Швидкий старт
Якщо у вас встановлена Node.js не нижче 20-ї версії, у папці проекту виконайте наступні команди:
```bash
npm install
npm run dev
```
#### Як це працює

1. Збірка: Скрипт проходить по сторінках у папці ```src/pages```, знаходить директиви ```@@include``` і рекурсивно замінює їх на відповідні HTML-компоненти.

2. Стилі: Усі CSS-файли автоматично збираються (бандляться) в один спільний файл.

3. Hot Reload: Скрипт стежить за змінами - після редагування будь-якого файлу сторінка автоматично перезбирається.
    
Ця техніка дозволяє розбивати складні елементи на простіші та створювати необхідну композицію.

Отже, запущена команда сформує сторінку ```example.html``` і розмістить її в папці ```dst```. Перегляньте її або запустіть Live Server. Ви можете додати до компонента ```listbox``` кнопку за допомогою директиви ```@@include('../button/button.html')``` і переглянути результат:
```HTML
<div class="listbox">
    <ul class="list-container">
        <li class="list-option">New York</li>
        <li class="list-option">Rome</li>
        <li class="list-option list-option-selected">London</li>
        <li class="list-option">Istanbul</li>
        <li class="list-option">Paris</li>
    </ul>
    @@include('../button/button.html')
</div>
```
Якщо такий підхід зрозумілий і вам цікаво - відгукуйтесь, з радістю поспілкуємось!

## Як відгукнутись
Коротко опишіть свій досвід або надайте кілька прикладів верстки / GitHub / портфоліо і надішліть на e-mail vacancy@atmt.me