INIT Initial commit

* *
theguysdesign · Dec 8, 2018 · 035548c · 035548c · vercel · Dec 8, 2018
1 parent 87cab9b
commit 035548c
Show file tree

Hide file tree

Showing 29 changed files with 756 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 theGuys by Robert Grzonka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/components/Body/Body.js b/components/Body/Body.js
@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+const Body = ({ children }) => (
+  <div css={css`
+    display: inline-block;
+    padding: 0 5vw 0 5vw;
+    width: 70vw;
+  `}
+  >
+    { children }
+  </div>
+)
+
+export default Body
diff --git a/components/Body/BodyHeader.js b/components/Body/BodyHeader.js
diff --git a/components/Button.js b/components/Button.js
@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import Link from 'next/link'
+
+const btn = css({
+  boxShadow: '0px 1px 3px rgba(0,0,0,0.85)',
+  borderRadius: '5px',
+  cursor: 'pointer',
+  padding: '7px 35px',
+  margin: 5,
+  fontWeight: 100,
+  fontSize: '0.8em',
+  fontVariant: 'small-caps',
+  textTransform: 'uppercase',
+  transition: 'all 0.6s',
+  minWidth: '70px',
+  border: '1px solid black',
+  backgroundColor: 'black',
+  color: 'white',
+  '&:hover': {
+    backgroundColor: 'white',
+    color: 'black',
+    boxShadow: '0px 4px 8px rgba(0,0,0,0.95)'
+  }
+})
+
+const Button = props => (
+  <Link href={props.href} name={props.name}{...props}>
+    <button css={btn} {...props}>
+      {props.name}
+    </button>
+  </Link>
+)
+
+export default Button
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import Link from 'next/link'
+
+const gradient = 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.95), rgba(0,0,0,0.9), rgba(0,0,0,0.85))'
+
+const InlineLink = props => (
+  <Link href={props.href} name={props.name}{...props}>
+    <a style={{
+      fontWeight: 100,
+      color: 'white',
+      textShadow: '0px 1px 1px black'
+    }}
+    >
+      {props.name}
+    </a>
+  </Link>
+)
+
+const Footer = () => (
+  <div css={css`
+    display: flex; 
+    justify-content: space-between;
+    align-items: center; 
+    padding: 8vh 15vw 7vh 15vw;
+    margin-bottom: 0; 
+    width: 100vw; 
+    box-shadow: 0px -1px 4px 1px rgba(0,0,0,0.8); 
+    position: absolute; 
+    bottom: 0; 
+    font-size: 0.7rem;
+    background: ${gradient};
+    color: white;;
+    font-weight: 100;
+    `}
+  >
+    <p css={css`
+    text-align: left
+    `}
+    >
+    MIT © 2018</p>
+    <InlineLink href='https://github.com/robertgrzonka' name='theGuys™ by Robert Grzonka' />
+  </div>
+)
+
+export default Footer
diff --git a/components/Layout.js b/components/Layout.js
@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import { jsx, Global } from '@emotion/core'
+import Head from 'next/head'
+import Navigation from './Navigation/Navigation.js'
+import { Menu, MenuHeader, MenuLink } from './Menu/Menu.js'
+import Body from './Body/Body.js'
+import Footer from './Footer/Footer.js'
+
+const Layout = ({ children }) => (
+  <div css={{ backgroundColor: 'white', color: 'black' }}>
+    <Global styles={{
+      '*': {
+        boxSizing: 'border-box'
+      },
+      body: {
+        margin: 0,
+        padding: 0,
+        fontFamily: '"Fira Sans", sans-serif',
+        fontSize: 16,
+        fontWeight: 300,
+        lineHeight: 1.3,
+        letterSpacing: 0.0625,
+        fontFeatureSettings: 'kern',
+        textRendering: 'optimizeLegibility'
+      },
+      a: {
+        textDecoration: 'none',
+        color: 'rgb(20,20,20)',
+        transition: 'all 0.6s',
+        '&:hover': {
+          color: 'rgba(240,50,120, 1)',
+          textShadow: '0px 0px 1px rgba(0,0,0,0.4)'
+        }
+      }
+    }}
+    />
+    <Head>
+      <title>theGuys™ — serverless web development</title>
+      <meta charSet='utf-8' />
+      <meta name='viewport' content='initial-scale=1.0, width=device-width' key='viewport' />
+    </Head>
+    <Navigation />
+    <Menu>
+      <MenuHeader title='Menu' />
+      <MenuLink id='menu' title='Menu' />
+    </Menu>
+    <Body />
+    <Footer />
+    { children }
+  </div>
+)
+
+export default Layout
diff --git a/components/Logo.js b/components/Logo.js
@@ -0,0 +1,3 @@
+const Logo = (props) => <img src='/static/theguysdesign.svg' css={props.css} />
+
+export default Logo
diff --git a/components/Menu/Menu.js b/components/Menu/Menu.js
@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import Link from 'next/link'
+
+export const MenuHeader = props => (
+  <div css={css`
+    font-weight: 100;
+    margin: 50px 0 15px 15vw;
+    color: black;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 1rem;
+    `}{...props}
+  >
+    {props.title}
+  </div>
+)
+
+export const MenuLink = props => (
+  <Link as={`/${props.id}`} href={`/${props.title}`}>
+    <a css={css`
+    margin: 5px 0px 5px 15vw;
+    `}
+    >
+      {props.title}
+    </a>
+  </Link>
+)
+
+export const Menu = ({ children }) => (
+  <div css={css`
+    width: 30vw,
+    padding-top: 20px,
+    margin-top: 10px
+    display: inline-block,
+    position: sticky,
+    overflow: hidden
+    `}
+  >
+    {children}
+  </div>
+)
diff --git a/components/Menu/MenuHeader.js b/components/Menu/MenuHeader.js
@@ -0,0 +1,18 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+export const MenuHeader = props => (
+  <div css={css`
+    font-weight: 100;
+    margin: 20px 0 15px 15vw;
+    color: black;
+    font-variant: small-caps;
+    text-transform: uppercase;
+    font-size: 1rem;
+    `}{...props}
+  >
+    {props.title}
+  </div>
+)
+
+export default MenuHeader
diff --git a/components/Navigation/Navigation.js b/components/Navigation/Navigation.js
@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import NavigationMenu from './NavigationMenu'
+import NavigationLogo from './NavigationLogo'
+import NavigationIcons from './NavigationIcons'
+
+const Navigation = () => (
+  <div css={css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.5);
+    width: 100vw;
+    min-height: 10vh;
+    max-height: 15vh;
+    padding: 0 3vw;
+  `}
+  >
+    <NavigationMenu />
+    <NavigationLogo />
+    <NavigationIcons />
+  </div>
+)
+
+export default Navigation
diff --git a/components/Navigation/NavigationIcons.js b/components/Navigation/NavigationIcons.js
@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import Link from 'next/link'
+
+const linkStyles = {
+  marginLeft: 30,
+  fontVariant: 'small-caps',
+  textTransform: 'lowercase',
+  fontSize: '1.1rem'
+}
+
+const NavigationIcons = () => (
+  <div css={css`
+    text-align: right;
+    margin-right: 15vw;
+    width: 30vw;
+  `}>
+    <Link href='https://github.com/theguysdesign'>
+      <a style={linkStyles}>GitHub</a>
+    </Link>
+    <Link href='https://github.com/robertgrzonka'>
+      <a style={linkStyles}>robertgrzonka</a>
+    </Link>
+  </div>
+)
+
+export default NavigationIcons
diff --git a/components/Navigation/NavigationLogo.js b/components/Navigation/NavigationLogo.js
@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+const NavigationLogo = () => (
+  <div css={css`
+    text-align: center;
+    margin: 15px 0px;
+    `}
+  >
+    <img src='/static/theguysdesign.svg' css={css`
+       max-width: 7vw;
+       min-width: 120px;
+       width: 30vw;
+     `}
+    />
+  </div>
+)
+
+export default NavigationLogo
diff --git a/components/Navigation/NavigationMenu.js b/components/Navigation/NavigationMenu.js
@@ -0,0 +1,32 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+import Link from 'next/link'
+
+const link = {
+  marginRight: 30,
+  fontVariant: 'small-caps',
+  textTransform: 'lowercase',
+  fontSize: '1.1rem'
+}
+
+const NavLink = props => (
+  <Link as={`/${props.id}`} href={`/${props.title}`}>
+    <a style={link}>{props.title}</a>
+  </Link>
+)
+
+const NavigationMenu = ({ children }) => (
+  <div css={css`
+    text-align: left;
+    margin-left: 15vw;
+    width: 30vw;
+    `}
+  >
+    <NavLink id='blog' title='Blog' />
+    <NavLink id='projects' title='Projects' />
+    <NavLink id='about' title='About' />
+    {children}
+  </div>
+)
+
+export default NavigationMenu