initial commit

src/pages/blog.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {graphql, PageProps, Link} from "gatsby";
+import {Query } from '../../gatsby-graphql';
+import Layout from '../components/Layout';
+
+const Blog: React.FC<PageProps<Query>> = (props) => {
+  const remark = props.data?.allMarkdownRemark?.edges;
+
+  const links = remark.map(edge => {
+    return (
+      <li key={edge.node.frontmatter.slug}>
+        <Link to={`/blog/${edge.node.frontmatter.slug}`} className="no-underline">
+          <span className="underline">
+          {edge.node.frontmatter.title}
+          </span>
+          <span className="text-gray-300 text-sm">
+            <> - </>
+            <span>{edge.node.frontmatter.date}</span>
+          </span>
+        </Link>
+      </li>
+    )
+  })
+
+    return (
+      <Layout>
+        <h1 className="mb-4">Blog</h1>
+        <ul>
+          {links}
+        </ul>
+      </Layout>
+    );
+};
+
+export default Blog;
+
+export const pageQuery = graphql`
+  query {
+    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
+      edges {
+        node {
+          id
+          frontmatter {
+            date(formatString: "MMMM DD, YYYY")
+            slug
+            title
+          }
+        }
+      }
+    }
+  }
+`

src/pages/contact.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import Layout from '../components/Layout';
+
+const Contact: React.FC<{}> = () => {
+  return (
+    <Layout>
+      <h1 className="mb-4">Contact Info</h1>
+          <h2>E-Mail</h2>
+          <div className="my-2">mail@riksolo.com</div>
+
+          <h2 className="mt-4">Social Media</h2>
+          <ul className="my-2">
+            {[
+              {url: "https://twitter.com/rikksolo", title: "Twitter"},
+              {url: "https://instagram.com/rikberkelder", title: "Instagram"},
+              {url: "https://github.com/rikberkelder", title: "Github"},
+              {url: "https://gitlab.riksolo.com/riksolo", title: "Gitlab"}
+            ].map(item => {
+              return <li><a href={item.url}>{item.title}</a></li>
+            })}
+          </ul>
+    </Layout>
+  );
+};
+
+export default Contact;

src/pages/index.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import Layout from '../components/Layout';
+
+const Home: React.FC<{}> = () => {
+    return (
+	<Layout>
+	    <h1 className="text-4xl">Rik Berkelder</h1>
+	    <span>Web Developer & Lighting Designer</span>
+
+	    <h2 className="mt-4">Skills</h2>
+	    <div className="grid lg:grid-cols-2">
+		<div>
+		    <span className="text-sm text-gray-400 font-bold mt-1 block">Software</span>
+		    <ul className="list-dash">
+			<li>TypeScript, GraphQL</li>
+			<li>React, React Native, Angular, Node, Gatsby, Electron</li>
+			<li>Docker, Heroku, GitLab CI</li>
+			<li>Linux</li>
+		    </ul>
+		</div>
+		<div>
+		    <span className="text-sm text-gray-400 font-bold mt-3 lg:mt-1 block">Lighting &amp; AV</span>
+		    <ul className="list-dash">
+			<li>GrandMA2/3, Hog4, Avolites Titan, Obsidian ONYX</li>
+			<li>Capture, WYSIWYG, Vectorworks, MA3D</li>
+			<li>ATEM, VMix, Arkaos, Resolume</li>
+			<li>Timecode, Remote Production, System Integration</li>
+		    </ul>
+		</div>
+	    </div>
+
+	    <h2 className="mt-4 mb-1">Highlighted Projects/Clients</h2>
+	    <ul className="list-dash">
+		<li><a target="_blank" href="https://aitum.tv">Aitum</a> - System integration software for twitch streamers</li>
+		<li><a target="_blank" href="https://gitlab.riksolo.com/riksolo/react-mqtt-controls">React MQTT Controls</a> - A React component library to quickly build custom MQTT interfaces</li>
+		<li><a target="_blank" href="https://twitch.tv/mrgregles">MrGregles</a> - Fully remote, real-time, live lighting workflow & operation</li>
+		<li><a target="_blank" href="http://ecolicht.nl">EcoLicht</a> - Lighting Operator for several events</li>
+		<li><a target="_blank" href="https://rn7.nl">RN7</a> - Custom digital signage for Visual Radio studio</li>
+		<li><a target="_blank" href="https://iambnb.nl">IamB&amp;B</a> - Custom back office solution for vacation rental property management</li>
+	    </ul>
+	</Layout>
+    ); 
+};
+
+export default Home;