Мой первый React без Figma. Как собрать лендинг из головы 🤯
Привет! Это Данил. Открываю портфолио с проекта, который стал для меня настоящим вызовом — переходом от статичной верстки к динамике. Проект: lend-test (все имена, логотипы и данные о заработке являются вымышленными). 🎨 Главная особенность: у меня не было готового дизайна или макета в Figma. Я собирал интерфейс сразу в коде, опираясь только на референсы и свою голову. Это научило меня мыслить компонентами и проектировать архитектуру до написания первого тега. ✅ Что внутри: • Атомарные компоненты: кнопки, карточки, формы. • Роутинг между экранами. • Полный адаптив под мобильные устройства. • Микроанимации (на скрине видно, как плавно появляются элементы при загрузке страницы). 📌 Структура страниц: Вступление → Что такое PIXUM AI? → Как это работает → Наш послужной список → Почему стоит выбрать нас → Отзывы → Часто задаваемые вопросы → Форма регистрации. В карусели: 1️⃣ Скриншот главной страницы (с анимированным появлением элементов, см. видео). 2️⃣ Страница «Как это работает» с пошаговой схемой. 3️⃣ Мобильная версия сайта. 4️⃣ Фрагмент кода компонента с использованием хуков useState и useEffect. 5️⃣ Схема папок проекта (показывает организацию файлов). 6️⃣ Логин/регистрация с формой ввода данных. 7️⃣ Экраны ошибок и загрузки. 8️⃣ Галерея отзывов. 9️⃣ Дополнительный фрагмент кода (например, стилизация кнопок). Этот проект доказал мне, что можно создавать качественные интерфейсы даже без готовых дизайн-макетов. Главное — понимать логику работы приложения. Листайте карусель, смотрите видео с анимацией (https://disk.yandex.ru/i/ipXdq_zVUarPGA), сохраняйте пост. Если вам тоже приходилось собирать сайты без дизайнера — расскажите об этом в комментариях! #React #JavaScript #Frontend #HTML #CSS #Анимации #Портфолио #JuniorDev