What is Cardfolio! ?

Cardfolio! is a Gatsby-based cardfolio site framework.

Wait, what is cardfolio?

See below

That's right! It is a portfolio site just like business card.It has the paper texture and rotation as if a real business card. 

Cardfolio site's true worth is definitely seen when you hand over your business card to someone. Below is my business card, imagine you receive this card.(If you browse this site by mobile, you can access from here)

How was that? You can make a great impression to receiver like you just felt 😄

And this time, I released on Github as OSS so that anyone can create a your own card folio site 😙 I also designed the logo 🖌

Cardfolio!

If you have used react before, you can easily create it! Also, you can customize your design and paper texture.

How to rotate of business card?

You might think

How this rotation implemented?

Let me explain about this.

Both side page

To create both side of card, implement these steps.

• Create front and back components respectively and pile up them under container (card) with position: absolute.
• Rotate y axis of the backside component 180 degrees by transform rotateY.
• To switch between frontside and backside, rotate container.

But, there is a pitfall. When it is turned over, mirror inverted frontside component is displayed.

This is because if you turn over the DOM with transform3d, the back side of the object will be displayed by default. To solve this, it is necessary to change the default behavior by set backface-visibility to a hidden.

.frontSide {
  backface-visibility: hidden; 
}

.backSide {
  backface-visibility: hidden; 
}

This way, if you flip it over, the frontside displays nothing, and as a result the back side will be displayed on the screen as the top. Sample code here

Rotate according to user operation

Now rotate the card as the user drags. First of all, to detect a drag, you can easily get it using the hook called useDrag in react-use-gesture

import { useSpring } from 'react-spring'
...
const bind = useDrag(({ down, movement: [moveX], last }) => {
  ...
})

When the drag is detected, the current x coordinate is converted to the y axis angle and the card is rotated.

   // convert Xposition to degree
   const degree = lastDegree + moveXToDegree(moveX)
...
　 // in draggin
  if (down) {
    // rotate as user dragging
    set({ transform: `rotateY(${degree}deg)` })
    return degree
  }
...

Furthermore, when user release his/her finger, need back to a front or back to horizontally with an animation(ReactSpring used). The decision logic is as shown in the following figure

• In first quadrant or third quadrant, decrease the angle.
• In the second and fourth quadrants, increase the angle.

if (last) {
  // judge back or front and set degree
  const horizontalDegree = calcHorizontalDegreeToReturn(degree)
  setDegree(horizontalDegree)
}

Please see Source Code for details.

Summary

How was that? Gatsby is a great framework to build a website on a regular basis, moreover it's a good idea to build an OSS based on Gatsby because you can develop while taking advantage of the various benefits of Gatsby 🎁
I hope that one of the readers of this article make their own card folio site using Cardfolio! !