first go version

8 years ago · c796f10f4e
124 changed files with 12835 additions and 2119 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,25 +1,26 @@
-# See https://help.github.com/articles/ignoring-files for more about ignoring files.
-#
-# If you find yourself ignoring temporary files generated by your text editor
-# or operating system, you probably want to add a global ignore instead:
-#   git config --global core.excludesfile '~/.gitignore_global'
+# See https://help.github.com/ignore-files/ for more about ignoring files.

-# Ignore bundler config.
-/.bundle
+# dependencies
+/react/node_modules

-# Ignore the default SQLite database.
-/db/*.sqlite3
-/db/*.sqlite3-journal
+# testing
+/react/coverage

-# Ignore all logfiles and tempfiles.
-/log/*
-!/log/.keep
-/tmp
+# production
+/react/build

-Gemfile.lock
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

-# Ignore vim swp files
-.*.sw?
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

-# Ignore changes on the application config.
-/config/gitlab.yml
+.buildchk
+
+# accumulated docker image data
+/docker/data
--- a/50
+++ b/50
@ -1,50 +0,0 @@
-source 'https://rubygems.org'
-
-
-# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
-gem 'rails', '4.2.6'
-# Use sqlite3 as the database for Active Record
-gem 'sqlite3'
-# Use SCSS for stylesheets
-gem 'sass-rails', '~> 5.0'
-gem 'sass', '~> 3.4'
-gem 'tilt', '~> 2.0'
-# Use Uglifier as compressor for JavaScript assets
-gem 'uglifier', '>= 1.3.0'
-# Use CoffeeScript for .coffee assets and views
-gem 'coffee-rails', '~> 4.1.0'
-gem 'coffee-script', '~> 2.4'
-# See https://github.com/rails/execjs#readme for more supported runtimes
-# gem 'therubyracer', platforms: :ruby
-
-# Use jquery as the JavaScript library
-gem 'jquery-rails'
-# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
-gem 'turbolinks'
-# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
-gem 'jbuilder', '~> 2.0'
-# bundle exec rake doc:rails generates the API under doc/api.
-gem 'sdoc', '~> 0.4.0', group: :doc
-
-# Use ActiveModel has_secure_password
-# gem 'bcrypt', '~> 3.1.7'
-
-# Use Unicorn as the app server
-gem 'unicorn'
-
-# Use Capistrano for deployment
-# gem 'capistrano-rails', group: :development
-
-group :development, :test do
-  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
-  gem 'byebug'
-end
-
-group :development do
-  # Access an IRB console on exception pages or by using <%= console %> in views
-  gem 'web-console', '~> 2.0'
-
-  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
-  gem 'spring'
-end
-
--- a/30
+++ b/30
@ -0,0 +1,30 @@
+APP_NAME = steffers.org
+APP_VERSION = 0.0.1
+
+GOPATH ?= $(HOME)/go
+GOPROJECT = gitlab.weird-web-workers.org/ghopp/$(APP_NAME)
+GOEXE = $(GOPATH)/bin/$(APP_NAME)
+
+DOCKER_IMAGE_NAME = ghopp/$(APP_NAME)
+DOCKER_IMAGE_VERSION = 0.0.1
+DOCKER_IMAGE_TAG = $(DOCKER_IMAGE_NAME)-$(APP_VERSION):$(DOCKER_IMAGE_VERSION)
+
+export APP_NAME DOCKER_IMAGE_TAG GOEXE
+
+.PHONY: all clean docker react
+
+all: docker
+
+$(GOEXE): $(APP_NAME).go
+	go install $(GOPROJECT)
+
+docker: react $(GOEXE)
+	$(MAKE) -C $@
+
+react:
+	$(MAKE) -C $@
+
+clean:
+	$(MAKE) -C docker clean
+	$(MAKE) -C react clean
+	rm -Rf $(GOEXE)
--- a/README.md
+++ b/README.md
@ -1,39 +0,0 @@
-# Georg Hopp aka Steffers
-
-This is the personal HP of Georg Hopp aka Steffers. Yes I know... nobody make
-personal HPs in the times of social networks. Well, I do!
-
-## Description
-
-This holds together some informations about me... especially the links to my
-social media networks.
-
-## Requirements
-
- * Rails
- * Webserver
-
-## Contributing
-
-Well, this is my personel HP... who beside myself would be interested
-in contribution?!?
-
-## License
-
-> This program is free software: you can redistribute it and/or modify
-> it under the terms of the GNU General Public License as published by
-> the Free Software Foundation, either version 3 of the License, or
-> (at your option) any later version.
->
-> This program is distributed in the hope that it will be useful,
-> but WITHOUT ANY WARRANTY; without even the implied warranty of
-> MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-> GNU General Public License for more details.
->
-> You should have received a copy of the GNU General Public License
-> along with this program.  If not, see <http://www.gnu.org/licenses/>.
-
-## Author
-
-Georg Hopp <<georg@steffers.org>>
-
--- a/README.rdoc
+++ b/README.rdoc
@ -1,28 +0,0 @@
-== README
-
-This README would normally document whatever steps are necessary to get the
-application up and running.
-
-Things you may want to cover:
-
-* Ruby version
-
-* System dependencies
-
-* Configuration
-
-* Database creation
-
-* Database initialization
-
-* How to run the test suite
-
-* Services (job queues, cache servers, search engines, etc.)
-
-* Deployment instructions
-
-* ...
-
-
-Please feel free to use a different markup language if you do not plan to run
-<tt>rake doc:app</tt>.
--- a/6
+++ b/6
@ -1,6 +0,0 @@
-# Add your own tasks in files placed in lib/tasks ending in .rake,
-# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
-
-require File.expand_path('../config/application', __FILE__)
-
-Rails.application.load_tasks
--- a/app/assets/images/.keep
+++ b/app/assets/images/.keep
--- a/app/assets/images/gpl-v3-logo.svg
+++ b/app/assets/images/gpl-v3-logo.svg
--- a/app/assets/images/gpl-v3-red.png
+++ b/app/assets/images/gpl-v3-red.png
--- a/app/assets/images/me-white.png
+++ b/app/assets/images/me-white.png
--- a/app/assets/images/me.png
+++ b/app/assets/images/me.png
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -1,16 +0,0 @@
-// This is a manifest file that'll be compiled into application.js, which will include all the files
-// listed below.
-//
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
-// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
-//
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// compiled file.
-//
-// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
-// about supported directives.
-//
-//= require jquery
-//= require jquery_ujs
-//= require turbolinks
-//= require_tree .
--- a/app/assets/javascripts/parallax.coffee
+++ b/app/assets/javascripts/parallax.coffee
@ -1,38 +0,0 @@
-#
-# OK, this is not really a parallax... I just want to see my content move
-# somewhat faster than the background... hey, ho, let's go
-#
-window.App ||= {}
-
-App.init = ->
-	this.$slides = $('.section')
-	this.$menu = $("#nav a")
-	this.section = 0
-	this.$menu.each ->
-		$target = $(this.hash)
-		if $target.length
-			$(this).click ->
-				$('html, body').animate({scrollTop: $target.offset().top+1}, 1000)
-				return false
-
-App.scroll = ->
-	if not this.$slides
-		return 0
-	v_scroll = $(document).scrollTop()
-	for slide,i in this.$slides
-		if v_scroll >= slide.offsetTop
-			this.section = i
-	if not $(this.$menu[this.section]).hasClass('active')
-		$(this.$menu).removeClass('active')
-		$(this.$menu[this.section]).addClass('active')
-
-$(document).on "page:change", ->
-	App.init()
-
-$(window).on "scroll", ->
-	App.scroll()
-
-$(document).ready ->
-	App.init()
-
-# vim: set ts=2 sw=2:
--- a/app/assets/javascripts/welcome.coffee
+++ b/app/assets/javascripts/welcome.coffee
@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
--- a/app/assets/stylesheets/welcome.scss
+++ b/app/assets/stylesheets/welcome.scss
@ -1,492 +0,0 @@
-@font-face {
-	font-family: 'Meath';
-	src: font-url("MeathFLF.ttf") format('truetype');
-}
-
-@font-face {
-	font-family: 'Celtknot';
-	src: font-url("Celtknot.ttf") format('truetype');
-}
-
-@font-face {
-	font-family: 'PoiretOne';
-	src: font-url("PoiretOne-Regular.ttf") format('truetype');
-}
-
-@font-face {
-	font-family: 'RationalInteger';
-	src: font-url("RationalInteger.ttf") format('truetype');
-}
-
-@font-face {
-	font-family: 'Arkitech';
-	src: font-url("ArkitechLight.ttf") format('truetype'),
-	     font-url("ArkitechLight.woff") format('woff');
-}
-
-* {
-	font-family: Verdana, sans-serif;
-	color: rgb(41, 49, 51);
-	margin: 0;
-	padding: 0;
-}
-
-h1,h2,h3,h4,h5,h6 {
-	font-weight: normal;
-}
-h1,h4 {
-	text-decoration: underline;
-}
-h1 {
-	font-size: x-large;
-}
-a {
-	text-decoration: none;
-	color: rgb(110, 210, 12);
-}
-a:visited {
-	color: rgb(60, 130, 12);
-}
-hr {
-	margin: 5px 0 5px 0;
-}
-p {
-	padding-top: 5px;
-	text-indent: 0.5em;
-}
-
-#header {
-	background: rgba(0, 0, 0, 0.7);
-
-	position: fixed;
-	width: 100%;
-	height: 5em;
-	margin-top: 1.875em;
-
-	z-index: 10;
-}
-#nav {
-	position: absolute;
-	top: 50%;
-	left: 85%;
-	transform: translate(-50%, -50%);
-	width: 26.875em;
-	clear: both;
-}
-#logo {
-	height: 100%;
-	width: 60%;
-}
-#logo img,
-#logo .logotitle {
-	position: relative;
-	top: 50%;
-	transform: translate(0, -50%);
-}
-#logo img {
-	border: 0.125em solid white;
-	border-radius: 0.625em;
-	padding: 2px;
-	opacity: 0.4;
-	margin: 0 1em;
-	float: left;
-}
-#logo .logotitle a {
-	color: rgb(255,255,255);
-	text-decoration: none;
-	font-size: 1.875em;
-	font-family: Arkitech;
-}
-#logo .logotitle span {
-	color: rgb(255,255,255);
-	text-decoration: none;
-	font-family: Arkitech;
-}
-
-#nav ul {
-	display: block;
-	list-style: none;
-}
-#nav li {
-	float: left;
-	padding-left: 21px;
-}
-#nav li a {
-	color: rgba(255,255,255,0.4);
-	font-size: 1em;
-	text-decoration: none;
-	font-weight: bold;
-	outline: 0;
-}
-#nav li a:hover,
-#nav li a:active {
-	color: rgba(255,255,255,0.7);
-}
-#nav li a.active {
-	color: rgba(255,255,255,1);
-	border-bottom: 0.125em solid rgb(255,255,255);
-}
-
-#section1 .content, #section3 .content, #section5 .content {
-	color: rgb(214,206,204);
-}
-#section2, #section4, #section6 {
-	background-color: rgb(255,255,255);
-	padding: 2em 0 2em 0;
-}
-#section1 {
-	background: image_url("me.jpg") center top fixed;
-}
-#section3 {
-	background: image_url("waldschrat.jpg") center top fixed;
-}
-#section1, #section3, #section5 {
-	height: 100vh; // make this responsive...
-}
-.content {
-	position: relative;
-	width: 90%;
-	height: 100%;
-	left: 50%;
-	transform: translate(-50%, 0);
-	z-index: 1;
-}
-
-#footer {
-	background: rgb(22, 27, 28);
-	position: relative;
-	width: 100%;
-	height: 8.75em;
-	font-size: x-small;
-}
-#footer p {
-	color: rgb(214,206,204);
-}
-#footer ul {
-	padding-top: 10px;
-}
-#footer li {
-	float: left;
-	padding-left: 10px;
-	padding-right: 10px;
-	border-right: 0.0625em solid rgb(214,206,204);
-}
-#footer .license {
-	bottom: 0;
-	width: 100%;
-	position: absolute;
-}
-#footer .license img {
-	display: inline-block;
-	position: relative;
-	float: right;
-	vertical-align: middle;
-}
-#footer .license div {
-	display: inline-block;
-	position: relative;
-	left: 0;
-	vertical-align: middle;
-}
-
-#about {
-	display: block;
-	list-style: none;
-	text-align: justify;
-	width: 100%;
-	height: 50%;
-	top: 50%;
-	transform: translate(0, -50%);
-	position: absolute;
-}
-#about:after {
-	display: inline-block;
-	width: 100%;
-	height: 0;
-	content: '';
-}
-#about .textbox {
-	text-align: justify;
-	padding: 0.625em;
-	width: calc(32% - 1.625em);
-	height: calc(100% - 1.625em);
-	overflow: hidden;
-	box-shadow: 0.625em 0.625em 0.625em rgba(0,0,0,0.7);
-}
-#about .textbox ol {
-	text-align: left;
-}
-#about .textbox ol q {
-	text-align: justify;
-}
-#about a {
-	outline: 0;
-}
-#about .source {
-	width: calc(32% - 2.875em);
-	bottom: 1.4375em;
-}
-
-
-.textbox {
-	display: inline-block;
-	border-color: rgba(100,190,12,0.7);
-	background-color: rgba(255,255,255,0.7);
-}
-.textbox h1 {
-	text-align: center;
-}
-
-.section {
-	position: relative;
-	overflow: hidden;
-}
-.section .watermark {
-	position: absolute;
-	opacity: 0.1;
-	width: 60%;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 0;
-}
-
-.title {
-	position: relative;
-	text-align: center;
-	width: 60%;
-	padding-bottom: 50px;
-	left: 50%;
-	transform: translate(-50%, 0);
-}
-.title img {
-	display: inline-block;
-	vertical-align: middle;
-}
-.title h2 {
-	display: inline-block;
-	vertical-align: middle;
-}
-.title p {
-	padding-top: 10px;
-}
-
-.quote-container {
-	position: relative;
-	width: 31.25em;
-	top: 0.625em;
-	left: 50%;
-	transform: translate(-50%, 0);
-}
-.quote {
-	position: relative;
-	display: inline-block;
-	width: 100%;
-}
-.quote img {
-	display: inline-block;
-	vertical-align: middle;
-}
-.quote div {
-	display: inline-block;
-	width: 80%;
-	text-align: right;
-	vertical-align: middle;
-}
-.quote q {
-	display: block;
-	font-family: serif;
-	text-align: center;
-	font-size: small;
-}
-
-.text {
-	position: relative;
-	padding-bottom: 10px;
-}
-.text p {
-	padding-top: 5px;
-	text-align: justify;
-}
-
-#vitae .textbox {
-	padding: 15px;
-	width: 80%;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-}
-
-#skills .geekcode {
-	font-size: x-small;
-	padding: 10px;
-	margin: 15px;
-	background-color: rgba(0, 0, 0, 0.25);
-	display: inline-block;
-	left: 50%;
-	transform: translate(-50%, 0);
-	position: relative;
-}
-
-#links .gpg pre {
-	font-size: x-small;
-	padding: 10px;
-	margin: 15px;
-	background-color: rgba(0, 0, 0, 0.25);
-	display: inline-block;
-	position: relative;
-}
-
-.textbox {
-	text-align: center;
-	border-style: solid;
-	border-radius: 0.625em;
-	border-width: 0.1875em;
-}
-
-.separator {
-	position: relative;
-	border-bottom: 0.0625em dotted black;
-	height: 0;
-	width: 20%;
-	left: 50%;
-	transform: translate(-50%, 0);
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-
-.dictionary {
-	position: relative;
-	left: 50%;
-	transform: translate(-50%, 0);
-	font-size: small;
-	vertical-align: bottom;
-}
-.dictionary .headword {
-	display: inline-block;
-	color: red;
-	font-weight: bold;
-	text-decoration: underline;
-}
-.dictionary .headword i {
-	color: inherit;
-}
-.dictionary .pronounciation {
-	display: inline-block;
-	font-family: monospace;
-}
-.dictionary .conjugation {
-	display: inline-block;
-	font-weight: bold;
-}
-.dictionary ol li {
-	margin-left: 10px;
-}
-.dictionary ol li q {
-	display: block;
-	text-indent: 0.625em;
-	font-family: serif;
-	font-size: small;
-}
-.dictionary ol li i {
-	display: block;
-	right: 0.625em;
-	font-size: small;
-	position: absolute;
-}
-.dictionary ol li:before {
-	font-weight: bold;
-}
-.dictionary .sense .example {
-	font-style: italic;
-}
-.dictionary .sense .reference {
-	text-decoration: underline;
-	font-family: serif;
-}
-.dictionary ol.fifth {
-	counter-reset: section 4;
-	list-style-type: none;
-}
-.dictionary ol {
-	counter-reset: section;
-	list-style-type: none;
-}
-.dictionary li::before {
-	counter-increment: section;
-	content: counters(section,".") " ";
-}
-
-.source {
-	position: absolute;
-	font-size: x-small;
-}
-/*
-#title {
-	position: fixed;
-	top: 0px;
-	left: 50%;
-	transform: translate(-50%, 0);
-	z-index: 10;
-}
-#title h1 {
-	font-family: Meath;
-	font-weight: bolder;
-	font-size: 60px;
-}
-.text {
-	background: white;
-	border-style: solid;
-	border-color: rgb(100, 190, 12);
-	border-radius: 30px;
-	border-width: 3px;
-	padding: 10px;
-}
-#content {
-	top: 0px;
-	left: 0px;
-	width: 100%;
-}
-.section {
-	position: relative;
-	height: 1200px;
-}
-.background {
-	position: absolute;
-	z-index: -1;
-	overflow: hidden;
-}
-.background img {
-	position: absolute;
-	top: 0px;
-	left: 50%;
-	transform: translate(-50%, 0);
-}
-#back {
-	position: fixed;
-	border-radius: 15px;
-	border-width: 2px;
-	z-index: 1;
-}
-p,h1,h2,h3,h4,h5,h6 {
-	opacity: 1;
-}
-h1,h2,h3,h4,h5,h6 {
-	font-weight: normal;
-}
-h1,h4 {
-	text-decoration: underline;
-}
-h1 {
-	font-size: x-large;
-}
-a {
-	text-decoration: none;
-	color: rgb(110, 210, 12);
-}
-a:visited {
-	color: rgb(60, 130, 12);
-}
-*/
-/* vim: set ts=2 sw=2: */
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@ -1,5 +0,0 @@
-class ApplicationController < ActionController::Base
-  # Prevent CSRF attacks by raising an exception.
-  # For APIs, you may want to use :null_session instead.
-  protect_from_forgery with: :exception
-end
--- a/app/controllers/concerns/.keep
+++ b/app/controllers/concerns/.keep
--- a/app/controllers/welcome_controller.rb
+++ b/app/controllers/welcome_controller.rb
@ -1,4 +0,0 @@
-class WelcomeController < ApplicationController
-  def index
-  end
-end
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@ -1,2 +0,0 @@
-module ApplicationHelper
-end
--- a/app/helpers/welcome_helper.rb
+++ b/app/helpers/welcome_helper.rb
@ -1,2 +0,0 @@
-module WelcomeHelper
-end
--- a/app/mailers/.keep
+++ b/app/mailers/.keep
--- a/app/models/.keep
+++ b/app/models/.keep
--- a/app/models/concerns/.keep
+++ b/app/models/concerns/.keep
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Georg Hopp aka Steffers</title>
-		<%= stylesheet_link_tag 'application',
-			media: 'all', 'data-turbolinks-track' => true %>
-		<%= csrf_meta_tags %>
-	</head>
-	<body>
-		<header id="header">
-			<div id="logo">
-				<%= image_tag "me-white.png", width: "62", height: "70" %>
-				<div class="logotitle">
-					<a href=""> Georg Hopp </a>
-					<span>aka Steffers</span>
-				</div>
-			</div>
-			<nav id="nav">
-				<ul>
-					<li><a href="#section1" class="active" title="Next Section" >
-						About me</a></li>
-					<li><a href="#section2" title="Next Section">Skills</a></li>
-					<li><a href="#section3" title="Next Section">Vitae</a></li>
-					<li><a href="#section4" title="Next Section">Links</a></li>
-				</ul>
-			</nav>
-		</header>
-
-		<%= yield %>
-
-		<footer id="footer">
-			<ul>
-				<li><a href="">about us</a></li>
-				<li><a href="">contact</a></li>
-			</ul>
-			<div class="license">
-				<div>
-					<p>
-					Copyright &copy; 2016 Georg Hopp | All rights reserved
-					</p>
-					<p>
-					All code (no matter which language) used to create this page is
-					licensed under a
-					<a href="http://www.gnu.org/licenses/gpl-3.0.en.html" rel="license">
-						GNU General Public License (Version 3)
-					</a>.
-					</p>
-					<p>
-					All other work is licensed under a
-					<a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
-						Creative Commons Attribution 4.0 International License
-					</a>.
-					</p>
-				</div>
-				<a href="http://creativecommons.org/licenses/by-sa/4.0/" rel="license">
-					<img alt="Creative Commons License"
-					     style="border-width:0"
-					     width="88"
-					     height="31"
-					     src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" />
-				</a>
-				<a href="http://www.gnu.org/licenses/gpl-3.0.en.html" rel="license">
-					<%= image_tag("gpl-v3-red.png", height: "31", width: "62") %>
-				</a>
-			</div>
-		</footer>
-
-		<%= javascript_include_tag 'application',
-			'data-turbolinks-track' => true %>
-	</body>
-</html>
-<!-- vim: set ts=2 sw=2: -->
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@ -1,243 +0,0 @@
-<div id="section1" class="section">
-	<div class="content">
-		<div id="about">
-			<div class="textbox">
-				<h1>COMPUTER SCIENTIST</h1>
-				<div class="dictionary">
-					<span class="headword">Computer-scientist <i>n.s.</i></span>
-					<span class="pronounciation">/kəmˈpjuːtə-ˈsaɪəntɪst/</span>
-					<ol class="sense">
-						<li>
-							A writer of computer programs; a harmless drudge that busies
-							himself in tracing the bug, and detailing the significance of
-							bits.
-						</li>
-					</ol>
-				</div>
-				<p class="source">
-					Shamelessly taken and slightly modified definition of lexicographer
-					from Samual Johnsons
-					<a href="http://johnsonsdictionaryonline.com/?p=4848">
-						"Dictionary of the english language (1755)"
-					</a>
-					Phonetics from
-					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
-						PhoTransEdit
-					</a>
-				</p>
-			</div>
-			<div class="textbox">
-				<h1>DAD</h1>
-				<div class="dictionary">
-					<span class="headword">Dad <i>n.s.</i></span>
-					<span class="pronounciation">/dæd/</span>
-					<ol class="sense">
-						<li>
-							[The child's way of expressing father. It is remarkable, that,
-							in all parts of the world, the word for father, as first taught
-							to children, is compounded of a and t, or the kindred letter d
-							differently placed; as tad, Welsh; ἄττα, Greek; atta, Gothick;
-							tata, Latin. Mammas atque tatas habet Afra, Mart.] Father.
-						</li>
-					</ol>
-				</div>
-				<p class="source">
-					Taken from the
-					<a href="http://johnsonsdictionaryonline.com/?p=4848">
-						"Dictionary of the english language (1755)"
-					</a>
-					Phonetics from
-					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
-						PhoTransEdit
-					</a>
-				</p>
-			</div>
-			<div class="textbox">
-				<h1>HUMANIST</h1>
-				<div class="dictionary">
-					<span class="headword">Humanist <i>n.s.</i></span>
-					<span class="pronounciation">/ˈhjuːmənɪst/</span>
-					<ol class="sense">
-						<li>a person devoted to or versed in the humanities.</li>
-						<li>a person who follows a form of scientific or philosophical
-							humanism.
-							<q>Someone who bumps his head against walls of ignorance until
-								he's knocked out but nevertheless starts over again as soon
-								as possible.
-							</q> <i>Georg Hopp</i>
-						</li>
-					</ol>
-				</div>
-				<p class="source">
-					Taken from the
-					<a href="http://www.dictionary.com/">Dictionary.com</a>
-					Phonetics from
-					<a href="http://www.photransedit.com/online/text2phonetics.aspx">
-						PhoTransEdit
-					</a>
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-<div id="section2" class="section">
-	<%= image_tag "me.png", class: "watermark",
-		width: "528px", height: "600px" %>
-	<div class="content">
-		<div id="skills">
-			<div class="title">
-				<h2>Skills</h2>
-				<p>
-				I'm still not sure if I am just lucky that no one notices that I lack
-				any kind of skill or I am just totally unaware of my skills. Anyway, I
-				try to outline some of my abilities here.
-				</p>
-			</div>
-			<div class="text">
-				<h3>As Computer-Scientist</h3>
-				<p>
-				As you might have noticed I am <b>not</b> a brilliant web designer.
-				Well, who cares&hellip;
-				</p>
-				<p>
-				I could start with a comprehensive list of things I have done in the
-				past, sometimes even usefull in a way, but to be honest this list
-				would be long and boring and it would't express very much, would it?
-				So if you are really interested just visit my
-				<a href="https://gitlab.weird-web-workers.org/">Gitlab server</a>. An
-				overview of the projects hosted there can be found on
-				<a href="https://www.weird-web-workers.org/">Weird Web Workers</a>.
-				<p>
-				If you are really interested in a skill profile look on one of my
-				<a href="#section4">social profiles</a>. They might be not bleeding
-				edge, but they are a good starting point. If you need to know more
-				just send me a mail.
-				</p>
-				<p>
-				In summary, I have done much and I know a little of something but the
-				most important skill I have is to learn things I do not know right
-				now.
-				</p>
-				<pre class="geekcode">
-----BEGIN GEEK CODE BLOCK-----
-Version: 3.1
-GIT/CS/L/P/O d--- s: !a C UL++++ P L+++$ !E--- W+++ N o? K? !w---
-!O- !M-- V-- PS+++ PE-- Y+ PGP+ t+ 5+ X R tv- b++ G e h---- r+++
-y+++
------END GEEK CODE BLOCK------</pre>
-			</div>
-			<div class="text">
-				<h3>As Dad</h3>
-				<p>
-				There is absolutely nothing more satisfiable and at the same time
-				depressing than trying to be a <i>good</i> dad or mum. Whenever you come
-				to the point of giving up your kids do something totally amazing and
-				reesteblish your believes. Not to talk about the
-				<q>I do love you so much, can you please&hellip;</q> face.
-				</p>
-			</div>
-			<div class="text">
-				<h3>As Socialist</h3>
-				<p>
-				I beleave to have understood the biggest problem in modern society
-				<i>(money, btw.)</i> and still think about the best way to transport
-				this knowledge to the masses.
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-<div id="section3" class="section">
-	<div class="content">
-		<div id="vitae">
-			<div class="textbox">
-				<div class="title">
-					<h2>Vitae</h2>
-					<p>
-					Oh no, not again&hellip; Why is everyone so possesed  to know what
-					you have done in the past. Let's just forget about it and look at
-					the here and now and maybe try a small look into the future.
-					</p>
-				</div>
-				<div class="text">
-					<p>
-					Right now I am the person who created this page. A pleasant guy with
-					a strong attitude to fairness and the desire to make the world a
-					better place. By the way I think I am a decent computer-programmer
-					and have at least scratched on the surface of unixoid operating
-					systems.
-					</p>
-					<p>
-					At some time I might become one of the legions that have witten
-					something that is at least of little use for society.
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div id="section4" class="section">
-	<%= image_tag "me.svg", class: "watermark", height: "600px" %>
-	<div class="content">
-		<div id="links">
-			<div class="title">
-				<h2>Links And Resources</h2>
-				<p>
-				Some external resources about me.
-				</p>
-			</div>
-			<div class="text">
-				<h3>Weird Web Workers</h3>
-				<p>The portal to my personal projects is
-				<a href="https://www.weird-web-workers.org">Weird Web Workers</a>
-			</div>
-			<div class="text">
-				<h3>Email</h3>
-				<p>If you want to you may reach me at
-				<a href="mailto:georg@steffers.org">georg@steffers.org</a>
-				</p>
-			</div>
-			<div class="text">
-				<h3>GnuPG Public Key</h3>
-				<p>
-				There are three key's for georg@steffers.org available on public key
-				servers. One is revoked and I have left the private key for another
-				one by accident. Please use this one:
-				<div class="gpg">
-					<pre>2048 bit RSA key 68784538, created: 2012-12-07</pre>
-					<pre>6C5C BDD9 7010 F187 73A7  3F8F 4C5D 2267 6878 4538</pre>
-				</div>
-				</p>
-			</div>
-			<div class="text">
-				<h3>LinkedIn</h3>
-				<p>
-				You can find me on
-				<a href="https://de.linkedin.com/in/georg-hopp-38a0a597">LinkedIn</a>
-				</p>
-			</div>
-			<div class="text">
-				<h3>Facebook</h3>
-				<p>
-				You can also find me on
-				<a href="https://www.facebook.com/gsteffers">Facebook</a>.
-				</p>
-			</div>
-			<div class="text">
-				<h3>Xing</h3>
-				<p>
-				And finally there is also a profile on
-				<a href="https://www.xing.com/profile/Georg_Hopp2">Xing</a>.
-				</p>
-			</div>
-			<div class="text">
-				<h3>Github</h3>
-				<p>
-				Additionally to Weird Web Workers some code is published on
-				<a href="https://github.com/georghopp">Github</a>.
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
-<!-- vim: set ts=2 sw=2: -->
--- a/bin/bundle
+++ b/bin/bundle
@ -1,3 +0,0 @@
-#!/usr/bin/env ruby
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
-load Gem.bin_path('bundler', 'bundle')
--- a/bin/rails
+++ b/bin/rails
@ -1,9 +0,0 @@
-#!/usr/bin/env ruby
-begin
-  load File.expand_path('../spring', __FILE__)
-rescue LoadError => e
-  raise unless e.message.include?('spring')
-end
-APP_PATH = File.expand_path('../../config/application', __FILE__)
-require_relative '../config/boot'
-require 'rails/commands'
--- a/bin/rake
+++ b/bin/rake
@ -1,9 +0,0 @@
-#!/usr/bin/env ruby
-begin
-  load File.expand_path('../spring', __FILE__)
-rescue LoadError => e
-  raise unless e.message.include?('spring')
-end
-require_relative '../config/boot'
-require 'rake'
-Rake.application.run
--- a/bin/setup
+++ b/bin/setup
@ -1,29 +0,0 @@
-#!/usr/bin/env ruby
-require 'pathname'
-
-# path to your application root.
-APP_ROOT = Pathname.new File.expand_path('../../',  __FILE__)
-
-Dir.chdir APP_ROOT do
-  # This script is a starting point to setup your application.
-  # Add necessary setup steps to this file:
-
-  puts "== Installing dependencies =="
-  system "gem install bundler --conservative"
-  system "bundle check || bundle install"
-
-  # puts "\n== Copying sample files =="
-  # unless File.exist?("config/database.yml")
-  #   system "cp config/database.yml.sample config/database.yml"
-  # end
-
-  puts "\n== Preparing database =="
-  system "bin/rake db:setup"
-
-  puts "\n== Removing old logs and tempfiles =="
-  system "rm -f log/*"
-  system "rm -rf tmp/cache"
-
-  puts "\n== Restarting application server =="
-  system "touch tmp/restart.txt"
-end
--- a/bin/spring
+++ b/bin/spring
@ -1,15 +0,0 @@
-#!/usr/bin/env ruby
-
-# This file loads spring without using Bundler, in order to be fast.
-# It gets overwritten when you run the `spring binstub` command.
-
-unless defined?(Spring)
-  require 'rubygems'
-  require 'bundler'
-
-  if (match = Bundler.default_lockfile.read.match(/^GEM$.*?^    (?:  )*spring \((.*?)\)$.*?^$/m))
-    Gem.paths = { 'GEM_PATH' => [Bundler.bundle_path.to_s, *Gem.path].uniq.join(Gem.path_separator) }
-    gem 'spring', match[1]
-    require 'spring/binstub'
-  end
-end
--- a/config.ru
+++ b/config.ru
@ -1,4 +0,0 @@
-# This file is used by Rack-based servers to start the application.
-
-require ::File.expand_path('../config/environment', __FILE__)
-run Rails.application
--- a/config/application.rb
+++ b/config/application.rb
@ -1,26 +0,0 @@
-require File.expand_path('../boot', __FILE__)
-
-require 'rails/all'
-
-# Require the gems listed in Gemfile, including any gems
-# you've limited to :test, :development, or :production.
-Bundler.require(*Rails.groups)
-
-module SteffersOrg
-  class Application < Rails::Application
-    # Settings in config/environments/* take precedence over those specified here.
-    # Application configuration should go into files in config/initializers
-    # -- all .rb files in that directory are automatically loaded.
-
-    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
-    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
-    # config.time_zone = 'Central Time (US & Canada)'
-
-    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
-    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
-    # config.i18n.default_locale = :de
-
-    # Do not swallow errors in after_commit/after_rollback callbacks.
-    config.active_record.raise_in_transactional_callbacks = true
-  end
-end
--- a/config/boot.rb
+++ b/config/boot.rb
@ -1,3 +0,0 @@
-ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
-
-require 'bundler/setup' # Set up gems listed in the Gemfile.
--- a/config/database.yml
+++ b/config/database.yml
@ -1,25 +0,0 @@
-# SQLite version 3.x
-#   gem install sqlite3
-#
-#   Ensure the SQLite 3 gem is defined in your Gemfile
-#   gem 'sqlite3'
-#
-default: &default
-  adapter: sqlite3
-  pool: 5
-  timeout: 5000
-
-development:
-  <<: *default
-  database: db/development.sqlite3
-
-# Warning: The database defined as "test" will be erased and
-# re-generated from your development database when you run "rake".
-# Do not set this db to the same as development or production.
-test:
-  <<: *default
-  database: db/test.sqlite3
-
-production:
-  <<: *default
-  database: db/production.sqlite3
--- a/config/environment.rb
+++ b/config/environment.rb
@ -1,5 +0,0 @@
-# Load the Rails application.
-require File.expand_path('../application', __FILE__)
-
-# Initialize the Rails application.
-Rails.application.initialize!
--- a/config/environments/development.rb
+++ b/config/environments/development.rb
@ -1,41 +0,0 @@
-Rails.application.configure do
-  # Settings specified here will take precedence over those in config/application.rb.
-
-  # In the development environment your application's code is reloaded on
-  # every request. This slows down response time but is perfect for development
-  # since you don't have to restart the web server when you make code changes.
-  config.cache_classes = false
-
-  # Do not eager load code on boot.
-  config.eager_load = false
-
-  # Show full error reports and disable caching.
-  config.consider_all_requests_local       = true
-  config.action_controller.perform_caching = false
-
-  # Don't care if the mailer can't send.
-  config.action_mailer.raise_delivery_errors = false
-
-  # Print deprecation notices to the Rails logger.
-  config.active_support.deprecation = :log
-
-  # Raise an error on page load if there are pending migrations.
-  config.active_record.migration_error = :page_load
-
-  # Debug mode disables concatenation and preprocessing of assets.
-  # This option may cause significant delays in view rendering with a large
-  # number of complex assets.
-  config.assets.debug = true
-
-  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
-  # yet still be able to expire them through the digest params.
-  config.assets.digest = true
-
-  # Adds additional error checking when serving assets at runtime.
-  # Checks for improperly declared sprockets dependencies.
-  # Raises helpful error messages.
-  config.assets.raise_runtime_errors = true
-
-  # Raises error for missing translations
-  # config.action_view.raise_on_missing_translations = true
-end
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@ -1,79 +0,0 @@
-Rails.application.configure do
-  # Settings specified here will take precedence over those in config/application.rb.
-
-  # Code is not reloaded between requests.
-  config.cache_classes = true
-
-  # Eager load code on boot. This eager loads most of Rails and
-  # your application in memory, allowing both threaded web servers
-  # and those relying on copy on write to perform better.
-  # Rake tasks automatically ignore this option for performance.
-  config.eager_load = true
-
-  # Full error reports are disabled and caching is turned on.
-  config.consider_all_requests_local       = false
-  config.action_controller.perform_caching = true
-
-  # Enable Rack::Cache to put a simple HTTP cache in front of your application
-  # Add `rack-cache` to your Gemfile before enabling this.
-  # For large-scale production use, consider using a caching reverse proxy like
-  # NGINX, varnish or squid.
-  # config.action_dispatch.rack_cache = true
-
-  # Disable serving static files from the `/public` folder by default since
-  # Apache or NGINX already handles this.
-  config.serve_static_files = ENV['RAILS_SERVE_STATIC_FILES'].present?
-
-  # Compress JavaScripts and CSS.
-  config.assets.js_compressor = :uglifier
-  # config.assets.css_compressor = :sass
-
-  # Do not fallback to assets pipeline if a precompiled asset is missed.
-  config.assets.compile = false
-
-  # Asset digests allow you to set far-future HTTP expiration dates on all assets,
-  # yet still be able to expire them through the digest params.
-  config.assets.digest = true
-
-  # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb
-
-  # Specifies the header that your server uses for sending files.
-  # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
-  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
-
-  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
-  # config.force_ssl = true
-
-  # Use the lowest log level to ensure availability of diagnostic information
-  # when problems arise.
-  config.log_level = :debug
-
-  # Prepend all log lines with the following tags.
-  # config.log_tags = [ :subdomain, :uuid ]
-
-  # Use a different logger for distributed setups.
-  # config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
-
-  # Use a different cache store in production.
-  # config.cache_store = :mem_cache_store
-
-  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
-  # config.action_controller.asset_host = 'http://assets.example.com'
-
-  # Ignore bad email addresses and do not raise email delivery errors.
-  # Set this to true and configure the email server for immediate delivery to raise delivery errors.
-  # config.action_mailer.raise_delivery_errors = false
-
-  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
-  # the I18n.default_locale when a translation cannot be found).
-  config.i18n.fallbacks = true
-
-  # Send deprecation notices to registered listeners.
-  config.active_support.deprecation = :notify
-
-  # Use default logging formatter so that PID and timestamp are not suppressed.
-  config.log_formatter = ::Logger::Formatter.new
-
-  # Do not dump schema after migrations.
-  config.active_record.dump_schema_after_migration = false
-end
--- a/config/environments/test.rb
+++ b/config/environments/test.rb
@ -1,42 +0,0 @@
-Rails.application.configure do
-  # Settings specified here will take precedence over those in config/application.rb.
-
-  # The test environment is used exclusively to run your application's
-  # test suite. You never need to work with it otherwise. Remember that
-  # your test database is "scratch space" for the test suite and is wiped
-  # and recreated between test runs. Don't rely on the data there!
-  config.cache_classes = true
-
-  # Do not eager load code on boot. This avoids loading your whole application
-  # just for the purpose of running a single test. If you are using a tool that
-  # preloads Rails for running tests, you may have to set it to true.
-  config.eager_load = false
-
-  # Configure static file server for tests with Cache-Control for performance.
-  config.serve_static_files   = true
-  config.static_cache_control = 'public, max-age=3600'
-
-  # Show full error reports and disable caching.
-  config.consider_all_requests_local       = true
-  config.action_controller.perform_caching = false
-
-  # Raise exceptions instead of rendering exception templates.
-  config.action_dispatch.show_exceptions = false
-
-  # Disable request forgery protection in test environment.
-  config.action_controller.allow_forgery_protection = false
-
-  # Tell Action Mailer not to deliver emails to the real world.
-  # The :test delivery method accumulates sent emails in the
-  # ActionMailer::Base.deliveries array.
-  config.action_mailer.delivery_method = :test
-
-  # Randomize the order test cases are executed.
-  config.active_support.test_order = :random
-
-  # Print deprecation notices to the stderr.
-  config.active_support.deprecation = :stderr
-
-  # Raises error for missing translations
-  # config.action_view.raise_on_missing_translations = true
-end
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@ -1,11 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# Version of your assets, change this if you want to expire all your assets.
-Rails.application.config.assets.version = '1.0'
-
-# Add additional assets to the asset load path
-# Rails.application.config.assets.paths << Emoji.images_path
-
-# Precompile additional assets.
-# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-# Rails.application.config.assets.precompile += %w( search.js )
--- a/config/initializers/backtrace_silencers.rb
+++ b/config/initializers/backtrace_silencers.rb
@ -1,7 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces.
-# Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ }
-
-# You can also remove all the silencers if you're trying to debug a problem that might stem from framework code.
-# Rails.backtrace_cleaner.remove_silencers!
--- a/config/initializers/cookies_serializer.rb
+++ b/config/initializers/cookies_serializer.rb
@ -1,3 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-Rails.application.config.action_dispatch.cookies_serializer = :json
--- a/config/initializers/filter_parameter_logging.rb
+++ b/config/initializers/filter_parameter_logging.rb
@ -1,4 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# Configure sensitive parameters which will be filtered from the log file.
-Rails.application.config.filter_parameters += [:password]
--- a/config/initializers/inflections.rb
+++ b/config/initializers/inflections.rb
@ -1,16 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# Add new inflection rules using the following format. Inflections
-# are locale specific, and you may define rules for as many different
-# locales as you wish. All of these examples are active by default:
-# ActiveSupport::Inflector.inflections(:en) do |inflect|
-#   inflect.plural /^(ox)$/i, '\1en'
-#   inflect.singular /^(ox)en/i, '\1'
-#   inflect.irregular 'person', 'people'
-#   inflect.uncountable %w( fish sheep )
-# end
-
-# These inflection rules are supported but not enabled by default:
-# ActiveSupport::Inflector.inflections(:en) do |inflect|
-#   inflect.acronym 'RESTful'
-# end
--- a/config/initializers/mime_types.rb
+++ b/config/initializers/mime_types.rb
@ -1,4 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# Add new mime types for use in respond_to blocks:
-# Mime::Type.register "text/richtext", :rtf
--- a/config/initializers/session_store.rb
+++ b/config/initializers/session_store.rb
@ -1,3 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-Rails.application.config.session_store :cookie_store, key: '_steffers_org_session'
--- a/config/initializers/wrap_parameters.rb
+++ b/config/initializers/wrap_parameters.rb
@ -1,14 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# This file contains settings for ActionController::ParamsWrapper which
-# is enabled by default.
-
-# Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array.
-ActiveSupport.on_load(:action_controller) do
-  wrap_parameters format: [:json] if respond_to?(:wrap_parameters)
-end
-
-# To enable root element in JSON for ActiveRecord objects.
-# ActiveSupport.on_load(:active_record) do
-#  self.include_root_in_json = true
-# end
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@ -1,23 +0,0 @@
-# Files in the config/locales directory are used for internationalization
-# and are automatically loaded by Rails. If you want to use locales other
-# than English, add the necessary files in this directory.
-#
-# To use the locales, use `I18n.t`:
-#
-#     I18n.t 'hello'
-#
-# In views, this is aliased to just `t`:
-#
-#     <%= t('hello') %>
-#
-# To use a different locale, set it with `I18n.locale`:
-#
-#     I18n.locale = :es
-#
-# This would use the information in config/locales/es.yml.
-#
-# To learn more, please read the Rails Internationalization guide
-# available at http://guides.rubyonrails.org/i18n.html.
-
-en:
-  hello: "Hello world"
--- a/config/routes.rb
+++ b/config/routes.rb
@ -1,58 +0,0 @@
-Rails.application.routes.draw do
-  get 'welcome/index'
-
-  # The priority is based upon order of creation: first created -> highest priority.
-  # See how all your routes lay out with "rake routes".
-
-  # You can have the root of your site routed with "root"
-  root 'welcome#index'
-
-  # Example of regular route:
-  #   get 'products/:id' => 'catalog#view'
-
-  # Example of named route that can be invoked with purchase_url(id: product.id)
-  #   get 'products/:id/purchase' => 'catalog#purchase', as: :purchase
-
-  # Example resource route (maps HTTP verbs to controller actions automatically):
-  #   resources :products
-
-  # Example resource route with options:
-  #   resources :products do
-  #     member do
-  #       get 'short'
-  #       post 'toggle'
-  #     end
-  #
-  #     collection do
-  #       get 'sold'
-  #     end
-  #   end
-
-  # Example resource route with sub-resources:
-  #   resources :products do
-  #     resources :comments, :sales
-  #     resource :seller
-  #   end
-
-  # Example resource route with more complex sub-resources:
-  #   resources :products do
-  #     resources :comments
-  #     resources :sales do
-  #       get 'recent', on: :collection
-  #     end
-  #   end
-
-  # Example resource route with concerns:
-  #   concern :toggleable do
-  #     post 'toggle'
-  #   end
-  #   resources :posts, concerns: :toggleable
-  #   resources :photos, concerns: :toggleable
-
-  # Example resource route within a namespace:
-  #   namespace :admin do
-  #     # Directs /admin/products/* to Admin::ProductsController
-  #     # (app/controllers/admin/products_controller.rb)
-  #     resources :products
-  #   end
-end
--- a/config/secrets.yml
+++ b/config/secrets.yml
@ -1,22 +0,0 @@
-# Be sure to restart your server when you modify this file.
-
-# Your secret key is used for verifying the integrity of signed cookies.
-# If you change this key, all old signed cookies will become invalid!
-
-# Make sure the secret is at least 30 characters and all random,
-# no regular words or you'll be exposed to dictionary attacks.
-# You can use `rake secret` to generate a secure secret key.
-
-# Make sure the secrets in this file are kept private
-# if you're sharing your code publicly.
-
-development:
-  secret_key_base: cc267893ac3dd3c3cc6959aa3192a6f0c134942c93a3b88730c25a85932823f4d8fd6b40cba9216cd4f60aa97c8a98618139912bc00c6b9392f77b1e269495e7
-
-test:
-  secret_key_base: a3ed5abf88dfc94e95dae735d4b23b717a3c95024dedfe90eb16686071f0be55725b908a78fa6d0a4bc64d34dcfd89311d2f655213c7264d986bbcb52ea43a2b
-
-# Do not keep production secrets in the repository,
-# instead read values from the environment.
-production:
-  secret_key_base: <%= ENV["SECRET_KEY_BASE"] %>
--- a/db/seeds.rb
+++ b/db/seeds.rb
@ -1,7 +0,0 @@
-# This file should contain all the record creation needed to seed the database with its default values.
-# The data can then be loaded with the rake db:seed (or created alongside the db with db:setup).
-#
-# Examples:
-#
-#   cities = City.create([{ name: 'Chicago' }, { name: 'Copenhagen' }])
-#   Mayor.create(name: 'Emanuel', city: cities.first)
--- a/10
+++ b/10
@ -1,10 +0,0 @@
-Lexicographer:
-A writer of dictionaries; a harmless drudge that busies himself in tracing the
-original, and detailing the signification of words.
-
-computer scientist: | kəmˈpjuːtə ˈsaɪəntɪst |
-A writer of computer programs; a harmless drudge that busies himself in
-tracing the bug, and detailing the significance of bits.
-
-Shamelessly taken and slightly modified from Samual Johnsons
-"Dictionary of the english language" 1755
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@ -0,0 +1,16 @@
+FROM scratch
+
+USER 65534:65534
+
+ADD data/ /
+
+VOLUME /document-root
+ENV DOCUMENT_ROOT /document-root
+
+LABEL version="0.0.1"
+LABEL maintainer="Georg Hopp <georg@steffers.org>"
+LABEL description="The whole steffers.org homepage as docker container"
+
+EXPOSE 8080
+
+ENTRYPOINT ["/bin/steffers.org"]
--- a/docker/Makefile
+++ b/docker/Makefile
@ -0,0 +1,28 @@
+BIN_DIR = data/bin
+DOCROOT_DIR = data/document-root
+LIB_DIR = data/lib64
+
+LIBS = $(LIB_DIR)/ld-linux-x86-64.so.2 \
+       $(LIB_DIR)/libc.so.6 \
+       $(LIB_DIR)/libpthread.so.0
+
+EXE = $(BIN_DIR)/$(APP_NAME)
+
+.PHONY: all clean react
+
+all: $(LIBS) $(EXE) react Dockerfile
+	docker build -t $(DOCKER_IMAGE_TAG) .
+
+$(LIBS):
+	install -D /lib64/$(notdir $@) $@
+
+$(EXE):
+	install -D $(GOEXE) $@
+
+react:
+	install -d ${DOCROOT_DIR}
+	rsync -vaurl --delete ../react/build/ ${DOCROOT_DIR}
+
+clean:
+	docker rmi -f $(DOCKER_IMAGE_TAG)
+	rm -Rf data
--- a/lib/assets/.keep
+++ b/lib/assets/.keep
--- a/lib/tasks/.keep
+++ b/lib/tasks/.keep
--- a/log/.keep
+++ b/log/.keep
--- a/public/404.html
+++ b/public/404.html
@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>The page you were looking for doesn't exist (404)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  body {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
-</head>
-
-<body>
-  <!-- This file lives in public/404.html -->
-  <div class="dialog">
-    <div>
-      <h1>The page you were looking for doesn't exist.</h1>
-      <p>You may have mistyped the address or the page may have moved.</p>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
-  </div>
-</body>
-</html>
--- a/public/422.html
+++ b/public/422.html
@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>The change you wanted was rejected (422)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  body {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
-</head>
-
-<body>
-  <!-- This file lives in public/422.html -->
-  <div class="dialog">
-    <div>
-      <h1>The change you wanted was rejected.</h1>
-      <p>Maybe you tried to change something you didn't have access to.</p>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
-  </div>
-</body>
-</html>
--- a/public/500.html
+++ b/public/500.html
@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>We're sorry, but something went wrong (500)</title>
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <style>
-  body {
-    background-color: #EFEFEF;
-    color: #2E2F30;
-    text-align: center;
-    font-family: arial, sans-serif;
-    margin: 0;
-  }
-
-  div.dialog {
-    width: 95%;
-    max-width: 33em;
-    margin: 4em auto 0;
-  }
-
-  div.dialog > div {
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #BBB;
-    border-top: #B00100 solid 4px;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    background-color: white;
-    padding: 7px 12% 0;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-
-  h1 {
-    font-size: 100%;
-    color: #730E15;
-    line-height: 1.5em;
-  }
-
-  div.dialog > p {
-    margin: 0 0 1em;
-    padding: 1em;
-    background-color: #F7F7F7;
-    border: 1px solid #CCC;
-    border-right-color: #999;
-    border-left-color: #999;
-    border-bottom-color: #999;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-    border-top-color: #DADADA;
-    color: #666;
-    box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
-  }
-  </style>
-</head>
-
-<body>
-  <!-- This file lives in public/500.html -->
-  <div class="dialog">
-    <div>
-      <h1>We're sorry, but something went wrong.</h1>
-    </div>
-    <p>If you are the application owner check the logs for more information.</p>
-  </div>
-</body>
-</html>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,5 +0,0 @@
-# See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
-#
-# To ban all spiders from the entire site uncomment the next two lines:
-# User-agent: *
-# Disallow: /
--- a/react/Makefile
+++ b/react/Makefile
@ -0,0 +1,40 @@
+SOURCES = src/About.css \
+	  src/About.js \
+	  src/Footer.css \
+	  src/Footer.js \
+	  src/Header.css \
+	  src/Header.js \
+	  src/Links.css \
+	  src/Links.js \
+	  src/Page.css \
+	  src/Page.js \
+	  src/Skills.css \
+	  src/Skills.js \
+	  src/Vitae.css \
+	  src/Vitae.js \
+	  src/index.css \
+	  src/index.js \
+	  src/Common/Quote.css \
+	  src/Common/Textbox.css \
+	  src/Common/Textbox.js \
+	  src/Common/Text.css \
+	  src/Common/Text.js \
+	  src/Common/Title.css \
+	  src/Common/Title.js \
+	  src/Dictionary/Dictionary.css \
+	  src/Dictionary/Dictionary.js \
+	  src/Dictionary/Sense.js \
+	  src/Dictionary/Source.css \
+	  src/Dictionary/Source.js \
+	  src/Dictionary/Title.js
+
+.PHONY: all clean
+
+all: .buildchk
+
+.buildchk: $(SOURCES)
+	npm run build
+	touch $@
+
+clean:
+	rm -Rf build/*
--- a/react/README.md
+++ b/react/README.md
--- a/react/package-lock.json
+++ b/react/package-lock.json
--- a/react/package.json
+++ b/react/package.json
@ -0,0 +1,16 @@
+{
+  "name": "steffers.org",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-scripts": "1.0.14"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
--- a/react/public/favicon.ico
+++ b/react/public/favicon.ico
--- a/react/public/index.html
+++ b/react/public/index.html
@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See
+      https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Georg Hopp aka Steffers</title>
+  </head>
+  <body>
+    <div id="content">
+    </div>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+  </body>
+</html>
+<!-- vim: set ts=2 sw=2 et: -->
--- a/react/public/manifest.json
+++ b/react/public/manifest.json
@ -0,0 +1,15 @@
+{
+  "short_name": "steffers.org",
+  "name": "Personal homepage of Georg Hopp",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "16x16,32x32,48x48,64x64",
+      "type": "image/vnd.microsoft.icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/react/src/About.css
+++ b/react/src/About.css
@ -0,0 +1,37 @@
+#about {
+  display: block;
+  list-style: none;
+  text-align: justify;
+  width: 100%;
+  height: 50%;
+  top: 50%;
+  transform: translate(0, -50%);
+  position: absolute;
+}
+#about:after {
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  content: '';
+}
+#about .textbox {
+  text-align: justify;
+  padding: 0.625em;
+  width: calc(32% - 1.625em);
+  height: calc(100% - 1.625em);
+  overflow: hidden;
+  box-shadow: 0.625em 0.625em 0.625em rgba(0,0,0,0.7);
+}
+#about .textbox ol {
+  text-align: left;
+}
+#about .textbox ol q {
+  text-align: justify;
+}
+#about a {
+  outline: 0;
+}
+#about .source {
+  width: calc(32% - 2.875em);
+  bottom: 1.4375em;
+}
--- a/react/src/About.js
+++ b/react/src/About.js
@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import Dictionary from './Dictionary/Dictionary.js';
+import DictionarySense from './Dictionary/Sense.js';
+import './About.css';
+
+class About extends Component {
+  render() {
+    return (
+      <div className="content">
+        <div id="about">
+          <Dictionary
+            title="COMPUTER SCIENTIST"
+            headword="Computer-scientist"
+            type="n.s."
+            pronounciation="kəmˈpjuːtə-ˈsaɪəntɪst"
+            origin_text="Shamelessly taken and slightly modified definition
+            of lexicographer from Samual Johnsons"
+            origin_url="http://johnsonsdictionaryonline.com/?p=4848"
+            origin="Dictionary of the english language (1755)"
+            phonetics_url="http://www.photransedit.com/online/text2phonetics.aspx"
+            phonetics="PhoTransEdit">
+            <DictionarySense>
+              A writer of computer programs; a harmless drudge that busies
+              himself in tracing the bug, and detailing the significance of
+              bits.
+            </DictionarySense>
+          </Dictionary>
+          &nbsp;
+          <Dictionary
+            title="DAD"
+            headword="Dad"
+            type="n.s."
+            pronounciation="dæd"
+            origin_url="http://johnsonsdictionaryonline.com/?p=2716"
+            origin="Dictionary of the english language (1755)"
+            phonetics_url="http://www.photransedit.com/online/text2phonetics.aspx"
+            phonetics="PhoTransEdit">
+            <DictionarySense>
+              [The child's way of expressing father. It is remarkable, that,
+              in all parts of the world, the word for father, as first taught
+              to children, is compounded of a and t, or the kindred letter d
+              differently placed; as tad, Welsh; ἄττα, Greek; atta, Gothick;
+              tata, Latin. Mammas atque tatas habet Afra, Mart.] Father.
+            </DictionarySense>
+          </Dictionary>
+          &nbsp;
+          <Dictionary
+            title="HUMANIST"
+            headword="Humanist"
+            type="n.s."
+            pronounciation="ˈhjuːmənɪst"
+            origin_url="http://www.dictionary.com/"
+            origin="Dictionary.com"
+            phonetics_url="http://www.photransedit.com/online/text2phonetics.aspx"
+            phonetics="PhoTransEdit">
+            <DictionarySense>
+              A person devoted to or versed in the humanities.
+            </DictionarySense>
+            <DictionarySense>
+              A person who follows a form of scientific or philosophical
+              humanism.
+              <q>Someone who bumps his head against walls of ignorance until
+                he's knocked out but nevertheless starts over again as soon
+                as possible.
+              </q> <i>Georg Hopp</i>
+            </DictionarySense>
+          </Dictionary>
+        </div>
+      </div>
+      );
+  }
+}
+
+export default About;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Common/Quote.css
+++ b/react/src/Common/Quote.css
@ -0,0 +1,28 @@
+.quote-container {
+  position: relative;
+  width: 31.25em;
+  top: 0.625em;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.quote {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.quote img {
+  display: inline-block;
+  vertical-align: middle;
+}
+.quote div {
+  display: inline-block;
+  width: 80%;
+  text-align: right;
+  vertical-align: middle;
+}
+.quote q {
+  display: block;
+  font-family: serif;
+  text-align: center;
+  font-size: small;
+}
--- a/react/src/Common/Text.css
+++ b/react/src/Common/Text.css
@ -0,0 +1,8 @@
+.text {
+  position: relative;
+  padding-bottom: 10px;
+}
+.text p {
+  padding-top: 5px;
+  text-align: justify;
+}
--- a/react/src/Common/Text.js
+++ b/react/src/Common/Text.js
@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import './Text.css';
+
+class Text extends Component {
+  render() {
+    return (
+      <div className="text">
+        { this.props.headline && <h3>{this.props.headline}</h3> }
+        {this.props.children}
+      </div>
+      );
+  }
+}
+
+export default Text;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Common/Textbox.css
+++ b/react/src/Common/Textbox.css
@ -0,0 +1,12 @@
+.textbox {
+  display: inline-block;
+  border-color: rgba(100,190,12,0.7);
+  background-color: rgba(255,255,255,0.7);
+  text-align: center;
+  border-style: solid;
+  border-radius: 0.625em;
+  border-width: 0.1875em;
+}
+.textbox h1 {
+  text-align: center;
+}
--- a/react/src/Common/Textbox.js
+++ b/react/src/Common/Textbox.js
@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+import './Textbox.css';
+
+class Textbox extends Component {
+  render() {
+    return (<div className="textbox">{this.props.children}</div>);
+  }
+}
+
+export default Textbox;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Common/Title.css
+++ b/react/src/Common/Title.css
@ -0,0 +1,19 @@
+.title {
+  position: relative;
+  text-align: center;
+  width: 60%;
+  padding-bottom: 50px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.title img {
+  display: inline-block;
+  vertical-align: middle;
+}
+.title h2 {
+  display: inline-block;
+  vertical-align: middle;
+}
+.title p {
+  padding-top: 10px;
+}
--- a/react/src/Common/Title.js
+++ b/react/src/Common/Title.js
@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import './Title.css';
+
+class Title extends Component {
+  render() {
+    return (
+      <div className="title">
+        <h2>{this.props.headline}</h2>
+        {this.props.children}
+      </div>
+      );
+  }
+}
+
+export default Title;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Dictionary/Dictionary.css
+++ b/react/src/Dictionary/Dictionary.css
@ -0,0 +1,61 @@
+.dictionary {
+  position: relative;
+  left: 50%;
+  transform: translate(-50%, 0);
+  font-size: small;
+  vertical-align: bottom;
+}
+.dictionary .headword {
+  display: inline-block;
+  color: red;
+  font-weight: bold;
+  text-decoration: underline;
+}
+.dictionary .headword i {
+  color: inherit;
+}
+.dictionary .pronounciation {
+  display: inline-block;
+  font-family: monospace;
+}
+.dictionary .conjugation {
+  display: inline-block;
+  font-weight: bold;
+}
+.dictionary ol li {
+  margin-left: 10px;
+}
+.dictionary ol li q {
+  display: block;
+  text-indent: 0.625em;
+  font-family: serif;
+  font-size: small;
+}
+.dictionary ol li i {
+  display: block;
+  right: 0.625em;
+  font-size: small;
+  position: absolute;
+}
+.dictionary ol li:before {
+  font-weight: bold;
+}
+.dictionary .sense .example {
+  font-style: italic;
+}
+.dictionary .sense .reference {
+  text-decoration: underline;
+  font-family: serif;
+}
+.dictionary ol.fifth {
+  counter-reset: section 4;
+  list-style-type: none;
+}
+.dictionary ol {
+  counter-reset: section;
+  list-style-type: none;
+}
+.dictionary li::before {
+  counter-increment: section;
+  content: counters(section,".") " ";
+}
--- a/react/src/Dictionary/Dictionary.js
+++ b/react/src/Dictionary/Dictionary.js
@ -0,0 +1,34 @@
+import React, { Component } from 'react';
+import DictionarySource from './Source';
+import DictionaryTitle from './Title';
+import Textbox from '../Common/Textbox';
+import './Dictionary.css';
+
+class Dictionary extends Component {
+  render() {
+    return (
+      <Textbox>
+        <DictionaryTitle text={this.props.title} />
+        <div className="dictionary">
+          <div className="headword">
+            {this.props.headword} <i>{this.props.type}</i>
+          </div>
+          &nbsp;
+          <div className="pronounciation">/{this.props.pronounciation}/</div>
+          <ol className="sense">
+            {this.props.children}
+          </ol>
+        </div>
+        <DictionarySource
+          origin_text={this.props.origin_text}
+          origin_url={this.props.origin_url}
+          origin={this.props.origin}
+          phonetics_url={this.props.phonetics_url}
+          phonetics={this.props.phonetics} />
+      </Textbox>
+      );
+  }
+}
+
+export default Dictionary;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Dictionary/Sense.js
+++ b/react/src/Dictionary/Sense.js
@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+//import './DictionarySense.css';
+
+class DictionarySense extends Component {
+  render() {
+    return (<li>{this.props.children}</li>);
+  }
+}
+
+export default DictionarySense;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Dictionary/Source.css
+++ b/react/src/Dictionary/Source.css
@ -0,0 +1,4 @@
+.source {
+  position: absolute;
+  font-size: x-small;
+}
--- a/react/src/Dictionary/Source.js
+++ b/react/src/Dictionary/Source.js
@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import './Source.css';
+
+class DictionarySource extends Component {
+  render() {
+    return (
+      <p className="source">
+        {this.props.origin_text? this.props.origin_text: "Taken from"}
+        &nbsp;
+        <a href={this.props.origin_url} target="_blank">
+          "{this.props.origin}"
+        </a>
+        &nbsp;
+        Phonetics from
+        &nbsp;
+        <a href={this.props.phonetics_url} target="_blank">
+          "{this.props.phonetics}"
+        </a>
+      </p>
+      );
+  }
+}
+
+export default DictionarySource;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Dictionary/Title.js
+++ b/react/src/Dictionary/Title.js
@ -0,0 +1,11 @@
+import React, { Component } from 'react';
+//import './Title.css';
+
+class DictionaryTitle extends Component {
+  render() {
+    return (<h1>{this.props.text}</h1>);
+  }
+}
+
+export default DictionaryTitle;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Footer.css
+++ b/react/src/Footer.css
@ -0,0 +1,36 @@
+#footer {
+  background: rgb(22, 27, 28);
+  position: relative;
+  width: 100%;
+  height: 8.75em;
+  font-size: x-small;
+}
+#footer p {
+  color: rgb(214,206,204);
+}
+#footer ul {
+  padding-top: 10px;
+}
+#footer li {
+  float: left;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-right: 0.0625em solid rgb(214,206,204);
+}
+#footer .license {
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+}
+#footer .license img {
+  display: inline-block;
+  position: relative;
+  float: right;
+  vertical-align: middle;
+}
+#footer .license div {
+  display: inline-block;
+  position: relative;
+  left: 0;
+  vertical-align: middle;
+}
--- a/react/src/Footer.js
+++ b/react/src/Footer.js
@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import './Footer.css';
+import gpl_v3_red from './images/gpl-v3-red.svg';
+import cc_by_sa from './images/cc-by-sa-4.0.png';
+
+class Footer extends Component {
+  render() {
+    return (
+      <footer id="footer">
+        <ul>
+          <li><a href="">about us</a></li>
+          <li><a href="">contact</a></li>
+        </ul>
+        <div className="license">
+          <div>
+            <p>
+              Copyright &copy; 2017 Georg Hopp | All rights reserved
+            </p>
+            <p>
+              All code (no matter which language) used to create this page is
+              licensed under a&nbsp;
+              <a href="http://www.gnu.org/licenses/gpl-3.0.en.html"
+                rel="license">
+                GNU General Public License (Version 3)
+              </a>.
+            </p>
+            <p>
+              All other work is licensed under a&nbsp;
+              <a href="http://creativecommons.org/licenses/by-sa/4.0/"
+                rel="license">
+                Creative Commons Attribution 4.0 International License
+              </a>.
+            </p>
+          </div>
+          <a href="http://creativecommons.org/licenses/by-sa/4.0/"
+            rel="license">
+            <img src={cc_by_sa} width="88" height="31" alt="CC BY SA"></img>
+          </a>
+          <a href="http://www.gnu.org/licenses/gpl-3.0.en.html" rel="license">
+            <img src={gpl_v3_red} height="31" width="62" alt="GPL Logo"></img>
+          </a>
+        </div>
+      </footer>
+      );
+  }
+}
+
+export default Footer;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Header.css
+++ b/react/src/Header.css
@ -0,0 +1,83 @@
+/*
+ * Header styles
+ */
+#header {
+  background: rgba(0, 0, 0, 0.7);
+
+  position: fixed;
+  width: 100%;
+  height: 5em;
+  margin-top: 1.875em;
+
+  z-index: 10;
+}
+
+/*
+ * Logo styles
+ */
+#logo {
+  height: 100%;
+  width: 60%;
+}
+#logo img,
+#logo .logotitle {
+  position: relative;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+#logo img {
+  border: 0.125em solid white;
+  border-radius: 0.625em;
+  padding: 2px;
+  opacity: 0.4;
+  margin: 0 1em;
+  float: left;
+  height: 85%;
+}
+#logo .logotitle a {
+  color: rgb(255,255,255);
+  text-decoration: none;
+  font-size: 1.875em;
+  font-family: Arkitech;
+}
+#logo .logotitle span {
+  color: rgb(255,255,255);
+  text-decoration: none;
+  font-family: Arkitech;
+}
+
+/*
+ * Navigation bar styles
+ */
+#nav {
+  position: absolute;
+  top: 50%;
+  left: 85%;
+  transform: translate(-50%, -50%);
+  width: 26.875em;
+  clear: both;
+}
+#nav ul {
+  display: block;
+  list-style: none;
+}
+#nav li {
+  float: left;
+  padding-left: 21px;
+}
+#nav li a {
+  color: rgba(255,255,255,0.4);
+  font-size: 1em;
+  text-decoration: none;
+  font-weight: bold;
+  outline: 0;
+  cursor: pointer;
+}
+#nav li a:hover,
+#nav li a:active {
+  color: rgba(255,255,255,0.7);
+}
+#nav li a.active {
+  color: rgba(255,255,255,1);
+  border-bottom: 0.125em solid rgb(255,255,255);
+}
--- a/react/src/Header.js
+++ b/react/src/Header.js
@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import './Header.css';
+import me_white from './images/me-white.svg';
+
+class Header extends Component {
+  renderSectionLink(section, i) {
+    //return (<li><a href={anchor}>{section.title}</a></li>);
+  }
+
+  render() {
+    return (
+      <header id="header">
+        <div id="logo">
+          <img src={me_white} alt=""></img>
+          <div className="logotitle">
+            <a href=""> Georg Hopp </a>
+            <span>aka Steffers</span>
+          </div>
+        </div>
+        <nav id="nav">
+          <ul>
+            { this.props.sections.map((section, i) => {
+                let active = this.props.active === i ? ['active'] : [];
+                return (
+                  <li key={i.toString()}><a
+                    className={active}
+                    onClick={this.props.onClick(i+1)}>
+                    {section.title}</a>
+                  </li>);
+              })
+            }
+          </ul>
+        </nav>
+      </header>
+      );
+  }
+}
+
+export default Header;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Links.css
+++ b/react/src/Links.css
@ -0,0 +1,8 @@
+#links .gpg pre {
+  font-size: x-small;
+  padding: 10px;
+  margin: 15px;
+  background-color: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  position: relative;
+}
--- a/react/src/Links.js
+++ b/react/src/Links.js
@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import Title from './Common/Title';
+import Text from './Common/Text';
+import './Links.css';
+import me from './images/me.svg';
+
+class Links extends Component {
+  render() {
+    return (
+      <div className="content">
+        <img src={me} className="watermark" height="600px" alt="" />
+        <div id="links">
+          <Title headline="Links and Resources">
+            <p>
+              Some external resources about me.
+            </p>
+          </Title>
+          <Text headline="Weird Web Workers">
+            <p>The portal to my personal projects is&nbsp;
+              <a href="https://www.weird-web-workers.org">
+                Weird Web Workers</a>
+            </p>
+          </Text>
+          <Text headline="Email">
+            <p>If you want to you may reach me at&nbsp;
+              <a href="mailto:georg@steffers.org">georg@steffers.org</a>
+            </p>
+          </Text>
+          <Text headline="GnuPG Public Key">
+            <p>
+              There are three key's for georg@steffers.org available on
+              public key servers. One is revoked and I have lost the private
+              key for another one by accident. Please use this one:
+            </p>
+            <div className="gpg">
+              <pre>2048 bit RSA key 68784538, created: 2012-12-07</pre>
+              <pre>6C5C BDD9 7010 F187 73A7  3F8F 4C5D 2267 6878 4538</pre>
+            </div>
+          </Text>
+          <Text headline="LinkedIn">
+            <p>
+              You can find me on&nbsp;
+              <a href="https://de.linkedin.com/in/georg-hopp-38a0a597">LinkedIn</a>
+            </p>
+          </Text>
+          <Text headline="Facebook">
+            <p>
+              You can also find me on&nbsp;
+              <a href="https://www.facebook.com/gsteffers">Facebook</a>.
+            </p>
+          </Text>
+          <Text headline="Xing">
+            <p>
+              And finally there is also a profile on&nbsp;
+              <a href="https://www.xing.com/profile/Georg_Hopp2">Xing</a>.
+            </p>
+          </Text>
+          <Text headline="Github">
+            <p>
+              Additionally to Weird Web Workers some code is published on&nbsp;
+              <a href="https://github.com/georghopp">Github</a>.
+            </p>
+          </Text>
+        </div>
+      </div>
+      );
+  }
+}
+
+export default Links;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Page.css
+++ b/react/src/Page.css
@ -0,0 +1,108 @@
+@font-face {
+	font-family: 'Meath';
+	src: url("fonts/MeathFLF.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: 'Celtknot';
+	src: url("fonts/Celtknot.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: 'PoiretOne';
+	src: url("fonts/PoiretOne-Regular.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: 'RationalInteger';
+	src: url("fonts/RationalInteger.ttf") format('truetype');
+}
+
+@font-face {
+	font-family: 'Arkitech';
+	src: url("fonts/ArkitechLight.ttf") format('truetype'),
+	     url("fonts/ArkitechLight.woff") format('woff');
+}
+
+* {
+	font-family: Verdana, sans-serif;
+	color: rgb(41, 49, 51);
+	margin: 0;
+	padding: 0;
+}
+
+h1,h2,h3,h4,h5,h6 {
+	font-weight: normal;
+}
+h1,h4 {
+	text-decoration: underline;
+}
+h1 {
+	font-size: x-large;
+}
+a {
+	text-decoration: none;
+	color: rgb(110, 210, 12);
+}
+a:visited {
+	color: rgb(60, 130, 12);
+}
+hr {
+	margin: 5px 0 5px 0;
+}
+p {
+	padding-top: 5px;
+	text-indent: 0.5em;
+}
+
+#section1 .content, #section3 .content, #section5 .content {
+	color: rgb(214,206,204);
+}
+#section2, #section4, #section6 {
+	background-color: rgb(255,255,255);
+	padding: 2em 0 2em 0;
+}
+#section1 {
+	background: url("images/me.jpg") center top fixed;
+}
+#section3 {
+	background: url("images/waldschrat.jpg") center top fixed;
+}
+#section1, #section3, #section5 {
+	height: 100vh;
+}
+
+.content {
+	position: relative;
+	width: 90%;
+	height: 100%;
+	left: 50%;
+	transform: translate(-50%, 0);
+	z-index: 1;
+}
+
+.section {
+	position: relative;
+	overflow: hidden;
+}
+.section .watermark {
+	position: absolute;
+	opacity: 0.1;
+	width: 60%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 0;
+}
+
+.separator {
+	position: relative;
+	border-bottom: 0.0625em dotted black;
+	height: 0;
+	width: 20%;
+	left: 50%;
+	transform: translate(-50%, 0);
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+/* vim: set ts=2 sw=2: */
--- a/react/src/Page.js
+++ b/react/src/Page.js
@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import Header from './Header';
+import Footer from './Footer';
+import About from './About';
+import Skills from './Skills';
+import Vitae from './Vitae';
+import Links from './Links';
+import './Page.css';
+
+class Page extends Component {
+  constructor(props) {
+    super(props);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.state = {
+      active: 0,
+      sections: [],
+      sections_data: [
+        { title: 'About me', },
+        { title: 'Skills', },
+        { title: 'Vitae', },
+        { title: 'Links', },
+      ],
+    }
+  }
+
+  componentDidMount() {
+    const sections = document.getElementsByClassName('section');
+    this.setState({
+      sections: sections,
+    });
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll(event) {
+    let active = null;
+    for (var i=0; i<this.state.sections.length; i++) {
+      if (document.documentElement.scrollTop >=
+        this.state.sections[i].offsetTop) {
+        active = i;
+      }
+      else {
+        break;
+      }
+    }
+    this.setState({
+      active: active,
+    });
+  }
+
+  handleShow(section) {
+    this.refs[section].scrollIntoView({
+      block: 'start',
+      behavior: 'smooth',
+    });
+  }
+
+  render() {
+    return (
+      <div id="page">
+        <Header
+          sections={this.state.sections_data}
+          active={this.state.active}
+          onClick={(section) => this.handleShow.bind(this, section)}
+        />
+        <div id="section1" ref="1" className="section">
+          <About />
+        </div>
+        <div id="section2" ref="2" className="section">
+          <Skills />
+        </div>
+        <div id="section3" ref="3" className="section">
+          <Vitae />
+        </div>
+        <div id="section4" ref="4" className="section">
+          <Links />
+        </div>
+        <Footer />
+      </div>
+      );
+  }
+}
+
+export default Page;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Skills.css
+++ b/react/src/Skills.css
@ -0,0 +1,10 @@
+#skills .geekcode {
+  font-size: x-small;
+  padding: 10px;
+  margin: 15px;
+  background-color: rgba(0, 0, 0, 0.25);
+  display: inline-block;
+  left: 50%;
+  transform: translate(-50%, 0);
+  position: relative;
+}
--- a/react/src/Skills.js
+++ b/react/src/Skills.js
@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import Title from './Common/Title';
+import Text from './Common/Text';
+import './Skills.css';
+import me from './images/me.svg';
+
+class Skills extends Component {
+  render() {
+    return (
+      <div className="content">
+        <img src={me} className="watermark" height="600px" alt="" />
+        <div id="skills">
+          <Title headline="Skills">
+            <p>
+              I'm still not sure if I am just lucky that no one notices that I
+              lack any kind of useful skill or I am just totally unaware of my
+              skills. Anyway, I try to outline some of my abilities here.
+            </p>
+          </Title>
+          <Text headline="As Computer-Scientist">
+            <p>
+              As you might have noticed I am <b>not</b> a brilliant web
+              designer.  Well, who cares&hellip;
+            </p>
+            <p>
+              I could start with a comprehensive list of things I have done in
+              the past, sometimes even usefull in a way, but to be honest this
+              list would be long and boring and it would't express very much,
+              would it? So if you are really interested just visit my&nbsp;
+              <a href="https://gitlab.weird-web-workers.org/">
+                Gitlab server</a>.
+              An overview of the projects hosted there can be found on&nbsp;
+              <a href="https://www.weird-web-workers.org/">
+                Weird Web Workers</a>.
+            </p>
+            <p>
+              If you are really interested in a skill profile look on one of
+              my&nbsp;<a href="#section4">social profiles</a>. They might be
+              not bleeding edge, but they are a good starting point. If you
+              need to know more just send me a mail.
+            </p>
+            <p>
+              In summary, I have done much and I know a little of something
+              but the most important skill I have is to learn things I do not
+              know right now.
+            </p>
+            <pre className="geekcode">{`-----BEGIN GEEK CODE BLOCK-----
+Version: 3.1
+GIT/CS/L/P/O d--- s: !a C UL++++ P L+++$ !E--- W+++ N o? K? !w---
+!O- !M-- V-- PS+++ PE-- Y+ PGP+ t+ 5+ X R tv- b++ G e h---- r+++
+y+++
+------END GEEK CODE BLOCK------`}</pre>
+          </Text>
+          <Text headline="As Dad">
+            <p>
+              There is absolutely nothing more satisfiable and at the same
+              time depressing than trying to be a <i>good</i> dad or mum.
+              Whenever you come to the point of giving up your kids do
+              something totally amazing and reesteblish your believes. Not to
+              talk about the&nbsp;
+              <q>I do love you so much, can you please&hellip;</q> face.
+            </p>
+          </Text>
+          <Text headline="As Humanist">
+            <p>
+              I beleave to have understood the biggest problem in modern
+              society <i>(money, btw.)</i> and still think about the best way
+              to transport this idea to the masses.
+            </p>
+          </Text>
+        </div>
+      </div>
+      );
+  }
+}
+
+export default Skills;
+// vim: set ts=2 sw=2 et:
--- a/react/src/Tests/App.test.js
+++ b/react/src/Tests/App.test.js
@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+});
--- a/react/src/Vitae.css
+++ b/react/src/Vitae.css
@ -0,0 +1,8 @@
+#vitae .textbox {
+  padding: 15px;
+  width: 80%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
--- a/react/src/Vitae.js
+++ b/react/src/Vitae.js
@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import Text from './Common/Text';
+import Textbox from './Common/Textbox';
+import Title from './Common/Title';
+import './Vitae.css';
+
+class Vitae extends Component {
+  render() {
+    return (
+      <div className="content">
+        <div id="vitae">
+          <Textbox>
+            <Title headline="Vitae">
+              <p>
+                Oh no, not again&hellip; Why is everyone so possesed  to know what
+                you have done in the past. Let's just forget about it and look at
+                the here and now and maybe try a small look into the future.
+              </p>
+            </Title>
+            <Text>
+              <p>
+                Right now I am the person who created this page. A pleasant guy with
+                a strong attitude to fairness and the desire to make the world a
+                better place. By the way I think I am a decent computer-programmer
+                and have at least scratched on the surface of unixoid operating
+                systems.
+              </p>
+              <p>
+                At some time I might become one of the legions that have witten
+                something that is at least of little use for society.
+              </p>
+            </Text>
+          </Textbox>
+        </div>
+      </div>
+      );
+  }
+}
+
+export default Vitae;
+// vim: set ts=2 sw=2 et:
--- a/app/assets/fonts/ArkitechBold.ttf
+++ b/app/assets/fonts/ArkitechBold.ttf
--- a/app/assets/fonts/ArkitechLight.ttf
+++ b/app/assets/fonts/ArkitechLight.ttf
--- a/app/assets/fonts/ArkitechLight.woff
+++ b/app/assets/fonts/ArkitechLight.woff