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

GSoC Journey : 1st Week at mlpack

INSANELY fast prototyping with Flask + Vue + Tailwind (Part 1)

Announcing Nrwl Nx 6.0

[Update] Template — Vue JS + Asp.Net Core 3.1— Visual Studio 2019

Develop Spring Boot/React Application Using JHipster: Part-I

Creating your gRPC service in Nodejs/Typescript 🔥 (Part 2)

Introducing Marked.cc

Internationalization (i18n) in React using hooks

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

Component Lifecycle’s

Benefits of Web Content Accessibility Guidelines

The Basics of React Router

Another way to import React.lazy component