Портфолио
Александра Глазунова

Портфолио

Главная > Портфолио

Александра Глазунова
@progaleks

Я создаю качественные сайты, не конструктор, мои сайты не одноразовый продукт написаны на PHP на основе фреймворка Laravel, поддаются расширению и доработке, легко продвигаются.

Мои навыки

- Знание и навыки работы в Figma, создание дизайн - проекта сайта
- Знание PHP, JavaScript
- Знание языков разметки: HTML5, CSS5
- Навыки работы с CSS, Bootstrap3, Bootstrap4, Bootstrap5
- Верстка шаблона сайта (HTML, CSS, Bootstrap, Js)
- Умение работать с фреймворком: Laravel 5.1, Laravel 8, Laravel 9
- Создание самописного фреймворка на PHP
- Опыт работы с Symfony
- Знание и умение разбираться в основных CMS (Wordpress)
- Знания и опыт работы SQL
- Опыт front-end, back-end разработки
- Знание и навыки работы в программе Photoshop
- Базовое SEO продвижение сайта Яндекс, Google
- Связь сайта с ботом в Telegram

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

Моя галлерея

Чем я могу Вам помочь

1

Дизайн проект сайта в Figma

Основное назначение дизайн-проекта сайта — он позволяет увидеть конечный результат, согласовать размещение деталей: кнопок, форм связи и других элементов, а также их размер. Согласовать цветовую гамму. Подобрать и согласовать шрифты. Проект важная часть в разработке сайта.
Дизайн-проект также позволяет оценить не только визуальное оформление, но и удобство пользователя, поэтому важно грамотно структурировать информацию на сайте.
Основная задача дизайна — познакомить пользователя со страницей. Он облегчает взаимодействие пользователя с веб-страницей, а значит положительно влияет на конверсию и поведенческие факторы. Продуманный дизайн создает нужное впечатление о компании.
Сайт — маркетинговый инструмент и представительство компании в интернете. Клиент, попавший на страницу, должен легко и быстро находить нужную информацию, в противном случае он просто уйдет к конкурентам.

2

Верстка страниц сайта

Верстка — это описание визуальной части сайта с помощью гипертекстового документа на основе HTML-разметки.
Проще говоря, соединение и расположение на странице документа разных элементов веб-сайта: текстовых блоков, изображений, таблиц, видео и т.д.
Верстка сайта — один из наиболее важных этапов создания интернет-ресурса.
От нее зависит:
- скорость загрузки сайта;
- корректность его отображения в браузере;
- соответствие стандартам HTML и требованиям поисковых систем;
- адаптивность под разные устройства пользователей (планшет, смартфон, ноутбук).
Верстка относится к сфере frontend-разработки. Она помогает правильно расположить элементы на странице и сделать так, чтобы работать с ними было максимально удобно.

Программирование

Веб-программирование осуществляется с помощью специальных компьютерных программ — скриптов (серверных и клиентских).
Клиентские скрипты используются для проверки корректности информации, предоставленной пользователями и обработки ее без помощи сервера, помогают реализовать такие эффекты как всплывающие подсказки, отображение анимации, реагирование на движение курсора, появление окон на страницах сайта.
Серверные технологии выполняются под управлением веб-сервера: когда пользователь переходит на страницу сайта, нажав на ссылку или вводя его в адресной строке браузера, то первым делом сервер запускает выбранную программу и только после этого посетитель может увидеть обработанную страницу в виде HTML-документа. Серверные скрипты служат для обработки информации из форм заполнения, интеграции с базами данных, создания динамических страниц, обеспечивает работу с папками и файлами, без них не будет работать корзина и почтовый сервис.

Мои статьи

Алекса
07.06.2023

Дизайн поисковой строки (продолжение2)

