hjelmeir

import React, { useState } from 'react'
import { WithContext as ReactTags } from 'react-tag-input'

const testProjects = [
  'Disney'
]

const defaultSuggestions = testProjects.map((item) => {
  return {
    id: item,

hjelmeir

import { useEffect, useState } from 'react'
import useResizeObserver from './useResizeObserver'

/*
  Watches window resize and element resize
  Sets height of observeMe dom element to window height
  Params:
  observeMe(string): className of element to be observed
  Returns:
  setInitate(func): when to initiate fullscreen/resize watching

hjelmeir

@media (max-width: 960px) {
 .column {
   width: 100% !important;
   min-width: 100% !important;
   display: block !important;
   text-align: center;
   box-sizing: border-box;
   word-break: break-word;
   max-width: 95% !important;
 }

hjelmeir

<tr>
  <td class=”columns”>
    <div class="column">
      <table width="100%">
        <tr>
            <td>
                [content goes here]
            </td>
        </tr>
      </table>

hjelmeir

import React, { useEffect, useState } from "react"
import useIntersect from '../hooks/useIntersect'

/*
I set up this component to watch and show a CTA bar when the observered element isn't visible
The bar will disappear when observedEl is visible, and reappear when not visible in viewport
*/

const ComponentName = () => {
  // State variables for watching intersecting and for setting the observer

hjelmeir

// Layered Slider: MJ
// Build by: Robin Hjelmeir
// Date: June 2018

; (function ($) {
  $.fn.mjSlider = function(options) {

    const $parent = $(this)
    let children = {}
    const defaultOptions = {

hjelmeir

<path class="slide-left" d="M795.341472,367.682423 ... L795.341472,367.682423 Z"></path>
<path class="slide-right" d="M801.341472,396.682423 ... L801.341472,396.682423 Z"></path>

hjelmeir

.jump-out {
  animation: jump-out 0.65s 3s 1 forwards;
}

@keyframes jump-out {
  to {
    transform: translate(0, 0);
  }
}

hjelmeir

<g class="up-and-down">
  <path d="M40.9551671,49 C40.9848992,49.1652618 41,49.3319857 41,49.5 C41,53.6421356 31.8218374,57 20.5,57 C9.17816263,57 0,53.6421356 0,49.5 C0,49.3319857 0.0151007836,49.1652618 0.0448328915,49 L0,49 L0,7 L41,7 L41,49 L40.9551671,49 Z" id="Combined-Shape" fill="url(#data-linearGradient-1)"></path>
  <ellipse id="Oval-5" fill="url(#data-linearGradient-8)" cx="20.5" cy="7.5" rx="20.5" ry="7.5"></ellipse>
</g>
<g class="up-and-down sm">
  <g transform="translate(108.000000, 22.000000)">
    <path d="M20.9819839,24.9454545 ..."></path>
    <ellipse fill="#FCC8B6" cx="10.5" cy="4.30909091" rx="10.5" ry="4.30909091"></ellipse>
  </g>
</g>

hjelmeir

polyline.animate-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }