DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Let's make your cardfolio site πŸ’³πŸ’¨
Kazuya Matsumoto
Kazuya Matsumoto

Posted on

Let's make your cardfolio site πŸ’³πŸ’¨

logo.png

What is Cardfolio!Β ?

Cardfolio! is a Gatsby-based cardfolio site framework.

Wait, what is cardfolio?

See below

gif

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)

card.png

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.

rotate.png

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

pitfall.png

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; 
}
Enter fullscreen mode Exit fullscreen mode

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 }) => {
  ...
})
Enter fullscreen mode Exit fullscreen mode

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
  }
...
Enter fullscreen mode Exit fullscreen mode

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.

ro

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

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!Β !

Top comments (2)

Collapse
 
lampewebdev profile image
Michael "lampe" Lazarski

First time I see a Cardfolio!

This is a pretty neat idea!

I think I will create one myself :)

Collapse
 
kazuwombat profile image
Kazuya Matsumoto

Thank you!
Please tell me if you have any kind of trouble :0

Join us at DEV
Yes, this is technically an β€œad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you. Β  Create an account and continue your coding journey.