Чому зі мною вигідно співпрацювати?

  • Відношуся відповідально до роботи

    Я розумію важливість проекту для замовника. Докладаю максимум зусиль для кращої реалізації.

  • Дотримуюся термінів

    Я ціную час замовника. Дотримуюсь балансу між швидким виконанням роботи і хорошим кодом.

  • Пишу грамотний та якісний код

    Будь-який інший розробник зможе розширити функціонал із незначними змінами в моєму коді.

  • Роблю адаптивну верстку

    Сайт, який я для вас зроблю, буде чудово виглядати як на ноутбуці, так і на планшеті / смартфоні.

  • Верстаю прості та складні сайти по макету

    Мій досвід дозволяє якісно верстати незалежно від складності вашого макета.

  • Не використовую конструктори

    Мій код чистий, гнучкий і не прив'язаний до будь-якої програми чи сайту.

Мої сертифікати

Мої роботи

  • скріншот сайту Новомосковської районної лікарні

    Перейти на сайт

    Лендінг для районної лікарні

    Дизайн та верстка сайту повністю зроблені мною.

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

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

    Технології: HTML, CSS, Bootstrap 4, JQuery

  • Лендінг з продажу підвісок для дельтапланеристів

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

    Я переписала головну сторінку та зробила адаптацію під різні пристрої. Впровадила обробку даних від користувача при виборі товару та можливість надсилати заповнені дані на e-mail власника.

    • Сайт складається із десяти блоків,
    • має адаптивне меню та плавний скрол при виборі його пунктів,
    • включає форму зворотного зв'язку в модальному вікні,
    • форму замовлення на окремій сторінці,
    • використовується інтерактивна взаємодія з картинкою SVG через JQuery у формі замовлення,
    • є 9 незалежних слайдерів з різними налаштуваннями.

    Технології:: HTML, CSS, ВЭМ, JavaScript, JQuery, PHP

    скріншот сайту підвісок для дельтапланеристів

    Перейти на сайт

  • скріншот сайту блогу Головоломки зі сірниками

    Перейти на сайт

    Блог "Головоломки з сірниками" на Wordpress

    Це мій сайт, який я створила з нуля на движку Wordpress у 2012 році. Досі я регулярно наповнюю його контентом і є адміністратором цього сайту. До 2023 року сайт мав адресу spichca.ru

    Під час ведення даного блогу я сама змінювала дизайн та робила сайт адаптивним.

    Також вирішувала ряд завдань, пов'язаних із встановленням плагінів, захисту від злому адмінки, впровадженням шматочків коду всередині статей, правильним підключенням додаткових скриптів, фільтрації коментарем за критерієм спаму і т.д.

    • Сайт має адаптивне меню,
    • пости з частково прихованою інформацією, яку можна побачити після натискання на кнопку,
    • є пост із тестом, який обробляється власним скриптом без перезавантаження сторінки,
    • кілька постів із номерами відповідей, при натисканні на які запускається модальне вікно з рішенням,
    • є зручний пошук по сайту та форма зворотного зв'язку.

    Технології: HTML, CSS, JavaScript, JQuery, PHP, Wordpress

  • Блог із віршами

    Це ще один мій блог без використання готової CMS, самописний на PHP і зберіганням даних в mySQL. Його я також створювала сама з нуля (у тому числі дизайн) і зараз регулярно наповнюю контентом.

    Спочатку верстка була написана на таблицях у 2009 році. Потім переписана з використанням технології float і зараз застосовані flex-box технології.

    • Сайт має слайдер на головній сторінці,
    • при натисканні на кнопку "Читати ще...", показується випадковий вірш із бази даних,
    • є пошук за віршами, форма підписки,
    • можливість фільтрації віршів за роками та темами,
    • форма зворотного зв'язку із захистом від спаму.

    Технології: HTML, CSS, JavaScript, JQuery, PHP, mySQL

    скріншот сайту сучасних віршів від Вікс

    Перейти на сайт

  • скріншот сайту до фільму Відьмак

    Перейти на сайт

    Лендінг до серіалу Відьмак

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

    У ході верстки застосовувалися сучасні технології, зокрема flex-box.

    • Сайт має адаптивне меню,
    • при натисканні на кнопку "дивитися трейлер" або кнопку з червоним трикутником з'являється модальне вікно, в якому можна дивитися відео трейлера,
    • є адаптивний слайдер з перемиканням між інформацією про серії,
    • за допомогою плагінів налаштовано плавну появу деяких елементів на сторінці після завантаження,
    • є невелика анімація.

    Технології: HTML, CSS, JavaScript, JQuery

  • Замовлення їжі в Delivery Food

    Це навчальний проект. Спочатку був наданий сайт, написаний на чистому HTML та CSS та файл у форматі json з даними про товари та ресторани. В ході навчання з використанням чистого JavaScript було створено SPA додаток на замовлення їжі.

    На головній сторінці підтягуються дані ресторанів. Щоб зробити замовлення, необхідно авторизуватись. Є перевірка на заповнення поля Логіна.

    Після авторизації можна вибрати будь-який ресторан, після чого завантажаться дані про товари у ньому. При натисканні на кнопку "У кошик" вибрані страви додаються до кошика. Дані про неї можна переглянути при натисканні на кнопку "Кошик" у верхній частині сайту.

    Щоб перейти до іншого ресторану, потрібно натиснути кнопку логотипу "Delivery Food" і вибрати його. Також на головній сторінці є пошук по стравах з написом у полі "Пошук страв та ресторанів".

    При виклику кошика з'являється список вибраних страв. Кількість продуктів можна змінювати, після чого автоматично перераховується сума замовлення.

    Дані про замовлення прив'язані до авторизованого користувача.

    Також впроваджено та налаштовано слайдер на головній сторінці.

    Технології: HTML, CSS, JavaScript, JSON

    скріншот сайту Delivery Food

    Перейти на сайт

  • скріншот сайту з пошуку серіалів

    Перейти на сайт

    Сайт з інформацією про серіали

    Це навчальний проект. Спочатку були надані файли HTML та CSS зі статичною версткою.

    Під час навчання було реалізовано динамічний доступ до відкритих даних (API) та їх обробку за допомогою чистого JavaScript.

    • На сайті можна шукати фільми за назвою,
    • є меню, через яке можна отримати дані про серіали за такими критеріями, як топ/популярні та нові епізоди сьогодні/за тиждень,
    • при натисканні на серіал, з'являється модальне вікно з детальною інформацією про фільм і трейлер,
    • при очікуванні завантаження даних, з'являється прелоадер.

    Технології: HTML, CSS, JavaScript, REST API

  • Лендінг для фільму "Мисливці за привидами: Спадкоємці"

    Це навчальний проект. З макета у програмі Figma було реалізовано статичний адаптивний сайт.

    • На сайті для верстки використовується технологія flex-box,
    • є адаптивне меню,
    • при натисканні на кнопку "Подивитися трейлер" запускається модальне вікно з трейлером,
    • у другому блоці є перемикання між "Актори" та "Творці",
    • у третьому блоці новин на планшетах та смартфонах відображаються через слайдер.

    Технології: HTML, CSS, JavaScript

    скріншот сайту про фільм Мисливці за привидами: Спадкоємці

    Перейти на сайт

  • скріншот сайту гри гонки

    Перейти на сайт

    Гра гонки на чистому JavaScript

    Гра написана з нуля, частина логіки взята з навчального проекту.

    • У грі є три рівні складності,
    • інші машини генеруються випадковим чином,/li>
    • присутня музика під час гри та при зіткненні,
    • керувати машиною можна за допомогою стрілок на клавіатурі, а також за допомогою кнопок на екрані для планшетів та смартфонів,
    • найкращий результат гри відображається зліва внизу і зберігається в даних браузера гравця.

    Технології: HTML, CSS, JavaScript

  • Калькулятор на JavaScript

    Верстка калькулятора виконана за допомогою технології Grid Layout. Стилізація зроблена мною на власний розсуд без макета.

    Обробка натискання клавіш, введення даних та відповідні обчислення виконані на чистому JavaScript.

    • Для введення даних можна використовувати кнопки калькулятора або клавіатуру комп'ютера/смартфона,
    • є можливість зводити число у квадрат і витягувати квадратний корінь,
    • для складних обчислень можна використовувати круглі дужки,
    • є обмеження кількість символів, що вводяться,
    • якщо вираз записано некоректно, то видасть помилку.

    Технології: HTML, CSS, JavaScript

    скріншот сайту калькулятора

    Перейти на сайт

  • скріншот програми To do list

    Перейти на сайт

    Список справ (To do list) на JavaScript

    Це навчальний проект. У форму можна вносити назву та опис завдання. Після натискання на кнопку "Add task" нове завдання додається до поточного списку без перезавантаження сторінки.

    • Є можливість додавати нові завдання та видаляти наявні,
    • можна відзначати поточні завдання як виконані (візуально змінюється фон з білого на сірий),
    • є фільтр для перегляду всіх завдань або тих, які ще не виконані,
    • всі завдання сортуються у зворотному порядку (остання вгорі),
    • є три теми для візуального відображення (перемикання у правому верхньому кутку),
    • Список змінених завдань зберігається в даних поточного браузера і не зникають після його закриття.

    Технології: HTML, CSS, Bootstrap, JavaScript

  • Пошук новин на JavaScript

    Це навчальний проект. Сайт дає змогу отримувати новини з іншого сайту через відкритий API. Усі дії відбуваються без перезавантаження сторінки.

    • Можна шукати новини за категоріями, двома країнами (доступ до новин українською вже платний),
    • працює пошук за введеним словом,
    • для верстки використовується фреймворк Materialize,
    • сайт працює на чистому JavaScript без використання сторонніх бібліотек.

    Технології: HTML, CSS, Materialize, JavaScript, API

    скріншот сайту News App

    Перейти на сайт

Контакти

Отримати безкоштовну порада
на ваш сайт:

Азьомова Вікторія