Проект AlinaWebDev.com стал моим финальным заданием в рамках обучения на курсе фронтенд-разработки, необходимым для получения сертификата. Основная задача заключалась в создании личного сайта-портфолио, который бы демонстрировал мои навыки и проекты, накопленные за время обучения, включая работу с HTML, CSS, JavaScript и анимациями. Я должна была разработать сайт, который был бы не только функциональным, но и визуально привлекательным, с акцентом на адаптивность и интерактивность. Одним из требований было использование GSAP (GreenSock Animation Platform) для добавления плавных анимаций, чтобы сделать сайт более динамичным и современным. Также нужно было включить разделы с проектами, информацией обо мне и контактной формой, чтобы потенциальные клиенты или работодатели могли легко ознакомиться с моими работами и связаться со мной.
Для создания сайта-портфолио я начала с планирования структуры: определила ключевые разделы — Home, About, Projects и Contact. Я разработала разметку с помощью HTML, используя семантические теги (<header>, <nav>, <main>, <footer>), чтобы улучшить читаемость кода и SEO. Для стилизации я использовала чистый CSS, создав адаптивный дизайн с помощью медиа-запросов: настроила стили для разных разрешений экрана, чтобы сайт корректно отображался на мобильных устройствах, планшетах и десктопах.Для добавления анимаций я интегрировала GSAP (GreenSock Animation Platform): настроила плавное появление заголовков и карточек проектов при скролле, используя методы gsap.from() и ScrollTrigger, что сделало сайт более динамичным. В разделе Projects я добавила карточки с описанием моих работ. На странице Contact я создала форму обратной связи с полями для имени, email и сообщения, а также добавила ссылки на социальные сети.
В результате я создала профессиональный сайт-портфолио (https://alinawebdev.com/), который стал финальным проектом моего обучения и помог мне получить сертификат фронтенд-разработчика. Сайт включает разделы Home, About, Projects и Contact, с адаптивным дизайном, реализованным с помощью чистого CSS, медиа-запросов и Flexbox, что обеспечивает корректное отображение на всех устройствах. Использование GSAP позволило добавить плавные анимации: заголовки и карточки проектов появляются при скролле, что делает сайт более динамичным и привлекательным. Раздел Projects демонстрирует мои работы, такие как Trainer Website, а страница Contact содержит форму обратной связи и ссылки на социальные сети.
Пожаловаться
