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;