-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (119 loc) · 21.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html dir="ltr" lang="de" itemscope itemtype="http://schema.org/Corporation">
<head>
<meta name="robots" content="index,noarchive">
<link rel="canonical" href="https://xerc.de">
<base target="_blank">
<!-- searching for developers worldwide -->
<!-- work with us and keep on traveling -->
<title>xerc | Full-Stack Web SoftwareIngenieur:innen</title>
<meta name="description" content="B2B & NGO dev; typo3/ shopify/ aimeos/ laravel/ slim + vuejs integration">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
if(top !== self) top.location = self.location;
if(screen.width < 392) document.head.querySelector('meta[name="viewport"]').setAttribute('content','width=352,initial-scale=0.9');
</script>
<style>
:root{--top-padding:20px;--side-padding:25px;--body-width:352px;--block-height:64px;--opacity-logo:1;--color-background:255,255,255;--color-base:#000;--color-grey:#ccc;--color-blue:#1d6aa2;--color-green:#33802e;--color-red:#890e1a;--color-yellow:#b09d01;--color-link:#97989b;--color-link-hover:#419ec7;--color-prj-title:#000;--color-timeline-year:#000;--color-timeline-year-line:#0c0c0c}@media (prefers-color-scheme:dark){:root{--opacity-logo:0.1;--color-background:26,26,26;--color-base:#fff;--color-grey:#484848;--color-prj-title:#d2d2d2;--color-timeline-year:#fff;--color-timeline-year-line:#fff}}
#wm-ipp-base{min-height:unset !important}html{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:rgb(var(--color-background));color:var(--color-base)}html,h1{font-size:14px;font-family:monospace,monospace}body{width:var(--body-width);max-width:calc(100% - var(--side-padding)*2);margin:0 auto;position:relative;overflow-x:hidden}html{line-height:1.15;-webkit-text-size-adjust:100%}small{font-size:80%}@media screen and (max-width:392px){p{font-size:12px}}
header{position:absolute;top:calc(50vh - var(--block-height)*2);z-index:1;/*^FIREFOX*/width:100%}abbr{position:absolute;top:-2px;right:-66px;opacity:0.1}@media screen and (max-width:552px){abbr{display:none}}nav{display:flex;flex-direction:row;justify-content:space-between}nav>a use{transition:opacity 1s}nav>a:hover use,nav>a:focus use{opacity:0.2}svg{display:block;height:var(--block-height);transform:scale(1);shape-rendering:geometricPrecision}#bg>path{opacity:var(--opacity-logo)}#char{fill:var(--color-prj-title);width:100%}
@keyframes fill{0%{transform:scale(10)}100%{transform:scale(1)}}nav path{animation-name:fill;animation-duration:1s;animation-fill-mode:forwards;transform-origin:0px}nav a:nth-of-type(3n+1) path{transform-origin:2px}@keyframes turn{0%{transform:rotateY(90deg)}60%{transform:rotateY(90deg)}100%{transform:rotateY( 0deg)}}#char path{animation-name:turn;animation-duration:3s}#char path:nth-of-type(1){transform-origin:1832px}#char path:nth-of-type(2){transform-origin:7280px}#char path:nth-of-type(3){transform-origin:12740px}#char path:nth-of-type(4){transform-origin:18200px}
main>div{display:none;padding-top:calc(50vh + var(--block-height));padding-bottom:var(--block-height)}main>div:target{display:block}del,s,i,small{opacity:0.2}del,s,dfn,address{font-style:normal}del,s,dfn,address{text-decoration:none}h1,mark,dfn{color:var(--color-prj-title);background:none}h1{display:inline}hr{margin:-7px 0 0;border:0 none}a{color:var(--color-link);text-decoration:none;outline:none}a:hover,a:focus{color:var(--color-link-hover)}samp{display:inherit;text-align:justify}samp small{position:absolute}samp>:not(a) small{opacity:0.5;font-style:normal;}article,address{text-align:center}noscript,address{display:flex;justify-content:center}address>*{flex:0 0 50%;width:50%}.supplier:hover,.supplier:focus,i.supplier{color:var(--color-blue)}.provider:hover,.provider:focus,i.provider{color:var(--color-green)}.counsel:hover,.counsel:focus,i.counsel{color:var(--color-red)}
details,summary{color:var(--color-link);position:fixed;top:0;right:0;outline:none;z-index:2}summary,dialog{padding:var(--top-padding) var(--side-padding)}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}details[open]>summary,summary:hover{color:var(--color-base)}dialog{display:block;border:0 none;position:fixed;bottom:0;/*SAFARI*/right:0;color:var(--color-grey);/*SAFARI*/background:linear-gradient(to bottom, rgba(var(--color-background), 0) 0%, rgb(var(--color-background)) 10%);padding-top:calc(var(--top-padding)*2);-webkit-user-select:text;user-select:text}dialog p{margin-bottom:0;text-align:justify}dialog>*::selection{background:hotpink}@media screen and (max-width:1024px){dialog{padding-top:100vh}dialog p{-webkit-hyphens:auto;hyphens:auto}dialog p dfn{-webkit-hyphens:none;hyphens:none}}_:-ms-lang(x), dialog{background:#fff;height:100%}
#timeline{position:relative;/*FIREFOX*/scrollbar-width:none}#timeline::-webkit-scrollbar{/*^FIREFOX*/display:none}@media screen and (min-width:920px){.rotator{transform:rotate(-90deg);transform-origin:top left;margin-left:calc((100vw - var(--body-width)) / -2);position:fixed;top:calc(50vh + var(--body-width));width:var(--body-width);height:0}#timeline{overflow-x:hidden;overflow-y:auto;max-height:100vw}}.year{color:var(--color-timeline-year);position:relative;display:flex;justify-content:flex-start;align-items:flex-end}.year small{margin-bottom:-5px}.year:after{background-color:var(--color-timeline-year-line);content:"";opacity:0.2;height:1px;display:block;bottom:0;position:absolute;left:40px;width:calc(100% - var(--block-height) - var(--top-padding)*2)}@media screen and (max-width:392px){.year:after{width:82%}}.prj{position:absolute;border-left:2px solid;width:var(--top-padding)}.prj .title{color:var(--color-prj-title);white-space:nowrap;position:absolute;overflow:hidden;margin-left:-2px;top:0;transform:translateZ(0) rotate(90deg)}.prj .title span{padding-left:7px}.prj.fix .title{position:fixed;transform:translateZ(0) rotate(90deg)}.prj.end .title{position:absolute;display:flex;justify-content:flex-end;padding-left:0;transform:translateZ(0) rotate(90deg)}.prj.supplier{border-color:var(--color-blue)}.prj.provider{border-color:var(--color-green)}.prj.counsel{border-color:var(--color-red)}.prj.involved{border-color:var(--color-yellow)}
samp a.H03:hover~a,samp a.Had:hover~a,samp a.H20:hover~a{opacity:0.4}samp a.H03:hover~i.H03,samp a.Had:hover~i.Had,samp a.H20:hover~i.H20{opacity:0.8}
</style>
</head>
<body>
<header>
<abbr>MMIV</abbr>
<nav>
<a target="_self" href="#Xerc"><svg viewBox="0 0 4 4"><use xlink:href="#bg"/><path fill="#b90423" d="M4 0H2v2h1"/><path fill="#890e1a" d="M4 4H2V2h1"/><path fill="#a80a21" d="M0 4h2V2H1"/><path fill="#c90126" d="M0 0h2v2H1"/></svg></a>
<a target="_self" href="#xErc"><svg viewBox="0 0 4 4"><use xlink:href="#bg"/><path fill="#7fa02f" d="M0 4V0h4"/><path fill="#668326" d="M0 0V4h4"/><path fill="#72912a" d="M0 4h2V2"/><path fill="#33802e" d="M0 4V2h2"/><path fill="#409736" d="M0 0v2h2"/><path fill="#8aae32" d="M0 0h2v2"/></svg></a>
<a target="_self" href="#xeRc"><svg viewBox="0 0 4 4"><use xlink:href="#bg"/><path fill="#3e91b9" d="M0 4V0h4"/><path fill="#164f7c" d="M0 0V4h4"/><path fill="#185888" d="M0 2v2h2V2"/><path fill="#1d6aa2" d="M0 0v2h2"/><path fill="#419ec7" d="M0 0h2v2"/></svg></a>
<a target="_self" href="#xerC"><svg viewBox="0 0 4 4"><use xlink:href="#bg"/><path fill="#d8c626" d="M4 0H2v2h1"/><path fill="#b09d01" d="M4 4H2V2h1"/><path fill="#c3af00" d="M0 2h2v2H1"/><path fill="#ecd72e" d="M0 2h2V0H1"/></svg></a>
</nav>
<svg id="char" viewBox="0 0 20000 738"><path d="M1994 726l-166-307-166 307h-64l196-364-183-350h68l152 290 154-290h64l-184 350 197 364z"/><path d="M7100 726V12h354v54h-290v260h271v54h-271v292h299v54z"/><path d="M12540 726V12h213c119 0 185 68 185 179 0 86-34 163-129 181v2c89 8 119 59 122 169l2 78c1 39 5 77 30 105h-75c-15-25-18-62-19-100l-2-60c-4-126-27-166-142-166h-121v326zm64-660v280h110c101 0 160-46 160-140 0-87-37-140-153-140z"/><path d="M18360 484h64c-9 163-84 254-212 254-146 0-228-113-228-369s82-369 228-369c145 0 205 103 205 220h-64c0-97-49-166-141-166-102 0-164 84-164 315s62 315 164 315c90 0 141-77 148-200z"/></svg>
<svg display="none">
<defs>
<symbol id="bg"><path fill="#d7d8da" d="M2 2h2V0"/><path fill="#b1b2b4" d="M2 2h2v2"/><path fill="#c4c5c7" d="M2 2H0v2h2"/><path fill="#eaeaec" d="M2 2H0V0h2"/></symbol>
</defs>
</svg>
</header>
<main>
<div id="Xerc">
<article>
<h1>xerc</h1><br><small>/ˈkserk/</small>
<p>
<br>Full-Stack Web SoftwareIngenieur:innen
<br>
<br>inkl. Agentur und Unternehmensberatung
<br>zzgl. Interim CTO oder Technikvorstand
<br>
</p>
</article>
</div>
<div id="xErc">
<samp>
<mark>MMXXI</mark> <a href="https://jungbuschdenkmal.de" rel="" class="supplier">jung<wbr>busch<wbr>denk<wbr>mal<wbr>.de</a> <a href="https://wurst.guitars" rel="" class="counsel">wurst<wbr>.guitars</a> <a href="https://rawkultur.de" rel="" class="provider">raw<wbr>kultur<wbr>.de</a> <a href="https://neuemedienmacher.de/helpdesk/" rel="" class="provider">help<wbr>desk.<wbr></a><a href="https://neuemedienmacher.de" rel="" class="provider">neue<wbr>medien<wbr>macher<wbr>.de</a> <a href="https://wetterberichtigung.org" rel="" class="counsel">wetter<wbr>bericht<wbr>igung<wbr>.org</a>
<mark>'XX</mark> <a href="https://samana.de" rel="" class="supplier">sam<wbr>ana<wbr>.de</a> <a href="https://hegehof.de" rel="nofollow" class="provider">hege<wbr>hof<wbr>.de</a> <a href="https://www.helfende-hand-foerderpreis.de" rel="" class="supplier">helfende-<wbr>hand-<wbr>foerder<wbr>preis<wbr>.de</a>
<mark>'XIX</mark> <a href="https://pleasedonttouch.de" rel="" class="supplier">please<wbr>dont<wbr>touch<wbr>.de</a> <a href="https://www.emo-berlin.de" rel="" class="supplier H03">emo-<wbr>berlin<wbr>.de</a>
<mark>'XVIII</mark> <a href="https://germanyworks.com" rel="" class="supplier">germany<wbr>works<wbr>.com</a> <a href="https://neuedeutsche.org" rel="" class="provider Had">neue<wbr>deutsche<wbr>.org</a> <a href="https://mediendienst-integration.de" rel="" class="provider H20">medien<wbr>dienst-<wbr>integra<wbr>tion<wbr>.de</a>
<mark>'XVII</mark> <del class="supplier">herx<wbr>heim-<wbr>ist-<wbr>meins<wbr>.de</del> <s class="supplier">pavon-<wbr>naum<wbr>ann<wbr>.de</s> <del class="counsel">glo<wbr>ment<wbr>.com</del>
<mark>'XVI</mark> <a href="https://no-hate-speech.de" rel="" class="provider">no-<wbr>hate-<wbr>speech<wbr>.de</a> <a href="https://osmancekic.de" rel="" class="counsel">osman<wbr>cekic<wbr>.de</a> <s class="supplier">anleger<wbr>schutz<wbr>.ag</s> <s class="supplier">bau<wbr>findo<wbr>.de</s>
<mark>'XV</mark> <i class="provider Had">neue<wbr>deutsche<wbr>.org</i> <a href="https://carokissen.com" rel="nofollow" class="supplier">caro<wbr>kissen<wbr>.com</a> <s class="supplier">shop.<wbr></s><s class="supplier">form<wbr>im<wbr>raum<wbr>.com</s> <del class="supplier">chris<wbr>tian-<wbr>plaep<wbr>.de</del> <del class="supplier">brook<wbr>lyn<wbr>brights<wbr>.de</del> <s class="supplier">alpha-<wbr>reale<wbr>state<wbr>.de</s> <a href="https://laden3punkt0.com" rel="" class="provider">laden<wbr>3punkt0<wbr>.com</a> <del class="counsel">jjesberger<wbr>.de</del>
<mark>'XIV</mark> <s class="provider">ge<wbr>werbe<wbr>ver<wbr>sicher<wbr>ung<wbr>.de</s> <s class="provider">herren<wbr>fahrt<wbr>.com</s> <s class="supplier">chirurg<wbr>ie-<wbr>ortho<wbr>paedie-<wbr>mann<wbr>heim<wbr>.de</s> <s class="supplier">tampo<wbr>mark<wbr>.de</s> <a href="http://belmontlegal.de" rel="" class="supplier">belmont<wbr>legal<wbr>.de</a> <a href="https://kraushaar-raumundleder.de" rel="" class="supplier">kraus<wbr>haar-<wbr>raum<wbr>und<wbr>leder<wbr>.de</a> <del class="counsel">klein-<wbr>julia<wbr>.eu</del>
<mark>'XIII</mark> <a href="http://albus-heidelberg.de" rel="nofollow" class="supplier">albus-<wbr>heidel<wbr>berg<wbr>.de</a> <i class="supplier H03">emo-<wbr>berlin<wbr>.de</i> <s class="supplier">lotus<wbr>grill<wbr>.de</s> <s class="provider">jung<wbr>feld<wbr>.com</s> <del class="provider">stork<wbr>fox<wbr>.com</del> <a href="https://prinz-mayer.com" rel="" class="counsel">prinz-<wbr>mayer<wbr>.com</a> <del class="supplier">energy-<wbr>explor<wbr>erz<wbr>.de</del> <s class="provider">soudry<wbr>.de</s> <s class="supplier">remaks<wbr>.de</s> <a href="https://stahlmann-rfs.de" rel="" class="supplier">stahl<wbr>mann-<wbr>rfs<wbr>.de</a>
<mark>'XII</mark> <i class="provider H20">medien<wbr>dienst-<wbr>integra<wbr>tion<wbr>.de</i> <del class="provider">the-<wbr>hats<wbr>.de</del> <del class="provider">white<wbr>box-<wbr>con<wbr>cepts<wbr>.com</del> <a href="https://www.haas-uhren.de" rel="" class="supplier">haas-<wbr>uhren<wbr>.de</a> <s class="counsel">pyxis-<wbr>agent<wbr>ur<wbr>.de</s>
<mark>'XI</mark> <a href="https://weingut-blaul.de" rel="" class="counsel">wein<wbr>gut-<wbr>blaul<wbr>.de</a> <del class="counsel">uf6<wbr>projects<wbr>.com</del> <s class="supplier">lex<wbr>.tm</s> <del class="supplier">tc-<wbr>dann<wbr>stadt<wbr>er<wbr>hoehe<wbr>.de</del>
<mark>'X</mark> <del class="counsel">study<wbr>advisor<wbr>.com</del> <del class="provider">vfd-<wbr>rhein<wbr>hessen<wbr>.de</del> <a href="http://friess-moster.de" rel="" class="counsel">friess-<wbr>moster<wbr>.de</a>
<mark>'IX</mark> <del class="counsel">shop<wbr>boy<wbr>.de</del> <del class="provider">sh<wbr>werbe<wbr>agent<wbr>ur<wbr>.de</del> <s class="provider">florian<wbr>steiner<wbr>.com</s> <s class="counsel">coding<wbr>people<wbr>.com</s> <del class="supplier">mkm-<wbr>betreuung<wbr>.de</del> <del class="provider">tannen<wbr>baum-<wbr>preis<wbr>vergleich<wbr>.de</del>
</samp>
</div>
<div id="xeRc">
<noscript>fancy JavaScript awaiting you</noscript>
<div class="rotator">
<div id="timeline" data-url="projects.json"></div>
</div>
</div>
<div id="xerC">
<address>
<div><mark>- M H G -</mark>
<br>
<br><script>function uWOObmPe(e){for(i=0;i<=e.length;i+=2){document.write(String.fromCharCode((parseInt((('0x')+e.substring(i,i+2)),16))-(-8)));}}uWOObmPe('345918606a5d5e351a655961646c673265596666605d616538705d6a5b265c5d376b6d5a625d5b6c35535b67666c595b6c551d2a281a186c596a5f5d6c351a576b5d645e1a3665596666605d616538705d6a5b265c5d34275936')</script>
<hr>
<br><script>function vFqDmBej(e){for(i=0;i<=e.length;i+=2){document.write(String.fromCharCode((parseInt((('0x')+e.substring(i,i+2)),16))-(-4)));}}vFqDmBej('385d1c646e6162391e7061683627303529322e2d292d3132332e2e311e1c705d6e636170391e5b6f6168621e3a27303529322e2d292d3132332e2e31382b5d3a')</script>
</div>
<div><mark>- B E R -</mark>
<br>
<br><script>function ChLqpqcl(e){for(i=0;i<=e.length;i+=2){document.write(String.fromCharCode((parseInt((('0x')+e.substring(i,i+2)),16))-(-4)));}}ChLqpqcl('385d1c646e6162391e695d6568706b365e616e68656a3c74616e5f2a60613b6f715e66615f7039575f6b6a705d5f7059212e2c1e1c705d6e636170391e5b6f6168621e3a5e616e68656a3c74616e5f2a6061382b5d3a')</script>
<hr>
<br><script>function hjqfDwxs(e){for(i=0;i<=e.length;i+=2){document.write(String.fromCharCode((parseInt((('0x')+e.substring(i,i+2)),16))-(-8)));}}hjqfDwxs('345918606a5d5e351a6c5d6432232c31252b28252a2928312a2d2e301a186c596a5f5d6c351a576b5d645e1a36232c31252b28252a2928312a2d2e3034275936')</script>
</div>
</address>
</div>
</main>
<footer>
<details>
<summary>§</summary>
<dialog>
<dfn>xerc</dfn> <mark>U</mark>nternehmer<mark>G</mark>esellschaft haftungsbeschränkt; § 5a GmbHG
| AmtsG. Charlottenburg HRB140853
| UStId#. DE282860259
<br>Geschäftsführung & Inhaltlich Verantwortlich gem. § 55 II RStV; Marcus Förster c/o Alte Schönhauser Str. 23 - Berlin
<p>Die <dfn>Nutzung</dfn> unserer Seite ist ausschließlich ohne Angabe personenbezogener Daten oder Cookies möglich. Es erfolgt keine personenbezogene Auswertung. Alle Übertragungen werden mindestens TLS 1.2 verschlüsselt.
Wir bieten Ihnen auf unserer Seite die Möglichkeit, mit uns per <dfn>E-Mail</dfn> in Verbindung zu treten. In diesem Fall werden die von Ihnen gemachten Angaben zum Zwecke der Bearbeitung ihrer Kontaktaufnahme gespeichert. Eine Weitergabe an Dritte erfolgt nicht. Die Nutzung von PGP wird empfohlen.
Wir übernehmen keine <dfn>Gewähr</dfn> für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Daten und Informationen. Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine <dfn>Haftung</dfn> für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich. Wir haften nur für eigene Inhalte nach den allgemeinen Gesetzen.
<small>Stand: 08.12.2019 23:59</small>
</p>
</dialog>
</details>
</footer>
<script>
Array.prototype.map.call(document.getElementsByTagName('a'),a=>a.rel='noopener noreferrer');
Array.prototype.map.call(document.getElementsByTagName('samp')[0].getElementsByTagName('i'),function(tag){tag.addEventListener('mouseover',function(event){Array.prototype.map.call(document.querySelectorAll('samp>a[href$="'+event.target.textContent.replace(/\\/g,'')+'"]'),function(link){link.focus();});});});
if(/firefox/.test(navigator.userAgent.toLowerCase())){new IntersectionObserver(function(elmt){if(!elmt[0].isIntersecting)return false;var innr=document.createElement('small');innr.textContent='\\';Array.prototype.map.call(document.getElementsByTagName('wbr'),function(wbr){if(!wbr.nextElementSibling)return;if(Math.floor(wbr.getBoundingClientRect().x)>Math.floor(wbr.nextElementSibling.getBoundingClientRect().x)){wbr.before(innr.cloneNode(true));}});this.disconnect();}).observe(document.getElementById('xErc'));}
let container=document.getElementById('timeline');let xmlhttp=new XMLHttpRequest();xmlhttp.onload=function(){if(200==this.status)new Timeline(container,JSON.parse(this.responseText))};xmlhttp.open('GET','/'+container.dataset.url);xmlhttp.send();var isInViewport=function(elmt){let parent=elmt.parentNode;let boundingParent=parent.getBoundingClientRect();let bounding=elmt.getBoundingClientRect();return window.innerWidth<920?(0<bounding.bottom&&0>=bounding.top):(0<bounding.right&&parseInt(boundingParent.left)>=parseInt(bounding.left))};var isOutOfLine=function(elmt,chld){let parent=elmt.parentNode;let boundingParent=parent.getBoundingClientRect();let bounding=elmt.getBoundingClientRect();let boundingChild=chld.getBoundingClientRect();return window.innerWidth<920?(0<bounding.bottom&&bounding.bottom<=parseInt(boundingChild.height)):(0<bounding.right&&(bounding.right-parseInt(boundingParent.left))<=parseInt(boundingChild.width));};window.addEventListener('wheel',function(e){if(window.innerWidth>=920)document.getElementById('timeline').scrollTop+=e.deltaY;});function Timeline(container,items){if(!items)return null;this.startYear=null;this.groups=[];this.maxWidth=document.body.clientWidth;this.leftMargin=50;this.groupWidth=21;this.monthHeight=36;this.drawLines=function(){var me=this;let groupWidth=this.groupWidth || parseInt((me.maxWidth-me.leftMargin*2)/me.groups.length);this.groups.forEach(function(group,grpIdx){group.forEach(function(prj){let prjDIV=document.createElement('div');let titleDIV=document.createElement('div');let titleDIVInner=document.createElement('span');prjDIV.classList.add('prj',prj.mode);titleDIV.classList.add('title');titleDIVInner.innerHTML=prj.title;prjDIV.style.top=me.monthHeight*prj.level+'px';prjDIV.style.left=(grpIdx*groupWidth)+me.leftMargin+'px';prjDIV.style.width=prjDIV.style.lineHeight=groupWidth+'px';prjDIV.style.height=titleDIV.style.width=me.monthHeight*prj.length+'px';titleDIV.style.transformOrigin=groupWidth/2+'px '+groupWidth/2+'px';titleDIV.appendChild(titleDIVInner);prjDIV.appendChild(titleDIV);[document.getElementById('timeline'),window].forEach(item=>{item.addEventListener('scroll',()=>{prjDIV.classList.toggle('fix',isInViewport(prjDIV));prjDIV.classList.toggle('end',isOutOfLine(prjDIV,titleDIVInner));},false)});container.appendChild(prjDIV);});});};this.drawAxis=function(){let currentYear;do{let y=document.createElement('div');y.style.height=((!currentYear)&&(currentYear=new Date().getFullYear())?new Date().getMonth():12)*this.monthHeight+'px';y.innerHTML='<small>'+currentYear+'</small>';y.className='year';container.appendChild(y);}while(this.startYear<--currentYear);};this.setItems=function(items){let currentYear=new Date().getFullYear();let currentMonth=new Date().getMonth()+1;items.forEach(function(item){item.start={month:parseInt(item.start_date.substr(-2)),year:parseInt(item.start_date.substr(0,4))};item.end={month:(!item.end_date)?currentMonth:parseInt(item.end_date.substr(-2)),year:(!item.end_date)?currentYear:parseInt(item.end_date.substr(0,4))};item.level=(!item.end_date)?0:Math.max(0,(12*(currentYear-item.end.year)+(currentMonth-item.end.month)));item.length=(12*(item.end.year-item.start.year)+(item.end.month-item.start.month))+1;});while(items.length){let group=[items.shift()];if(group[0].end_date){for(let i=0;i<items.length;i++){if(new Date(group[(group.length-1)].end.year,group[(group.length-1)].end.month,0,23,59,59,999).getTime()<(new Date(items[i].start.year,(items[i].start.month-1),1).getTime()-1)){group.push(items.splice(i,1)[0]);}}}this.groups.push(group);}this.startYear=this.groups[0][0].start.year;};this.setItems(items.reverse());container.innerHTML='';this.drawAxis();this.drawLines();};
</script>
</body>
</html>