An Animated Poem, built with CSS drawings & animations

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

An Animated Poem built with CSS drawings & animations Felipe Bernardes felipebernardes.com Codemotion Berlin '19

Slide 3

Slide 3 text

img img img Conﬁdential | 3 $ whoami Felipe Bernardes ● Lives in Sorocaba, Brazil ● Local conf/meetup co-organizer ● Remote Freelancer @ Toptal ● Front End Dev @ BabyCenter ● Awful drums player Hire the top 3% of freelance talent @felip_bernardes Hire the top 3% of freelance talent

Slide 4

Slide 4 text

1. context 2. code 3. learnings @felip_bernardes

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Why? @felip_bernardes

Slide 7

Slide 7 text

Why not? @felip_bernardes

Slide 8

Slide 8 text

Just kidding @felip_bernardes

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

How? @felip_bernardes

Slide 12

Slide 12 text

4 steps @felip_bernardes

Slide 13

Slide 13 text

1. have a surgery 2. get really bored while on recovery 3. ??? 4. animated poem

Slide 14

Slide 14 text

Just kidding @felip_bernardes

Slide 15

Slide 15 text

2 steps @felip_bernardes

Slide 16

Slide 16 text

1. Drawings 2. Animations @felip_bernardes

Slide 17

Slide 17 text

css drawing basics @felip_bernardes

Slide 18

Slide 18 text

css drawing basics @felip_bernardes

Slide 19

Slide 19 text

from basic shapes, we can draw anything! @felip_bernardes

Slide 20

Slide 20 text

bauhaus @felip_bernardes

Slide 21

Slide 21 text

heart example @felip_bernardes

Slide 22

Slide 22 text

let's see some code @felip_bernardes

Slide 23

Slide 23 text

1. Drawings a. heart baloon b. me and amanda c. mini hearts d. stars e. ground @felip_bernardes

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

1. 2. Animations a. me and amanda, flying b. me and amanda, blinking c. mini hearts, popping up d. stars, slowly appearing e. sky, rotating f. ground, moving out of view g. poem stanzas, showing up

Slide 26

Slide 26 text

full demo presentation @felip_bernardes

Slide 27

Slide 27 text

Made for/Thanks to Amanda Vilela @felip_bernardes

Slide 28

Slide 28 text

learnings @felip_bernardes

Slide 29

Slide 29 text

frameworks & tools @felip_bernardes

Slide 30

Slide 30 text

creativity as our tool @felip_bernardes

Slide 31

Slide 31 text

one thing from this talk @felip_bernardes

Slide 32

Slide 32 text

exercise your creativity @felip_bernardes

Slide 33

Slide 33 text

fork me @felip_bernardes

Slide 34

Slide 34 text

a few links @felip_bernardes

Slide 35

Slide 35 text

@felip_bernardes

Slide 36

Slide 36 text

Front End, Back End & Full Stack QA analyst DevOps AR/VR Sales Force Blockchain and others

Slide 37

Slide 37 text

Slide 38

Slide 38 text

For details, come talk to us @ Toptal Booth!

Slide 39

Slide 39 text

code @ bit.ly/felipe-code slides @ bit.ly/felipe-slides

Slide 40

Slide 40 text

felipebernardes.com [email protected] Felipe Bernardes Front End Developer @felip_bernardes code @ bit.ly/felipe-code slides @ bit.ly/felipe-slides Vielen Dank! Come talk to us @ Toptal booth!