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

  • 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:

--

--

--

Full Stack Web Developer | antonzaharia.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

#10 Common JavaScript errors — How to avoid them?

[javascript] about ‘prototype’

Drag & Drop re-ordering using HTML and React

https://chng.it/KdQBBWJW

4 ESLint Rules to Catch Logic and Syntax Errors

Electron Build Desktop Apps HTML\CSS\JS | Getting Started 01

Building Gatsby With Multiple Post Type

Get Funky on the Console

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Zaharia Anton

Zaharia Anton

Full Stack Web Developer | antonzaharia.com

More from Medium

The solution of practices found in React official tutorial (Tic Tac Toe)

Working With Spotify’s API To Display Currently Playing With React

React Task App (Part 1)

How To Create and Set Up a React Project with Create React App in Windows?