Разработка сайта для компании «Национальная технолøгическая инициатива»

Обращение

Ко мне обратился директор компании Вебпрактик — Александр Букуров.

Задача

За 6 дней разработать лендинг по макету от дизайнера компании.

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

Результат

Сайт со всеми доработками утвержден и сдан клиенту 30 марта, за день до дедлайна.

Демонстрация работы сайта

Демо сайта

Отзыв

«Очень благодарен тебе за работу по созданию лендинга для проекта НТИ. Спасибо за вовлечённость, желание сделать качественно.

Это на самом деле не так часто на рынке фриланса, когда стараются сделать не только то, что тебе сказали по ТЗ, но и предлагают сделать что-то лучше, более качественно, более интересно.

Это очень важная твоя характеристика, развивай, масштабируй, это очень востребовано на рынке.

Конечно самое главное это сроки. Был сжатый срок под сложный проект с дедлайном под масштабные мероприятия. Нельзя было подвести заказчика. Большой объем работы в очень сжатые сроки. Ты не только уложился в срок, но и сделал на один день раньше. При этом потратил на это кроме будних дней и все свои выходные. Так что спасибо большое, это очень ценно.

Рекомендуют сотрудничество с тобой. Делаешь быстро, качественно, надежно.»

Александр Букуров

Список выполненной работы

  1. Сборка сайта на тильде
  2. Вёрстка страницы вручную
  3. Создание анимации при прокрутке
  4. Установка админ-панели

Разработка проекта «Психосоматика»

Разработал проект с психосоматическими причинами болезней для более удобного поиска

Задизайнил, сверстал и запрограммировал 6 страниц.

Договорился с гипно-терапевтом Максимом Марковым об использовании контента на этом сайте.

Посестить сайт: psihosomatic.ru

Вёрстка для компании «Твой мир»

Задача

Разработать страницу каталога и детальную товара для онлайн-магазина. Кроме вёрстки необходимо запрограммировать калькуляцию в детальной и интерактивность в списке товаров.

Демонстрация работы

Демонстрация работы страницы
Демонстрация работы страницы

Адреса страниц для просмотра

  1. Каталог
  2. Страница товара, 1 способ расчета
  3. Страница товара, 2 способ расчета
  4. Страница товара, 3 способ расчета
  5. Страница товара, 4 способ расчета
  6. Страница товара, 5 способ расчета

Результат

За 6 дней была сверстана страница каталога с мобильной версией и интерактивностью: смена вида, фильтр по цене, цвету, дополнитлеьные вкладки.

Также была сверстана детальная страница, для которой кроме вёрстки был запрограммирован калькулятор для 5 видов расчёта стоимости в зависимости от параметров

Отзыв

Вёрстка для компании "Твой мир" 6
Скриншот отзыва из социальной сети ВКонтакте

Ссылка на страницу клиента: https://vk.com/shambal

Верстка сайта Premium Relax

Задача

Разработать сайт по готовому дизайн-макету.

Оптимизация

При работе над проектом использовал новые методики оптимизации скорости, это позволило добиться высшей оценки от Google Page Speed как для мобильных, так и для компьютерной версии.

Скорость загрузки первой страницы: 1.5 секунды

Верстка сайта Premium Relax 7
Версия для компьютеров
Верстка сайта Premium Relax 8
Версия для мобильных

Сетка на странице «Девушки»

Верстка сайта Premium Relax 9
Сетка на странице «Девушки»

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

Верстка сайта Premium Relax 10
Поведение по умолчанию

Высота строки выставляется по самому высокому элементу. Я подумал, а что если разместить их по колонкам? Тогда строк не будет совсем и они будут вставать как полагается.

Да, этот вариант сработает, но структура списка сломается, программисты потратили бы гораздо больше времени на форматировании этого списка с данными из админ панели.

А я уважаю своих коллег и не делаю работу для них еще сложнее.

В итоге я нашел решение в виде библиотеки Masonry, теперь плитка выглядит как на макете и структура кода удобна для интеграции:

Верстка сайта Premium Relax 11
Код списка девушек

Верстка трех страниц для компании InRed

Cтраницы

  1. Главная
  2. Блог
  3. Страница записи

Задача

Разработать 3 страницы для проекта InRed по готовому дизайн-макету. Страницы должны также корректно отображаться на ноутбуках, планшетах и мобильных.

Это был первый проект в сотрудничестве с студией «Рекламный знак».

Разработка была закончена за 7 дней.
Мы определили техническое задание, я задал уточняющие вопросы по всем непонятным для меня вопросам и мы начали разработку.

Интересно реализована прокрутка таблицы. Мы помещаем только несколько столбцов в видимую область, остальное скрываем и делаем блок прокручиваемым по горизонтали.

Кнопка с стрелкой выступает в роли намека, что можно прокручивать и в роли кнопки, после нажатии на нее блок прокручивает право.

Демонстрация прокрутки таблица