initial commit

src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import NavHeader from './NavHeader';
+
+const Layout: React.FC<{}> = (props) =>  {
+    return (
+	<div className="bg-gray-900 text-gray-200 min-h-screen min-w-screen font-main">
+	    <div className="mx-auto max-w-screen-lg container pt-1.5 p-0 sm:p-2">
+		<NavHeader/>
+		<main>
+		{props.children}
+		</main>
+	    </div>
+	</div>	
+    )
+};
+
+export default Layout;

src/components/NavHeader.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import logo from '../../static/RB-w.png';
+import {Link} from 'gatsby';
+
+const NavHeader: React.FC<{}> = (props) =>  {
+  const navItems: {title: string, url: string}[][] = [
+    [
+      {title: "Home", url: "/"},
+      {title: "Blog", url: "/blog"},
+      {title: "Contact", url: "/contact"}
+    ],
+    [
+      {title: "Twitter", url: "https://twitter.com/rikksolo"},
+      {title: "GitLab", url: "https://gitlab.riksolo.com/riksolo"}
+    ],
+    [
+      {title: "RBLicht", url: "https://rblicht.nl"},
+      {title: "RBSolutions", url: "https://rbsolutions.cc"}
+    ]
+  ]
+
+  const rendered = navItems.map((item, index)=>{
+    const renderedChild = item.map((child, index)=>{
+      return (
+        <>
+          {child.url.startsWith('http') ? (
+            <a
+              href={child.url}
+            >
+              {child.title}
+            </a>
+          ): (
+            <Link
+              activeClassName="text-blue-300"
+              partiallyActive={child.url !== "/"}
+              to={child.url}
+            >
+            {child.title}
+            </Link>
+          )}
+          {index < item.length - 1 ? <span className="mx-1.5 align-middle">-</span> :null}
+        </>
+      );
+    })
+    return (
+      <>
+        {renderedChild}
+        <br className="md:hidden" />
+        {index < navItems.length - 1 ? <span className="mx-2 hidden md:inline">|</span> : null}
+      </>
+    );
+  });
+
+  return (
+    <>
+      <a href="/" className="text-gray-100 no-underline">
+        <img className="h-5 inline mr-2" src={logo}/>
+        <span className="align-middle font-bold text-lg">
+          Rik Berkelder
+        </span>
+      </a>
+
+      <br className="md:hidden" />
+      <span className="hidden md:inline mx-2 align-middle">|</span>
+      <span className="align-middle">
+        {rendered}
+      </span>
+
+      <hr className="border-gray-800 my-2"/>
+	  </>
+  );
+};
+
+export default NavHeader;

src/markdown-pages/post2.md

@@ -0,0 +1,9 @@
+---
+title: "Hello World"
+slug: "test-2"
+date: "2021-04-17"
+---
+
+hello, hello!
+
+how are you?

src/markdown-pages/test.md

@@ -0,0 +1,54 @@
+---
+slug: "test"
+title: "MD Test Page"
+date: "2021-04-17"
+---
+# h1
+## h2
+### h3
+##### h4
+Markdown Test Page
+
+---
+
+test wow test hello
+
+test
+
+*test*
+**test**
+inline `code formatting` like a boss
+
+---
+
+```
+code 
+block
+hello
+  there
+```
+
+---
+```ts
+let hello: string = "test";
+console.log(hello);
+
+const test = {
+    one: "three"
+};
+```
+
+---
+
+[Visit google!](https://google.com)
+
+---
+
+| Heading 1 | Heading 2                               | Heading 3 |
+|:----------|:----------------------------------------|:----------|
+| One       | Two                                     | Three     |
+| Four      | Test Test Hello Hello Long Content Ahoy | Five          |
+
+---
+
+

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;

src/styles/global.scss

@@ -0,0 +1,49 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
+
+h1, h2, h3, h4, h5 {
+    @apply font-bold;
+}
+
+h1 {
+    @apply text-3xl;
+}
+
+h2 {
+    @apply text-xl;
+}
+
+h3 {
+    @apply text-lg;
+}
+
+hr {
+    @apply border-gray-700 my-3;
+}
+
+.gatsby-highlight > pre, code.language-text {
+    @apply bg-gray-800 rounded-none #{!important};
+}
+
+a {
+    @apply underline text-blue-500;
+}
+
+p {
+    @apply mb-1;
+}
+
+table {
+    @apply table-auto;
+
+    td, th {
+	@apply px-2 py-1;
+    }
+}
+
+ul.list-dash > li::before{
+   content: "- " 
+}

src/templates/mdPageTemplate.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {graphql, PageProps, Link} from 'gatsby';
+import Layout from '../components/Layout';
+import {Query} from '../../gatsby-graphql';
+
+const MdPageTemplate: React.FC<PageProps<Query>> = ({data}) => {
+  const post = data.markdownRemark;
+    return (
+      <Layout>
+        <Link to="/blog" className="block mb-2">
+        &lt;&lt; Back to post list
+        </Link>
+        <h1>{post.frontmatter?.title}</h1>
+        <span className="text-sm">{post.frontmatter?.date}</span>
+        <hr className="my-4"/>
+        <div dangerouslySetInnerHTML={{__html: post.html}}>
+        </div>
+      </Layout>
+    );
+}
+
+export default MdPageTemplate;
+
+export const pageQuery = graphql`
+  query MarkdownPageTemplate($slug: String!) {
+    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
+      html
+      frontmatter {
+        slug
+        date(formatString: "MMMM DD, YYYY")
+        title
+      }
+    }
+  }
+`;