Мене звати Вікторія
Я Front-end Developer

Мої роботи

• 

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

  EveryBuy - оголошення для всіх

  Це маркетплейс, який я розробляю разом з командою, куди входять дизайнери, frontend та backend розробники, тестувальники.

  Сайт створюється з нуля з використанням сучасного фреймворку Next.js.

  Мій вклад в розробку, як frontend розробника:

  • Верстка головної сторінки згідно оновленому дизайну,
  • в тому числі анімація для плиток з назвами категорій,
  • створення та оформлення сторінки з фільтрами,
  • створення та оформлення сторінки зі списом оголошень для окремого користувача.

  Технології: Next.js, TypeScript, Redux.js, Material UI, SASS, Github, JavaScript, React.js

• Блог для вчителя української літератури Азьомова Віктора

  Сайт був створений на Wordpress та повністю налаштовувався мною з нуля для наповнення інформацією про аналіз різних творів українських письменників і поетів.

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

  Сайт має різні розділи, загальний пошук по сайту, тегі для швидкого пошуку.

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

  

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

• 

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

  Вчимо англійську просто

  Сайт написаний з нуля на сучасному фреймворку Next.js.

  На ньому зібрані слова та фрази для вивчення англійської шляхом постійного повторення.

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

  Тому мета цього сайту, щоб слова були натреновані до автоматизму і легко згадувались, коли це потрібно.

  Функціонал включає наступне:

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

  Технології: Next.js, TypeScript, Tailwind UI, SASS, Github, React.js

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

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

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

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

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

  

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

• 

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

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

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

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

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

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

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

  Це простий лендінг з основною інформацію про фільм, який зверстаний на основі макету (Figma) та має адаптацію під різні пристрої.

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

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

  

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

• 

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

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

  На основі макету у Figma створений цей простий лендінг для фільму з адаптацією під різні пристрої.

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

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

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

• Магазин з продажу одягу та взуття

  Цей сайт створений, як приклад, для інтернент-магазину з невеличким асортиментом товарів і простим функціоналом.

  Тут є наступний можливості:

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

  Проект зроблений з нуля з використанням JavaScript, не має систему управління сайтом.

  Дані про товари вносятся в текстовий файл.

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

  

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

• 

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

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

  Це приклад сайту для мережі невеличких ресторанів, кожен з яких може мати своє окреме меню.

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

  В самому кошику можна змінити кількість товару або зменшити до нуля і страва зникне зі списку. Кнопка "Скасувати" прибирає всі вибрані позиції із замовлення. Також можна вийти зі свого акаунту.

  Всі данні про ресторани та список страв зберігаються у текстових файлах.

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

• Прості ігри для дітей та дорослих

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

  Ігри легко запускаються і потребують лише підключення до інтернету, написані на чистому JavaScript.

  Зараз на сайті є:

  • корисні ігри для дітей для вивчення букв і складів,
  • меморі - для тренуванням пам'яті,
  • п'ятнашки та хрестики-нулики для тренування логіки,
  • керування літачком для тренування реакції.

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

  

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

• 

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

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

  Цей сайт містить інформацію про фільми та серіали на основі відкритих даних (API).

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

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

• Калькулятор доходів та витрат

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

  Данні можна вводити без реєстрації та авторизації.

  Любі витрати та доходи можна видалити (при наведені з'являється хрестик).

  Всі данні зберігаються в пам’яті браузера, на якому відкритий сайт. Тому після чистки кешу, данні можуть зникнути.

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

  

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

• 

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

  Блог "Головоломки з сірниками" на 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

  

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

• 

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

  Радіо в браузері без реклами

  На цьому сайті є кілька станцій радіо, які можна слухати без реклами.

  Внизу екрану є панель для управляння, за допомогою якої можна:

  • робити звук тихіше,
  • зупиняти прослуховування радіостанції,
  • або вимикати / вмикати звук.

  Музику можна слухати навіть при вимкненому екрані на смартфоні.

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

• Awito - сайт оголошень

  Це спрощений сайт для демонстрації функціоналу по створенню оголошень.

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

  На сайті немає реєстрації та авторизації.

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

  

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

• 

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

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

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

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

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

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

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

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

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

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

  

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

• 

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

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

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

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

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