├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── examples ├── app.js ├── bundle.js └── bundle.js.map ├── index.html ├── lib ├── animations │ └── allAnimations.js ├── components │ ├── Button.js │ ├── DrawerContainer.js │ ├── HeroVideo.js │ ├── HoverCol.js │ ├── HoverRow.js │ ├── Jumbotron.js │ ├── JumbotronCol.js │ ├── MenuItem.js │ ├── Nav.js │ ├── NavItem.js │ └── Navbar.js ├── index.js └── styles │ ├── button.js │ ├── drawer.js │ ├── heroVideo.js │ ├── hoverCol.js │ ├── hoverRow.js │ ├── jumbotron.js │ └── navbar.js ├── package.json ├── public ├── faderight.jpg ├── graphic-waves copy.png ├── graphic-waves.png ├── sea-waves.jpg ├── stylesheets │ └── main.scss ├── waves1.png ├── waves3.png ├── waves4.png ├── waves5.png ├── waves7.png ├── waves8.png └── waves9.png ├── src ├── animations │ └── allAnimations.js ├── components │ ├── Button.js │ ├── DrawerContainer.js │ ├── HeroVideo.js │ ├── HoverCol.js │ ├── HoverRow.js │ ├── Jumbotron.js │ ├── JumbotronCol.js │ ├── MenuItem.js │ ├── Nav.js │ ├── NavItem.js │ └── Navbar.js ├── index.js └── styles │ ├── button.js │ ├── drawer.js │ ├── heroVideo.js │ ├── hoverCol.js │ ├── hoverRow.js │ ├── jumbotron.js │ └── navbar.js ├── start.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015"] 3 | // "env": { 4 | // "development": { 5 | // "presets": ["react-hmre"] 6 | // } 7 | // } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | *.mp4 11 | 12 | # Directory for instrumented libs generated by jscoverage/JSCover 13 | lib-cov 14 | 15 | # Coverage directory used by tools like istanbul 16 | coverage 17 | 18 | # nyc test coverage 19 | .nyc_output 20 | 21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 22 | .grunt 23 | 24 | # node-waf configuration 25 | .lock-wscript 26 | 27 | # Compiled binary addons (http://nodejs.org/api/addons.html) 28 | build/Release 29 | 30 | # Dependency directories 31 | node_modules 32 | jspm_packages 33 | 34 | # Optional npm cache directory 35 | .npm 36 | 37 | # Optional REPL history 38 | .node_repl_history 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Chloe Hwang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-dynamic-UI 2 | 3 | A UI toolkit for React.js featuring components with built-in animation. 4 | 5 | Demo site [here](https://rdi-demo.herokuapp.com/). 6 | 7 | ## About 8 | This library aims to make it easy to build React websites that come alive. It offers a set of UI components native to React.js that animate based on user interaction, such as scroll and hover. 9 | 10 | The components are designed to be modular and unopinionated, with flexible styling capabilities. Components can be configured with various effects, such as fading in as the user scrolls. The animations are available out of the box - all you have to do is pick one, and the library will inject the proper styles into your code. 11 | 12 | ## Components 13 | * Navbar 14 | * Nav 15 | * NavItem 16 | * HeroVideo 17 | * Jumbotron 18 | * JumbotronCol 19 | * HoverRow 20 | * HoverCol 21 | * DrawerContainer 22 | 23 | 24 | ## Getting Started 25 | react-dynamic-UI is available as an [npm package](https://www.npmjs.com/package/react-dynamic-ui). Install on your command line with: 26 | ``` 27 | npm install react-dynamic-UI 28 | ``` 29 | Then import the components into your JSX files: 30 | ``` 31 | import { HeroVideo, Jumbotron, JumbotronCol } from 'react-dynamic-ui' 32 | ``` 33 | ## Usage 34 | 35 | The Jumbotron can take in any number of JumbotronCol children components. Each JumbotronCol can be configured with one of four animations - fadeUp, fadeAppear, fadeInLeft, and fadeInRight. These animations are passed to the component via the fadeEffect prop. 36 | 37 | ```javascript 38 | import React from 'react'; 39 | import {render} from 'react-dom'; 40 | import { Jumbotron, JumbotronCol } from 'react-dynamic-ui'; 41 | 42 | render( 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

Atlantic

51 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vestibulum pharetra.

52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |

Carribean

60 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vestibulum pharetra.

