Если вы веб-разработчик или веб-дизайнер, вам необходимо иметь сайт-портфолио. Это позволяет вам предоставить информацию о себе и продемонстрировать свои лучшие работы с соответствующими навыками и опытом. Затем я покажу вам, как создать красивый адаптивный веб-сайт-портфолио для себя, используя HTML, CSS, JavaScript и Bootstrap версии 5. ]
Наличие веб-сайта портфолио имеет ряд преимуществ, в том числе:
он предоставляет платформу для демонстрации ваших соответствующих навыков и опыта
это показывает вашу индивидуальность
это позволяет менеджерам по найму найти вас, а не вам связываться с ними
вас легко найти в поисковых системах, таких как Google
Bootstrap — это популярная интерфейсная среда CSS, которая используется для разработки адаптивных и удобных для мобильных устройств веб-сайтов. Последний выпуск Bootstrap — версия 5. Вы можете найти официальную документацию по Bootstrap 5 здесь.
Структура папок
Теперь мы приступим к созданию веб-сайта портфолио.
Сначала создадим структуру папок. Вы можете получить стартовые файлы проекта на GitHub. Кроме того, вы можете посетить здесь, чтобы увидеть живую демонстрацию этого проекта. loading="lazy"/>Структура папки проекта
Структура папки состоит из файлов index.html, style.css, script.js и папки с изображениями. Мы напишем все CSS в файле style.css и JavaScript в файле script.js.
В файле index.html вы можете увидеть стандартный HTML-код с Bootstrap CDN, шрифтом awesome kit и ссылкой на внешняя таблица стилей и JavaScript.
Здесь файл script.js загружается после загрузки всего HTML-кода.
Теперь давайте поработаем над добавлением меню навигации в наш проект. Это будет помочь посетителям найти нужную им информацию.
Мы будем использовать класс Bootstrap fixed-top в элементе навигации, чтобы панель навигации оставалась в верхней части страницы. а navbar-brandгде мы сохраняем имя человека как бренд.
Навигационная панель имеет следующие функции:
Шесть ссылок: главная, о нас, услуги, портфолио, контакты и нижний колонтитул
Он имеет прозрачный фон. Позже мы добавим темный фон при прокрутке страницы.
Переключается на устройствах меньшего размера
Вы можете найти более подробную информацию о функциях панели навигации Bootstrap 5 здесь.
Однако на панели навигации возникают проблемы при прокрутке. Он полностью прозрачен на всей странице, что вызывает проблемы с читабельностью. Мы исправим эту проблему после того, как заполним раздел «Услуги», чтобы вы правильно поняли проблему.
Теперь мы добавим главное изображение с текстом в центре. Главное изображение — это термин веб-дизайна, который относится к высококачественному изображению во всю ширину, которое отображает основные цели компании или отдельного человека, репрезентативное изображение, фотографию или другие привлекающие внимание элементы. Это помогает привлечь пользователей на ваш сайт.
Привет, это я Брэд
Я профессиональный фрилансер в Нью-Йорке
Также добавим CSS для приведенного выше кода в файл style.css:
/* фоновое изображение героя */
.bgiimage {
высота:100вх;
фон: url('images/heroImage.jpeg');
размер фона: обложка;
должность: родственница;
}
/* текст css над главным изображением*/
.hero_title {
размер шрифта: 4.5rem;
}
.hero_desc {
размер шрифта: 2rem;
}
.hero-текст {
выравнивание текста: по центру;
положение: абсолютное;
верх: 50%;
слева: 50%;
преобразование: перевести (-50%, -50%);
белый цвет;
}
Здесь мы видим, что у раздела есть идентификатор с именем bgimageкоторый отвечает за отображение фонового изображения во всю ширину. Он также отображает некоторый текст в центре над фоновым изображением с помощью приведенного выше CSS.
Вот как на данный момент сайт выглядит с панелью навигации и разделом героев: 1293" height="708" loading="lazy"/>Основное изображение с панелью навигации
Как создать раздел "О нас"
Страница "О нас" содержит важную информацию о вас и ваш фон. Посетители вашего сайта портфолио могут узнать вас по информации, которую вы предоставляете на этой странице.
Мы добавим изображение в левую часть строки, а в добавьте наше краткое введение в этот раздел. Давайте продемонстрируем это, используя код ниже:
Обо мне
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Имя: Дэвид Паркер
Возраст: 28
Профессия: веб-разработчик
Имя: Дэвид Паркер
Возраст: 28
Профессия: веб-разработчик
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Давайте добавим немного CSS для изображения слева:
Это создаст раздел «О нас». Вы можете изменить содержимое в зависимости от ваших вариантов использования. Мы добавили классы с именами mt-4 и pt-4 с классом-контейнером, который установит верхнее поле и верхнее отступы равными 1,5 рем.
В строке есть два столбцы. У одного есть класс col-lg-4 для отображения изображения, которое будет занимать левый столбец с сеткой из 4 частей для больших экранов.
Следующему столбцу назначается класс col-lg-8который будет занимать правый столбец с сеткой из 8 частей для больших экранов. Для средних и маленьких экранов они будут накладываться друг на друга, что мы можем видеть в приведенном ниже GIF-файле:Раздел «О нас»
Раздел «Как сделать услуги»
Этот раздел помогает превратить посетителей веб-сайта в потенциальных клиентов. Здесь вы объясняете, какие конкретные услуги вы предлагаете и в какой нише вниз предлагаемые услуги.
Давайте добавим код для этого раздела и опишем его ниже:
Услуги
Разработка веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Дизайн веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Развертывание веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
SEO
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
DevOps
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Контроль качества
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Поскольку этот веб-сайт предназначен для веб-разработчиков и дизайнеров, я включил некоторые услуги, которые могут предложить веб-разработчики или дизайнеры.
Мы использовали загрузку карты для отображения услуг. Наш раздел услуг состоит из 2 строк и 3 столбцов в каждой. Для больших экранов с шириной больше или равной 992 пикселям отображаются три карточки подряд. Для экранов шириной менее 992 пикселей в строке отображается только одна карточка.
Подробнее о контрольных точках начальной загрузки можно найти здесь.
Кроме того, на каждую карточку добавлены шрифты, чтобы они выглядели лучше.
Как добавить темный цвет фона на панель навигации при прокрутке страницы
Если вы внимательно посмотрите на приведенный выше gif, вы увидите, что панель навигации прозрачна на всей странице, что вызывает проблемы с читаемостью . Итак, давайте поработаем над решением этой проблемы.
Мы напишем немного JavaScript и CSS, чтобы решить эту проблему. Мы добавим класс navbarDarkчтобы отображать темный цвет фона для панель навигации на прокрутке страницы.
Для этого нам нужно перейти в файл script.js и добавить следующий код:
// добавить класс navbarDark на прокрутку панели навигации
const header = document.querySelector('.navbar');
window.onscroll = функция () {
вар топ = окно.scrollY;
если (верхнее >= 100) {
header.classList.add('navbarDark');
}
еще {
header.classList.remove('navbarDark');
}
}
Теперь давайте разберем приведенный выше код: селектор CSS (в данном случае это .navbar).
window.onscroll запускается, когда происходит событие прокрутки.
window.scrollY возвращает количество пикселей, на которое документ прокручивается по вертикали, и его значение присваивается переменной с именем top.
Если значение top больше или равно 100, в заголовок добавляется класс navbarDark.
Давайте быстро добавим CSS для класса navbarDark. Для этого перейдите в файл style.css и добавьте следующий код:
/* отображать черный цвет фона при прокрутке панели навигации */
.navbarScroll.navbarDark {
цвет фона: черный;
}
Вот как теперь будет выглядеть панель навигации:
Раздел «Как создать портфолио»
В этом разделе собраны ваши лучшие работы. Люди увидят, на что вы способны, и продемонстрируют ваше успешное прошлое. Работа определенно привлечет больше потенциальных клиентов или рекрутеров. Поэтому добавляйте в этот раздел только свои лучшие работы. карты.
Это будет код для раздела портфолио:
Портфолио
Клон YouTube
Lorem Ipsum — это просто фиктивный текст полиграфической и наборной индустрии.
Каждая карточка имеет изображение, название, описание и ссылку на проекты. Три карты отображаются подряд для больших экранов с контрольными точками шириной ≥ 992 пикселей, но для экранов шириной < 992 пикселей отображается только одна карта подряд. :
В первом столбце будет отображаться карта Google, а в следующем – контактная форма.
В форме есть четыре разных поля: имя, адрес электронной почты, тема и сведения о проекте. Форма не отправляет запрос сама. Вам нужно будет подключить его к любому внутреннему языку. Или вы можете просто использовать для этого форму Netlify Form или Formspree . 01-25-11-31-56" width="1233" height="589" loading="lazy"/>Контактная информация
Теперь мы подошли к последнему разделу этот пост, который является разделом нижнего колонтитула. ] В нижнем колонтитуле мы добавим ссылки на наши социальные сети с помощью значков Font Awesome.
Без CSS наш нижний колонтитул будет выглядеть так: "1273" height="131" loading="lazy"/>нижний колонтитул без стилей
Давайте добавим стиль в нижний колонтитул с помощью этого кода:
/* стилизация иконок социальных сетей */
.социальные иконки {
размер шрифта: 36px;
курсор: указатель;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
цвет: #008000;
}
.fab {
цвет: #000000;
}
/* стиль нижнего колонтитула */
#нижний колонтитул {
цвет фона: #808080;
выравнивание текста: по центру;
}
Значки теперь отображаются в центре с эффектом наведения, который мы можем видеть в приведенном ниже GIF-файле.
Последние штрихи
Чтобы добавить расстояние между всеми разделами, добавим еще немного стиля:
Теперь мы закончили работу над полным веб-сайтом портфолио.
Вы можете найти полный исходный код этого проекта здесь.
Заключение
Вот как можно создать полностью адаптивный веб-сайт портфолио с помощью HTML, CSS, JavaScript и Bootstrap 5 .
В этом сообщении блога мы рассмотрели некоторые из Преимущества создания сайта-портфолио для веб-разработчиков и дизайнеров. Мы разделили весь веб-сайт на несколько разделов и обсуждали каждый из них в отдельности по мере его создания.
Вы можете настроить этот веб-сайт в соответствии со своими вариантами использования.
Надеюсь, этот пост был вам полезен.
Удачного программирования!
Вы можете найти меня в Твиттере, чтобы получать ежедневные материалы о веб-разработке.
/* css раздела сервисов */
.servicesText.card {
высота: 280 пикселей;
курсор: указатель;
}
.servicesIcon {
размер шрифта: 36 пикселей;
выравнивание текста: по центру;
ширина: 100%;
}
.card-название {
выравнивание текста: по центру;
}
.card: hover .servicesIcon {
цвет: #008000;
}
.servicesText:наведите {
граница: 1px сплошная #008000;
}
Раздел «Как создать портфолио»
Загрузка...
