diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
new file mode 100644
index 0000000..46f3e30
--- /dev/null
+++ b/src/components/index/ActionButtons.js
@@ -0,0 +1,47 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "gatsby";
+
+const getButtonClasses = (isClient) =>
+ classnames(
+ "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
+ isClient &&
+ `text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2`
+ );
+
+const ActionButtons = ({ isClient, image, shuffleImage }) => (
+
+
+
+
+
+
+
+
+ Photography Gallery
+
+
+);
+
+export default ActionButtons;
diff --git a/src/components/index/Nav.js b/src/components/index/Nav.js
new file mode 100644
index 0000000..1c3a484
--- /dev/null
+++ b/src/components/index/Nav.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import classnames from 'classnames';
+
+const getNavClasses = (isClient) =>
+ classnames("hover:underline mx-2 md:mx-3", isClient && "text-vibrant-light");
+
+const Nav = ({ ar, isClient }) => (
+
+);
+
+export default Nav;
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index b1d1aa7..304d410 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,5 +1,5 @@
import * as React from "react";
-import { Link, graphql } from "gatsby";
+import { graphql } from "gatsby";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { Helmet } from "react-helmet";
import { take } from "ramda";
@@ -10,6 +10,8 @@ import {
getVibrant,
getAspectRatio,
} from "../utils";
+import Nav from "../components/index/Nav";
+import ActionButtons from "../components/index/ActionButtons";
const env =
process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development";
@@ -23,121 +25,6 @@ const getDifferentRand = (range, lastNs, iterations = 0) => {
return n;
};
-const getNavClasses = (isClient) =>
- classnames("hover:underline mx-2 md:mx-3", isClient && "text-vibrant-light");
-
-const Nav = ({ ar, isClient }) => (
-
-);
-
-const getButtonClasses = (isClient) =>
- classnames(
- "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline",
- isClient &&
- `text-muted-light bg-muted-dark hover:bg-muted blurred-or-opaque-bg-2`
- );
-
-const ImageButtons = ({ isClient, image, shuffleImage }) => (
-
-
-
-
-
-
-
-
- Photography Gallery
-
-
-);
-
const IndexPage = ({
data: {
allFile: { edges },
@@ -299,7 +186,7 @@ const IndexPage = ({
-