Привет, Я
Денис
Frontend - разработчик
UX / UI Дизайнер
Работы портфолио
Категория: Лэндинги
Archee
Категория: Лэндинги
Портфолио Pet-проекты
Категория: Сайты-визитки
Dream On Wheels
Категория: Проекты с элементами интерфейса на javaScript
Конвертёр валют на JavaScript
Категория: Лэндинги
Oxygen
Категория: Лэндинги
Alivio
Категория: Лэндинги
Thrivetalk
Категория: Промосайты
Промосайт фильма "Веном - 2"
Категория: Проекты с элементами интерфейса на javaScript
Калькулятор стоимости ремонта на JavaScript
Категория: Дизайн
Дизайн визитных карточек
Категория: Дизайн
Ducati: главная страница
Обо мне
Кто я
Я — Frontend-разработчик, который любит превращать идеи в удобные и стильные сайты. Специализируюсь на разработке лендингов и одностраничных приложений, сейчас изучаю React и развиваю навыки в создании SPA.
Использую HTML, SCSS, JavaScript и методологию БЭМ, чтобы создавать чистый и поддерживаемый код. В работе применяю Gulp для автоматизации, а также Figma, Addobe Illustrator и Photoshop для отработки дизайна. В работе для меня важно, чтобы сайт был не только технически надежным, но и производил впечатление. Поэтому уделяю внимание деталям: от аккуратной верстки и семантики до продуманной анимации и удобной навигации.
Для меня важно работать в команде, где ценят качество и рост. Взамен я готов вкладываться в проекты, развивать интерфейсы и помогать создавать продукты, которыми будут гордиться пользователи.
Буду рад новым предложениям и сотрудничеству. Связаться со мной можно через форму ниже илиМодальное окно резюме
Изменить шрифт
Резюме
Опыт
Доработка сайта-портфолио / Фриланс
Frontend-разработчик / Фрилансер
Мой сайт-портфолио полностью готов. Сейчас я открыт к заказам по веб-разработке, развиваюсь как Frontend разработчик и создаю интересные проекты.
Создание проектов для портфолио, самообразование
Начинающий Frontend-разработчик
Со времени окончания университета прошло не так много времени, и я решил осваивать Web-разработку. Сначала, конечно, не догадываясь, что эта сфера так многогранна.
Сначала я прошел 3-х недельный марафон от Web-школы HTML-Academy по верстке сайтов, где я принял участие, дойдя до конца. Я сверстал сайт, и понял, что мне это интересно. Дальше я стал углублять свои знания, изучая новые инструменты и технологии, необходимые для разработки сайтов.
Я стал посещать интенсивы и другие марафоны, чтобы укрепить навыки, продолжая развиваться в сфере веб-разработки, параллельно пополняя свое портфолио новыми проектами.
На данный момент я уверенно могу создавать сайты, адаптируя их под экраны мобильных устройств и планшеты, используя современные подходы в веб-разработке.
Биржа копирайтинга ETXT
Копирайтер
Работая копирайтером, я выполнял следующие задачи:
- Написание текстов на заказ, на тему новых информационных технологий
- Проверка текста на уникальность
- Поиск источников информации
- Создание структуры текста, опираясь на другие источники
- Поиск клиентов для продажи текстов
- Ссылка на отзывы
Салон связи ООО «Сеть Связной»
Менеджер по продажам
Работая менеджером по продажам, я имел следующие задачи и обязанности:
- Выстраиваиние отношений с клиентами
- Продажа смартфонов, компьютерной техники и допонительных продуктов
- Работа с кассой
- Оформление финансовых продуктов: кредитные карты, рассрочки
- Подключение новых абонентов к операторам связи: МТС, Теле2, Мегафон, Билайн, Йота
- Подготовка денежных средств к инкассации
Работая в сфере продаж я развил навык коммуникабельности.
Репетиторство по английскому языку
Репетитор
Во время учебы в университете я занимался репетиторством среди учащихся 2 - 7 классов.
Работая репетитором, я имел следующие задачи:
- Помощь в учебном процессе
- Прорешивание домашнего задания
- Помощь в ведении тетради для закрепления материала
Мои хобби
Онлайн-покер
Игрок в покер
Ведение мотивационного сообщества вконтакте "Ключ к мечте"
Блогер
Я являюсь автором сообщества "Ключ к мечте". Публикую мотивационные посты. Это моё хобби. Ссылка на сообщество.
Написание стихов
Поэт
Пишу стихи, являюсь автором цикла стихотворений "Из сна восставши". Ссылка на стихотворения.
О себе
Я — Frontend-разработчик, для которого приоритетом является результат и качество. Создаю веб-приложения и сайты, которые сочетают в себе современный дизайн, удобство для пользователя и техническую надежность. За последние годы накопил опыт в разработке лэндингов и уверен в своих профессиональных навыках в этом направлении. Работаю с актуальными инструментами и технологиями, постоянно развиваюсь и стремлюсь приносить пользу проектам через эффективные цифровые решения.
Контактная информация
- Мамлев Денис Игоревич
- Дата рождения: 02.04.1993 ,
- Denis-mamlev@rambler.ru
- Ссылка на GitHub профиль
- Телеграм
- ВКонтакте
Образование
Студент
Факультет математики и информатики, Россия, САФУ им. М. В. Ломоносова
Университет дал мне понять, что успех прямо пропорционален усилиям. Разработка Web-сайтов в будущем на момент обучения в университете не была еще моей целью, однако я делал попытки изучения web-технологий.
К концу обучения я совместно с наставником, моим преподавателем, создал web-приложение, позволяющее делать расчеты в системах массового обслуживания.
Ученик
Средняя Киземская Школа, Россия
За время обучения в школе я приобрел следующие навыки:
- Повышение концентрации и усидчивость
- Умение красиво излагать свои мысли
- Умение принимать поражения
- Умение выступать перед публикой
- Умение управлять своим временем
Чтобы создавать сайты, нужна концентрация внимания на деталях, усидчивость. Школа и университет помогли эти навыки приобрести.
Навыки
Мои сертификаты
Практикум по созданию сайтов
Практикум по созданию сайтов от Анны Блок помог лучше разобраться в основах верстки.
JavaScript / jQuery
Пройдя данный курс я узнал основы Javascript и jQuery.
Основы HTML / CSS - верстка сайтов с нуля
После прохождения данного курса я узнал о новых подходах в web-разработке, а также разобрался в основах HTML и CSS.
Мои достижения
Разработка приложения «Генератор паролей»
Разработал с нуля приложение "Генератор паролей", с помощью которого можно создать пароль со сверхзащитой: до 15 символов + специальные знаки. Функционал приложения:
- Выбор длины пароля: 8, 12 или 15 символов
- Опция добавления специальных символов для усиления пароля
- Генерация набора из 7 различных паролей с анимацией появления (для ПК и экранов шириной ≥993px)
- Копирование пароля в буфер обмена через удобную иконку
- Многоразовая генерация нового набора паролей по нажатию кнопки «Сгенерировать»
- Функция сброса параметров для выбора новых настроек длины и специальных символов
- Интерфейс продуман для удобного и интуитивного использования, визуальные элементы отображаются плавно и эстетично
- Ссылка с подробным описанием проекта
- Ссылка на проект
Технологии:
- HTML5
- SCSS
- JavaScript
- Gulp
Разработка проекта "Переключение языков - подробный гайд"
Представляю проект по реализации системы переключения языков (русский/английский) для небольших сайтов и лендингов без сторонних библиотек. Проект акцентирует внимание на простоте, гибкости и чистоте решения. Я самостоятельно спроектировал и реализовал весь визуальный интерфейс. Система легко интегрируется в существующие сайты и демонстрирует эффективный подход к созданию многоязычного интерфейса, облегчая поддержку и масштабирование. Ключевые преимущества проекта:
- Лёгкая интеграция – можно быстро подключить к любому сайту без изменения существующей структуры
- Поддержка нескольких языков – легко добавлять новые языки и переводить элементы страницы
- Гибкость – корректно работает с повторяющимися элементами, placeholder’ами и атрибутами title
- Чистый код – решение на чистом JavaScript, без внешних зависимостей
- Улучшение пользовательского опыта – позволяет пользователю быстро переключаться между языками, что повышает доступность контента
- Масштабируемость – подходит как для небольших лендингов, так и для страниц с большим количеством элементов
- Ссылка с подробным описанием проекта
- Ссылка на проект
Технологии:
- HTML5
- SCSS
- JavaScript
- Gulp
Разработка приложения «Конвертер валют»
После интенсива от онлайн-школы Web-cademy доработал приложение «Конвертер валют», полностью переработав дизайн и расширив функционал:
- Смена темы приложения – три цветовые схемы: светлая, тёмная и эксклюзивная «лунная»
- Смена языка интерфейса – русский и английский
- Двусторонняя конвертация валют – динамическое обновление иконок и текста
- Ежедневное обновление курсов валют – актуальная информация для пользователя
- Удобный ввод суммы – возможность менять значение с помощью колесика мыши
- Ссылка с подробным описанием проекта
- Ссылка на проект
Технологии:
- HTML5
- CSS3
- JavaScript
Навык слепой печати на клавиатуре
Данный навык помогает существенно быстрее делать сайты. Я обучился ему приблизительно за 2 месяца регулярной работы на онлайн-тренажере. Скорость печатания ~ 160 символов в минуту в двух раскладках: английской и русской.
Ведение ежедневника
В октябре 2021 года я прошел один интенсив, благодаря которому стал вести ежедневник.
Окончание университета
САФУ, факультет математики и информатики, Россия
Окончание школы
Кизема, Россия
Изменить шрифт
Здравствуйте
Вы можете написать мне на почту или в социальных сетях, и я отвечу в ближайшее время:
Изменить шрифт
Thrivetalk
- При сужении окна браузера появляется бургер-иконка, при клике на которую появляется мобильное меню навигации и overlay, запрещается scroll
- При появлении мобильного меню навигации добавляется возможность закрыть это меню, кликнув на крестик или кликнув вне мобильного меню (при этом кликая на само меню, окно не закрывается)
- При открытии мобильного окна навигации, меняя размер окна в большую сторону, мобильное меню закрывается и появляется стандартное меню (поэтому при переключении ориентации экрана из портретной в ландшафтную, например, у планшета, меню примет более удобный вид)
- Сайт защищен от переполнения контентом, при увеличении контента в блоках, все отображается корректно
При работе над проектом были использованы следующие технологии, инструменты и плагины:
- Flexible Box Layout Module
- Препроцессор Less
- Редактор кода Sumlime Text 3
- Плагины Sublime Text 3: Emmet, LiveReload, AutoFileName и другие
- Сайт адаптирован под все размеры экрана. Для этого использовались медиа-запросы и Flexible Box Layout Module
- При адаптировании сайта под другие устройства использовался метод Desktop First (сначала был сделан сайт под ПК, а затем под планшеты и мобильные устройства)
- СSS / HTML
- Ccылка на проект
- Ссылка на макет Figma
- Ссылка на репозиторий GitHub
- Время на работу ~ 23 ч
Изменить шрифт
Промосайт фильма "Веном - 2"
Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:
- Редактор кода Visual Studio Code
- Плагины Visual Studio Code: Emmet, Live Server, Path AutoComplete, AutoClose Tag и др.
- Подключение всплывающего окна для отображения видео, используя jQuery-библиотеку FancyBox
- Flexible Box Layout Module
- CSS / HTML / JavaScript
- Адаптив под все возможные экраны устройств
- Наиболее подробная информация об этом проекте находится здесь
- Ccылка на проект
- Ссылка на макет Figma
- Ссылка на репозиторий GitHub
- Время на работу ~ 25 ч
Изменить шрифт
Калькулятор стоимости ремонта на JavaScript
Возможность выбирать площадь квартиры, требуемой для ремонта, с помощью ползунка или стрелочек(около значения площади, щелкнув в текстовое поле), зная исходное значение цены за 1 квадратный метр - 6000 рублей. После этого произойдет автоматический расчет стоимости ремонта, исходя из следующих параметров:
- Тип ремонта (косметический, капитальный или под ключ), выбрав один из пунктов, произойдет расчет ремонта соответственно: без увеличения цены, + 30% к стоимости ремонта и + 50% к стоимости ремонта
- Тип дома (новострой или вторичка), выбрав один из пунктов, произойдет расчет ремонта соответственно: без изменения цены, + 10% к стоимости ремонта
- Дополнительные опции (натяжные потолки, покраска стен, теплый пол), выбрав один из пунктов, произойдет расчет ремонта следующим образом: + 900 рублей за каждый квадратный метр при выборе опции "Натяжные потолки", + 10% к стоимости при выборе опции "Покраска стен" и + 10% к стоимости ремонта при выборе опции "Теплый пол"
- Количество комнат (С, 1, 2, 3, 4 или 5, где С - это более экономичный вариант ремонта комнат), выбрав один из пунктов, произойдет следующий расчет ремонта: C (-20% от стоимости ремонта), от 1 до 2 комнат (без изменения цены), от 3 до 5 (+ 5% к стоимости ремонта)
Работая над данным проектом, были использованы следующие инструменты, технологии:
- Редактор кода: Visual Studio Code
- JavaScript
- Css / HTML
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Время на работу ~ 20 ч
Изменить шрифт
Конвертёр валют на JavaScript
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Время на работу ~ 50 ч
Изменить шрифт
Oxygen
Работа над проектом имела цель попрактиковаться в методологии BEM-naming. Каркас страницы был создан под руководством наставника. Весь Css и JavaScript был написан мной самостоятельно.
- При наводе на элемент навигации, появляется плавное подчеркивание. Через JavaScript реализовано так, чтобы при наведении на любую из ссылок меню, все подчеркивания убирались, а у нужной это подчеркивание оставалось, а при отводе мыши, подчеркивание оставалось у самой первой ссылки
- При наведении (отведении) мыши на логотип происходит эффект смены цвета у заголовка и подзаголовка главного экрана лэндинга (также происходит при клике на иконку мышки или при клике на сам заголовок)
- При скролле вниз реализовано через JavaScript, чтобы меню всегда отображалось сверху, добавляя к блоку навигации тень и меняя цвет фона
- При наведении на заголовки второго уровня у них появляется плавное подчеркивание. Также реализовано, что если текст будет располагаться в несколько строк, подчеркивание отображалось корректно
- Реализована адаптивная верстка. На любых экранах контент отображается корректно
- Когда экран устройства достигает определенной ширины, происходит замена меню навигации главного экрана на меню - бургер (для этого используется JavaScript)
- При клике на меню-бургер высвечивается модальное окно с меню на всю область экрана (кликая на нужный пункт навигации в нем, окно закрывается и происходит плавный переход к контенту), также при клике на крестик, модальное окно закрывается
- При сужении окна блок портфолио, состоящий из грид-элементов, превращается в слайдер (slick slider), реализовано с помощью медиа-запросов (переключение слайдов осуществляется через свайп)
- При клике на 'Play' в блоке видео, происходит проигрывание ролика. При этом добавляются элементы управления и скрывается иконка 'Play'
- Ниже блока видео реализован адаптивный слайдер, полностью сделанный на JavaScript(на экранах для смартфонов стрелки навигации пропадают, переключение слайдов происходит через точки, на экранах планшетов и компьютеров переключение слайдов осуществляется через стрелки)
- В блоке Pricing отображается желтым цветом стандартный тариф, при наведении или при клике (на экранах смартфонов) на другие карточки происходит плавный выбор нужной карточки, при этом через JavaScript происходит удаление класса active у всех карточек и добавление этого класса выбранной
Работая над данным проектом, были использованы следующие инструменты, технологии:
- Редактор кода: Visual Studio Code
- JavaScript
- Css / HTML
- Slider Slick
- Flex-box Layout
- Grid Layout
- Svg-спрайты
- BEM-naming
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Ссылка на макет Figma
- Время на работу ~ 29 ч
Изменить шрифт
Olivia
- При скролле вниз навигационное меню отбрасывает тень (сделано через javascript) и остается всегда в видимости пользователя
- При сужении экрана появляется меню-бургер, кликнув на который отображается модальное окно с навигацией
- В секции с видео при нажатии на 'Play' кнопка 'Play' превращается в кнопку 'Pause', видео воспроизводится, а при наведении курсора у видео появляется затемняющая подложка, при отведении она пропадает
- Реализована плавная прокрутка через javascript
Работая над данным проектом, были использованы следующие инструменты, технологии:
- Редактор кода: Visual Studio Code
- JavaScript
- Css / HTML
- Flex-box Layout
- Css Grid Layout
- Адаптивная верстка под смартфоны, планшеты и ноутбуки
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Ссылка на макет Figma
- Время на работу ~ 20 ч
Изменить шрифт
Archee Project
Проект был создан в рамках марафона по верстке от CodeQuest. Марафон длился 5 недель.
Целью марафона была практика, использование новых подходов в web-разработке, а также улучшить навыки в gulp, scss и методологии BEM-naming.
На марафоне проводились онлайн-встречи, где мы обсуждали блоки кода, что нужно было сверстать. К следующей живой трансляции наставник объяснял непонятные моменты, после этого вносились некоторые правки в проект, чтобы его улучшить, сохраняя при этом свои варианты наработок.
Таким образом марафон был успешно пройден, где я получил новый опыт работы, используя современные подходы при разработке сайтов.
В проекте используется компонентный подход: scss разбит на отдельные блоки, что позволяет лучше ориентироваться в коде, модифицировать его и поддерживать в дальнейшем.
Для удобства используются миксины в scss. Это отдельные мини-функции, позволяющие сокращать код и работать быстрее.
Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:
- Препроцессор SCSS
- Менеджер проектов gulp
- Git & GitHub
- Плагин Chrome Pixel Perfect
- Слайдер Swiper.js
- Favicon
- Редактор кода Visual Studio Code
- Плагины Visual Studio Code: Emmet, Live Server, Path AutoComplete, AutoClose Tag и др.
- Flexible Box Layout Module
- CSS / HTML / JavaScript
- Адаптирование сайта под все экраны устройств
- Наиболее подробная информация об этом проекте находится здесь
Изменить шрифт
Портфолио Pet-projects
Данный проект является сайтом - портфолио, которое содержит мои pet - проекты. Что такое pet-проекты? Это сайты или веб-приложения, которые были разработаны в учебных целях для закрепления материала по веб-разработке.
- Функция переключения темы (две цветовых схемы: светлая и темная)
- Плавная смена цвета при переключении слайдов в проекте Theme's Switcher
- Добавлена функция переключения языков (более подробно о том как это было реализовано можно посмотреть перейдя по ссылке)
Работая над данным проектом, были использованы следующие инструменты, технологии:
- Редактор кода: Visual Studio Code
- JavaScript
- SCSS / HTML
- Gulp
- Local Storage
- Slick Slider
- Flex Box Layout Module
- Адаптив под планшеты и мобильные устройства
- Дизайн карточек проектов был самостоятельно реализован в программе Photoshop
- Наиболее подробная информация об этом проекте находится здесь
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Время на работу ~ 40 ч
Изменить шрифт
Dream On Wheels
Проект "Мечта на колесах" или "Dream On Wheels" был создан в учебных целях, чтобы закрепить навыки работы с gulp и препроцессором LESS.
Проект был сначала создан, используя более упрощенную структуру, работа с препроцессором осуществлялась через стороннюю программу - компилятор WinLess. Далее проект был полностью переделан, используя gulp. Работая над данным проектом, были использованы следующие инструменты, технологии:
- Редактор кода: Visual Studio Code
- LESS / HTML
- Gulp / Webpack
- Flex Box Layout Module
- Используется SVG-спрайт, чтобы обеспечить лучшую скорость загрузки сайта, отправляя меньше запросов на сервер
- Адаптив под планшеты и мобильные устройства
- Дизайн сайта был полностью переделан. После этого сайт стал живым и ярким
- Весь контент, включая текст для сайта был придуман самостоятельно
Работая с gulp были использованы следующие плагины:
- gulp-svg-sprite - плагин для работы с svg-спрайтами
- gulp-plumber - плагин для обработки ошибок
- gulp-sourcemaps - плагин для навигации в коде в режиме разработки
- gulp-imagemin - плагин для минификации изображений
- gulp-babel- плагин для перевода JavaScript-скриптов в код, который станет поддерживаться устаревшими браузерами, тем самым повышая кроссбраузерность
- gulp-strips-comments - плагин для удаления лишних комментариев, использовался в задаче при подключении сторонних библиотек и в отдельной задаче, подключающей JQuery
- gulp-uglify - плагин, помогающий минифицировать JavaScript-код
- gulp-less - плагин для компиляции LESS в CSS
- webpack, webpack-stream - npm-пакеты для работы с webpack в gulp, были включены в проект для использования модулей в JavaScript
- Ccылка на проект
- Ссылка на репозиторий GitHub
- Время на работу ~ 45 ч
Изменить шрифт
Дизайн визитных карточек
Каждой компании нужен бренд или логотип, с помощью которого эта компания будет узнаваема в обществе. Визитные карточки - это инструмент, который помогает делать рекламу для своей компании. Данные визитные карточки были созданы в программе Adobe Photoshop, дизайн был придуман в учебных целях.
Визитные карточки, которые были созданы в учебных целях, состоят из двух сторон: лицевая сторона содержит логотип компании, имя сотрудника, его должность, телефон, адрес офиса. И оборотная сторона визитки содержит логотип компании.
Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:
- Adobe Photoshop
- Время на работу ~ 20 ч
Изменить шрифт
Ducati: главная страница
Главная страница Ducati была создана в учебных целях в рамках марафона школы дизайна Yudaev School.
Данная работа была создана в рамках тренировки, в программе Figma, после прохождения марафона от школы дизайна Yudaev School. Марафон прошел успешно, где я смог закрепить навыки в сфере UX / UI дизайна.
Работая над данным проектом, были использованы следующие инструменты, технологии и плагины:
- Figma
- Adobe Illustrator
- Время на работу ~ 1 ч