Portfolio Parts

// imports, polyfills, and globals require('core-js') // polyfills. specifically for Object.values() and Object.entries() let html const React = require('react') const { Fragment } = React const { renderToString } = require('react-dom/server'); const _styled = require('styled-components') const styled = _styled.default const { css, keyframes, injectGlobal } = _styled const render = component => { const sheet = new _styled.ServerStyleSheet() html = renderToString(sheet.collectStyles(component)) return sheet.getStyleTags() + html } // container to stretch to the max width and height of the Rendered HTML box const Container = styled.div` display: flex; align-items: center; justify-content: center; ${({ bg }) => bg && css` background: ${bg}; `} height: 450px; /* total max height: 509px, 509 - 28 - 16 = 464px (size of runkit box)*/ // width: 90%;/* 882px; /* total max width: 898px w/ padding of 8 on both sides 882px (size of runkit box) */ ` const Container2 = styled.div` overflow: hidden; ${({ bg }) => bg && css` background: ${bg}; `} height: 450px; /* total max height: 509px, 509 - 28 - 16 = 464px (size of runkit box)*/ `

const PeelyContainer = styled.p` color: #fff; font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif; font-size: 1em; font-weight: 700; & > span:first-child { margin-left: 0; } ` const beforeAfter = css` display: block; position: absolute; top: 0; left: -1px; transform-origin: left top; transition: all ease-out 0.25s; ` const Letter = styled.span` font-size: 60px; display: inline-block; position: relative; transform-style: preserve-3d; perspective: 500; margin-left: .3em; &:before { ${beforeAfter} z-index: 1; color: rgba(0,0,0,0.2); transform: scale(1.1, 1) skew(0deg, 20deg); content: '${props => props.children}'; } &:hover::before { transform: scale(1.1, 1) skew(0deg, 5deg); } &:after { ${beforeAfter} z-index: 2; color: ${props => props.color}; text-shadow: -1px 0 1px ${props => props.color}, 1px 0 1px rgba(0,0,0,0.8); transform: rotateY(-40deg); content: '${props => props.children}'; } &:hover::after { transform: rotateY(-10deg); } ` const Peeled = props => ( <PeelyContainer {...props}> {(props.phrase || 'Peeled').split('').map((letter, i) => ( <Letter color={props.color || '#119711'} key={i}>{letter.toUpperCase()}</Letter> ))} </PeelyContainer> )

var animStar = keyframes` from { transform: translateY(-2000px); } to { transform: translateY(0px); } ` var multipleBoxShadow = length => { const random = x => Math.floor(Math.random(x) * x) var value = `${random(2000)}px ${random(2000)}px #FFF` for (var i in Array.from({ length })) { value += `, ${random(2000)}px ${random(2000)}px #FFF` } return value } var stars = (h, w, animationTime, shadow) => styled.div` width: ${w}px; height: ${h}px; background: transparent; box-shadow: ${multipleBoxShadow(shadow)}; animation: ${animStar} ${animationTime}s linear infinite; &:after { content: " "; position: absolute; top: 2000px; width: ${w}px; height: ${h}px; box-shadow: ${multipleBoxShadow(shadow)}; } ` var SmallStars = stars(1, 1, 50, 700) var MediumStars = stars(2, 2, 100, 200) var BigStars = stars(3, 3, 150, 100) const PeeledCenter = styled(Peeled)` position: absolute; top: calc(50% - ${.5 * 82}px); left: 0; right: 0; text-align: center; margin: 0; ` render( <Container2 bg='radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)'> <SmallStars /> <MediumStars /> <BigStars /> <PeeledCenter phrase='Alex Cory' color='#1B2735' /> </Container2> )