Почему со мной выгодно сотрудничать?

  • Отношусь ответственно к работе

    Я осознаю важность проекта для заказчика. Прилагаю максимум усилий для наилучшей реализации.

  • Соблюдаю сроки

    Я ценю время заказчика. Соблюдаю баланс между быстрым выполнением работы и хорошим кодом.

  • Пишу грамотный и качественный код

    Любой другой разработчик сможет расширить функционал с незначительными изменениями в моем коде.

  • Делаю адаптивную верстку

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

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

    Мой опыт позволяет качественно верстать не зависимо от сложности вашего макета.

  • Не использую конструкторы

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

Мои работы

  • Лендинг для районной больницы

    Дизайн и верстка сайта полностью сделаны мной.

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

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

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

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

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

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

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

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

  • Блог "Головоломки со спичками" на Wordpress

    Это мой сайт, который я создала с нуля на движке Wordpress в 2012 году. До сих пор я регулярно его наполняю контентом и являюсь администратором этого сайта.

    В ходе ведения данного блога я сама меняла дизайн и делала сайт адаптивным.

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

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

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

  • Блог со стихами

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

    Изначально верстка была написана мной на таблицах. Потом переписана с использованием технологии 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

  • Сайт с информацией о сериалах

    Это учебный проект. Изначально были предоставлены файлы HTML и CSS со статической версткой.

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

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

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

  • Лендинг для фильма "Охотники за привидениями: Наследники"

    Это учебный проект. Из макета в программе Figma был реализован статичный адаптивный сайт.

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

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

  • Игра гонки на чистом JavaScript

    Это учебный проект. Игра написана с нуля.

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

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

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

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

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

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

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

  • Список дел (To do list) на JavaScript

    Это учебный проект. В форму можно вносить название и описание задачи. После нажатия на кнопку "Add task" новая задача добавляется в текущий список без перезагрузки страницы.

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

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

  • Поиск новостей на JavaScript

    Это учебный проект. Сайт позволяет получать новости с другого сайта через открытый API. Все действия происходят без перезагрузки страницы.

    • Можно искать новости по категориям, по двум странам,
    • работает поиск по введенному слову,
    • для верстки используется фреймворк Materialize,
    • сайт работает на чистом JavaScript без использования сторонних библиотек.

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

Контакты

Получить бесплатный совет
по вашему сайту: