Front-end: верстка, дизайн, разработка / spiritius.net
← index

Front-end

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

Навыки: html5, css3, sass(scss)/less/stylus, BEM, Bootstrap, javascript, jQuery, jade/pug, gulp, react (junior), vue3 (junior), git.

Работа с CMS: Modx Revo, WordPress

Контакты: telegramemailgithub

Хаберлан Групп

Представительский сайт компании "Хаберлан Групп"

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js, swiper.js, revealator.jquery.js

Примеры: главная, о компании, поддержка спорта, результаты поиска

Юридическое сопровождение бизнеса

Сайт для юриста Петровой В.В. и ее партнеров.

Дизайн создавался в Figma на основе логотипа и основного цвета (золото).

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js, swiper.js

Примеры: главная, завершенные дела, услуги

Углече Поле

Полная переверстка главной страницы уже существующего сайта с учетом адаптивности

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, imask.js

Пример

СВАМИ суши

Веб-приложение для доставки суши в г.Дзержинске с собственным производством.

Был разработан логотип и дизайн-система в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, jquery.validation, swiper.js, imask.js

Примеры: главная, доставка и оплата, отзывы

Профессиональная помощь в выборе и сборке компьютера

Лендинг для рекламы и продажи услуг.

Верстка: сетка Bootstrap 4, pug, scss, jQuery

Пример

Forbo

Интернет-магазина для официального дилера продукции Forbo в России.

Дизайн разрабатывался в Figma, было создано около 20 макетов страниц.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, jquery.validation, slick, imask

Примеры: главная, каталог, товар, поисковая выдача

Mediaprom

Медиапродакшн для бизнеса

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки revealator.jquery.js, библиотека для динамической выборки Isotope.js

Примеры: главная, портфолио, блог, карьера

Dollken Profiles

Сайт-каталог для фирменного магазина плинтусов Dollken Profiles. 

Разработка дизайна проводилась в Figma, было создано около 20 макетов страниц.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки jquery.mask.js, slick.js, jQuery валидация, ionRangeSlider.js.

Примеры: главная, каталог, товар, личный кабинет пользователя

OnlineOko — детские глазые клиники

Лендинг для онлайн-консультаций в сети детских глазных клиник "Ясный взор".

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки slick.js, jQuery валидация.

Пример

Trend Surfers — аrентство интерактивноrо digital-маркетинrа

Лендинг для маркетингово агентства. 

На этапе верстки заказчик просил добавить побольше "вырвиглазных эффектов". :)
Лендинг на двух языках.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки slick.js, luxy.js, jQuery валидация.

Пример

Pumptrack Russia

Сайт производителя и поставщика модульных памп-треков в России.

Разработка дизайна велась в Figma по бренд-буку заказчика, всего 12 страниц-шаблонов. Так же отрисовывались 2D модели тринадцати памп-треков в Photoshop.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки fancyBox, tempusDominus+moment.js, слайдер slick.js, jQueryValidation для валидации форм.

Примеры: главная, внутренняя страница каталога, страница секции

Мастера красоты

Сайт-агрегатор организаций и индивидуальных прдепринимателей в сфере красоты.

Был разработан логотип, дизайн-система для пользовательской и администраторской частей сайта, было создано и сверстано более 40 страниц-шаблонов. Разработка дизайна велась в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки ion.RangeSlider, bootstar-select, fullCalendar.js, moment.js

Примеры: главная, страница студии, страница пользователя-посетителя, внутренний кабинет пользователя-студии

Центр ключей

Сайт-каталог по услугам и сопутствующим товарам мастерской по изготовлению ключей.

Дизайн сайта создавался в Figma.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, Fancybox, слайдер Slick.

Примеры: главная страница, перечень услуг, страница услуги, каталог, страница товара.

Vitappio

Сайт-одностраничник для программно-аппаратного комплекса длительного мониторинга ЭКГ Vitappio.

Дизайн сайта создавался при помощи Figma + Photoshop.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, Fancybox, слайдер Slick.

Пример: основная страница.

https://vitappio.com

Медицинские тесты NADAL

Сайт-магазин медицинских тестов на ранее выявление рака.

Разработка дизайна производилась в Figma + Photoshop + Illustrator.

Верстка: сетка Bootstrap 4, pug, scss, jQuery, svg-спрайт, сторонние библиотеки валидации форм.

Примеры страниц: главная, страница продукта.

AVL • store

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

Дизайн сайта создавался в Figma.

В верстке использовались: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм, слайдер Slick, Fancybox3,.

Примеры страниц: главная, каталог, страница товара с уценкой, оформление товара, контакты.

 

Сайт аналитика Андрея Пянзина

Личный сайт/блог/портфолио Андрея Пянзина.

Использовались: сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм.

После верстки сайт собирался на WordPress.

Примеры страниц: главная, страница проекта (портфолио), страница блога.

http://pyanzin.com/

АБК · Фасад

Интернет-магазин строительных материалов.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки: слайдер Slick, валидация форм, FancyBox.

Примеры страниц: главная, каталог, страница товара, оформление заказа (в 4 шага).

https://abk-fasad.ru/

Art · Insure — Искусство страхования

Небольшой сайт и личный кабинет для страхования выставочных экспонатов.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки: Ion.RangeSlider, inputMask, jQuery Validation Plugin, Slick, Tempus Dominus Bootstrap4.

Примеры страниц: главная, страница страхования временных выставок, личный кабинет.

https://artinsure.ru/

DocsTalks

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

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки валидации форм и полей ввода телефонных номеров.

Примеры: главная, кабинет.

Prostor

Лендинг для склада индивидуального хранения для физических и юридических лиц Prostor.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки слайдер Slick, виджет календаря Tempus Dominus Bootstrap4, inputMask, анимация текста typed.js.

Примеры: главная.

http://prostor-sklad.ru/

Ковен «Южные ночи»

Сайт и интернет-магазин магических и мистических товаров.

В верстке использовалась сетка Bootstrap 4, pug, scss, jQuery, сторонние библиотеки Fancybox и Slick. Использовались SVG-маски для изображений сложной формы.

После верстки сайт собирался на WordPress + WooCommerce.

Примеры страниц: главная, список курсов, страница курса.

http://rus-magic.ru/

Ковен «Южные ночи»
Ковен «Южные ночи», внутренняя страница
Автосервис

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

Использовались: сетка от Bootstrap 4, lazyload.js, sass, pug, gulp.

https://miha123.ru

Первый экран лендинга
Chai.mobi

Лендинг для стартапа.

Использовались HTML5/CSS3 (Scss) — за основу взят минимальный набор модулей Bootstrap v.4, jade, так же в работе использовались jQuery, сторонний js-скрипт валидации полей .validate (все обязательные поля отмечены звездочкой, валидация происходит по нажатию на сабмит) и скрипт маски jQuery Mask Plugin для поля телефона. Весь функционал работает как на десктопах, так и на мобильных устройствах.

Портфолио дизайнера

Личный сайт дизайнера Дмитрия Филиппова.

Обилие мелких деталей и адаптивный перфект-пиксель. Немного js-интерактивности. На странице "Обо мне" переключение языков для текстового массива. Внутренние страницы кастомизируются с помощью цветов, задаваемых css-переменными в коде страницы.

В работе использовались HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade, jQuery.

Примеры страниц: главная, обо мне, кастомная внутренняя.

Доктор Фаниев

Личный сайт практикующего врача М.В. Фаниева.

В разработке использовались HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade. Полный адаптив.

После верстки, сайт собирался на WordPress.

Страницы для ознакомления: главнаявнутренняя.

Оберег

Сайт для мебельной компании.

Адаптивная верстка на HTML5/CSS3 (Scss) на основе Bootstrap v.4, jade, jQuery. Для многочисленных каруселей изображений использовалась сторонняя библиотека Owl Carousel 2, для вывода и выборки работ — связка из Masonry и Isotope.

Примеры страниц: главная, контакты, страница портфолио.

last update: september 2023