How I created my Resume as a 3D card, using React Spring

While looking at my portfolio website I was thinking to create some feature that will catch the user make him engage more with it.

Before the change, I had a small button on the bottom of the page

Download Resume which was not my favourite, and decided to change that.

I’ve created a new navigation tab and link it to a new page — Resume.

Firstly I just loaded the pdf there, and that did not create a website developer resume page look, and I started to research about nice looking pages.

I found many interesting ones but the one I stopped by was a 3D card that moves a bit in the cursor direction.

So, how I approach it:

• I made a screenshot of the Resume to get a square image.
• I’ve built the component to display the image in the centre of the page.
• Build calc function to return an array with x, y and s directions.
• Build trans function to interpolate those values to CSS for spring.
• Define useSpring hook and pass some configuration for the initial position.
• And finally, I passed those functions in events handlers as follows:

That created an awesome 3D moving card and, in my opinion, is the thing from my portfolio that catches the eye.

Here am I, proud of my resume page from https://antonzaharia.com.