В этой статье мы создадим простой сайт-портфолио с полным исходным кодом. Мы создаем этот веб-сайт портфолио, используя html, css и javascript.
Мы используем javascript на веб-сайте портфолио только для анимации прокрутки с синхронизацией. Итак, давайте создадим наш простой сайт-портфолио с исходным кодом.
HTML-код
CSS-код
Это весь css для кода сайта нашего портфолио. Это почти 600+ строк кода для сайта-портфолио. Делаем стиль шаг за шагом, начинаем с навбара стилей.
В основном мы используем display flex для создания навигационной панели, затем стилизуем текст нашей целевой страницы и стилизуем кнопку прокрутки, которую вы видите в финальном предварительном просмотре. Затем стилизуем раздел обо мне с отображением гибкой 1 стороны абзаца и 2-го сайта моей панели навыков навыков.
Затем стилизуйте раздел проекта с помощью стилей кнопок и придайте изображению округлый эффект. Затем последний код css, который мы стилизуем для нашего раздела «Свяжитесь со мной», дает эффект наведения, когда мы наводим курсор на ссылки профиля в социальных сетях. Это все, что касается кода нашего сайта-портфолио.
Мы используем медиа-запросы, чтобы сделать код веб-сайта нашего портфолио отзывчивым, поэтому на каждом устройстве наше портфолио загружается с одним и тем же дизайном без изменения макета.
Код JavaScript (код Jquery)
Мы используем этот код javascript (jquery) для анимации прокрутки. Мы используем эффект наведения с анимацией прокрутки, поэтому при прокрутке эффект наведения также изменился.
Затем мы используем плавную прокрутку ко всем ссылкам, включая ссылку на панель навигации и ссылку на проект в разделе обо мне. Итак, это наш код веб-сайта портфолио.
Ниже здесь 👇 Наконец, вы видите результат с нашим кодом веб-сайта портфолио.
