Что такое Кардфолио! ?

Карточное портфолио! - это основанный на Гэтсби фреймворк для сайта-портфолио.

Подождите, а что такое портфолио?

См. ниже

Верно! Сайт-портфолио, как визитка, с бумажной текстурой и вращением, как у настоящей визитки.

Истинная ценность сайта Cardfolio определенно видна, когда вы передаете кому-то свою визитку. Ниже моя визитка, представьте, что вы получили эту карту. (Если вы просматриваете этот сайт с мобильного телефона, вы можете получить доступ здесь)

Как это было? Вы можете произвести на получателя отличное впечатление, как только что почувствовали 😄

И на этот раз я выпустил на Github как OSS, чтобы каждый мог создать свой собственный сайт-фолио Я также разработал логотип 🖌



kazuooooo / Карточное портфолио
Карточное портфолио! это единственная платформа для сайта-портфолио. Если у вас есть опыт работы с React, вы можете легко создать свой собственный… github.com



Если вы раньше использовали реакцию, вы легко сможете ее создать! Также вы можете настроить свой дизайн и текстуру бумаги.

Как повернуть визитку

Если вы разработчик, вы должны думать

Как реализована эта ротация?

Позвольте мне объяснить об этом.

Обе боковые страницы

Чтобы создать обе стороны карты, выполните следующие действия.

  • Создайте передний и задний компоненты соответственно и сложите их под контейнером (картой) с position: absolute.
  • Поверните ось Y заднего компонента на 180 градусов с помощью преобразования rotateY.
  • Чтобы переключаться между передней и задней стороной, поверните контейнер.

Но здесь есть подводный камень. Когда он перевернут, отображается зеркально перевернутая передняя часть.

Это связано с тем, что если вы перевернете DOM с помощью transform3d, по умолчанию будет отображаться обратная сторона объекта. Чтобы решить эту проблему, необходимо изменить поведение по умолчанию, установив backface-visibility на скрытый.

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

Поверните в соответствии с операциями пользователя

Теперь поверните карточку, пока пользователь ее перетаскивает. Прежде всего, чтобы обнаружить перетаскивание, вы можете легко получить его с помощью хука под названием useDrag в response-use-gesture.

При обнаружении перетаскивания текущая координата x преобразуется в угол оси y, и карта поворачивается.

Кроме того, когда пользователь отпускает палец, ему нужно вернуться к передней или задней части по горизонтали с анимацией (используется ReactSpring). Логика принятия решения показана на следующем рисунке.

  • В первом или третьем квадранте уменьшите угол.
  • Во втором и четвертом квадранте увеличьте угол.

См. Подробности в Исходном коде.

Резюме

Как это было? Gatsby - отличный фреймворк для создания веб-сайтов на регулярной основе, кроме того, неплохо было бы создать OSS на основе Gatsby, потому что вы можете развиваться, пользуясь различными преимуществами Gatsby 🎁

Я надеюсь, что один из читателей этой статьи создаст собственный сайт-карточный фолио с помощью Cardfolio! !