<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8"/>
  <title>John Grabenmeier, Webentwickler aus M&uuml;nster (TYPO3, Wordpress, Contao, Processwire und Shopware
    Webentwicklung...)</title>

  <!-- HAVE A NICE DAY! -->

  <!-- Styles -->
    
      <style>
    ./dist/css/critical/screen.css    .field,.jump{overflow:hidden}*{box-sizing:border-box}html{font-size:62.5%}body{font-family:NeuzeitOfficeW01-Regula,Helvetica,Arial,sans-serif;background:#373636;line-height:3.8rem;font-size:2.8rem;color:#f2f2f2}ul{list-style-type:none;padding-left:0;margin-left:0}h1,h2{font-weight:400;margin:0;padding:0}.field,header{padding:0 20px}header h2{text-transform:uppercase;float:right;font-size:2rem;color:#a9e472;line-height:2rem;letter-spacing:1px}.inside{margin:0 auto;max-width:940px}.jump{text-indent:-119988px;text-align:left;-webkit-border-radius:20px;-moz-border-radius:20px;-ms-border-radius:20px;-o-border-radius:20px;border-radius:20px;clear:both;background:#60744b;margin:152px auto 0;width:40px;height:40px;display:none}header{margin:76px 0 114px;color:#a9e472;z-index:2}header:after{content:"";display:table;clear:both}.brand img{width:82px;height:auto}h1,h2{font-size:2.8rem;margin-bottom:38px}.field{width:100%;z-index:3;margin:190px 0}a{text-decoration:none;color:#fff}.tags,.tags a{color:#a9e472}.tags{background:0 0}@media (max-width:800px){body{font-size:2.4rem;line-height:3.2rem}section{margin:96px 0}}@media (max-width:667px){body{font-size:1.8rem;line-height:2.6rem}header h2{float:none;display:none}section{margin:65px 0}}  </style>

  <meta name="viewport" content="width=device-width"/>
  <meta property="og:title" content="John Grabenmeier \ Development"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="http://johngrabenmeier.com/"/>
  <meta property="og:image" content="http://johngrabenmeier.com/images/logo@2x.png"/>
  <meta property="og:description"
        content="Front-End Developer, HTML5, CSS3, Javascript, PHP, UX, Responsive Webdesign, RWD, Drupal, TYPO3, TYPO3 Neos, Wordpress, Contao…"/>

  <meta name="description" content="John Grabenmeier, Front-End Webentwickler aus M&uuml;nster."/>
  <meta name="keywords"
        content="Webentwickler, Front-End, TYPO3, Drupal, Contao, Wordpress, Responsive Webdesign, RWD, Javascript"/>
  <meta name="author" content="John Grabenmeier"/>
  <meta name="robots" content="index,follow"/>

  <link href="images/favicon.png" rel="SHORTCUT ICON">
  <link rel="apple-touch-icon" href="/images/touch-icon-ipad.png">

  <script type="text/javascript">
      (function (d) {
          var config = {
                kitId: 'xua2ujq',
                scriptTimeout: 3000,
                async: true
            },
            h = d.documentElement, t = setTimeout(function () {
                h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
            }, config.scriptTimeout), tk = d.createElement("script"), f = false, s = d.getElementsByTagName("script")[0],
            a;
          h.className += " wf-loading";
          tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
          tk.async = true;
          tk.onload = tk.onreadystatechange = function () {
              a = this.readyState;
              if (f || a && a != "complete" && a != "loaded") {
                  return;
              }
              f = true;
              clearTimeout(t);
              try {
                  Typekit.load(config)
              }
              catch (e) {
              }
          };
          s.parentNode.insertBefore(tk, s)
      })(document);
  </script>
</head>

<body class="no-js">
<header>
  <div class="inside">
    <a href="/" title="John Grabenmeier \ Development" class="brand">
      <img src="/dist/images/logo.svg" alt="">
      <h2>John Grabenmeier \ Development</h2>
    </a>
  </div>
</header>

<section class="field tags">
  <div class="inside">
    <h1>Leistungen</h1>
    <ul>
      <li>Webentwickler (Front-End) mit über 17 Jahren Erfahrung</li>
      <li>Lösungsorientierte Webentwicklung von modularen und performanten Websites, Online Shops und SPA</li>
      <li>Konzeption und Beratung bei kleinen bis großen Projekten</li>
      <li>Expertise in der Entwicklung von spezifischen Front-End Architekturen und der Arbeit mit diversen Front-End
        Frameworks
      </li>
      <li>Realisierung von Projekten mit Content-Management-Systemen und Shopsoftware wie TYPO3, Processwire, Wordpress
        & Shopware
      </li>
      <li>Zusätzliche Erfahrung mit Drupal, Contao und Co.</li>
      <li>Fundiertes Wissen in Front-End Technologien, insbesondere HTML5, CSS (inkl. diverser
        Preprozessoren, wie SCSS und Less), Javascript (ES6, Vue.js, Hoodie und Supersets wie Typescript)…
      </li>
    </ul>
    <a href="#works" class="jump">Weiter zu den Arbeiten</a>
  </div>
</section>

<section class="field works" id="works">
  <div class="inside">
    <h3>Arbeiten (Auswahl)</h3>
    <ul>
      <li>
        <a href="https://www.hygi.de" target="_blank" rel="noopener">hygi.de – Online Shop mit über 2,3 Millionen Kunden
          europaweit</a> \ Lead Front-End Development
      </li>
      <li>
        <a href="https://litcreate.com" rel="noopener" target="_blank">Lit Create, Berlin</a> <span>\ Realisierung, Wordpress, Agentur: Lit Create</span>
      </li>
      <li>
        <a href="https://www.factoryhotel-muenster.de" title="www.factoryhotel-muenster.de besuchen" target="_blank"
           rel="noopener">Factory Hotel M&uuml;nster, Relaunch 2017</a> <span>\ Realisierung, TYPO3, Agentur:
          <a href="http://www.markenvonfreunden.de" rel="noopener">Marken von Freunden</a></span></li>
      <li>
        <a href="https://www.amg-recruiting.de" title="www.amg-recruiting.de besuchen" target="_blank"
           rel="noopener">AMG Recruiting, Relaunch Multidomain Portal, 2017</a> <span>\ Realisierung, TYPO3, Agentur:
          <a href="http://www.markenvonfreunden.de" rel="noopener">Marken von Freunden</a></span>
      </li>
      <li>
        <a href="http://www.rahmel-pp.de" title="Rahmel PP Website öffnen" target="_blank" rel="noopener">Rahmel PP</a>
        <span>\ Realisierung, Wordpress, Agentur: u+i interact</span>
      </li>
      <li>
        <a href="https://www.paqato.com" target="_blank" rel="noopener">PAQATO – take control of your shipment</a>
        <span>\
        Realisierung, TYPO3,
        Agentur: <a
              href="https://uandi.com" target="_blank" rel="noopener">u+i interact</a></span></li>
      <li><a href="http://www.eusterhus-druck.de" title="eusterhus-druck.de besuchen" target="_blank" rel="noopener">Druckerei
          Eusterhus, Relaunch 2016</a> <span>\ Realisierung, Contao, Agentur: <a href="http://nik.is" rel="noopener"
          >NIKI</a></span></li>
              <li><a href="http://www.bkk-da.de" title="BKK_Dürkopp Adler" target="_blank" rel="noopener">BKK_Dürkopp Adler,
          Bielefeld</a>
        <span>\ Realisierung, TYPO3, Agentur: <a href="http://www.uandi.com" title="U+I Interact">u+i
            interact</a></span>
      </li>
      <li><a href="http://nik.is" title="NIKI – Design Direction" target="_blank" rel="noopener">NIKI – Design
          Direction</a>
        <span>\ Realisierung, Wordpress, Agentur: <a href="//nik.is"
                                                     title="Website NIKI - Design Direction">NIKI</a></span>
      </li>
              <li>
        <a href="http://www.kado-sushi.de" title="Kado Sushi, Bielefeld" target="_blank" rel="noopener">Kado Sushi</a>
        <span>\ Realisierung, Contao, Agentur: <a href="//nik.is"
                                                  title="Website NIKI - Design Direction">NIKI</a></span></li>

      <li>
        <a href="http://www.stefanie-funke.de" title="Stefanie Funke, Mediatorin Gelsenkirchen" target="_blank"
           rel="noopener">Stefanie
          Funke</a>
        <span>\ Realisierung, Design: <a href="//www.vera-lohmann.de" title="Website Vera Lohmann"
                                         target="_blank" rel="noopener">Vera Lohmann</a></span></li>      <li><a href="http://www.klumpp-architekten.de" title="eusterhus-druck.de besuchen" target="_blank" rel="noopener">Klumpp
          +
          Klumpp Architekten BDA</a> <span>\ Konzept, Design, Realisierung, Contao</span></li>
      <li><a href="http://www.booklooker.de" title="Booklooker.de besuchen" target="_blank"
             rel="noopener">Booklooker, Düsseldorf</a> <span>\ Redesign, Templating</span>
      </li>
      <li><a href="http://www.wartburg-grundschule.de/" title="Wartburg Grundschule M&uuml;nster">Wartburg
          Grundschule Münster</a> <span>\ Templating</span></li>
    </ul>
  </div>
</section>


<section class="field contact" id="contact">
  <div class="inside">
    <div class="info">
      <h3>Kontakt</h3>
      <h4>Büro</h4>
      <address>
        Sauerländerweg 2a<br>
        48145 M&uuml;nster, Germany
      </address>

      <h4>Kontakt</h4>
      <address>John Grabenmeier<br>
        Wiener Stra&szlig;e 14<br>
        48145 M&uuml;nster, Germany
      </address>

      <p>Email: <a
            href="mailto:&#x69;&#110;&#102;&#x6F;&#64;&#106;&#x6F;&#x68;&#x6E;&#103;&#x72;&#97;&#x62;&#101;&#x6E;&#109;&#x65;&#x69;&#x65;&#x72;&#46;&#99;&#111;&#109;"
            title="Email schreiben">&#x69;&#110;&#102;&#x6F;&#64;&#106;&#x6F;&#x68;&#x6E;&#103;&#x72;&#97;&#x62;&#101;&#x6E;&#109;&#x65;&#x69;&#x65;&#x72;&#46;&#99;&#111;&#109;</a><br>
        Telefon: <a href="callto:025139505541" title="Anrufen">+49 (0) 251 39505541</a>
      </p>
    </div>
        </div>
</section>
<footer class="field legal">
    <div class="inside">
        <a href="/datenschutz.php">Datenschutzhinweis</a>
    </div>
</footer>

<script>
    function loadCSS (href, before, media) {
        "use strict";
        var ss = window.document.createElement("link");
        var ref = before || window.document.getElementsByTagName("script")[0];
        ss.rel = "stylesheet";
        ss.href = href;
        ss.media = "only x";
        ref.parentNode.insertBefore(ss, ref);
        setTimeout(function () {
            ss.media = media || "all";
        });
    }

    loadCSS('/dist/css/screen.css');

    var gaProperty = 'UA-241457-6';
    var disableStr = 'ga-disable-' + gaProperty;
    if (document.cookie.indexOf(disableStr + '=true') > -1) {
        window[disableStr] = true;
    }

    function gaOptout() {
        document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
        window[disableStr] = true;
    }

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', gaProperty, 'auto');
    ga('set', 'anonymizeIp', true);
    ga('send', 'pageview');
</script>
</body>
</html>