8 files changed, 176 insertions, 0 deletions
diff --git a/src/components/content.tag b/src/components/content.tag
new file mode 100644
index 0000000..67ea0d3
--- /dev/null
+++ b/src/components/content.tag
@@ -0,0 +1,9 @@
+<content>
+  <subheading text="Things of interest" />
+
+  <list items={ items } />
+
+  <script>
+    this.items = [{ title: 'My .vimrc', url: '/.vimrc'}];
+  </script>
+</content>
+\ No newline at end of file
diff --git a/src/components/footer.tag b/src/components/footer.tag
new file mode 100644
index 0000000..f79e1b4
--- /dev/null
+++ b/src/components/footer.tag
@@ -0,0 +1,71 @@
+<footer>
+  <div>
+    <a href="https://www.linkedin.com/in/jantuomi/">
+      <span class="icon"><i class="fa fa-linkedin fa-lg" aria-hidden="true" /></span>
+      <span class="url">linkedin.com/in/jantuomi</span>
+    </a>
+  </div>
+  <div>
+    <a href="https://t.me/jantuomi">
+      <span class="icon"><i class="fa fa-telegram fa-lg" aria-hidden="true" /></span>
+      <span class="url">t.me/jantuomi</span>
+    </a>
+  </div>
+  <div>
+    <a href="mailto:jans.tuomi@gmail.com">
+      <span class="icon"><i class="fa fa-envelope fa-lg" aria-hidden="true" /></span>
+      <span class="url">jans.tuomi@gmail.com</span>
+    </a>
+  </div>
+
+
+  <style>
+    footer {
+      position: fixed;
+      bottom: 1rem;
+      height: 5.6rem;
+    }
+
+    a {
+      text-decoration: none;
+      white-space: nowrap;
+    }
+
+    div {
+      margin: 0.5rem;
+    }
+
+    span.icon {
+      text-align: center;
+    }
+
+    span.icon i {
+      width: 2rem;
+    }
+
+    span.url {
+      margin-left: 2rem;
+    }
+
+    @media screen and (max-width: 600px) {
+      footer {
+        height: inherit;
+        left: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      footer div {
+        flex-grow: 1;
+        text-align: center;
+      }
+
+      span.url {
+        display: none;
+      }
+    }
+
+  </style>
+</footer>
+\ No newline at end of file
diff --git a/src/components/header.tag b/src/components/header.tag
new file mode 100644
index 0000000..7c2713a
--- /dev/null
+++ b/src/components/header.tag
@@ -0,0 +1,10 @@
+<header>
+  <h1>Jan Tuomi</h1>
+
+  <style>
+    h1 {
+      font-size: 3rem;
+      font-weight: 300;
+    }
+  </style>
+</header>
+\ No newline at end of file
diff --git a/src/components/list.tag b/src/components/list.tag
new file mode 100644
index 0000000..600603f
--- /dev/null
+++ b/src/components/list.tag
@@ -0,0 +1,7 @@
+<list>
+  <ul>
+    <li each={ opts.items }>
+      <a href={ url }>{ title }</a>
+    </li>
+  </ul>
+</list>
+\ No newline at end of file
diff --git a/src/components/site.tag b/src/components/site.tag
new file mode 100644
index 0000000..1d09b0d
--- /dev/null
+++ b/src/components/site.tag
@@ -0,0 +1,5 @@
+<site>
+  <header />
+  <content />
+  <footer />
+</site>
+\ No newline at end of file
diff --git a/src/components/subheading.tag b/src/components/subheading.tag
new file mode 100644
index 0000000..fda52e4
--- /dev/null
+++ b/src/components/subheading.tag
@@ -0,0 +1,3 @@
+<subheading>
+  <h2>{ opts.text }</h2>
+</subheading>
+\ No newline at end of file
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..9492f35
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+
+  <head>
+    <title>Jan Tuomi</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
+    <script src="https://use.fontawesome.com/eaed73f4f5.js"></script>
+    <link rel="stylesheet" href="style.css">    
+  </head>
+
+  <body>
+    <site></site>
+
+    <!-- riot tags -->
+    <script src="components/site.tag" type="riot/tag"></script>    
+    <script src="components/header.tag" type="riot/tag"></script>
+    <script src="components/footer.tag" type="riot/tag"></script>    
+    <script src="components/content.tag" type="riot/tag"></script>
+    <script src="components/list.tag" type="riot/tag"></script>
+    <script src="components/subheading.tag" type="riot/tag"></script>
+    
+    <!-- scripts we need -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.18.1/babel.min.js"></script>
+    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
+
+    <!-- mount this app -->
+    <script> riot.mount('*') </script>
+  </body>
+
+</html>
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..d2738f2
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,39 @@
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html {
+  font-family: 'Lato', sans-serif;
+  font-size: 20px;
+  
+  background-color: #D9E0D7;
+  box-sizing: border-box;
+}
+
+body {
+  border: 0;
+
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+
+  padding: 1rem;
+}
+
+@media screen and (max-width: 600px) {
+  body {
+    text-align: center;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+}
+
+a {
+  color: #570C3D;
+}
+\ No newline at end of file