Ми шукаємо верстальника рівня 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-ї версії, у папці проекту виконайте наступні команди:

npm install
npm run dev

Як це працює

Збірка: Скрипт проходить по сторінках у папці src/pages, знаходить директиви @@include і рекурсивно замінює їх на відповідні HTML-компоненти.
Стилі: Усі CSS-файли автоматично збираються (бандляться) в один спільний файл.
Hot Reload: Скрипт стежить за змінами - після редагування будь-якого файлу сторінка автоматично перезбирається.

Ця техніка дозволяє розбивати складні елементи на простіші та створювати необхідну композицію.

Отже, запущена команда сформує сторінку example.html і розмістить її в папці dst. Перегляньте її або запустіть Live Server. Ви можете додати до компонента listbox кнопку за допомогою директиви @@include('../button/button.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

README.md Unescape Escape

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