{"ops":[{"insert":"Прозрачная форма у которой меняется цвет границы, при активации, "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форма 7 (Посмотреть...)"},{"insert":":\n<form class=\"bforma\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"text\" class=\"bfild\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"bbut\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Стили формы 7 :\n<style> /* Стили для формы 7 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bforma{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 0 auto;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild, .bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 100%;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding-left: 15px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 3px solid #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-webkit-input-placeholder {color:#fff; opacity:1;}/* webkit */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-moz-placeholder {color:#fff; opacity:1;}/* Firefox 19+ */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-moz-placeholder {color:#fff; opacity:1;}/* Firefox 18- */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-ms-input-placeholder {color:#fff; opacity:1;}/* IE */"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":".bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" cursor: pointer;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bbut:before{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" content: \"\\f002\";"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-family: FontAwesome;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 16px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:focus{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: yellowgreen;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}

Алекса
07.06.2023

Дизайн поисковой строки (продолжение)

{"ops":[{"insert":"Давайте рассмотрим другие варианты оформления, например, если у вас подключены "},{"attributes":{"bold":true},"insert":"Bootstrap"},{"insert":" и "},{"attributes":{"bold":true},"insert":"Font-awesome"},{"insert":", вы можете сделать форму поиска, как на моем сайте.\n<form action=\"\" method=\"get\" class=\"input-group\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"search\" name=\"search\" class=\"form-control search\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <span class=\"input-group-btn\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"btn btn-default\" type=\"submit\"><i class=\"fa fa-search\"></i></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </span>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавим стили и получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 4 (Посмотреть...):"},{"insert":"\n<style> /*Стили для формы 4*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 0; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 45px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 2px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: double 2px transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: linear-gradient(white, white), radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -webkit-linear-gradient(white, white), -webkit-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -moz-linear-gradient(white, white), -moz-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -ms-linear-gradient(white, white), -ms-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -o-linear-gradient(white, white), -o-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-origin: border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-clip: content-box, border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 0 0 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-indent: 20px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .btn-default{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 30px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 2px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}

Алекса
01.06.2023

Создание модального окна в Laravel с помощью Livewire

{"ops":[{"insert":"Для начала у вас уже должен быть готовый проект Laravel, хотя бы с одной страницей на которой мы разместим кнопку открытия нашего модального окна.\nУстанавливаем Livewire\ncomposer require livewire/livewire"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Устанавливаем компонент LivewireUI Modal\ncomposer require livewire-ui/modal"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Публикуем модульный шаблон\nphp artisan vendor:publish --tag=livewire-ui-modal-views"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Создаем модель\nphp artisan make:livewire ModalContact"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"white"},"insert":" "},{"insert":"\nРедактируем "},{"attributes":{"bold":true},"insert":"ModalContact"},{"insert":" в "},{"attributes":{"bold":true},"insert":"app/Http/Livewire"},{"insert":"\n\n"},{"attributes":{"color":"yellow"},"insert":"<?php"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" namespace App\\Http\\Livewire;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" use LivewireUI\\Modal\\"},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class ModalContact extends "},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"{"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   public function render()"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   {"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       return view('livewire.modal-contact');"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   }"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"}"},{"insert":"\n \nВносим редактирование в "},{"attributes":{"bold":true},"insert":"modal.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/vendor/livewire-ui-modal "},{"insert":"\n"},{"attributes":{"bold":true},"insert":" "},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"<div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($jsPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*script>{!! file_get_contents($jsPath) !!}</*script>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($cssPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*style>{!! file_get_contents($cssPath) !!}</*style>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-data=\"LivewireUIModal()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-init=\"init()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:close.stop=\"setShowPropertyTo(false)\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.escape.window=\"closeModalOnEscape()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.tab.prevent=\"$event.shiftKey || nextFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.shift.tab.prevent=\"prevFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       class=\"fixed inset-0 z-10 overflow-y-auto\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"      "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"display: none; margin-top: 0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <div class=\"flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-on:click=\"closeModalOnClickAway()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"fixed inset-0 transition-all transform\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               <div class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <span class=\"hidden sm:inline-block sm:align-middle sm:h-screen\" aria-hidden=\"true\">&#8203;</span>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show && showActiveComponent\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-bind:class=\"modalWidth\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               id=\"modal-container\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"              "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"margin-bottom: 250px; z-index: 1000000000000000000;\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @forelse($components as $id => $component)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   <div x-show.immediate=\"activeComponent == '{{ $id }}'\" x-ref=\"{{ $id }}\" wire:key=\"{{ $id }}\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                       @livewire($component['name'], $component['attributes'], key($id))"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @empty"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @endforelse"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"</div>"},{"insert":"\n \nРедактируем стили для корректного отображения модульного окна (в зависимости от размеров окна стили могут меняться)\nИ создаем само окно "},{"attributes":{"bold":true},"insert":"modal-contact.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/livewire "},{"insert":"в котором мы можем разместить все что нам нужно.\n \nТакже мы можем создавать сколько угодно модульных окон создавая другие модели\nphp artisan make:livewire ModalName"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Теперьнам осталось только разместить кнопку на странице\n<button class=\" \" onclick=\"Livewire.emit('openModal', 'modal-contact')\">Модальное окно</button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Удачи!\n"}]}

Алекса
23.01.2022

Как скрыть блок на странице (продолжение)

{"ops":[{"attributes":{"underline":true,"bold":true},"insert":"(Начало в предыдущей статье."},{"attributes":{"bold":true},"insert":") "},{"insert":"Следующее свойство для скрытия элемента visibility. Если установить значение "},{"attributes":{"bold":true},"insert":"hidden"},{"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"bold":true},"insert":"opacity"},{"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"bold":true},"insert":"transition"},{"insert":". Дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство "},{"attributes":{"bold":true},"insert":"visibility: visible"},{"insert":". \nПроведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer, и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока. \n"}]}