Елена Цыбульская

Контакты

Имя: Елена Цыбульская
Телеграм: @oltsybulska

Проекты

Все
Настоящие Проекты
Тренировочные Проекты
Сборки

1 ... 5
< Адаптивная Верстка Герниопластика />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Swiper Слайдер
- Адаптивность, Кроссбраузерность
- Page Speed Insights, Lighthouse
Подробнее
Два меню: первое вверху страницы с основной информацией и при прокрутке страницы появляется другое с пунктами меню
Плавная прокрутка по пунктам меню
Слайдеры
Формы записи на консультацию
Модальные окна с формами при нажатии кнопок Перезвоните, Получить консультацию, Посмотреть диплом и фото главного врача
Три страницы помимо главной с дополнительной информацией
Декоративные элементы на всей странице
Анимация текста и увеличения некоторых элементов при наведении
Просмотр
1 ... 4
< Адаптивная Верстка Лечение Эндометриоза />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Swiper Слайдер
- Адаптивность, Кроссбраузерность
- Page Speed Insights, Lighthouse
Подробнее
Слайдер с навигацией: при нажатии на пункт слева открывает полную информацию о выбранном пункте справа. Как и прокрутка слайдера справа выбирает соответствующий пункт слева
Два меню: первое вверху страницы с основной информацией и при прокрутке страницы появляется другое с пунктами меню
Плавная прокрутка по пунктам меню
Формы записи на консультацию
Модальные окна с формами при нажатии кнопок Перезвоните, Записаться на консультацию
Две страницы помимо главной с дополнительной информацией
Декоративные элементы на всей странице
Анимация текста
Просмотр
1 ... 5
< Адаптивная Верстка Кунжут />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
- Оптимизация Скорости Загрузки Страницы
Подробнее
Разработка 2х js калькуляторов и верстка 4х адаптивных страниц из .psd макетов для пиццерии
Конструктор пиццы из ингридиентов. В этом калькуляторе при нажатии на ингридиенты/соусы их фото появляются на пицце, подсвечиваются цветом и появляется цена. При повторном нажатии убираются
Конструктор из разных половинок пиццы. В этом калькуляторе из разных половинок пиццы складывается целая. При клике на иконку половинка появляется на фото пиццы. Можно выбрать по одной с правой и левой стороны, при повторном клике выбор отменяется
Над пиццей есть сообщение о том, что нужно выбрать половину. Когда выбрано обе половины, сообщение исчезает и появляется заново при отмене выбора половинки
Просмотр
1 ... 5
< Адаптивная Верстка CityMober />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
- Оптимизация Скорости Загрузки Страницы
Подробнее
Адаптивная верстка для последующей натяжки на cms, интерактивные элементы
SVG маска для фотографий (вырезка линий на фото программно, при замене картинок на новые они так же будут вырезаны) в блоке инстаграмма
Добавление новых полей при нажатии на кнопку заказа еще одной сумки
Прокрутка при нажатии на кнопки в блоке инстаграмма
В мобильной и планшетной версиях длинные блоки сворачиваются и считается процент просмотренного
Плавная прокрутка к блокам, кнопка вернуться наверх
Просмотр
1 ... 1
< Адаптивная Верстка GoSurf />
Навыки
- Slick Carousel
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
Подробнее
Анимация появления блоков / заголовков / точек на карте, сегодняшняя дата, choose options in surf section
Калькулятор стоимости ночевки в зависимости от количества человек и ночей
Всплывающие подсказки в разделе магазин
Слайдер
Кнопка возврата наверх, прелоадер
Просмотр Код
1 ... 3
< Разработка Калькулятора и Адаптивная Верстка />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
- Оптимизация Скорости Загрузки Страницы
Подробнее
Фильтр и калькулятор для Steam игры
У каждого объекта есть имя и 3 разных свидетельства, позволяющих его распознать. Игрок может выбрать до трех доказательств или исключить их, нажимая на иконку креста. При попытке выбрать больше трех появляется заглушка. Выбранные доказательства выделяются разными цветами
На основе входных данных фильтр отображает список возможных объектов и возможных недостающих свидетельств
Есть кнопка сброса, два языка, тёмная и светлые темы, список фраз с фильтром
Просмотр Код
1 ... 1
< Адаптивная Верстка Mitravel />
Навыки
- Отправка заяки на почту с помощью PHPMailer
- Swiper carousel
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
Подробнее
Формы подписки
Отправка заяки на почту
Проигрывание и остановка видео в главной секции
Галерея, слайдер
Кнопка возврата вверх, прелоадер
Просмотр Код
1 ... 1
< Адаптивная Верстка MoGo />
Навыки
- Bootstrap4.5
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- jQuery, Gulp
- Адаптивность, Кроссбраузерность
Подробнее
Слайдер, модальное окно, аккордеон
Иконки при наведении на изображения
Анимация статистики
Кнопка возврата вверх, прелоадер
Просмотр Код
1 ... 1
< Адаптивная Верстка Формы-опроса />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
Подробнее
Поля имя, адрес электронной почты, возраст
Выбор параметров раскрывающегося списка, установка флажков
Кнопка отправки
Просмотр Код
1 ... 1
< Адаптивная Верстка Письма />
Навыки
- HTML5, CSS3
Подробнее
Логотип, текст, кнопка, ссылки на социальные сети
Просмотр Код
1 ... 1
< Разработка Игры Квадраты />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
- Оптимизация Скорости Загрузки Страницы
Подробнее
Подсчет времени и очков
Ручная установка времени
Случайные цвета квадратов
Защита окна от изменений после окончания игры, защита окна времени после начала игры
Просмотр Код
1 ... 1
< Разработка Игры Бой />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ, SVG Спрайт
- JavaScript, Gulp
- Адаптивность, Кроссбраузерность
- Оптимизация Скорости Загрузки Страницы
Подробнее
ES6 классы и контекст this
У двух бойцов есть свои характеристики, отображаемые через JS
Кнопка запуска запускает счет и бой, формулы рассчитывают шанс атаки или промаха
Журнал боя создан с помощью JS, отображает победителя когда здоровье бойца падает ниже 0
Просмотр Код
1 ... 1
< ReactJS Список Дел />
Навыки
- HTML5/Pug, CSS3/SCSS/БЭМ
- React JS, Webpack
- Адаптивность, Кроссбраузерность
Подробнее
AddTodo, removeTodo, React.Suspense (React.lazy) AddTodo
UseContext, custom hook useInputValue, useEffect
Loader
React.Fragment Modal
Просмотр Код
1 ... 1
< Gulp Сборка />
Навыки
- clean.js — Clean folder
- pug2html.js — Pug to HTML, pug linter, html validator, bem validator
- styles.js — SCSS to CSS, webpcss, group css media, stylelint, sourcemaps, autoprefixer, csso, rename to min
- scripts.js — Scripts, concat to one file scripts.js and libs, eslint.format, sourcemaps, babel, terser, rename to min
- fonts.js — Fonts, copy woff2 and woff, other convert to woff2 and woff
- img.js — Images, optimize (quality 85) and copy images, convert to webp and resize
- svgСпрайтs.js — SVG sprites, optimize, make sprite and template to /dist/assets/icons/
- copyDependencies.js — Copy dependencies, template if dont want to concat libs with scripts.js
- favicon.js — Favicon, create from svg icon
- favicon2html.js — Favicon to HTML, add favicon links to HTML head
- fontsStyle.js — Fonts style, write info about fonts to /#src/scss/_fonts.scss
- serve.js — Просмотр server, watching
Подробнее
- Сделанная мной Сборка
- Resize mobile or tablet images, retina 1x, 2x, 3x via gulp task and use with picture tag
- Automaticly create svg sprite by adding svg icons to /#src/assets/icons/, svg support ie
- Automaticly create favicon by adding the svg icon to /#src/assets/favicon/
- Convert fonts to woff2 and woff, copy them to /#src/assets/fonts/ and clean /#src/scss/_fonts.scss/ file
- Two pug template pages with separate includes folders, common files in extends folder (layout, header, footer)
- SCSS styles with separate components
- Copy script libs via gulp task from /node_modules/ and copy them to scripts.js
Просмотр Код и Readme
1 ... 1
< Webpack Сборка />
Навыки
Подробнее
Сделанная мной Сборка
Просмотр Код и Readme