jchitel · jchitel · Jul 29, 2020 · Jul 30, 2020 · Jul 31, 2020
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [
+        ["styled-components", { "ssr": true }]
+    ]
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import InlineLink from '../styles/InlineLink';
+
+const Footer = () => (
+    <StyledFooter>
+        <InlineLink
+            href="https://github.com/jchitel/jakechitel.com"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            Built by Jake Chitel
+        </InlineLink>
+    </StyledFooter>
+);
+
+export default Footer;
+
+const StyledFooter = styled.footer`
+    width: 100%;
+    height: 100px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-top: 1px solid ${_ => _.theme.gray.light};
+
+    font-family: ${_ => _.theme.font.mono};
+    font-size: 1rem;
+`;
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import Nav from './Nav';
+import Footer from './Footer';
+
+export interface ILayoutProps {
+    children: React.ReactNode;
+}
+
+const Layout = ({ children }: ILayoutProps) => (
+    <Container>
+        <Nav />
+
+        <Content>
+            {children}
+            <Footer />
+        </Content>
+    </Container>
+);
+
+export default Layout;
+
+const Container = styled.div`
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+`;
+
+const Content = styled.div`
+    margin-top: ${_ => _.theme.navHeight};
+`;
diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import styled from 'styled-components';
+import Link from 'next/link';
+import media from '../styles/media';
+import GitHubIcon from './icons/GitHubIcon';
+import LinkedInIcon from './icons/LinkedInIcon';
+
+const Nav = () => (
+    <Header>
+        <LogoContainer>
+            <Logo>JC</Logo>
+        </LogoContainer>
+        <NavLinks>
+            <Link href="/" passHref>
+                <StyledLink>Home</StyledLink>
+            </Link>
+            <Link href="/blog" passHref>
+                <StyledLink>Blog</StyledLink>
+            </Link>
+            <Link href="/projects" passHref>
+                <StyledLink>Projects</StyledLink>
+            </Link>
+            <Link href="/tools" passHref>
+                <StyledLink>Tools</StyledLink>
+            </Link>
+        </NavLinks>
+        <ContactLinks>
+            <ContactLink
+                href="https://github.com/jchitel"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <GitHubIcon />
+            </ContactLink>
+            <ContactLink
+                href="https://www.linkedin.com/in/jacob-chitel-4a395858/"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <LinkedInIcon />
+            </ContactLink>
+            <ContactLink
+                href="mailto:[email protected]"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                @
+            </ContactLink>
+        </ContactLinks>
+    </Header>
+);
+
+export default Nav;
+
+const Header = styled.header`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: ${_ => _.theme.navHeight};
+    padding: 0 50px;
+    ${media.desktop} { padding: 0 40px; }
+    ${media.tablet} { padding: 0 25px; }
+
+    background-color: ${_ => _.theme.background.dark};
+    z-index: 10;
+`;
+
+const LogoContainer = styled.div`
+    flex: 1 1 0;
+`;
+
+const Logo = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items:center;
+
+    width: 40px;
+    height: 40px;
+    border: 3px solid ${_ => _.theme.accent.normal};
+    border-radius: 10px;
+
+    color: ${_ => _.theme.accent.normal};
+    font-family: ${_ => _.theme.font.mono};
+`;
+
+const NavLinks = styled.nav`
+    flex: 2 1 0;
+
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const StyledLink = styled.a`
+    padding: 0 20px;
+
+    font-family: ${_ => _.theme.font.mono};
+    font-size: 1rem;
+
+    color: ${_ => _.theme.primary.normal};
+
+    &:hover, &:active {
+        color: ${_ => _.theme.accent.normal};
+    }
+
+    cursor: pointer;
+`;
+
+const ContactLinks = styled.div`
+    flex: 1 1 0;
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+`;
+
+const ContactLink = styled.a`
+    padding: 10px;
+
+    color: ${_ => _.theme.primary.normal};
+
+    &:hover {
+        color: ${_ => _.theme.accent.normal};
+    }
+
+    svg {
+        width: 18px;
+        height: 18px;
+        fill: currentcolor;
+        vertical-align: middle;
+    }
+
+    font-size: 18px;
+`;
diff --git a/components/icons/GitHubIcon.tsx b/components/icons/GitHubIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const GitHubIcon = () => (
+    <svg viewBox="0 0 438.549 438.549">
+        <title>GitHub</title>
+        <path
+            d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
+                c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63 c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
+                c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
+                c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
+                c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
+                c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
+                c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
+                c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
+                c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
+                c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
+                c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
+                c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
+                c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
+                c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
+                c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
+                c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
+                c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
+                c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
+                C438.536,184.851,428.728,148.168,409.132,114.573z"
+        />
+    </svg>
+);
+
+export default GitHubIcon;
diff --git a/components/icons/LinkedInIcon.tsx b/components/icons/LinkedInIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const LinkedInIcon = () => (
+    <svg viewBox="0 0 430.117 430.117">
+        <title>LinkedIn</title>
+        <path
+            d="M430.117,261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707
+                c-25.473,0-40.632,17.142-47.301,33.724c-2.432,5.928-3.058,14.179-3.058,22.477V420.56h-92.219c0,0,1.242-251.285,0-277.32h92.21
+                v39.309c-0.187,0.294-0.43,0.611-0.606,0.896h0.606v-0.896c12.251-18.869,34.13-45.824,83.102-45.824
+                C384.633,136.724,430.117,176.361,430.117,261.543z M52.183,9.558C20.635,9.558,0,30.251,0,57.463
+                c0,26.619,20.038,47.94,50.959,47.94h0.616c32.159,0,52.159-21.317,52.159-47.94C103.128,30.251,83.734,9.558,52.183,9.558z
+                M5.477,420.56h92.184v-277.32H5.477V420.56z"
+        />
+    </svg>
+);
+
+export default LinkedInIcon;
diff --git a/package.json b/package.json
@@ -12,13 +12,19 @@
     "start": "next start"
   },
   "dependencies": {
+    "chroma-js": "^2.1.0",
     "next": "9.5.0",
+    "normalize.css": "^8.0.1",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
+    "@types/chroma-js": "^2.0.0",
     "@types/node": "^14.0.26",
     "@types/react": "^16.9.43",
+    "@types/styled-components": "^5.1.1",
+    "babel-plugin-styled-components": "^1.10.7",
     "typescript": "^3.9.7"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,24 @@
+import 'normalize.css/normalize.css';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import theme from '../styles/theme';
+import GlobalStyle from '../styles/GlobalStyle';
+
+const MyApp = ({ Component, pageProps }: AppProps) => (
+    <ThemeProvider theme={theme}>
+        <Head>
+            <title>Jake Chitel | Software Engineer</title>
+            {/* TODO: get a favicon */}
+            <link rel="shortcut icon" href="/favicon.ico" />
+            <link rel="canonical" href="https://jakechitel.com" />
+            <meta name="description" content="Jake Chitel is a Milwaukee-based software engineer with a passion for building awesome stuff." />
+            <meta name="keywords" content="Jake Chitel, Jake, Chitel, jchitel, software engineer, developer, marquette" />
+        </Head>
+        <GlobalStyle />
+        <Component {...pageProps} />
+    </ThemeProvider>
+);
+
+export default MyApp;
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+    static async getInitialProps(ctx: DocumentContext) {
+        const sheet = new ServerStyleSheet();
+        const originalRenderPage = ctx.renderPage;
+
+        try {
+            ctx.renderPage = () =>
+                originalRenderPage({
+                    enhanceApp: (App) => (props) =>
+                        sheet.collectStyles(<App {...props} />),
+                });
+
+            const initialProps = await Document.getInitialProps(ctx);
+            return {
+                ...initialProps,
+                styles: (
+                    <>
+                        {initialProps.styles}
+                        {sheet.getStyleElement()}
+                    </>
+                ),
+            };
+        } finally {
+            sheet.seal();
+        }
+    }
+}
diff --git a/pages/api/hello.js b/pages/api/hello.js