mbifulco · mbifulco · Oct 19, 2021 · Oct 5, 2021 · Oct 5, 2021 · Oct 5, 2021
diff --git a/.gitignore b/.gitignore
@@ -224,3 +224,6 @@ $RECYCLE.BIN/
 
 # End of https://www.gitignore.io/api/node,macos,windows,visualstudiocode
 .env.development
+
+# Local Netlify folder
+.netlify
diff --git a/netlify.toml b/netlify.toml
@@ -1,6 +1,5 @@
 [build]
-  command = "npm run build"
-  publish = "out"
+  publish = ".next"
 
 [[plugins]]
   package = "@netlify/plugin-nextjs"

diff --git a/next.config.js b/next.config.js
@@ -9,4 +9,7 @@ const withMDX = require('@next/mdx')({
 
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'md', 'mdx'],
+  images: {
+    domains: ['i.ytimg.com'],
+  },
 });
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.6.8",
+    "@chakra-ui/react": "^1.6.10",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@material-ui/core": "^4.12.3",
@@ -23,7 +23,7 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^11.1.2",
-    "date-fns": "^2.24.0",
+    "date-fns": "^2.25.0",
     "fathom-client": "^3.2.0",
     "feed": "^4.2.2",
     "framer-motion": "^4",
@@ -32,26 +32,27 @@
     "mdx-embed": "^0.0.22",
     "moment": "2.29.1",
     "next": "^11.1.2",
-    "next-mdx-remote": "^3.0.5",
+    "next-mdx-remote": "^3.0.6",
     "pluralize": "^8.0.0",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remark": "^14.0.1",
     "remark-html": "^15.0.0",
-    "sass": "^1.42.1",
+    "sass": "^1.43.2",
     "sharp": "^0.29.1",
     "swr": "^1.0.1",
     "use-cloudinary": "^4.1.1"
   },
   "devDependencies": {
+    "@netlify/plugin-nextjs": "4.0.0-beta.2",
     "@next/eslint-plugin-next": "^11.1.2",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
     "eslint-config-prettier": "^8.3.0",
     "husky": ">=6",
-    "lint-staged": "^11.2.0",
+    "lint-staged": "^11.2.3",
     "netlify-plugin-cache-nextjs": "^1.6.1",
     "prettier": "^2.4.1"
   },

