Merge pull request #2 from michaelwschultz/next-app

Replaces site with Next app

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.now

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "git.ignoreLimitWarning": true
+}

README.md

@@ -5,3 +5,13 @@ michaelschultz.com - created Tue Nov 22 11:59:04 PST 2016
 
 ### About
 Designer and software engineer living in San Francisco, California. Currently building a modern insurance brokerage at newfrontinsurance.com
+
+## Dev
+Locally: `yarn dev`
+
+
+## Build
+This site is hosted on Zeit's Now service (https://zeit.co/michaelschultz/michaelschultz.com).
+
+CLI deploy method: `now --prod`
+Or merge into master branch on Github (https://github.com/michaelwschultz/michaelschultz.com) to autodeploy.

archive/.gitignore

@@ -0,0 +1 @@
+.env

archive/README.md

@@ -0,0 +1,7 @@
+michaelschultz.com - created Tue Nov 22 11:59:04 PST 2016
+
+    Setup using @michaelschultz custom bash script,
+    http://github.com/michaelwschultz/basher
+
+### About
+Designer and software engineer living in San Francisco, California. Currently building a modern insurance brokerage at newfrontinsurance.com

components/designThoughts.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const DesignThoughts = () => {
+  return (
+    <section className="mw8 center mv6">
+      <h3 className="white f5 pb3">Thoughts on design</h3>
+      <iframe
+        src='https://embed.simplecast.com/c6d6f4c3'
+        width='100%'
+        frameBorder='0'
+        height='200px'
+        scrolling='no'
+        seamless
+        >
+      </iframe>
+    </section>
+  )
+}
+
+export default DesignThoughts

components/dribbble.js

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react'
+import axios from 'axios'
+import Alert from './ui/alert'
+import Button from './ui/button'
+import DribbblePost from './ui/dribbble_post'
+import { ThemeContext } from '../lib/themeContext'
+
+function Dribbble() {
+  const SHOTS_PER_PAGE = 9;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [postsFetched, setPostsFetched] = useState(false);
+  const [dribbblePage, setDribbblePage] = useState(1);
+  const [dribbblePosts, setDribbblePosts] = useState([]);
+
+  const placeholderArr = Array.from({ length: SHOTS_PER_PAGE }, (_v, i) => i);
+
+  useEffect(() => {
+    let didCancel = false;
+    let dribbbleRes = {};
+
+    async function getDribbblePosts() {
+      try {
+        if (!postsFetched) {
+          dribbbleRes = await axios.get(
+            `https://api.dribbble.com/v2/user/shots?access_token=${process.env.DRIBBBLE_TOKEN}&page=${dribbblePage}&per_page=${SHOTS_PER_PAGE}`
+          );
+          setPostsFetched(true);
+        }
+
+        if (!didCancel) {
+          setDribbblePosts([...dribbblePosts, ...dribbbleRes.data]);
+
+          if (isLoading) setIsLoading(false);
+          if (isLoadingMore) setIsLoadingMore(false);
+        }
+      } catch (error) {
+        console.warn(error);
+        if (!didCancel) {
+          if (isLoading) setIsLoading(false);
+          if (isLoadingMore) setIsLoadingMore(false);
+          setPostsFetched(true);
+          setIsError(true);
+        }
+      }
+    }
+
+    if (!postsFetched && !didCancel) {
+      getDribbblePosts();
+    }
+
+    return () => {
+      didCancel = true;
+    };
+  }, [
+    dribbblePosts,
+    postsFetched,
+    dribbblePage,
+    isLoading,
+    isError,
+    isLoadingMore,
+  ]);
+
+  function loadMorePosts() {
+    setDribbblePage(dribbblePage + 1);
+    setPostsFetched(false);
+    setIsLoadingMore(true);
+  }
+
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <div className="mw8 center">
+      {isError && <Alert>Sorry, something went wrong... refresh the page or come back later.</Alert>}
+
+      {isLoading &&
+        placeholderArr.map((i) => <div key={i} />)}
+      {!isLoading && (
+        <div className="mt5 grid">
+          {dribbblePosts.map((post) => <DribbblePost key={post.id} post={post} />)}
+        </div>
+      )}
+
+
+      {isLoadingMore &&
+        placeholderArr.map((i) => <div key={i} />)
+      }
+
+      <div className="tc mv4">
+        <Button onClick={loadMorePosts} isLoading={isLoading || isLoadingMore} theme={theme}>
+          Load More
+        </Button>
+      </div>
+      <style jsx>{`
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        
+          grid-gap: 1rem;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export default Dribbble

components/friends.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { ThemeContext } from '../lib/themeContext'
+
+const Friends = () => {
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <section className="mw8 center mv6">
+      <h3 className="white f5 pb3">Designer friends</h3>
+      <div className="grid">
+        <div className="relative hide-child">
+          <span
+            className="child absolute padded-border b--white br2 h-100 w-100"
+            style={{ pointerEvents: "none", zIndex: 10 }} 
+          />
+          <a href="http://twitter.com/brian_lovin">
+            <img className="db w-100 br2" src="assets/friends/brian-lovin.jpg" />
+          </a>
+        </div>
+        <div className="relative hide-child">
+          <span
+            className="child absolute padded-border b--white br2 h-100 w-100"
+            style={{ pointerEvents: "none", zIndex: 10 }} 
+          />
+          <a href="http://twitter.com/anthonyshort">
+            <img className="db w-100 br2" src="assets/friends/anthony-short.jpg" />
+          </a>
+        </div>
+        <div className="relative hide-child">
+          <span
+            className="child absolute padded-border b--white br2 h-100 w-100"
+            style={{ pointerEvents: "none", zIndex: 10 }} 
+          />
+          <a href="http://twitter.com/superbryntendo">
+            <img className="db w-100 br2" src="assets/friends/bryn-jackson.jpg" />
+          </a>
+        </div>
+        <div className="relative hide-child">
+          <span
+            className="child absolute padded-border b--white br2 h-100 w-100"
+            style={{ pointerEvents: "none", zIndex: 10 }} 
+          />
+          <a href="http://twitter.com/kleinmaetschke">
+            <img className="db w-100 br2" src="assets/friends/klein-maetschke.jpg" />
+          </a>
+        </div>
+        <div className="relative hide-child">
+          <span
+            className="child absolute padded-border b--white br2 h-100 w-100"
+            style={{ pointerEvents: "none", zIndex: 10 }} 
+          />
+          <a href="http://twitter.com/luketns">
+            <img className="db w-100 br2" src="assets/friends/luke-schultz.png" />
+          </a>
+        </div>
+      </div>
+      <style jsx>{`
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
+          grid-gap: 1rem;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default Friends

components/intro.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { ThemeContext } from '../lib/themeContext'
+
+const Intro = () => {
+  const theme = React.useContext(ThemeContext)
+
+  return (
+    <section className="mw8 center mt5">
+      <div className="flex justify-between items-center">
+        <h2 className="white">Howdy, I'm Michael.</h2>
+      </div>
+      <div className="cf">
+        <div className="fl w-100-m">
+          <div className="br2 ma1 ml0 pb2">
+            <div className="fr w-100 w-50-ns pl3-ns pb4">
+              <div className="relative w-100 hide-child">
+                <span
+                  className="child absolute padded-border b--white br2 h-100 w-100"
+                  style={{ pointerEvents: "none", zIndex: 10 }} 
+                />  
+                <a href="https://www.newfrontinsurance.com" className="darken">
+                  <h2
+                    className="white absolute pa1 bottom-0 pl3 f6 fw4 ttu tracked"
+                    style={{ pointerEvents: "none", zIndex: 10 }}
+                  >
+                    Newfront Insurance
+                  </h2>
+                  <img className="w-100 br2" src="./assets/newfront-insurance-thumbnail.png" />
+                </a>
+              </div>
+            </div>
+            <p className="white pb2 lh-copy">
+              After designing public health tools at {` `}
+              <a href="https://iodine.com" className="white hover-purple" target="_blank">
+                Iodine
+              </a>
+              , and a quick dip into politics at Sidewire, I joined Newfront Insurance in December of 2017 to help design and build a modern insurance brokerage.
+            </p>
+            <p className="white pb2 lh-copy">
+              At Newfront, we're building tools that make life easier for brokers, their clients, and our account managers. Some of these tools include automation and others improve the communication process between each group.
+            </p>
+            <p className="white pb2 lh-copy">
+              If you're looking for commercial or personal insurance or are interested in helping build a big business, join us at {` `}
+              <a className="white hover-blue" href="https://www.newfrontinsurance.com" target="_blank">
+              Newfront
+              </a>.
+            </p>
+            <Link href="./projects">
+              <a className={`${theme.textColor} hover-white f6 link br1 ba hover pa3 mv3 dib nowrap`}>
+                See more of my work
+              </a>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Intro