Коллекция статических HTML-сайтов ·
Введение
Это коллекция целевых страниц и шаблонов блогов, разработанных мной. Эти темы основаны на HTML, CSS, javascript, jquery и Bootstrap. Я создаю этот репозиторий в качестве портфолио, чтобы продемонстрировать свою работу в качестве веб-разработчика внешнего интерфейса и получить возможность трудоустройства, будь то внештатная работа, работа с частичной занятостью, полный рабочий день или работа по контракту, и эти проекты являются лишь простой частью моего работа, потому что я не могу размещать здесь работы своих клиентов для всеобщего обозрения. Если вы считаете, что мои услуги могут быть вам полезны и заинтересованы в том, чтобы нанять меня, напишите мне по электронной почте.
В этом репозитории вы найдете следующие дизайны
Нажмите на название темы, чтобы просмотреть предварительный просмотр. Эти проекты НЕ предназначены для личного или коммерческого использования, они предназначены только для демонстрации (чтобы продемонстрировать мои навыки работы с интерфейсом).
- Canox: простой, понятный, личный, современный и профессиональный блог, идеально подходящий для создания профессионального веб-сайта для блогов.
- Covid-19: Covid-19: Простая целевая страница для просмотра статистики коронавируса и способов защитить себя от него с помощью статистики в реальном времени, поступающей из API, и интерактивной карты для просмотра последней статистики по странам. Этот дизайн разработан дизайнером Шахриаром Хоссейном, и я лишь преобразовал его в коды внешнего интерфейса, внеся в него некоторые изменения, чтобы он выглядел лучше.
- Кониш: Красивый и простой лендинг для технической компании. И эта работа — одна из моих первых работ в качестве фронтенд-разработчика.
- Projection & Collision: Веб-информационная демонстрация проекта Projection & Collision третьего года моего обучения на факультете информационных технологий Дамасского университета.
- Sass: Еще одна целевая страница для технической компании. и вы можете увидеть презентацию на Behance здесь.
- Sellvas: тема шаблона журнала и блога с элегантным и чистым дизайном. Тема журнала и блога. В нем есть все необходимое для создания красивого блога и фотогалереи, он имеет современный минималистичный дизайн, прост в обслуживании и безупречен в каждой детали. И эта тема содержит более 10+ вариантов макета и множество стилей сообщений и страниц ошибок, соответствующих любому стилю дизайна.
- История: Простая и понятная целевая страница для просмотра антиквариата и ручных работ. Этот сайт был разработан Маждом Шаммой, но я преобразовал этот дизайн в статический веб-сайт.
- Tieqode: команда профессионалов с необходимыми деловыми и техническими навыками, сильным лидерством, опытом и знаниями для предоставления лучших решений и услуг для клиентов. И когда я присоединился к команде TIEQODE , я работал над их сайтом, и вы можете увидеть его здесь.
- Свадьба: Современный и красивый лендинг для свадебного мероприятия.
Об этих темах
Основные особенности этих конструкций
- HTML5, CSS3, Javascript, jQuery и Bootstrap.
- Приятные эффекты параллакса.
- Действительные сценарии и хорошо организованные коды.
- Минималистичный, современный и чистый дизайн.
- Использовались бесплатные шрифты Google, такие как Roboto и Raleway.
- Все файлы хорошо прокомментированы для удобного редактирования.
- Поддержка слайдера карусели.
- Включите эффекты jquery и CSS3.
- Выпадающие меню и обычные меню также оптимизированы для мобильных устройств.
- Поддержка хлебных крошек для лучшей навигации.
- Кроссбраузерная совместимость.
- Интеграция шрифтов Awesome и Ion.
- Поддержка форматов сообщений.
- Похожие посты под постами.
- Авторский ящик в комплекте.
- Пользовательская ошибка 404 страницы.
Используемые библиотеки JavaScript
В этих темах импортируются некоторые файлы Javascript, и все необходимые файлы и плагины включены в файлы проекта, а именно:
- jQuery: jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript. Он значительно упрощает такие операции, как обход и манипулирование HTML-документами, обработку событий, анимацию и Ajax, благодаря простому в использовании API, который работает во множестве браузеров. Благодаря сочетанию универсальности и расширяемости jQuery изменил способ написания JavaScript миллионами людей.
- Bootstrap: Бесплатная CSS-платформа с открытым исходным кодом, предназначенная для адаптивной, ориентированной на мобильные устройства веб-разработки. Он содержит шаблоны дизайна на основе CSS и JavaScript для типографики, форм, кнопок, навигации и других компонентов интерфейса.
- Owl Carousel: библиотека помогла мне создавать слайдеры на веб-сайтах с красивыми эффектами перехода и стилями.
- Параллакс: это современная функция, я использую ее для добавления красивых эффектов параллакса к макету при прокрутке мыши.
- Font Awesome и Ion Icons: векторные значки и логотипы социальных сетей для использования на веб-сайтах. Font Awesome — это самый популярный набор значков и инструментов в Интернете, его используют 38% сайтов, использующих сторонние скрипты шрифтов, а Ion Icons — это значки премиум-класса для использования в веб-приложениях, iOS, Android и настольных компьютерах. И это поддержка SVG и веб-шрифтов.
- Mixitup: Высокопроизводительная библиотека без зависимостей для манипуляций с анимированным DOM, дающая возможность фильтровать, сортировать, добавлять и удалять элементы DOM с помощью красивой анимации. MixItUp прекрасно сочетается с вашим существующим HTML и CSS, что делает его отличным выбором для адаптивных макетов и совместимо со встроенным потоком, процентами, медиа-запросами, флексбоксами и многим другим.
- TypedJs: библиотека, которая печатает. Введите любую строку и наблюдайте, как она печатает с установленной вами скоростью, возвращайте набранное назад и начинайте новое предложение для любого количества строк, которые вы установили.
- И наконец, в файле
main.js я собираю все вышеперечисленное: реализую несколько плагинов для создания эффектов в темах. Эти плагины запакованы, поэтому мне не придется вручную ничего редактировать в файле. Единственное, что необходимо знать, это как вызвать метод.
Использованные изображения и иллюстрации
Все изображения, использованные в дизайне, на 100% бесплатны, но предназначены только для демонстрационных целей. Я использовал изображения, значки и иллюстрации со следующих веб-сайтов:
- Пексели
- Pixabay
- Флатикон
- Фрипик
