это подчинение для Frontend Challenge v24.09.04, Glam Up My Markup: Space

] Что я построил

целевая страница оснащена ретро, ​​вдохновленным пространством дизайном с современными соображениями удобства использования, такими как переключение Light/Dark Mode, плавная прокрутка и полностью отзывчивый макет. Посетители могут исследовать планеты, луны и небесные объекты через интерактивную карусель, а содержание предназначено для того, чтобы быть образовательным, но веселым для навигации.

] Ключевые функции включают:

]
• ] Light/Dark Mode Toggle : пользователи могут переключаться между световыми и темными темами для более персонализированного опыта.
]
• ] Interactive Carousel : динамические карусели позволяют посетителям исследовать различные планеты, луны и небесные объекты.
]
• ] плавная прокрутка : a «Begin Exploration» запускает плавную прокрутку в раздел обзора солнечной системы.
]
• ] полностью отзывчивый дизайн : сайт разработан, чтобы выглядеть великолепно как на рабочем столе, так и на мобильных устройствах.
]

] Демо

вы можете просмотреть код на GitHub: github Repository

и проверьте живую демонстрацию здесь: Live Demo

] Скриншоты

Light Mode:

Dark Mode:

пример карусели:

Mobile View:

] Путешествие

я вошел в это без плана дизайна, и план изменился, когда я работал через проект, который может имитировать то, что происходит в реальном мире. Тем не менее, я бы хотел, чтобы я потратил больше времени на каркас моего проекта и мозговой штурм, чтобы собрать все вместе.

я изначально пошел с винтажным стилем терминала. Хотя я был веселым, я чувствовал, как будто Неон Грин не давал мне профессионального взгляда, к которому я стремился.

Итак, в конце концов я выбрал более минималистичный вид, сохраняя при этом несколько забавных элементов. Мое новое видение было вдохновлено винтажным учебником, который можно увидеть используемыми цветами, и некоторые из элементов дизайна, таких как разделитель ASCII и шрифты.

самая большая проблема, с которой я столкнулся, помимо дизайна, было обеспечение того, чтобы проект отлично выглядел на мобильных устройствах. Мне пришлось написать конкретные мобильные CSS для нескольких разделов, чтобы оптимизировать дизайн. Flexbox помог с настройками макета, но создание действительно бесшовного опыта приняло некоторую пробную версию и ошибку.

в целом, этот проект заставил меня творчески думать, адаптировать на лету и эстетику дизайна баланса с удобством использования, которые являются ценными навыками в разработке фронта.