diff --git a/src/components/ExternalWorkFeed/ExternalWorkFeed.js b/src/components/ExternalWorkFeed/ExternalWorkFeed.js
@@ -0,0 +1,42 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { Box, Stack, Heading, Spacer, Text, useTheme } from '@chakra-ui/react';
+import { MDXRemote } from 'next-mdx-remote';
+import moment from 'moment';
+import TagsSummary from '../tagsSummary';
+
+const ExternalWorkFeed = ({ articles }) => {
+  const theme = useTheme();
+
+  return articles.map((article) => {
+    const {
+      frontmatter: { date, url, title, tags },
+    } = article;
+
+    const formattedDate = moment(new Date(date)).format('MMMM DD, YYYY');
+    return (
+      <Box
+        key={url}
+        boxShadow={'0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)'}
+        padding="1.5rem 2rem 2rem 2rem"
+        borderRadius="20px"
+        marginBottom="2rem"
+      >
+        <Stack>
+          <Stack>
+            <Heading marginBottom="0" fontSize="2rem" as="h2" key={url}>
+              {title}
+            </Heading>
+            <Text marginTop={0} color={theme.colors.pink[500]}>
+              {formattedDate}
+            </Text>
+            <TagsSummary tags={tags} />
+            <MDXRemote {...article.source} />
+          </Stack>
+        </Stack>
+      </Box>
+    );
+  });
+};
+
+export default ExternalWorkFeed;
diff --git a/src/components/ExternalWorkFeed/index.js b/src/components/ExternalWorkFeed/index.js
@@ -0,0 +1 @@
+export { default as ExternalWorkFeed } from './ExternalWorkFeed';
diff --git a/src/components/Layouts/DefaultLayout.js b/src/components/Layouts/DefaultLayout.js
@@ -86,6 +86,9 @@ const DefaultLayout = ({ children }) => {
               <Link as={InternalLink} href="/">
                 <a>Blog</a>
               </Link>
+              <Link as={InternalLink} href="/work">
+                <a>Work</a>
+              </Link>
               <Link as={InternalLink} href="/about">
                 <a>About</a>
               </Link>

diff --git a/src/components/index.js b/src/components/index.js
@@ -1,4 +1,5 @@
 export { default as Footer } from './footer';
+export { ExternalWorkFeed } from './ExternalWorkFeed';
 export { Image } from './Image';
 export { NewsletterSignup } from './NewsletterSignup';
 export { PostFeed } from './PostFeed';

diff --git a/src/components/post.js b/src/components/post.js
@@ -51,7 +51,7 @@ const Post = ({ summary, post }) => {
     />
   );
 
-  const formattedDate = moment(new Date(date)).format('DD MMMM YYYY');
+  const formattedDate = moment(new Date(date)).format('MMMM DD, YYYY');
 
   return (
     <article className={style.post}>

diff --git a/src/components/tag.js b/src/components/tag.js
@@ -2,17 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
 
-import * as classes from '../styles/tag.module.scss';
+import { Link as ChakraLink, Flex, Text, useTheme } from '@chakra-ui/react';
 
 const Tag = ({ children, url }) => {
-  let tag = <span className={classes.container}>{children}</span>;
+  const theme = useTheme();
+
+  let tag = (
+    <Flex marginRight="0.5rem">
+      <Text color={theme.colors.gray[400]}>#</Text>
+      <Text color={theme.colors.gray[700]}>{children}</Text>
+    </Flex>
+  );
 
   if (url) {
     tag = (
-      <Link href={url} className={classes.link}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <ChakraLink as={Link} href={url}>
         <a>{tag}</a>
-      </Link>
+      </ChakraLink>
     );
   }
   return tag;

diff --git a/src/components/tagsSummary.js b/src/components/tagsSummary.js
@@ -11,7 +11,7 @@ const TagsSummary = ({ tags }) => {
   if (!tags || tags.length <= 0) return null;
 
   return (
-    <Flex fontSize="small" direction="row">
+    <Flex fontSize="smaller" direction="row">
       {map(tags, (tag, id) => (
         <Tag
           key={`tag-${id || tag.name || tag}`}

diff --git a/src/config.js b/src/config.js
@@ -16,22 +16,9 @@ const config = {
   },
   // eslint-disable-next-line max-len
   description: `Resources for modern software designers and developers.  Tips and walkthroughs on using developer tools like React, node, and javascript.  Design thoughts and theory, and tips for tools like sketchapp and figma.`,
-  logo: {
-    src: '',
-    alt: '',
-  },
   image_url: `${BASE_SITE_URL}/icons/icon-512x512.png`, // used for RSS feed image
   logoText: 'Mike Bifulco',
   defaultTheme: 'light',
-  postsPerPage: 5,
-  showMenuItems: 2,
-  menuMoreText: 'Show more',
-  mainMenu: [
-    {
-      title: 'About',
-      path: '/about',
-    },
-  ],
   siteUrl: BASE_SITE_URL,
 };
 

diff --git a/src/data/external-references/50-most-powerful-startups-in-charlotte.mdx b/src/data/external-references/50-most-powerful-startups-in-charlotte.mdx
@@ -0,0 +1,12 @@
+---
+title: 50 Most Powerful startups in Charlotte
+date: 11-10-2017
+tags: [smpl, startup, founder, entrepreneurship]
+---
+
+<Image
+  publicId="external-references/50-most-powerful-startups-in-charlotte/cover"
+  alt="Screenshot: 50 Most powerful startups in Charlotte article by Axios Charlotte"
+/>
+
+I was cofounder and CEO of [smpl](https://smpl.io), a SaaS startup helping independent-scale coworking operators automate their business. We were featured in a 2017 Article by Axios Charlotte (then called **The Charlotte Agenda**) as one of the most powerful (lol) startups in town. Pretty cool!
diff --git a/src/data/external-references/building-the-plane-while-flying-it.mdx b/src/data/external-references/building-the-plane-while-flying-it.mdx
@@ -0,0 +1,11 @@
+---
+title: Gymnasium - Building the plane while flying it
+date: 10-27-2015
+tags: [edX]
+---
+
+<YouTube youTubeId="5DiJ_2Bz2hM" />
+
+(My part starts at 13m47s, but you should watch the whole thing!)
+
+This is a talk I gave during [Open Edx Conf 2016](https://open.edx.org) with my colleagues, comrades, and brothers in arms Andrew Miller and Jeremy Osborn, talking about how we built Gymnasium while actively experimenting with formulas for an effective MOOC.
diff --git a/src/data/external-references/charlotte-30-under-30.mdx b/src/data/external-references/charlotte-30-under-30.mdx
@@ -0,0 +1,12 @@
+---
+title: Top 30 Under 30 Future Leaders of Charlotte - Elevate Lifestyle 2016
+date: 06-07-2016
+tags: [startup]
+---
+
+<Image
+  publicId="external-references/30-under-30-2016/cover"
+  alt="Photo of me being recognized as one of Charlotte's 30 under 30 in 2016"
+/>
+
+Not much on the web about this these days, but if you really want to go spelunking, here's a Wayback Machine link from late 2016 that's captured the gist of it. [Wayback Machine: Top 30 Under 30 Future Leaders of Charlotte, Elevate Lifestyle 2016](http://web.archive.org/web/20161115035530/http://elevatelifestyle.com/30-under-30-2016), and an [old facebook event](https://www.facebook.com/events/1088933411127102/).
diff --git a/src/data/external-references/design-matters-zero-day.mdx b/src/data/external-references/design-matters-zero-day.mdx
@@ -0,0 +1,16 @@
+---
+title: Design Matters, Hygge Zero day
+date: 04-13-2018
+tags: [design, ux]
+---
+
+<Image
+  publicId="external-references/design-matters-zero-day/cover"
+  alt="title slide: Design Matters, Hygge Zero day"
+/>
+
+These are slides from an empassioned talk I gave about design during a community event called Zero Day at [Hygge Coworking](https://wearehygge.com) in Charlotte, NC, USA.
+
+The thesis: good design is important, and you should be paying attention to good-and-bad design in the world around you. Contributing to making the world better for everyone **is** everyone's job.
+
+Slides [are available on SlideShare](https://www.slideshare.net/mbifulco1/design-matters-hygge-zero-day-93804671)
diff --git a/src/data/external-references/designing-windows-apps-from-the-ground-up.mdx b/src/data/external-references/designing-windows-apps-from-the-ground-up.mdx
@@ -0,0 +1,11 @@
+---
+title: Designing Windows 8.1 apps, from the ground up
+date: 09-26-2013
+tags: [ux, design, windows]
+---
+
+<Vimeo vimeoId="84388498" />
+
+This is a talk I gave at [Blend Conf](http://2013.blendconf.com/speakers/mike-bifulco/) in Charlotte, NC USA in 2013, when I was working for [Microsoft](https://microsoft.com) as a UX Designer. If you're interested in learning how to design apps for a version of Windows that came out in 2012, this is your day!
+
+Slides are [available on Slideshare](https://www.slideshare.net/mbifulco1/designing-windows-81-apps-from-the-ground-up)
diff --git a/...ta/external-references/driving-successful-launch-for-conversational-actions.mdx b/...ta/external-references/driving-successful-launch-for-conversational-actions.mdx
@@ -0,0 +1,9 @@
+---
+title: Driving a successful launch for Conversational Actions
+date: 10-01-2021
+tags: [assistant, android, YouTube]
+---
+
+<YouTube youTubeId="V2izYekSSwY" />
+
+From [Google I/O 2021](https://io.google/2021/): In this session, we (I) discuss marketing activities that help users discover and engage with what you’ve built on Google Assistant, as well as some updates to monetization features for Conversational Actions.
diff --git a/src/data/external-references/dynamic-shortcuts-for-assistant.mdx b/src/data/external-references/dynamic-shortcuts-for-assistant.mdx
@@ -0,0 +1,9 @@
+---
+title: Push dynamic shortcuts to Assistant
+date: 05-19-2021
+tags: [assistant, android, YouTube]
+---
+
+<YouTube youTubeId="OaF_WhzNAKQ" />
+
+From my work as a Developer Advocate on the Google Assistant team, this tutorial explains the difference between _shortcuts_ and _dynamic shortcuts_ for Android, and how to use Assistant to take advantage of this functionality.
diff --git a/src/data/external-references/edx-comprehensive-theming-tutorial.mdx b/src/data/external-references/edx-comprehensive-theming-tutorial.mdx
@@ -0,0 +1,14 @@
+---
+title: Edx Comprehensive Theming Tutorial
+date: 07-28-2016
+tags: [edX, talks]
+---
+
+<Image
+  publicId="external-references/edx-comprehensive-theming/cover"
+  alt="Cover slide: Edx Comprehensive Theming tutorial, by Mike Bifulco"
+/>
+
+A talk I gave at Stanford University in 2016 on Comprehensive Theming for [Open EdX](https://open.edx.org).
+
+Slides [are available on Slideshare](https://www.slideshare.net/mbifulco1/edx-comprehensive-tutorial)
diff --git a/src/data/external-references/how-to-create-your-first-app-action.mdx b/src/data/external-references/how-to-create-your-first-app-action.mdx
@@ -0,0 +1,9 @@
+---
+title: How to create your first App Action
+tags: [demo, assistant, android, voice]
+date: 05-19-2021
+---
+
+<YouTube youTubeId="lxviLXXvs3A" />
+
+A brief, 2-minute Demo from [Google I/O 2021](https://io.google/2021/): learn how to create your first App Action for an Android app, which lets you connect your app's features to Google Assistant
diff --git a/src/data/external-references/jamstack-ssgs-role-in-creator-economy.mdx b/src/data/external-references/jamstack-ssgs-role-in-creator-economy.mdx
@@ -0,0 +1,13 @@
+---
+title: JAM Stack, SSGs, and their role in empowering the creator economy
+date: 08-23-2021
+tags: [javascript, react, jamstack, ssg, eleventy]
+---
+
+<YouTube youTubeId="cw1wlHV4hGk" />
+
+Tools like Eleventy, Hugo, Gatsby, Svelte, and others have given developers a superpower for quickly developing content-driven, easily manageable web properties. It's an exciting frontier for developers who are also content creators, but for non-technical creators, our favorite toolchains can feel like a labyrinth of indecipherable choices.
+
+In this talk, we'll discuss our role in promoting the creator economy. We'll talk about the opportunity we have as developers in helping to democratize content creation for everyone, and the importance of creating a more robust, archival internet.
+
+[Check out the slides](https://docs.google.com/presentation/d/1XFJ_nQfPnX0oPOUezOEwVKLZFtptTKemtGg41RJPisQ)
diff --git a/src/data/external-references/matter-a-whole-thing-about-design.mdx b/src/data/external-references/matter-a-whole-thing-about-design.mdx
@@ -0,0 +1,14 @@
+---
+title: 'Matter - a whole thing about design'
+date: 03-07-2019
+tags: [ux, design]
+---
+
+<Image
+  publicId="external-references/matter-a-whole-thing/cover"
+  alt="Cover slide: MATTER - a whole thing about design"
+/>
+
+From a talk I gave at my then-home-base [Hygge Coworking](https://wearehygge.com/) at a community event. The thesis: we're all designers, and you should give a damn about the things you put into the world.
+
+Slides are [available on slideshare](https://www.slideshare.net/mbifulco1/matter-a-whole-thing-about-design).
diff --git a/src/data/external-references/new-transaction-features-for-smart-displays.mdx b/src/data/external-references/new-transaction-features-for-smart-displays.mdx
@@ -0,0 +1,9 @@
+---
+title: New Transaction Features for Smart Displays
+date: 05-19-2021
+tags: [assistant, demo, voice]
+---
+
+<YouTube youTubeId="z6l-V-EOGNY" />
+
+A quick demo from [Google I/O 2021](https://io.google/2021/): we take a look at some user experience (UX) changes for card verification code (CVC) confirmation and new payment method entry for payments on smart screens.
diff --git a/src/data/external-references/open-edx-slack-intercom.mdx b/src/data/external-references/open-edx-slack-intercom.mdx
@@ -0,0 +1,11 @@
+---
+title: Open EdX, Slack, and Intercom
+date: 07-17-2016
+tags: [edx]
+---
+
+<YouTube youTubeId="2VJmjmESvMo" />
+
+(My talk starts at 5 minutes and 43 seconds into the video)
+
+From [Open EdX Conf 2016](https://open.edx.org), this is a lightning talk I gave on our strategy for student support at [Gymnasium](https://thegymnasium.com), while I served as Technical Director there.
diff --git a/src/data/external-references/publishing-your-first-github-pages-website.mdx b/src/data/external-references/publishing-your-first-github-pages-website.mdx
@@ -0,0 +1,13 @@
+---
+title: Publishing Your First GitHub Pages Website - Gymnasium Take 5
+date: 03-01-2019
+tags: [html, github]
+---
+
+<YouTube youTubeId="ukPI1zlxKqg" />
+
+From my days working as Technical Director of [thegymnasium.com](https://thegymnasium.com): a 5-minute tutorial (lovingly referred to as a **Take 5**) showing how you can use GitHub pages to host your very own website.
+
+The full tutorial (with additional reference material) is available **for free** on [The Gymnasium](https://thegymnasium.com/courses/take5/publishing-your-first-github-pages-website)
+
+Gymnasium is a treasure - if you like this, get yourself a free account at [thegymnasium.com/register](https://thegymnasium.com/register), and start learning at your own pace today!
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as ExternalWorkFeed } from './ExternalWorkFeed';