61 | 62 | 63 | 64 | , 65 | document.getElementById('app') 66 | ); 67 | 68 | ``` 69 | 70 | -------------------------------------------------------------------------------- /examples/app.js: -------------------------------------------------------------------------------- 1 | import '../public/stylesheets/main.scss'; 2 | import React from 'react'; 3 | import {render} from 'react-dom'; 4 | import { HeroVideo, Jumbotron, JumbotronCol, HoverRow, HoverCol, DrawerContainer, MenuItem, Navbar, NavItem, Nav, Button } from '../src/index'; 5 | 6 | 7 | render( 8 |
9 | 10 | 14 | 17 | 18 | 19 | 22 | Sample Heading Goes Here 23 | 24 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |

What's New?

40 |

Atlantic

41 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vestibulum pharetra.

42 |

Pacific

43 |

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus elit, sed feugiat nunc nibh ut purus. Curabitur ac.

44 |

Indian

45 |

Ere. Maecenas sit amet enim ut augue varius ullamcorper ac id ante. Curabitur efficitur.

46 |

Mediterranean

47 |

Integer semper, erat in tincidunt fermentum, sem massa cursus elit, sed feugiat nunc nibh ut purus. Curabitur ac pulvinar mauris.

48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |

What's Next?

66 |

Cirrus

67 |

Donec interdum semper tortor, at pharetra magna. Vivamus dignissim nec erat a semper. Etiam nec porttitor mauris. Aenean in.

68 |

Cumulus

69 |

Integer diam leo, faucibus nec lacus non, suscipit porta ipsum. Mauris elementum est et sapien.

70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 |
84 | 85 | 86 | 87 |
88 |

What's Now?

89 |

Carribean

90 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vestibulum pharetra.

91 |

Caspian

92 |

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus elit, sed feugiat nunc nibh ut purus. Curabitur ac.

93 |

Adriatic

94 |

Ere. Maecenas sit amet enim ut augue varius ullamcorper ac id ante. Curabitur efficitur.

95 |
96 | 97 | 98 | 99 | 100 | 101 |

What's New?

102 |

Arabian

103 |

Donec interdum semper tortor, at pharetra magna. Vivamus dignissim nec erat a semper. Etiam nec porttitor mauris. Aenean in.

104 |

Aegean

105 |

Integer diam leo, faucibus nec lacus non, suscipit porta ipsum. Mauris elementum est et sapien.

106 |

Baltic

107 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor vestibulum pharetra.

108 |

Ionian

109 |

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus elit, sed feugiat nunc nibh ut purus. Curabitur ac.

110 | 111 | 112 | 113 |
114 | 115 | Menu Item 1 116 | Menu Item 2 117 | 118 |
119 | 120 | 121 |
122 | 123 | , 124 | document.getElementById('app') 125 | ); 126 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The Adventures of Turt McSquirt 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lib/animations/allAnimations.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 4 | 5 | window.onload = function () { 6 | 7 | var styleEl = document.createElement('style'); 8 | 9 | // append style element to head 10 | document.head.appendChild(styleEl); 11 | 12 | // grab style sheet 13 | var stylesheet = styleEl.sheet; 14 | 15 | var keyframeFadeUp = '@-webkit-keyframes fadeUp {\n 0% {-webkit-transform:translate3d(0,40px,0); opacity: 0 }\n 100% {-webkit-transform:translate3d(0,0,0); opacity: 1}\n }'; 16 | 17 | var keyframeFadeAppear = '@-webkit-keyframes fadeAppear {\n 0% {opacity: 0}\n 100% {opacity: 1}\n }'; 18 | 19 | var keyframeFadeInRight = '@-webkit-keyframes fadeInRight {\n 0% {-webkit-transform:translate(0px); opacity: 0}\n 100% {-webkit-transform:translate(40px); opacity: 1}\n }'; 20 | 21 | var keyframeFadeInLeft = '@-webkit-keyframes fadeInLeft {\n 0% {-webkit-transform:translate(0px); opacity: 0}\n 100% {-webkit-transform:translate(-40px); opacity: 1}\n }'; 22 | 23 | var keyframeDrawerOpen = '@-webkit-keyframes drawerOpen {\n 0% {-webkit-transform:translate(0px); opacity: 0}\n 100% {-webkit-transform:translate(-40px); opacity: 1}\n }'; 24 | 25 | //***** DRAWER ANIMATION ***** 26 | 27 | var drawerStyle = '.react-dynamic-drawer {position: fixed;\n width: 256px; height: 100vh; background-color: white; top: 0; left: 0; box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; z-index: 2000; display: flex; flex-direction: column; word-wrap: break-word}'; 28 | 29 | var drawerEnter = '.drawer-enter {left: -256px}'; 30 | 31 | var drawerEnterActive = '.drawer-enter.drawer-enter-active {left: 0px; transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) ;}'; 32 | 33 | var drawerLeave = '.drawer-leave {-webkit-transform:translate(0px)}'; 34 | 35 | var drawerLeaveActive = '.drawer-leave.drawer-leave-active {-webkit-transform:translate(-256px);transition: 450ms cubic-bezier(0.23, 1, 0.32, 1);}'; 36 | 37 | var backdropEnter = '.backdrop-enter {opacity: 0}'; 38 | 39 | var backdropEnterActive = '.backdrop-enter.backdrop-enter-active {opacity: 1; transition: 300ms cubic-bezier(0.23, 1, 0.32, 1) ;}'; 40 | 41 | var backdropLeave = '.backdrop-leave {opacity:1}'; 42 | 43 | var backdropLeaveActive = '.backdrop-leave.backdrop-leave-active {opacity: 0;transition: 300ms cubic-bezier(0.23, 1, 0.32, 1);}'; 44 | 45 | //***** Inject animations into stylesheet ****** 46 | [keyframeFadeUp, keyframeFadeAppear, keyframeFadeInLeft, keyframeFadeInRight, keyframeDrawerOpen, drawerStyle, drawerEnter, drawerEnterActive, drawerLeave, drawerLeaveActive, backdropEnter, backdropEnterActive, backdropLeave, backdropLeaveActive].map(function (animation) { 47 | return stylesheet.insertRule(animation, stylesheet.cssRules.length); 48 | }); 49 | 50 | //~~~~~~~~~~~~~~~~~~~~~~~~~~// 51 | 52 | 53 | //***** JUMBOTRON ANIMATION ***** 54 | 55 | var elementsToFadeIn = [].concat(_toConsumableArray(document.getElementsByClassName('fadeInLeft')), _toConsumableArray(document.getElementsByClassName('fadeInRight')), _toConsumableArray(document.getElementsByClassName('fadeAppear')), _toConsumableArray(document.getElementsByClassName('fadeUp'))); 56 | 57 | elementsToFadeIn.forEach(function (element) { 58 | return window.addEventListener('scroll', function () { 59 | var objectBottom = this.offsetHeight + this.offsetTop; 60 | var windowBottom = window.innerHeight + window.scrollY; 61 | 62 | if (windowBottom > objectBottom) { 63 | this.style.animationPlayState = 'running'; 64 | } 65 | }.bind(element)); 66 | }); 67 | 68 | //***** NAVBAR ANIMATION ***** 69 | 70 | window.addEventListener('scroll', function () { 71 | var navbarToFadeIn = document.getElementById('navbarFadeIn'); 72 | var scrollPos = window.scrollY; 73 | 74 | if (scrollPos > 40) { 75 | navbarToFadeIn.style.backgroundColor = window.navColor; 76 | } 77 | }); 78 | }; -------------------------------------------------------------------------------- /lib/components/Button.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _button = require('../styles/button'); 14 | 15 | var _button2 = _interopRequireDefault(_button); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var Button = function (_React$Component) { 26 | _inherits(Button, _React$Component); 27 | 28 | function Button() { 29 | _classCallCheck(this, Button); 30 | 31 | return _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).apply(this, arguments)); 32 | } 33 | 34 | _createClass(Button, [{ 35 | key: 'render', 36 | value: function render() { 37 | var _props = this.props, 38 | style = _props.style, 39 | className = _props.className; 40 | 41 | 42 | var ownStyle = style || {}; 43 | var ownClassName = className; 44 | var mergedStyle = Object.assign({}, _button2.default, ownStyle); 45 | 46 | return _react2.default.createElement( 47 | 'button', 48 | { style: _button2.default }, 49 | this.props.children 50 | ); 51 | } 52 | }]); 53 | 54 | return Button; 55 | }(_react2.default.Component); 56 | 57 | exports.default = Button; -------------------------------------------------------------------------------- /lib/components/DrawerContainer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _reactAddonsCssTransitionGroup = require('react-addons-css-transition-group'); 14 | 15 | var _reactAddonsCssTransitionGroup2 = _interopRequireDefault(_reactAddonsCssTransitionGroup); 16 | 17 | var _drawer = require('../styles/drawer'); 18 | 19 | var _drawer2 = _interopRequireDefault(_drawer); 20 | 21 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 22 | 23 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 24 | 25 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 26 | 27 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 28 | 29 | var DrawerContainer = function (_React$Component) { 30 | _inherits(DrawerContainer, _React$Component); 31 | 32 | function DrawerContainer(props) { 33 | _classCallCheck(this, DrawerContainer); 34 | 35 | var _this = _possibleConstructorReturn(this, (DrawerContainer.__proto__ || Object.getPrototypeOf(DrawerContainer)).call(this, props)); 36 | 37 | _this.state = { openDrawer: false }; 38 | _this.toggle = _this.toggle.bind(_this); 39 | return _this; 40 | } 41 | 42 | _createClass(DrawerContainer, [{ 43 | key: 'toggle', 44 | value: function toggle() { 45 | this.setState({ openDrawer: !this.state.openDrawer }); 46 | } 47 | }, { 48 | key: 'render', 49 | value: function render() { 50 | var drawer = void 0; 51 | var backdrop = void 0; 52 | 53 | if (this.state.openDrawer) { 54 | drawer = _react2.default.createElement( 55 | 'div', 56 | { key: 'toggle-drawer', className: 'react-dynamic-drawer' }, 57 | this.props.children 58 | ); 59 | 60 | backdrop = _react2.default.createElement('div', { style: _drawer2.default.backdrop, onClick: this.toggle }); 61 | } 62 | 63 | return _react2.default.createElement( 64 | 'div', 65 | null, 66 | _react2.default.createElement( 67 | 'button', 68 | { className: 'btn drawer-btn', onClick: this.toggle }, 69 | 'Open Drawer' 70 | ), 71 | _react2.default.createElement( 72 | _reactAddonsCssTransitionGroup2.default, 73 | { 74 | transitionName: 'drawer', 75 | transitionEnterTimeout: 450, 76 | transitionLeaveTimeout: 450 }, 77 | drawer 78 | ), 79 | _react2.default.createElement( 80 | _reactAddonsCssTransitionGroup2.default, 81 | { 82 | transitionName: 'backdrop', 83 | transitionEnterTimeout: 300, 84 | transitionLeaveTimeout: 300 }, 85 | backdrop 86 | ) 87 | ); 88 | } 89 | }]); 90 | 91 | return DrawerContainer; 92 | }(_react2.default.Component); 93 | 94 | exports.default = DrawerContainer; -------------------------------------------------------------------------------- /lib/components/HeroVideo.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = HeroVideo; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _heroVideo = require('../styles/heroVideo'); 13 | 14 | var _heroVideo2 = _interopRequireDefault(_heroVideo); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | function HeroVideo(_ref) { 19 | var videoSrc = _ref.videoSrc, 20 | videoType = _ref.videoType, 21 | className = _ref.className, 22 | children = _ref.children; 23 | 24 | 25 | return _react2.default.createElement( 26 | 'div', 27 | { className: className, style: _heroVideo2.default.style }, 28 | _react2.default.createElement( 29 | 'div', 30 | { style: _heroVideo2.default.headingStyle }, 31 | _react2.default.createElement( 32 | 'h1', 33 | null, 34 | children 35 | ) 36 | ), 37 | _react2.default.createElement( 38 | 'video', 39 | { loop: true, muted: true, autoPlay: true, style: _heroVideo2.default.video }, 40 | _react2.default.createElement('source', { src: videoSrc, type: videoType }) 41 | ) 42 | ); 43 | } -------------------------------------------------------------------------------- /lib/components/HoverCol.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _hoverCol = require('../styles/hoverCol'); 14 | 15 | var _hoverCol2 = _interopRequireDefault(_hoverCol); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var HoverCol = function (_React$Component) { 26 | _inherits(HoverCol, _React$Component); 27 | 28 | function HoverCol() { 29 | _classCallCheck(this, HoverCol); 30 | 31 | var _this = _possibleConstructorReturn(this, (HoverCol.__proto__ || Object.getPrototypeOf(HoverCol)).call(this)); 32 | 33 | _this.state = { isHover: false }; 34 | _this.handleMouseEnter = _this.handleMouseEnter.bind(_this); 35 | _this.handleMouseLeave = _this.handleMouseLeave.bind(_this); 36 | return _this; 37 | } 38 | 39 | _createClass(HoverCol, [{ 40 | key: 'handleMouseEnter', 41 | value: function handleMouseEnter() { 42 | this.setState({ isHover: true }); 43 | } 44 | }, { 45 | key: 'handleMouseLeave', 46 | value: function handleMouseLeave() { 47 | this.setState({ isHover: false }); 48 | } 49 | }, { 50 | key: 'render', 51 | value: function render() { 52 | var _props = this.props, 53 | className = _props.className, 54 | style = _props.style, 55 | imgSrc = _props.imgSrc, 56 | children = _props.children; 57 | 58 | var mergedStyle = Object.assign({}, _hoverCol2.default.column, style); 59 | var imgStyle = _hoverCol2.default.imgStyle; 60 | 61 | if (this.state.isHover) { 62 | imgStyle = Object.assign({}, imgStyle, _hoverCol2.default.hoverStyle); 63 | } 64 | 65 | return _react2.default.createElement( 66 | 'div', 67 | { 68 | className: className, 69 | style: mergedStyle, 70 | onMouseEnter: this.handleMouseEnter, 71 | onMouseLeave: this.handleMouseLeave 72 | }, 73 | _react2.default.createElement('img', { src: imgSrc, style: imgStyle }), 74 | _react2.default.createElement( 75 | 'div', 76 | { style: { position: 'absolute', top: '0' } }, 77 | children 78 | ) 79 | ); 80 | } 81 | }]); 82 | 83 | return HoverCol; 84 | }(_react2.default.Component); 85 | 86 | exports.default = HoverCol; -------------------------------------------------------------------------------- /lib/components/HoverRow.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = HoverRow; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _hoverRow = require('../styles/hoverRow'); 13 | 14 | var _hoverRow2 = _interopRequireDefault(_hoverRow); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | function HoverRow(_ref) { 19 | var className = _ref.className, 20 | children = _ref.children, 21 | style = _ref.style; 22 | 23 | 24 | var mergedStyle = Object.assign({}, _hoverRow2.default.style, style); 25 | 26 | return _react2.default.createElement( 27 | 'div', 28 | { className: className, style: mergedStyle }, 29 | children 30 | ); 31 | } -------------------------------------------------------------------------------- /lib/components/Jumbotron.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = Jumbotron; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _jumbotron = require('../styles/jumbotron'); 13 | 14 | var _jumbotron2 = _interopRequireDefault(_jumbotron); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | function Jumbotron(_ref) { 19 | var className = _ref.className, 20 | children = _ref.children, 21 | style = _ref.style; 22 | 23 | 24 | var mergedStyle = Object.assign({}, _jumbotron2.default.style, style); 25 | 26 | return _react2.default.createElement( 27 | 'div', 28 | { className: className, style: mergedStyle }, 29 | _react2.default.createElement( 30 | 'div', 31 | { style: _jumbotron2.default.row }, 32 | children 33 | ) 34 | ); 35 | } -------------------------------------------------------------------------------- /lib/components/JumbotronCol.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = JumbotronCol; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _jumbotron = require('../styles/jumbotron'); 13 | 14 | var _jumbotron2 = _interopRequireDefault(_jumbotron); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | function JumbotronCol(_ref) { 19 | var className = _ref.className, 20 | children = _ref.children, 21 | style = _ref.style, 22 | fadeEffect = _ref.fadeEffect; 23 | 24 | var mergedColumnStyle = Object.assign({}, _jumbotron2.default.column.all, _jumbotron2.default.column[fadeEffect], style); 25 | var fadeStyle = _jumbotron2.default[fadeEffect]; 26 | var fadeClass = fadeEffect ? fadeEffect + " " : ""; 27 | 28 | if (!children) { 29 | return _react2.default.createElement('div', { style: mergedColumnStyle }); 30 | } 31 | 32 | var childrenArray = !children.length || typeof children === "string" ? [children] : children; 33 | 34 | var styledChildren = childrenArray && childrenArray.map(function (child, i) { 35 | if (typeof child === "string") { 36 | return _react2.default.cloneElement(_react2.default.createElement( 37 | 'p', 38 | null, 39 | child 40 | ), { style: fadeStyle, className: fadeClass, key: 'strChild' }); 41 | } 42 | 43 | var ownStyle = child.props.style || {}; 44 | var ownClassName = child.props.className || ""; 45 | 46 | var mergedStyle = Object.assign({}, fadeStyle, ownStyle); 47 | var mergedClassName = fadeClass + ownClassName; 48 | 49 | return _react2.default.cloneElement(child, { style: mergedStyle, className: mergedClassName, key: i }); 50 | }); 51 | 52 | return _react2.default.createElement( 53 | 'div', 54 | { className: className, style: mergedColumnStyle }, 55 | styledChildren 56 | ); 57 | } -------------------------------------------------------------------------------- /lib/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _drawer = require('../styles/drawer'); 14 | 15 | var _drawer2 = _interopRequireDefault(_drawer); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var MenuItem = function (_React$Component) { 26 | _inherits(MenuItem, _React$Component); 27 | 28 | function MenuItem() { 29 | _classCallCheck(this, MenuItem); 30 | 31 | var _this = _possibleConstructorReturn(this, (MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call(this)); 32 | 33 | _this.state = { isHover: false }; 34 | _this.handleMouseEnter = _this.handleMouseEnter.bind(_this); 35 | _this.handleMouseLeave = _this.handleMouseLeave.bind(_this); 36 | return _this; 37 | } 38 | 39 | _createClass(MenuItem, [{ 40 | key: 'handleMouseEnter', 41 | value: function handleMouseEnter() { 42 | this.setState({ isHover: true }); 43 | } 44 | }, { 45 | key: 'handleMouseLeave', 46 | value: function handleMouseLeave() { 47 | this.setState({ isHover: false }); 48 | } 49 | }, { 50 | key: 'render', 51 | value: function render() { 52 | var _props = this.props, 53 | children = _props.children, 54 | style = _props.style, 55 | hoverStyle = _props.hoverStyle, 56 | className = _props.className; 57 | 58 | 59 | var ownStyle = style || {}; 60 | var ownHoverStyle = hoverStyle || {}; 61 | 62 | var mergedStyle = Object.assign({}, _drawer2.default.menuItem, ownStyle); 63 | var mergedHoverStyle = Object.assign({}, _drawer2.default.menuItemHover, ownHoverStyle); 64 | 65 | return _react2.default.createElement( 66 | 'div', 67 | { 68 | style: this.state.isHover ? mergedHoverStyle : mergedStyle, 69 | onMouseEnter: this.handleMouseEnter, 70 | onMouseLeave: this.handleMouseLeave, 71 | className: className 72 | }, 73 | children 74 | ); 75 | } 76 | }]); 77 | 78 | return MenuItem; 79 | }(_react2.default.Component); 80 | 81 | exports.default = MenuItem; -------------------------------------------------------------------------------- /lib/components/Nav.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = Nav; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _navbar = require('../styles/navbar'); 13 | 14 | var _navbar2 = _interopRequireDefault(_navbar); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | function Nav(_ref) { 19 | var children = _ref.children, 20 | style = _ref.style, 21 | className = _ref.className, 22 | pullRight = _ref.pullRight; 23 | 24 | 25 | var mergedStyle = pullRight ? Object.assign({ justifyContent: 'flex-end' }, _navbar2.default.column, style) : Object.assign({}, _navbar2.default.column, style); 26 | 27 | return _react2.default.createElement( 28 | 'div', 29 | { className: className, style: mergedStyle }, 30 | children 31 | ); 32 | } -------------------------------------------------------------------------------- /lib/components/NavItem.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8 | 9 | var _react = require('react'); 10 | 11 | var _react2 = _interopRequireDefault(_react); 12 | 13 | var _navbar = require('../styles/navbar'); 14 | 15 | var _navbar2 = _interopRequireDefault(_navbar); 16 | 17 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18 | 19 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 20 | 21 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 22 | 23 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 24 | 25 | var NavItem = function (_React$Component) { 26 | _inherits(NavItem, _React$Component); 27 | 28 | function NavItem() { 29 | _classCallCheck(this, NavItem); 30 | 31 | var _this = _possibleConstructorReturn(this, (NavItem.__proto__ || Object.getPrototypeOf(NavItem)).call(this)); 32 | 33 | _this.state = { isHover: false }; 34 | _this.handleMouseEnter = _this.handleMouseEnter.bind(_this); 35 | _this.handleMouseLeave = _this.handleMouseLeave.bind(_this); 36 | return _this; 37 | } 38 | 39 | _createClass(NavItem, [{ 40 | key: 'handleMouseEnter', 41 | value: function handleMouseEnter() { 42 | this.setState({ isHover: true }); 43 | } 44 | }, { 45 | key: 'handleMouseLeave', 46 | value: function handleMouseLeave() { 47 | this.setState({ isHover: false }); 48 | } 49 | }, { 50 | key: 'render', 51 | value: function render() { 52 | var _props = this.props, 53 | children = _props.children, 54 | style = _props.style, 55 | className = _props.className; 56 | 57 | 58 | var mergedStyle = this.state.isHover ? Object.assign({}, _navbar2.default.itemHover, style) : Object.assign({}, _navbar2.default.item, style); 59 | 60 | return _react2.default.createElement( 61 | 'div', 62 | { 63 | style: mergedStyle, 64 | className: className, 65 | onMouseEnter: this.handleMouseEnter, 66 | onMouseLeave: this.handleMouseLeave 67 | }, 68 | children 69 | ); 70 | } 71 | }]); 72 | 73 | return NavItem; 74 | }(_react2.default.Component); 75 | 76 | exports.default = NavItem; -------------------------------------------------------------------------------- /lib/components/Navbar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.default = Navbar; 7 | 8 | var _react = require('react'); 9 | 10 | var _react2 = _interopRequireDefault(_react); 11 | 12 | var _navbar = require('../styles/navbar'); 13 | 14 | var _navbar2 = _interopRequireDefault(_navbar); 15 | 16 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17 | 18 | // import animation from '../animations/jumbotronFadeUp' 19 | 20 | 21 | function Navbar(_ref) { 22 | var className = _ref.className, 23 | children = _ref.children, 24 | style = _ref.style, 25 | navColor = _ref.navColor; 26 | 27 | 28 | var mergedStyle = Object.assign({}, _navbar2.default.nav, style); 29 | window.navColor = navColor; 30 | 31 | return _react2.default.createElement( 32 | 'div', 33 | { className: className, style: mergedStyle, id: 'navbarFadeIn' }, 34 | children 35 | ); 36 | } -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var _Button = require('./components/Button'); 4 | 5 | var _Button2 = _interopRequireDefault(_Button); 6 | 7 | var _HeroVideo = require('./components/HeroVideo'); 8 | 9 | var _HeroVideo2 = _interopRequireDefault(_HeroVideo); 10 | 11 | var _Jumbotron = require('./components/Jumbotron'); 12 | 13 | var _Jumbotron2 = _interopRequireDefault(_Jumbotron); 14 | 15 | var _JumbotronCol = require('./components/JumbotronCol'); 16 | 17 | var _JumbotronCol2 = _interopRequireDefault(_JumbotronCol); 18 | 19 | var _HoverRow = require('./components/HoverRow'); 20 | 21 | var _HoverRow2 = _interopRequireDefault(_HoverRow); 22 | 23 | var _HoverCol = require('./components/HoverCol'); 24 | 25 | var _HoverCol2 = _interopRequireDefault(_HoverCol); 26 | 27 | var _DrawerContainer = require('./components/DrawerContainer'); 28 | 29 | var _DrawerContainer2 = _interopRequireDefault(_DrawerContainer); 30 | 31 | var _MenuItem = require('./components/MenuItem'); 32 | 33 | var _MenuItem2 = _interopRequireDefault(_MenuItem); 34 | 35 | var _Navbar = require('./components/Navbar'); 36 | 37 | var _Navbar2 = _interopRequireDefault(_Navbar); 38 | 39 | var _NavItem = require('./components/NavItem'); 40 | 41 | var _NavItem2 = _interopRequireDefault(_NavItem); 42 | 43 | var _Nav = require('./components/Nav'); 44 | 45 | var _Nav2 = _interopRequireDefault(_Nav); 46 | 47 | var _allAnimations = require('./animations/allAnimations'); 48 | 49 | var _allAnimations2 = _interopRequireDefault(_allAnimations); 50 | 51 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 52 | 53 | module.exports = { Button: _Button2.default, HeroVideo: _HeroVideo2.default, Jumbotron: _Jumbotron2.default, JumbotronCol: _JumbotronCol2.default, HoverRow: _HoverRow2.default, HoverCol: _HoverCol2.default, DrawerContainer: _DrawerContainer2.default, MenuItem: _MenuItem2.default, Navbar: _Navbar2.default, NavItem: _NavItem2.default, Nav: _Nav2.default }; -------------------------------------------------------------------------------- /lib/styles/button.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var buttonStyle = { 7 | background: 'red', 8 | letterSpacing: '1px', 9 | fontWeight: '600', 10 | width: '250px', 11 | borderRadius: '24px', 12 | border: 'none', 13 | boxSizing: 'border-box', 14 | color: '#616161', 15 | cursor: 'pointer', 16 | display: 'inline-block', 17 | fontSize: 17, 18 | lineHeight: '26px', 19 | padding: '10px 14px', 20 | textAlign: 'center', 21 | textDecoration: 'none', 22 | verticalAlign: 'bottom' 23 | }; 24 | 25 | exports.default = buttonStyle; -------------------------------------------------------------------------------- /lib/styles/drawer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var drawerStyle = { 7 | backdrop: { 8 | height: '100vh', 9 | width: '100vw', 10 | backgroundColor: 'rgba(0, 0, 0, 0.541176)', 11 | position: 'fixed', 12 | top: '0', 13 | left: '0', 14 | zIndex: '1300' 15 | }, 16 | menuItem: { 17 | padding: '20px', 18 | transition: '0.3s' 19 | }, 20 | menuItemHover: { 21 | padding: '20px', 22 | cursor: 'pointer', 23 | transition: '0.3s' 24 | } 25 | }; 26 | 27 | exports.default = drawerStyle; -------------------------------------------------------------------------------- /lib/styles/heroVideo.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var heroVideoStyle = { 7 | style: { 8 | position: 'relative', 9 | width: '100%', 10 | boxSizing: 'border-box', 11 | minHeight: '680px', 12 | overflow: 'hidden' 13 | }, 14 | headingStyle: { 15 | position: 'absolute', 16 | width: '40%', 17 | color: 'white', 18 | zIndex: '2', 19 | top: '35%', 20 | right: '8%', 21 | fontSize: '2em', 22 | textAlign: 'center', 23 | justifyContent: 'center', 24 | display: 'flex', 25 | maxWidth: '500px' 26 | }, 27 | video: { 28 | objectFit: "cover", 29 | width: '100%', 30 | minHeight: '680px' 31 | } 32 | }; 33 | 34 | //make top go from -290 to -270 has user makes height taller 35 | 36 | exports.default = heroVideoStyle; -------------------------------------------------------------------------------- /lib/styles/hoverCol.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var hoverColStyle = { 7 | column: { 8 | position: 'relative', 9 | boxSizing: 'border-box', 10 | padding: '9px 10px' 11 | }, 12 | hoverStyle: { 13 | transform: 'scale(1.05)', 14 | boxShadow: 'rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px' 15 | }, 16 | imgStyle: { 17 | width: '100%', transition: '0.2s ease-out' 18 | } 19 | }; 20 | 21 | exports.default = hoverColStyle; -------------------------------------------------------------------------------- /lib/styles/hoverRow.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var hoverRowStyle = { 7 | style: { 8 | margin: '0 auto', 9 | content: "", 10 | display: 'flex', 11 | flexDirection: 'row', 12 | justifyContent: 'center', 13 | maxWidth: '1275px' 14 | } 15 | }; 16 | 17 | exports.default = hoverRowStyle; -------------------------------------------------------------------------------- /lib/styles/jumbotron.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var jumbotronStyle = { 7 | style: { 8 | width: '100%', 9 | backgroundSize: 'cover', 10 | backgroundAttachment: 'fixed' 11 | }, 12 | row: { 13 | display: 'flex', 14 | flexDirection: 'row', 15 | justifyContent: 'space-around', 16 | maxWidth: '1275px', 17 | margin: '0 auto' 18 | }, 19 | column: { 20 | all: { 21 | boxSizing: 'border-box', 22 | width: '50%' 23 | }, 24 | fadeInLeft: { 25 | width: '40%', padding: '15px 20px' 26 | }, 27 | fadeInRight: { 28 | width: '40%', padding: '15px 20px' 29 | } 30 | }, 31 | fadeUp: { 32 | animationName: 'fadeUp', 33 | animationPlayState: 'paused', 34 | animationTimingFunction: 'ease-in-out', 35 | animationDuration: '0.8s', 36 | animationIterationCount: 1, 37 | animationDirection: 'normal', 38 | animationFillMode: 'forwards' 39 | }, 40 | fadeAppear: { 41 | animationName: 'fadeAppear', 42 | animationPlayState: 'paused', 43 | animationTimingFunction: 'ease-in', 44 | animationDuration: '0.7s', 45 | animationIterationCount: 1, 46 | animationDirection: 'normal', 47 | animationFillMode: 'forwards' 48 | }, 49 | fadeInLeft: { 50 | animationName: 'fadeInLeft', 51 | animationPlayState: 'paused', 52 | animationTimingFunction: 'ease-out', 53 | animationDuration: '0.7s', 54 | animationIterationCount: 1, 55 | animationDirection: 'normal', 56 | animationFillMode: 'both' 57 | } 58 | }; 59 | 60 | jumbotronStyle.fadeInRight = Object.assign({}, jumbotronStyle.fadeInLeft, { animationName: 'fadeInRight' }); 61 | 62 | exports.default = jumbotronStyle; -------------------------------------------------------------------------------- /lib/styles/navbar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | var navbarStyle = { 7 | nav: { 8 | width: '100%', 9 | height: '70px', 10 | position: 'fixed', 11 | top: '0', 12 | zIndex: '200', 13 | display: 'flex', 14 | flexDirection: 'row', 15 | justifyContent: 'space-around', 16 | transition: '0.6s' 17 | }, 18 | column: { 19 | width: '40%', 20 | display: 'flex', 21 | alignItems: 'center' 22 | }, 23 | item: { 24 | display: 'inline-block', 25 | padding: '20px', 26 | transition: '0.3s' 27 | } 28 | 29 | }; 30 | 31 | navbarStyle.itemHover = Object.assign({}, navbarStyle.item, { cursor: 'pointer', color: '#2d6d73' }); 32 | 33 | exports.default = navbarStyle; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-dynamic-ui", 3 | "version": "0.0.21", 4 | "description": "", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "start": "webpack -w & http-server ./", 8 | "build-watch": "npm run build -- -w", 9 | "build": "BABEL_ENV=production node_modules/.bin/babel --out-dir='lib' --ignore='__tests__/*' src" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/chloehwang/react-dynamic-UI.git" 14 | }, 15 | "author": "Chloe Hwang (https://github.com/chloehwang/my-react-UI)", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/chloehwang/react-dynamic-UI/issues" 19 | }, 20 | "homepage": "https://github.com/chloehwang/react-dynamic-UI#readme", 21 | "dependencies": { 22 | "babel": "^6.23.0", 23 | "react": "^15.4.2", 24 | "react-addons-css-transition-group": "^15.4.2", 25 | "react-dom": "^15.4.2", 26 | "webpack": "^2.2.1" 27 | }, 28 | "devDependencies": { 29 | "babel-cli": "^6.23.0", 30 | "babel-core": "^6.23.1", 31 | "babel-loader": "^6.4.0", 32 | "babel-preset-env": "^1.2.1", 33 | "babel-preset-es2015": "^6.22.0", 34 | "babel-preset-react": "^6.23.0", 35 | "css-loader": "^0.26.4", 36 | "node-sass": "^4.5.0", 37 | "sass-loader": "^6.0.3", 38 | "style-loader": "^0.13.2", 39 | "webpack": "^2.2.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /public/faderight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/faderight.jpg -------------------------------------------------------------------------------- /public/graphic-waves copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/graphic-waves copy.png -------------------------------------------------------------------------------- /public/graphic-waves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/graphic-waves.png -------------------------------------------------------------------------------- /public/sea-waves.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/sea-waves.jpg -------------------------------------------------------------------------------- /public/stylesheets/main.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: 'Helvetica Neue', sans-serif 4 | } 5 | 6 | body { 7 | margin: 0 8 | } 9 | 10 | .jumbo-fadeUp { 11 | font-size: 1.5em; 12 | padding-top: 111px; 13 | padding-bottom: 131px; 14 | } 15 | 16 | .jumbo-bg { 17 | background-image: url('https://picjumbo.imgix.net/HNCK3916.jpg?q=40&w=1650&sharp=30'); 18 | } 19 | 20 | .jumbo-fadeUp { 21 | 22 | h1, h2 { 23 | color: #F25C5E; 24 | font-weight: 700 25 | } 26 | 27 | p { 28 | line-height: 1.5 29 | } 30 | } 31 | 32 | .jumbo-fadeIn { 33 | padding-top: 80px; 34 | padding-bottom: 111px; 35 | margin-bottom: 250px; 36 | font-size: 1.5em; 37 | 38 | h1, h2 { 39 | color: darken(#FFA566,10); 40 | font-weight: 700 41 | } 42 | 43 | p { 44 | line-height: 1.5 45 | } 46 | } 47 | 48 | .jumbo-fadeIn.fade-stagger { 49 | h1, h2 { 50 | color: #437f91; 51 | } 52 | } 53 | 54 | 55 | 56 | .jumbo-fadeUp.right { 57 | padding-right: 111px 58 | } 59 | 60 | .jumbo-fadeUp.left { 61 | padding-left: 111px 62 | } 63 | 64 | .jumbo-fadeUp.img { 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | 69 | .waves-graphic { 70 | width: 300px; 71 | height: 300px 72 | } 73 | } 74 | 75 | 76 | 77 | .waves-graphic { 78 | width: 475px; 79 | height: 500px; 80 | border-radius: 10000px 81 | } 82 | 83 | .nav-item { 84 | color: white; 85 | font-size: 1em; 86 | letter-spacing: 2px; 87 | font-weight: 500; 88 | } 89 | 90 | 91 | .hover-row1 { 92 | width: 65%; 93 | padding-top: 180px; 94 | } 95 | 96 | .hover-row2 { 97 | width: 65%; 98 | padding-bottom: 180px; 99 | } 100 | 101 | p { 102 | font-family: 'Lato', sans-serif; 103 | font-size: 0.9em 104 | } 105 | 106 | .btn { 107 | background-color: #FFA566; 108 | letter-spacing: 1px; 109 | font-weight: 600; 110 | width: 250px; 111 | border-radius: 24px; 112 | border: none; 113 | color: white; 114 | font-size: 17px !important; 115 | line-height: 26px; 116 | padding: 10px 14px; 117 | text-align: center; 118 | text-decoration: none; 119 | vertical-align: bottom; 120 | transition: 0.3s; 121 | cursor: pointer 122 | } 123 | 124 | .btn:hover { 125 | background-color: darken(#FFA566,9) 126 | } 127 | 128 | .fade-stagger { 129 | background-color: #cbe8ed; 130 | } 131 | 132 | .btn.drawer-btn { 133 | background-color: #F25C5E; 134 | margin: 0px auto; 135 | display: block 136 | } 137 | 138 | .btn.drawer-btn:hover { 139 | background-color: darken(#F25C5E, 6); 140 | } 141 | 142 | .btn.nav-btn { 143 | display: block; 144 | margin: 50px auto 0; 145 | background-color: #f77c77 146 | } 147 | 148 | .btn.nav-btn:hover { 149 | background-color: darken(#f77c77,8) 150 | } 151 | -------------------------------------------------------------------------------- /public/waves1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves1.png -------------------------------------------------------------------------------- /public/waves3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves3.png -------------------------------------------------------------------------------- /public/waves4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves4.png -------------------------------------------------------------------------------- /public/waves5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves5.png -------------------------------------------------------------------------------- /public/waves7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves7.png -------------------------------------------------------------------------------- /public/waves8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves8.png -------------------------------------------------------------------------------- /public/waves9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccchwang/react-dynamic-UI/9acb7c08062a0d899ba98f64b204a5ff612c6d24/public/waves9.png -------------------------------------------------------------------------------- /src/animations/allAnimations.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | var styleEl = document.createElement('style'); 4 | 5 | // append style element to head 6 | document.head.appendChild(styleEl); 7 | 8 | // grab style sheet 9 | var stylesheet = styleEl.sheet; 10 | 11 | 12 | let keyframeFadeUp = `@-webkit-keyframes fadeUp { 13 | 0% {-webkit-transform:translate3d(0,40px,0); opacity: 0 } 14 | 100% {-webkit-transform:translate3d(0,0,0); opacity: 1} 15 | }`; 16 | 17 | let keyframeFadeAppear = `@-webkit-keyframes fadeAppear { 18 | 0% {opacity: 0} 19 | 100% {opacity: 1} 20 | }`; 21 | 22 | let keyframeFadeInRight = `@-webkit-keyframes fadeInRight { 23 | 0% {-webkit-transform:translate(0px); opacity: 0} 24 | 100% {-webkit-transform:translate(40px); opacity: 1} 25 | }`; 26 | 27 | let keyframeFadeInLeft = `@-webkit-keyframes fadeInLeft { 28 | 0% {-webkit-transform:translate(0px); opacity: 0} 29 | 100% {-webkit-transform:translate(-40px); opacity: 1} 30 | }`; 31 | 32 | let keyframeDrawerOpen = `@-webkit-keyframes drawerOpen { 33 | 0% {-webkit-transform:translate(0px); opacity: 0} 34 | 100% {-webkit-transform:translate(-40px); opacity: 1} 35 | }`; 36 | 37 | 38 | //***** DRAWER ANIMATION ***** 39 | 40 | let drawerStyle = `.react-dynamic-drawer {position: fixed; 41 | width: 256px; height: 100vh; background-color: white; top: 0; left: 0; box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; z-index: 2000; display: flex; flex-direction: column; word-wrap: break-word}`; 42 | 43 | let drawerEnter = `.drawer-enter {left: -256px}`; 44 | 45 | let drawerEnterActive = `.drawer-enter.drawer-enter-active {left: 0px; transition: 450ms cubic-bezier(0.23, 1, 0.32, 1) ;}`; 46 | 47 | let drawerLeave = `.drawer-leave {-webkit-transform:translate(0px)}`; 48 | 49 | let drawerLeaveActive = `.drawer-leave.drawer-leave-active {-webkit-transform:translate(-256px);transition: 450ms cubic-bezier(0.23, 1, 0.32, 1);}`; 50 | 51 | let backdropEnter = `.backdrop-enter {opacity: 0}`; 52 | 53 | let backdropEnterActive = `.backdrop-enter.backdrop-enter-active {opacity: 1; transition: 300ms cubic-bezier(0.23, 1, 0.32, 1) ;}`; 54 | 55 | let backdropLeave = `.backdrop-leave {opacity:1}`; 56 | 57 | let backdropLeaveActive = `.backdrop-leave.backdrop-leave-active {opacity: 0;transition: 300ms cubic-bezier(0.23, 1, 0.32, 1);}`; 58 | 59 | 60 | //***** Inject animations into stylesheet ****** 61 | [keyframeFadeUp, keyframeFadeAppear, keyframeFadeInLeft, keyframeFadeInRight, keyframeDrawerOpen, drawerStyle, drawerEnter, drawerEnterActive, drawerLeave, drawerLeaveActive, backdropEnter, backdropEnterActive, backdropLeave, backdropLeaveActive].map(animation => stylesheet.insertRule(animation, stylesheet.cssRules.length)) 62 | 63 | 64 | //~~~~~~~~~~~~~~~~~~~~~~~~~~// 65 | 66 | 67 | 68 | //***** JUMBOTRON ANIMATION ***** 69 | 70 | let elementsToFadeIn = [ 71 | ...document.getElementsByClassName('fadeInLeft'), ...document.getElementsByClassName('fadeInRight'), ...document.getElementsByClassName('fadeAppear'), 72 | ...document.getElementsByClassName('fadeUp') 73 | ]; 74 | 75 | elementsToFadeIn.forEach(element => window.addEventListener('scroll', function(){ 76 | let objectBottom = this.offsetHeight + this.offsetTop; 77 | let windowBottom = window.innerHeight + window.scrollY; 78 | 79 | if (windowBottom > objectBottom) { 80 | this.style.animationPlayState = 'running'; 81 | } 82 | }.bind(element) 83 | )) 84 | 85 | 86 | //***** NAVBAR ANIMATION ***** 87 | 88 | window.addEventListener('scroll', function(){ 89 | let navbarToFadeIn = document.getElementById('navbarFadeIn'); 90 | let scrollPos = window.scrollY; 91 | 92 | if (scrollPos > 40) { 93 | navbarToFadeIn.style.backgroundColor = window.navColor; 94 | } 95 | }) 96 | 97 | } 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import buttonStyle from '../styles/button' 3 | 4 | 5 | export default class Button extends React.Component { 6 | 7 | render () { 8 | const { style, className } = this.props 9 | 10 | const ownStyle = style || {}; 11 | const ownClassName = className; 12 | const mergedStyle = Object.assign({}, buttonStyle, ownStyle) 13 | 14 | 15 | return () 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /src/components/DrawerContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 3 | import drawerStyle from '../styles/drawer' 4 | 5 | export default class DrawerContainer extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = {openDrawer: false}; 9 | this.toggle = this.toggle.bind(this); 10 | } 11 | 12 | toggle() { 13 | this.setState({openDrawer: !this.state.openDrawer}); 14 | } 15 | 16 | render() { 17 | let drawer; 18 | let backdrop; 19 | 20 | if (this.state.openDrawer) { 21 | drawer =
{this.props.children}
22 | 23 | backdrop =
24 | } 25 | 26 | 27 | return ( 28 |
29 | 30 | 31 | 35 | {drawer} 36 | 37 | 38 | 42 | {backdrop} 43 | 44 |
45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/HeroVideo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import heroVideoStyle from '../styles/heroVideo' 3 | 4 | export default function HeroVideo ({ videoSrc, videoType, className, children }) { 5 | 6 | return ( 7 |
8 | 9 |
10 |

{children}

11 |
12 | 13 | 16 | 17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/components/HoverCol.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import hoverColStyle from '../styles/hoverCol' 3 | 4 | export default class HoverCol extends React.Component { 5 | constructor() { 6 | super(); 7 | this.state = {isHover: false}; 8 | this.handleMouseEnter = this.handleMouseEnter.bind(this); 9 | this.handleMouseLeave = this.handleMouseLeave.bind(this); 10 | } 11 | 12 | handleMouseEnter () { 13 | this.setState({isHover: true}) 14 | } 15 | 16 | handleMouseLeave () { 17 | this.setState({isHover: false}) 18 | } 19 | 20 | render() { 21 | const { className, style, imgSrc, children } = this.props; 22 | let mergedStyle = Object.assign({}, hoverColStyle.column, style); 23 | let imgStyle = hoverColStyle.imgStyle 24 | 25 | if (this.state.isHover) {imgStyle = Object.assign({}, imgStyle, hoverColStyle.hoverStyle)} 26 | 27 | return ( 28 |
34 | 35 |
36 | { children } 37 |
38 |
39 | ) 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/HoverRow.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import hoverRowStyle from '../styles/hoverRow' 3 | 4 | export default function HoverRow ({ className, children, style }) { 5 | 6 | const mergedStyle = Object.assign({}, hoverRowStyle.style, style); 7 | 8 | return ( 9 |
10 | { children } 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Jumbotron.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import jumbotronStyle from '../styles/jumbotron' 3 | 4 | export default function Jumbotron ({ className, children, style }) { 5 | 6 | const mergedStyle = Object.assign({}, jumbotronStyle.style, style); 7 | 8 | return ( 9 |
10 |
11 | { children } 12 |
13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /src/components/JumbotronCol.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import jumbotronStyle from '../styles/jumbotron' 3 | 4 | export default function JumbotronCol ({ className, children, style, fadeEffect }) { 5 | const mergedColumnStyle = Object.assign({}, 6 | jumbotronStyle.column.all, 7 | jumbotronStyle.column[fadeEffect], 8 | style 9 | ); 10 | const fadeStyle = jumbotronStyle[fadeEffect]; 11 | const fadeClass = fadeEffect ? fadeEffect + " " : ""; 12 | 13 | if (!children) {return
} 14 | 15 | const childrenArray = !children.length || typeof children === "string" 16 | ? [children] 17 | : children; 18 | 19 | const styledChildren = childrenArray && childrenArray.map((child, i) => { 20 | if (typeof child === "string") { 21 | return React.cloneElement(

{child}

, {style: fadeStyle, className: fadeClass, key: 'strChild'}); 22 | } 23 | 24 | const ownStyle = child.props.style || {}; 25 | const ownClassName = child.props.className || ""; 26 | 27 | const mergedStyle = Object.assign({}, fadeStyle, ownStyle); 28 | const mergedClassName = fadeClass + ownClassName; 29 | 30 | return React.cloneElement(child, {style: mergedStyle, className: mergedClassName, key: i}) 31 | }) 32 | 33 | 34 | 35 | return ( 36 |
37 | { styledChildren } 38 |
39 | ) 40 | } 41 | -------------------------------------------------------------------------------- /src/components/MenuItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import drawerStyle from '../styles/drawer'; 3 | 4 | export default class MenuItem extends React.Component { 5 | constructor() { 6 | super(); 7 | this.state = {isHover: false}; 8 | this.handleMouseEnter = this.handleMouseEnter.bind(this); 9 | this.handleMouseLeave = this.handleMouseLeave.bind(this); 10 | } 11 | 12 | handleMouseEnter () { 13 | this.setState({isHover: true}) 14 | } 15 | 16 | handleMouseLeave () { 17 | this.setState({isHover: false}) 18 | } 19 | 20 | render () { 21 | const { children, style, hoverStyle, className } = this.props; 22 | 23 | const ownStyle = style || {}; 24 | const ownHoverStyle = hoverStyle || {}; 25 | 26 | const mergedStyle = Object.assign({}, drawerStyle.menuItem, ownStyle); 27 | const mergedHoverStyle = Object.assign({}, drawerStyle.menuItemHover, ownHoverStyle); 28 | 29 | return ( 30 |
36 | {children} 37 |
) 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/components/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import navbarStyle from '../styles/navbar' 3 | 4 | 5 | export default function Nav ({children, style, className, pullRight}) { 6 | 7 | const mergedStyle = pullRight ? 8 | Object.assign({justifyContent: 'flex-end'}, navbarStyle.column, style) 9 | : Object.assign({}, navbarStyle.column, style); 10 | 11 | return ( 12 |
13 | { children } 14 |
15 | ) 16 | } 17 | 18 | -------------------------------------------------------------------------------- /src/components/NavItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import navbarStyle from '../styles/navbar' 3 | 4 | 5 | export default class NavItem extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = {isHover: false}; 9 | this.handleMouseEnter = this.handleMouseEnter.bind(this); 10 | this.handleMouseLeave = this.handleMouseLeave.bind(this); 11 | } 12 | 13 | handleMouseEnter () { 14 | this.setState({isHover: true}) 15 | } 16 | 17 | handleMouseLeave () { 18 | this.setState({isHover: false}) 19 | } 20 | 21 | render () { 22 | const { children, style, className } = this.props; 23 | 24 | const mergedStyle = this.state.isHover 25 | ? Object.assign({}, navbarStyle.itemHover, style) 26 | : Object.assign({}, navbarStyle.item, style); 27 | 28 | return ( 29 |
35 | {children} 36 |
) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import navbarStyle from '../styles/navbar' 3 | // import animation from '../animations/jumbotronFadeUp' 4 | 5 | 6 | export default function Navbar ({ className, children, style, navColor }) { 7 | 8 | const mergedStyle = Object.assign({}, navbarStyle.nav, style); 9 | window.navColor = navColor; 10 | 11 | return ( 12 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Button from './components/Button'; 2 | import HeroVideo from './components/HeroVideo' 3 | import Jumbotron from './components/Jumbotron' 4 | import JumbotronCol from './components/JumbotronCol' 5 | import HoverRow from './components/HoverRow' 6 | import HoverCol from './components/HoverCol' 7 | import DrawerContainer from './components/DrawerContainer' 8 | import MenuItem from './components/MenuItem' 9 | import Navbar from './components/Navbar' 10 | import NavItem from './components/NavItem' 11 | import Nav from './components/Nav' 12 | import animations from './animations/allAnimations' 13 | 14 | 15 | 16 | 17 | module.exports = {Button, HeroVideo, Jumbotron, JumbotronCol, HoverRow, HoverCol, DrawerContainer, MenuItem, Navbar, NavItem, Nav} 18 | -------------------------------------------------------------------------------- /src/styles/button.js: -------------------------------------------------------------------------------- 1 | const buttonStyle = { 2 | background: 'red', 3 | letterSpacing: '1px', 4 | fontWeight: '600', 5 | width: '250px', 6 | borderRadius: '24px', 7 | border: 'none', 8 | boxSizing: 'border-box', 9 | color: '#616161', 10 | cursor: 'pointer', 11 | display: 'inline-block', 12 | fontSize: 17, 13 | lineHeight: '26px', 14 | padding: '10px 14px', 15 | textAlign: 'center', 16 | textDecoration: 'none', 17 | verticalAlign: 'bottom' 18 | } 19 | 20 | export default buttonStyle; 21 | -------------------------------------------------------------------------------- /src/styles/drawer.js: -------------------------------------------------------------------------------- 1 | const drawerStyle = { 2 | backdrop: { 3 | height: '100vh', 4 | width: '100vw', 5 | backgroundColor: 'rgba(0, 0, 0, 0.541176)', 6 | position: 'fixed', 7 | top: '0', 8 | left: '0', 9 | zIndex: '1300' 10 | }, 11 | menuItem: { 12 | padding: '20px', 13 | transition: '0.3s' 14 | }, 15 | menuItemHover: { 16 | padding: '20px', 17 | cursor: 'pointer', 18 | transition: '0.3s' 19 | } 20 | } 21 | 22 | 23 | 24 | export default drawerStyle; 25 | -------------------------------------------------------------------------------- /src/styles/heroVideo.js: -------------------------------------------------------------------------------- 1 | const heroVideoStyle = { 2 | style: { 3 | position: 'relative', 4 | width: '100%', 5 | boxSizing: 'border-box', 6 | minHeight: '680px', 7 | overflow: 'hidden' 8 | }, 9 | headingStyle: { 10 | position: 'absolute', 11 | width: '40%', 12 | color: 'white', 13 | zIndex: '2', 14 | top: '35%', 15 | right: '8%', 16 | fontSize: '2em', 17 | textAlign: 'center', 18 | justifyContent: 'center', 19 | display: 'flex', 20 | maxWidth: '500px' 21 | }, 22 | video: { 23 | objectFit: "cover", 24 | width: '100%', 25 | minHeight: '680px' 26 | } 27 | } 28 | 29 | 30 | //make top go from -290 to -270 has user makes height taller 31 | 32 | export default heroVideoStyle; 33 | -------------------------------------------------------------------------------- /src/styles/hoverCol.js: -------------------------------------------------------------------------------- 1 | const hoverColStyle = { 2 | column: { 3 | position: 'relative', 4 | boxSizing: 'border-box', 5 | padding: '9px 10px' 6 | }, 7 | hoverStyle: { 8 | transform: 'scale(1.05)', 9 | boxShadow: 'rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px' 10 | }, 11 | imgStyle: { 12 | width: '100%', transition: '0.2s ease-out' 13 | } 14 | } 15 | 16 | 17 | export default hoverColStyle; 18 | -------------------------------------------------------------------------------- /src/styles/hoverRow.js: -------------------------------------------------------------------------------- 1 | const hoverRowStyle = { 2 | style: { 3 | margin: '0 auto', 4 | content: "", 5 | display: 'flex', 6 | flexDirection: 'row', 7 | justifyContent: 'center', 8 | maxWidth: '1275px' 9 | } 10 | } 11 | 12 | 13 | export default hoverRowStyle; 14 | -------------------------------------------------------------------------------- /src/styles/jumbotron.js: -------------------------------------------------------------------------------- 1 | const jumbotronStyle = { 2 | style: { 3 | width: '100%', 4 | backgroundSize: 'cover', 5 | backgroundAttachment: 'fixed' 6 | }, 7 | row: { 8 | display: 'flex', 9 | flexDirection: 'row', 10 | justifyContent: 'space-around', 11 | maxWidth: '1275px', 12 | margin: '0 auto' 13 | }, 14 | column: { 15 | all: { 16 | boxSizing: 'border-box', 17 | width: '50%' 18 | }, 19 | fadeInLeft: { 20 | width: '40%', padding: '15px 20px' 21 | }, 22 | fadeInRight: { 23 | width: '40%', padding: '15px 20px' 24 | } 25 | }, 26 | fadeUp: { 27 | animationName: 'fadeUp', 28 | animationPlayState: 'paused', 29 | animationTimingFunction: 'ease-in-out', 30 | animationDuration: '0.8s', 31 | animationIterationCount: 1, 32 | animationDirection: 'normal', 33 | animationFillMode: 'forwards' 34 | }, 35 | fadeAppear: { 36 | animationName: 'fadeAppear', 37 | animationPlayState: 'paused', 38 | animationTimingFunction: 'ease-in', 39 | animationDuration: '0.7s', 40 | animationIterationCount: 1, 41 | animationDirection: 'normal', 42 | animationFillMode: 'forwards' 43 | }, 44 | fadeInLeft: { 45 | animationName: 'fadeInLeft', 46 | animationPlayState: 'paused', 47 | animationTimingFunction: 'ease-out', 48 | animationDuration: '0.7s', 49 | animationIterationCount: 1, 50 | animationDirection: 'normal', 51 | animationFillMode: 'both' 52 | } 53 | } 54 | 55 | jumbotronStyle.fadeInRight = Object.assign({}, jumbotronStyle.fadeInLeft, {animationName: 'fadeInRight'}) 56 | 57 | 58 | export default jumbotronStyle; 59 | -------------------------------------------------------------------------------- /src/styles/navbar.js: -------------------------------------------------------------------------------- 1 | const navbarStyle = { 2 | nav: { 3 | width: '100%', 4 | height: '70px', 5 | position: 'fixed', 6 | top: '0', 7 | zIndex: '200', 8 | display: 'flex', 9 | flexDirection: 'row', 10 | justifyContent: 'space-around', 11 | transition: '0.6s' 12 | }, 13 | column: { 14 | width: '40%', 15 | display: 'flex', 16 | alignItems: 'center', 17 | }, 18 | item: { 19 | display: 'inline-block', 20 | padding: '20px', 21 | transition: '0.3s' 22 | } 23 | 24 | } 25 | 26 | 27 | navbarStyle.itemHover = Object.assign({}, navbarStyle.item, {cursor: 'pointer', color: '#2d6d73'}) 28 | 29 | 30 | export default navbarStyle; 31 | -------------------------------------------------------------------------------- /start.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | 4 | const express = require('express') 5 | 6 | const {resolve} = require('path') 7 | 8 | const pkg = require('./package.json') 9 | 10 | const app = express() 11 | 12 | 13 | 14 | //The code below works because `.use` returns `this` which is `app`. So what we want to return in the `module.exports` is `app`, and we can chain on that declaration because each method invokation returns `app` after mutating based on the middleware functions 15 | module.exports = app 16 | .use(express.static(resolve(__dirname, '.', 'public'))) // Serve static files from ../public 17 | 18 | .get('/*', (_, res) => res.sendFile(resolve(__dirname, '.', 'index.html'))) // Send index.html for any other requests. 19 | 20 | // notice the use of `_` as the first parameter above. This is a pattern for parameters that must exist, but you don't use or reference (or need) in the function body that follows. 21 | 22 | if (module === require.main) { 23 | 24 | // Start listening only if we're the main module. 25 | 26 | /* 27 | https://nodejs.org/api/modules.html#modules_accessing_the_main_module 28 | - This (module === require.main) will be true if run via node foo.js, but false if run by require('./foo') 29 | - If you want to test this, log `require.main` and `module` in this file and also in `api.js`. 30 | * Note how `require.main` logs the same thing in both files, because it is always referencing the "main" import, where we starting running in Node 31 | * In 'start.js', note how `module` is the same as `require.main` because that is the file we start with in our 'package.json' -- `node server/start.js` 32 | * In 'api.js', note how `module` (this specific file - i.e. module) is different from `require.main` because this is NOT the file we started in and `require.main` is the file we started in 33 | ~ To help compare these objects, reference each of their `id` attributes 34 | */ 35 | const server = app.listen( 36 | process.env.PORT || 3000, 37 | () => { 38 | console.log(`--- Started HTTP Server for ${pkg.name} ---`) 39 | console.log(`Listening on ${JSON.stringify(server.address())}`) 40 | } 41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | context: __dirname, 3 | entry: './examples/app.js', 4 | output: { 5 | path: __dirname, 6 | filename: './examples/bundle.js' 7 | }, 8 | devtool: 'source-map', 9 | module: { 10 | loaders: [ 11 | { 12 | test: /scss$/, 13 | loaders: ['style-loader', 'css-loader', 'sass-loader'] 14 | }, 15 | { 16 | test: /jsx?$/, 17 | exclude: /(node_modules|bower_components)/, 18 | loader: 'babel-loader', 19 | query: { 20 | presets: ['react', 'es2015'] 21 | } 22 | } 23 | ] 24 | } 25 | }; 26 | --------------------------------------------------------------------------------