` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","import * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport useEventCallback from '../utils/useEventCallback';\nvar useEnhancedEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;\n/**\n * @ignore - internal component.\n */\n\nfunction Ripple(props) {\n var classes = props.classes,\n _props$pulsate = props.pulsate,\n pulsate = _props$pulsate === void 0 ? false : _props$pulsate,\n rippleX = props.rippleX,\n rippleY = props.rippleY,\n rippleSize = props.rippleSize,\n inProp = props.in,\n _props$onExited = props.onExited,\n onExited = _props$onExited === void 0 ? function () {} : _props$onExited,\n timeout = props.timeout;\n\n var _React$useState = React.useState(false),\n leaving = _React$useState[0],\n setLeaving = _React$useState[1];\n\n var rippleClassName = clsx(classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n var rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n var childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n var handleExited = useEventCallback(onExited); // Ripple is used for user feedback (e.g. click or press) so we want to apply styles with the highest priority\n\n useEnhancedEffect(function () {\n if (!inProp) {\n // react-transition-group#onExit\n setLeaving(true); // react-transition-group#onExited\n\n var timeoutId = setTimeout(handleExited, timeout);\n return function () {\n clearTimeout(timeoutId);\n };\n }\n\n return undefined;\n }, [handleExited, inProp, timeout]);\n return /*#__PURE__*/React.createElement(\"span\", {\n className: rippleClassName,\n style: rippleStyles\n }, /*#__PURE__*/React.createElement(\"span\", {\n className: childClassName\n }));\n}\n\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport Ripple from './Ripple';\nvar DURATION = 550;\nexport var DELAY_RIPPLE = 80;\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n },\n\n /* Styles applied to the internal `Ripple` components `ripple` class. */\n ripple: {\n opacity: 0,\n position: 'absolute'\n },\n\n /* Styles applied to the internal `Ripple` components `rippleVisible` class. */\n rippleVisible: {\n opacity: 0.3,\n transform: 'scale(1)',\n animation: \"$enter \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */\n ripplePulsate: {\n animationDuration: \"\".concat(theme.transitions.duration.shorter, \"ms\")\n },\n\n /* Styles applied to the internal `Ripple` components `child` class. */\n child: {\n opacity: 1,\n display: 'block',\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n backgroundColor: 'currentColor'\n },\n\n /* Styles applied to the internal `Ripple` components `childLeaving` class. */\n childLeaving: {\n opacity: 0,\n animation: \"$exit \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n\n /* Styles applied to the internal `Ripple` components `childPulsate` class. */\n childPulsate: {\n position: 'absolute',\n left: 0,\n top: 0,\n animation: \"$pulsate 2500ms \".concat(theme.transitions.easing.easeInOut, \" 200ms infinite\")\n },\n '@keyframes enter': {\n '0%': {\n transform: 'scale(0)',\n opacity: 0.1\n },\n '100%': {\n transform: 'scale(1)',\n opacity: 0.3\n }\n },\n '@keyframes exit': {\n '0%': {\n opacity: 1\n },\n '100%': {\n opacity: 0\n }\n },\n '@keyframes pulsate': {\n '0%': {\n transform: 'scale(1)'\n },\n '50%': {\n transform: 'scale(0.92)'\n },\n '100%': {\n transform: 'scale(1)'\n }\n }\n };\n};\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\n\nvar TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(props, ref) {\n var _props$center = props.center,\n centerProp = _props$center === void 0 ? false : _props$center,\n classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"center\", \"classes\", \"className\"]);\n\n var _React$useState = React.useState([]),\n ripples = _React$useState[0],\n setRipples = _React$useState[1];\n\n var nextKey = React.useRef(0);\n var rippleCallback = React.useRef(null);\n React.useEffect(function () {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]); // Used to filter out mouse emulated events on mobile.\n\n var ignoringMouseDown = React.useRef(false); // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n\n var startTimer = React.useRef(null); // This is the hook called once the previous timeout is ready.\n\n var startTimerCommit = React.useRef(null);\n var container = React.useRef(null);\n React.useEffect(function () {\n return function () {\n clearTimeout(startTimer.current);\n };\n }, []);\n var startCommit = React.useCallback(function (params) {\n var pulsate = params.pulsate,\n rippleX = params.rippleX,\n rippleY = params.rippleY,\n rippleSize = params.rippleSize,\n cb = params.cb;\n setRipples(function (oldRipples) {\n return [].concat(_toConsumableArray(oldRipples), [/*#__PURE__*/React.createElement(Ripple, {\n key: nextKey.current,\n classes: classes,\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n })]);\n });\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n var start = React.useCallback(function () {\n var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var cb = arguments.length > 2 ? arguments[2] : undefined;\n var _options$pulsate = options.pulsate,\n pulsate = _options$pulsate === void 0 ? false : _options$pulsate,\n _options$center = options.center,\n center = _options$center === void 0 ? centerProp || options.pulsate : _options$center,\n _options$fakeElement = options.fakeElement,\n fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;\n\n if (event.type === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n\n if (event.type === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n\n var element = fakeElement ? null : container.current;\n var rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n }; // Get the size of the ripple\n\n var rippleX;\n var rippleY;\n var rippleSize;\n\n if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n var _ref = event.touches ? event.touches[0] : event,\n clientX = _ref.clientX,\n clientY = _ref.clientY;\n\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n\n if (center) {\n rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.\n\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));\n } // Touche devices\n\n\n if (event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = function () {\n startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }; // Delay the execution of the ripple effect.\n\n\n startTimer.current = setTimeout(function () {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n }\n } else {\n startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }\n }, [centerProp, startCommit]);\n var pulsate = React.useCallback(function () {\n start({}, {\n pulsate: true\n });\n }, [start]);\n var stop = React.useCallback(function (event, cb) {\n clearTimeout(startTimer.current); // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n\n if (event.type === 'touchend' && startTimerCommit.current) {\n event.persist();\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.current = setTimeout(function () {\n stop(event, cb);\n });\n return;\n }\n\n startTimerCommit.current = null;\n setRipples(function (oldRipples) {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, []);\n React.useImperativeHandle(ref, function () {\n return {\n pulsate: pulsate,\n start: start,\n stop: stop\n };\n }, [pulsate, start, stop]);\n return /*#__PURE__*/React.createElement(\"span\", _extends({\n className: clsx(classes.root, className),\n ref: container\n }, other), /*#__PURE__*/React.createElement(TransitionGroup, {\n component: null,\n exit: true\n }, ripples));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object.isRequired,\n\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default withStyles(styles, {\n flip: false,\n name: 'MuiTouchRipple'\n})( /*#__PURE__*/React.memo(TouchRipple));","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport * as ReactDOM from 'react-dom';\nimport clsx from 'clsx';\nimport { elementTypeAcceptingRef, refType } from '@material-ui/utils';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport withStyles from '../styles/withStyles';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n '-moz-appearance': 'none',\n // Reset\n '-webkit-appearance': 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n\n },\n '&$disabled': {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n },\n\n /* Pseudo-class applied to the root element if `disabled={true}`. */\n disabled: {},\n\n /* Pseudo-class applied to the root element if keyboard focused. */\n focusVisible: {}\n};\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\n\nvar ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {\n var action = props.action,\n buttonRefProp = props.buttonRef,\n _props$centerRipple = props.centerRipple,\n centerRipple = _props$centerRipple === void 0 ? false : _props$centerRipple,\n children = props.children,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n component = _props$component === void 0 ? 'button' : _props$component,\n _props$disabled = props.disabled,\n disabled = _props$disabled === void 0 ? false : _props$disabled,\n _props$disableRipple = props.disableRipple,\n disableRipple = _props$disableRipple === void 0 ? false : _props$disableRipple,\n _props$disableTouchRi = props.disableTouchRipple,\n disableTouchRipple = _props$disableTouchRi === void 0 ? false : _props$disableTouchRi,\n _props$focusRipple = props.focusRipple,\n focusRipple = _props$focusRipple === void 0 ? false : _props$focusRipple,\n focusVisibleClassName = props.focusVisibleClassName,\n onBlur = props.onBlur,\n onClick = props.onClick,\n onFocus = props.onFocus,\n onFocusVisible = props.onFocusVisible,\n onKeyDown = props.onKeyDown,\n onKeyUp = props.onKeyUp,\n onMouseDown = props.onMouseDown,\n onMouseLeave = props.onMouseLeave,\n onMouseUp = props.onMouseUp,\n onTouchEnd = props.onTouchEnd,\n onTouchMove = props.onTouchMove,\n onTouchStart = props.onTouchStart,\n onDragLeave = props.onDragLeave,\n _props$tabIndex = props.tabIndex,\n tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,\n TouchRippleProps = props.TouchRippleProps,\n _props$type = props.type,\n type = _props$type === void 0 ? 'button' : _props$type,\n other = _objectWithoutProperties(props, [\"action\", \"buttonRef\", \"centerRipple\", \"children\", \"classes\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"onBlur\", \"onClick\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"onDragLeave\", \"tabIndex\", \"TouchRippleProps\", \"type\"]);\n\n var buttonRef = React.useRef(null);\n\n function getButtonNode() {\n // #StrictMode ready\n return ReactDOM.findDOMNode(buttonRef.current);\n }\n\n var rippleRef = React.useRef(null);\n\n var _React$useState = React.useState(false),\n focusVisible = _React$useState[0],\n setFocusVisible = _React$useState[1];\n\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n\n var _useIsFocusVisible = useIsFocusVisible(),\n isFocusVisible = _useIsFocusVisible.isFocusVisible,\n onBlurVisible = _useIsFocusVisible.onBlurVisible,\n focusVisibleRef = _useIsFocusVisible.ref;\n\n React.useImperativeHandle(action, function () {\n return {\n focusVisible: function focusVisible() {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n };\n }, []);\n React.useEffect(function () {\n if (focusVisible && focusRipple && !disableRipple) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible]);\n\n function useRippleHandler(rippleAction, eventCallback) {\n var skipRippleAction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : disableTouchRipple;\n return useEventCallback(function (event) {\n if (eventCallback) {\n eventCallback(event);\n }\n\n var ignore = skipRippleAction;\n\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n\n return true;\n });\n }\n\n var handleMouseDown = useRippleHandler('start', onMouseDown);\n var handleDragLeave = useRippleHandler('stop', onDragLeave);\n var handleMouseUp = useRippleHandler('stop', onMouseUp);\n var handleMouseLeave = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n event.preventDefault();\n }\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n var handleTouchStart = useRippleHandler('start', onTouchStart);\n var handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n var handleTouchMove = useRippleHandler('stop', onTouchMove);\n var handleBlur = useRippleHandler('stop', function (event) {\n if (focusVisible) {\n onBlurVisible(event);\n setFocusVisible(false);\n }\n\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n var handleFocus = useEventCallback(function (event) {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n\n if (isFocusVisible(event)) {\n setFocusVisible(true);\n\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n\n if (onFocus) {\n onFocus(event);\n }\n });\n\n var isNonNativeButton = function isNonNativeButton() {\n var button = getButtonNode();\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n /**\n * IE 11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n\n\n var keydownRef = React.useRef(false);\n var handleKeyDown = useEventCallback(function (event) {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n event.persist();\n rippleRef.current.stop(event, function () {\n rippleRef.current.start(event);\n });\n }\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n } // Keyboard accessibility for non interactive elements\n\n\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n\n if (onClick) {\n onClick(event);\n }\n }\n });\n var handleKeyUp = useEventCallback(function (event) {\n // calling preventDefault in keyUp on a \n \n \n );\n};\n\nexport default About;\n","import React from 'react';\n\nconst Snippets = () => {\n return (\n
\n Snippets ...in progress\n
\n );\n};\n\nexport default Snippets;\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport { fade } from '../styles/colorManipulator';\nexport var styles = function styles(theme) {\n return {\n /* Styles applied to the root element. */\n root: {\n height: 1,\n margin: 0,\n // Reset browser default style.\n border: 'none',\n flexShrink: 0,\n backgroundColor: theme.palette.divider\n },\n\n /* Styles applied to the root element if `absolute={true}`. */\n absolute: {\n position: 'absolute',\n bottom: 0,\n left: 0,\n width: '100%'\n },\n\n /* Styles applied to the root element if `variant=\"inset\"`. */\n inset: {\n marginLeft: 72\n },\n\n /* Styles applied to the root element if `light={true}`. */\n light: {\n backgroundColor: fade(theme.palette.divider, 0.08)\n },\n\n /* Styles applied to the root element if `variant=\"middle\"`. */\n middle: {\n marginLeft: theme.spacing(2),\n marginRight: theme.spacing(2)\n },\n\n /* Styles applied to the root element if `orientation=\"vertical\"`. */\n vertical: {\n height: '100%',\n width: 1\n },\n\n /* Styles applied to the root element if `flexItem={true}`. */\n flexItem: {\n alignSelf: 'stretch',\n height: 'auto'\n }\n };\n};\nvar Divider = /*#__PURE__*/React.forwardRef(function Divider(props, ref) {\n var _props$absolute = props.absolute,\n absolute = _props$absolute === void 0 ? false : _props$absolute,\n classes = props.classes,\n className = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'hr' : _props$component,\n _props$flexItem = props.flexItem,\n flexItem = _props$flexItem === void 0 ? false : _props$flexItem,\n _props$light = props.light,\n light = _props$light === void 0 ? false : _props$light,\n _props$orientation = props.orientation,\n orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,\n _props$role = props.role,\n role = _props$role === void 0 ? Component !== 'hr' ? 'separator' : undefined : _props$role,\n _props$variant = props.variant,\n variant = _props$variant === void 0 ? 'fullWidth' : _props$variant,\n other = _objectWithoutProperties(props, [\"absolute\", \"classes\", \"className\", \"component\", \"flexItem\", \"light\", \"orientation\", \"role\", \"variant\"]);\n\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: clsx(classes.root, className, variant !== 'fullWidth' && classes[variant], absolute && classes.absolute, flexItem && classes.flexItem, light && classes.light, orientation === 'vertical' && classes.vertical),\n role: role,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? Divider.propTypes = {\n // ----------------------------- Warning --------------------------------\n // | These PropTypes are generated from the TypeScript type definitions |\n // | To update them edit the d.ts file and run \"yarn proptypes\" |\n // ----------------------------------------------------------------------\n\n /**\n * Absolutely position the element.\n */\n absolute: PropTypes.bool,\n\n /**\n * @ignore\n */\n children: PropTypes.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css) below for more details.\n */\n classes: PropTypes.object,\n\n /**\n * @ignore\n */\n className: PropTypes.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes\n /* @typescript-to-proptypes-ignore */\n .elementType,\n\n /**\n * If `true`, a vertical divider will have the correct height when used in flex container.\n * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)\n */\n flexItem: PropTypes.bool,\n\n /**\n * If `true`, the divider will have a lighter color.\n */\n light: PropTypes.bool,\n\n /**\n * The divider orientation.\n */\n orientation: PropTypes.oneOf(['horizontal', 'vertical']),\n\n /**\n * @ignore\n */\n role: PropTypes.string,\n\n /**\n * The variant to use.\n */\n variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle'])\n} : void 0;\nexport default withStyles(styles, {\n name: 'MuiDivider'\n})(Divider);","import React from 'react';\nimport { Grid, Typography, Divider } from '@material-ui/core';\nimport About from '../about';\nimport Games from '../games';\nimport Snippets from '../snippets';\nimport Projects from '../projects';\n\nconst Home = () => {\n return (\n
\n \n \n Projects\n \n \n \n \n \n \n \n \n Games\n \n \n \n \n \n \n \n \n Snippets\n \n \n \n \n \n \n\n \n \n \n \n \n );\n};\n\nexport default Home;\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/3.81dd6717.chunk.js b/static/js/3.81dd6717.chunk.js
deleted file mode 100644
index 215f7d1..0000000
--- a/static/js/3.81dd6717.chunk.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(this["webpackJsonpreact-page"]=this["webpackJsonpreact-page"]||[]).push([[3,4,5,6,7],{153:function(e,t,i){"use strict";i.r(t),i.d(t,"default",(function(){return j}));var n=i(33),r=i(2),a=(i(0),i(107)),c=i(145),s=i(46),l=i(148),o=i(146),d=Object(o.a)((function(e){return{container:{marginTop:"auto",display:"flex"},name:Object(n.a)({textTransform:"uppercase",letterSpacing:"2rem"},e.breakpoints.down("md"),{letterSpacing:"1rem",fontSize:"1.4rem",fontWeight:"bold"})}})),j=function(){var e=d();return Object(r.jsx)(a.a,{id:"about",children:Object(r.jsx)(c.a,{container:!0,direction:"row",alignItems:"stretch",justify:"flex-end",children:Object(r.jsx)("div",{style:{height:"70vh",display:"flex",alignItems:"flex-end"},children:Object(r.jsxs)(c.a,{className:e.container,container:!0,direction:"column",alignItems:"flex-end",justify:"flex-end",spacing:3,children:[Object(r.jsx)(c.a,{item:!0,children:Object(r.jsx)(s.a,{variant:"h4",align:"right",inline:"true",children:"Software Developer"})}),Object(r.jsx)(c.a,{item:!0,children:Object(r.jsx)(s.a,{variant:"h1",gutterBottom:!0,align:"right",inline:"true",className:e.name,children:"Dan Dobos"})}),Object(r.jsx)(c.a,{item:!0,children:Object(r.jsx)(l.a,{variant:"h6",href:"https://skilltransfers.com/",target:"_blank",rel:"noopener noreferrer",color:"inherit",gutterBottom:!0,children:"https://skilltransfers.com/"})}),Object(r.jsx)(c.a,{item:!0,children:Object(r.jsxs)(s.a,{align:"right",inline:"true",variant:"h6",children:["A passionate software developer with affinity for React and AWS.",Object(r.jsx)("br",{}),"Characterized by the desire of understanding and implementing technological innovations."]})}),Object(r.jsxs)(c.a,{item:!0,children:[Object(r.jsx)(s.a,{align:"right",inline:"true",children:"Contact"}),Object(r.jsx)(l.a,{variant:"h6",href:"mailto:danandreidobos@gmail.com",target:"_blank",color:"inherit",children:"danandreidobos@gmail.com"})]})]})})})})}},154:function(e,t,i){"use strict";i.r(t),i.d(t,"default",(function(){return r}));var n=i(2),r=(i(0),function(){return Object(n.jsx)("div",{style:{minHeight:"calc(100vh-128px)"},children:"Games ...in progress"})})},155:function(e,t,i){"use strict";i.r(t),i.d(t,"default",(function(){return r}));var n=i(2),r=(i(0),function(){return Object(n.jsx)("div",{style:{minHeight:"calc(100vh-128px)"},children:"Snippets ...in progress"})})},156:function(e,t,i){"use strict";i.r(t),i.d(t,"default",(function(){return r}));var n=i(2),r=(i(0),function(){return Object(n.jsx)("div",{style:{minHeight:"calc(100vh-128px)"},children:"Projects ...in progress"})})},158:function(e,t,i){"use strict";i.r(t),i.d(t,"default",(function(){return g}));var n=i(2),r=i(0),a=i(145),c=i(46),s=i(1),l=i(3),o=(i(4),i(5)),d=i(6),j=i(25),h=r.forwardRef((function(e,t){var i=e.absolute,n=void 0!==i&&i,a=e.classes,c=e.className,d=e.component,j=void 0===d?"hr":d,h=e.flexItem,u=void 0!==h&&h,b=e.light,m=void 0!==b&&b,f=e.orientation,x=void 0===f?"horizontal":f,g=e.role,O=void 0===g?"hr"!==j?"separator":void 0:g,v=e.variant,p=void 0===v?"fullWidth":v,w=Object(l.a)(e,["absolute","classes","className","component","flexItem","light","orientation","role","variant"]);return r.createElement(j,Object(s.a)({className:Object(o.a)(a.root,c,"fullWidth"!==p&&a[p],n&&a.absolute,u&&a.flexItem,m&&a.light,"vertical"===x&&a.vertical),role:O,ref:t},w))})),u=Object(d.a)((function(e){return{root:{height:1,margin:0,border:"none",flexShrink:0,backgroundColor:e.palette.divider},absolute:{position:"absolute",bottom:0,left:0,width:"100%"},inset:{marginLeft:72},light:{backgroundColor:Object(j.c)(e.palette.divider,.08)},middle:{marginLeft:e.spacing(2),marginRight:e.spacing(2)},vertical:{height:"100%",width:1},flexItem:{alignSelf:"stretch",height:"auto"}}}),{name:"MuiDivider"})(h),b=i(153),m=i(154),f=i(155),x=i(156),g=function(){return Object(n.jsxs)(a.a,{container:!0,direction:"row",alignItems:"stretch",spacing:3,children:[Object(n.jsxs)(a.a,{item:!0,container:!0,direction:"column",children:[Object(n.jsxs)(a.a,{item:!0,children:[Object(n.jsx)(c.a,{variant:"h3",children:"Projects"}),Object(n.jsx)(u,{variant:"inset"})]}),Object(n.jsx)(a.a,{item:!0,children:Object(n.jsx)(x.default,{})})]}),Object(n.jsxs)(a.a,{item:!0,container:!0,direction:"column",children:[Object(n.jsxs)(a.a,{item:!0,children:[Object(n.jsx)(c.a,{variant:"h3",children:"Games"}),Object(n.jsx)(u,{variant:"inset"})]}),Object(n.jsx)(a.a,{item:!0,children:Object(n.jsx)(m.default,{})})]}),Object(n.jsxs)(a.a,{item:!0,container:!0,direction:"column",children:[Object(n.jsxs)(a.a,{item:!0,children:[Object(n.jsx)(c.a,{variant:"h3",children:"Snippets"}),Object(n.jsx)(u,{variant:"inset"})]}),Object(n.jsx)(a.a,{item:!0,children:Object(n.jsx)(f.default,{})})]}),Object(n.jsx)(a.a,{item:!0,container:!0,justify:"flex-end",children:Object(n.jsx)(a.a,{item:!0,children:Object(n.jsx)(b.default,{})})})]})}}}]);
-//# sourceMappingURL=3.81dd6717.chunk.js.map
\ No newline at end of file
diff --git a/static/js/3.81dd6717.chunk.js.map b/static/js/3.81dd6717.chunk.js.map
deleted file mode 100644
index 363c2d5..0000000
--- a/static/js/3.81dd6717.chunk.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["pages/about/About.jsx","pages/games/Games.jsx","pages/snippets/Snippets.jsx","pages/projects/Projects.jsx","../node_modules/@material-ui/core/esm/Divider/Divider.js","pages/home/Home.jsx"],"names":["useStyles","makeStyles","theme","container","marginTop","display","name","textTransform","letterSpacing","breakpoints","down","fontSize","fontWeight","About","classes","Container","id","Grid","direction","alignItems","justify","style","height","className","spacing","item","Typography","variant","align","inline","gutterBottom","Link","href","target","rel","color","Games","minHeight","Snippets","Projects","Divider","React","props","ref","_props$absolute","absolute","_props$component","component","Component","_props$flexItem","flexItem","_props$light","light","_props$orientation","orientation","_props$role","role","undefined","_props$variant","other","_objectWithoutProperties","_extends","clsx","root","vertical","withStyles","margin","border","flexShrink","backgroundColor","palette","divider","position","bottom","left","width","inset","marginLeft","fade","middle","marginRight","alignSelf","Home"],"mappings":"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","file":"static/js/3.81dd6717.chunk.js","sourcesContent":["import React from 'react';\nimport { Container, Grid, Typography, Link } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nconst useStyles = makeStyles((theme) => ({\n // root: {\n // display: 'flex',\n // flexDirection: 'column',\n // justifyContent: 'flex-end',\n // height: 'auto',\n // },\n container: {\n marginTop: 'auto',\n // height:'100vh'\n display: 'flex',\n // position: 'absolute',\n },\n name: {\n textTransform: 'uppercase',\n letterSpacing: '2rem',\n [theme.breakpoints.down('md')]: {\n letterSpacing: '1rem',\n fontSize: '1.4rem',\n fontWeight: 'bold',\n },\n },\n}));\n\nconst About = () => {\n const classes = useStyles();\n\n return (\n
\n \n \n \n \n \n Software Developer\n \n \n \n \n Dan Dobos\n \n \n \n \n https://skilltransfers.com/\n \n \n\n \n \n A passionate software developer with affinity for React and AWS.\n
\n Characterized by the desire of understanding and implementing\n technological innovations.\n \n \n\n {/* Contact */}\n \n \n Contact\n \n \n danandreidobos@gmail.com\n \n \n \n