<!DOCTYPE html>
<html lang="en">

    <head>
        <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Richard Hemmer</title>

        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="css/style.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
    <script>
   if (window.location.protocol != "https:")
     window.location.href = "https:" + window.location.href.substring(window.location.protocol.length);
</script>



<!-- Matomo -->
<script type="text/javascript">
  var _paq = _paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//stats.stormgrass.com/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '7']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->






    </head>

    <body>

        <!-- Navigation -->
        <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle">
            <i class="fa fa-bars"></i>
        </a>
        <nav id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle">
                    <i class="fa fa-times"></i>
                </a>
                <li class="sidebar-brand">
                    <a href="#top" onclick=$("#menu-close").click();>Richard Hemmer</a>
                </li>
                <li>
                    <a href="#top" onclick=$("#menu-close").click();>Home</a>
                </li>
                <li>
                    <a href="#portfolio" onclick=$("#menu-close").click();>Stuff I do</a>
                </li>
                <li>
                    <a href="#footer" onclick=$("#menu-close").click();>Contact</a>
                </li>
            </ul>
        </nav>

        <!-- Header -->
        <header id="top" class="header">
            <div class="text-vertical-center">
                <h1>I'm Richard Hemmer</h1>
                <h3>and apparently</h3>
                <br>
                <a href="#portfolio" class="btn btn-dark btn-lg">this</a>
            </div>
        </header>

        <!-- The sites -->
        <section id="portfolio" class="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1 text-center">
                        <h2>is what I do</h2>
                        <hr class="small">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="portfolio-item fixOverlayDiv">
                                    <a href="https://www.geschichte.fm">
                                        <img class="img-portfolio img-responsive" src="img/gagneuklein.jpg">
                                        <div class="OverlayText">
                                            <h3>Geschichten aus der Geschichte Podcast</h3>
                                            <p>I'm one half of the Geschichten aus der Geschichte Podcast, where we tell stories lifted straight out of history (in German)</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="portfolio-item fixOverlayDiv">
                                    <a href="https://selfhostedweb.org">
                                        <img class="img-portfolio img-responsive" src="img/selfhostedweb.png">
                                        <div class="OverlayText">
                                            <h3>The Self-Hosted Web</h3>
                                            <p>I believe in breaking out of walled gardens. The self-hosted web is dedicated to helping people do that. Also a podcast now!</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="portfolio-item fixOverlayDiv">
                                    <a href="https://twentyfilms.com">
                                        <img class="img-portfolio img-responsive" src="img/twentyfilms.png">
                                        <div class="OverlayText">
                                            <h3>Twenty Films</h3>
                                            <p>A little pet-project, displaying the top 20 films of any given year.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="portfolio-item fixOverlayDiv">
                                    <a href="https://stormgrass.com">
                                        <img class="img-portfolio img-responsive" src="img/stormgrass.png">
                                        <div class="OverlayText">
                                            <h3>Stormgrass - A Blog</h3>
                                            <p>My personal blog, est. 2002. It's personal, subjective and sometimes quite fun.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="portfolio-item fixOverlayDiv">
                                    <a href="https://hemmer.co">
                                        <img class="img-portfolio img-responsive" src="img/hemmerfinal.png">
                                        <div class="OverlayText">
                                            <h3>Historical Consulting</h3>
                                            <p>I'm a trained historian and consult film-, TV and video game productions.</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                          </div>
                        </div>
                        <!-- /.row (nested) -->

                    </div>
                    <!-- /.col-lg-10 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container -->
        </section>

        <!-- Footer -->
        <hr class="small">
        <footer id="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-10 col-lg-offset-1 text-center">
                        <h4>
                            <strong>Contact me. You have options.</strong>
                        </h4>

                        <ul class="list-unstyled">

                            <li>
                                <i class="fa fa-envelope-o fa-fw"></i>
                                <a href="mailto:mail[at]richardhemmer.com">mail[at]richardhemmer.com</a>
                            </li>
                            <li>
                                <i class="fab fa-mastodon fa-fw"></i>
                                <a rel="me" href="https://hemmer.land/@richard">Mastodon</a>
                            </li>
                            <li>
                                <i class="fa fa-twitter fa-fw"></i>
                                <a href="https://twitter.com/stormgrass">stormgrass</a>
                            </li>
			    <li>
                                <i class="fa fa-key fa-fw"></i>
                                <a href="https://keybase.io/stormgrass/">Keybase</a>
                            <br />
			    <br />
			    <br />
		            <br />
				</li>
				_________________________
			   <li> <a href="privacypolicy.html">Privacy Policy</a> 			</li>			
                        </ul>
                       

                    </div>
                </div>
            </div>
      </footer>

        <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Custom Theme JavaScript -->
        <script>
            // Closes the sidebar menu
            $("#menu-close").click(function(e) {
                e.preventDefault();
                $("#sidebar-wrapper").toggleClass("active");
            });

            // Opens the sidebar menu
            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#sidebar-wrapper").toggleClass("active");
            });

            // Scrolls to the selected menu item on the page
            $(function() {
                $('a[href*=#]:not([href=#])').click(function() {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                        var target = $(this.hash);
                        target = target.length
                            ? target
                            : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top
                            }, 1000);
                            return false;
                        }
                    }
                });
            });
        </script>
    </body>

</html>
