Auto-Animate Example

This will fade out


                    function Example() {
                      const [count, setCount] = useState(0);
                    }
                

Auto-Animate Example

Color in Code Portfolio

Click on the project you want to view, and use arrows to navigate between projects.

Languages we have worked with:


                    function Example() {
                      New line!
                      const [count, setCount] = useState(0);
                    }
                

Line Height & Letter Spacing

Line Height & Letter Spacing


                        import React, { useState } from 'react';

                        function Example() {
                          const [count, setCount] = useState(0);

                          return (
                            ...
                          );
                        }
                    

                        function Example() {
                          const [count, setCount] = useState(0);

                          return (
                            <div>
                              <p>You clicked {count} times</p>
                              <button onClick={() => setCount(count + 1)}>
                                Click me
                              </button>
                            </div>
                          );
                        }
                    

                        function Example() {
                          // A comment!
                          const [count, setCount] = useState(0);

                          return (
                            <div>
                              <p>You clicked {count} times</p>
                              <button onClick={() => setCount(count + 1)}>
                                Click me
                              </button>
                            </div>
                          );
                        }
                    

Swapping list items

  • One
  • Two
  • Three

Swapping list items

  • Two
  • One
  • Three

Swapping list items

  • Two
  • Three
  • One

SLIDE 1

hexagons morphin into sum

SLIDE 2

slide state 2

Project:
Harry Potter x Vans
Roles:
Principle Developer
Editor
Animator
Lang/Lib:
JS/CSS/HTML

SLIDE 3

slide state 3

SLIDE 3

slide hexagon title thing

data-auto-animate-id="a"

A1

data-auto-animate-id="a"

A1

A2

data-auto-animate-id="b"

B1

data-auto-animate-id="b"

B1

B2

Slide 1
Slide 2
Slide 3
Slide 4
A
Slide 1
Slide 2
Slide 3
Slide 4
A
Slide 1
Slide 2
Slide 3
Slide 4
A
Slide 1
Slide 2
Slide 3
Slide 4
A