wieerwill/wieerwill.github.io
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

lazy loading certifiaction images

Browse Source
This commit is contained in:
WieErWill 2020-03-27 19:27:08 +01:00
parent 1d18344f38
commit 231772d4f8
6 changed files with 478 additions and 476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
icons/placeholder.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

168
index.html
View File

@ -31,7 +31,7 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![endif]-->
<script src="typing-carousel.js"></script> <script src="js/typing-carousel.js"></script>
</head> </head>
<main> <main>
<header> <header>
@ -187,379 +187,380 @@
</h2> </h2>
</div> </div>
<div class="project-body container-fluid py-2"> <div class="project-body container-fluid py-2">
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>RoboCup participants</h4> <h4>RoboCup participants</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p> With a team up to four we build and programmed multiple robots to play football against each other or 2v2. With much fun and learning we worked together for several years and remain our friendships.</p> <p> With a team up to four we build and programmed multiple robots to play football against each other or 2v2. With much fun and learning we worked together for several years and remain our friendships.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://robocupgermanopen.de/de/junior/soccer"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://robocupgermanopen.de/de/junior/soccer"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>Student newspaper</h4> <h4>Student newspaper</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>A bit late i joined the schools newspaper and ranked up quickly with articles and proofleading.</p> <p>A bit late i joined the schools newspaper and ranked up quickly with articles and proofleading.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://passwort-sz.jimdofree.com/"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://passwort-sz.jimdofree.com/"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>UNIKAT</h4> <h4>UNIKAT</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p> My first club at University of Ilmenau: UNIKAT, the makerspace for students and scholars. Here i worked for nearly three years on 3d-printers, CNC-milling-machines and much more. Each semester we also made a workshop week and gave our knowledge to further students. I retired at the end of 2019 but am still visiting and sometimes working there.</p> <p> My first club at University of Ilmenau: UNIKAT, the makerspace for students and scholars. Here i worked for nearly three years on 3d-printers, CNC-milling-machines and much more. Each semester we also made a workshop week and gave our knowledge to further students. I retired at the end of 2019 but am still visiting and sometimes working there.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://www.tu-ilmenau.de/unikat"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://www.tu-ilmenau.de/unikat"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>Robocup Volunteer</h4> <h4>Robocup Volunteer</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>After school my university didn't have a robotics contest so i am currently volunteering as referee and helping hand for the organizers.</p> <p>After school my university didn't have a robotics contest so i am currently volunteering as referee and helping hand for the organizers.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://robocupgermanopen.de/de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://robocupgermanopen.de/de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4> Engineers without borders</h4> <h4> Engineers without borders</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>Who are we? Engineering students! What are we doing? Helping other people!<br />As some of us are planning and working on projects down in africa i am responsible for the repair cafe to keep things running.</p> <p>Who are we? Engineering students! What are we doing? Helping other people!<br />As some of us are planning and working on projects down in africa i am responsible for the repair cafe to keep things running.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://ingenieure-ohne-grenzen.org/de/ilmenau"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://ingenieure-ohne-grenzen.org/de/ilmenau"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>Python Intro</h4> <h4>Python Intro</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>I am programming for many years now and want to start making cheatsheets and introductions to several programming languages. Python wasn't my first language but i think is for most the easiest to begin with. Therefor i started this Project on Github.</p> <p>I am programming for many years now and want to start making cheatsheets and introductions to several programming languages. Python wasn't my first language but i think is for most the easiest to begin with. Therefor i started this Project on Github.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://github.com/wieerwill/Python-Intro"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://github.com/wieerwill/Python-Intro"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>BI Student Club</h4> <h4>BI Student Club</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>Mainly because of the music i joined this club on my campus. With good old (and new) metal and rock we got some of the hardest partys and best members you can imageine. After some time i am one of our head technicans. Currently i am responsible for our cultural programm and association communication.</p> <p>Mainly because of the music i joined this club on my campus. With good old (and new) metal and rock we got some of the hardest partys and best members you can imageine. After some time i am one of our head technicans. Currently i am responsible for our cultural programm and association communication.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="http://www.bi-club.de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="http://www.bi-club.de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4>Projectmanagement</h4> <h4>Projectmanagement</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p>Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate. This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.</p> <p>Working with a team you get to know that nobody has that much of a overview what tools you can use to work and participate. This bilingual sheet is a short overview of tools and programms to make your cooperations and projects easier.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://github.com/wieerwill/Project-Management"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://github.com/wieerwill/Project-Management"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4> Business card</h4> <h4> Business card</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p> You want to be seen and show people what you do? This page is an example of my business card project. Feel free to use it for your own. A description on how to get free webspace included.</p> <p> You want to be seen and show people what you do? This page is an example of my business card project. Feel free to use it for your own. A description on how to get free webspace included.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="https://github.com/wieerwill/wieerwill.github.io"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a> <a href="https://github.com/wieerwill/wieerwill.github.io"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
</div> </div>
</div> </div>
<hr /> <hr />
<div class="project row"> <div class="project row">
<div class="col-3"> <div class="col-12 col-md-3">
<h4> Discord Bot</h4> <h4> Discord Bot</h4>
</div> </div>
<div class="col-8"> <div class="col-12 col-md-8">
<p> With corona virus pandemia we shipped our weekly club meeting to discord. For management, fun and more interactivity we created a discord bot with several functions.</p> <p> With corona virus pandemia we shipped our weekly club meeting to discord. For management, fun and more interactivity we created a discord bot with several functions.</p>
</div> </div>
<div class="col-1"> <div class="col-12 col-md-1">
<a href="#">coming soon</a> <a href="#">coming soon</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="certifications container my-5 rounded"> <div class="certifications container my-5 pb-1 rounded">
<h2 class="m-2 text-center bg-info text-dark rounded">Certifications</h2> <h2 class="m-2 text-center bg-info text-dark rounded">Certifications</h2>
<div class="m-auto "> <div class="m-auto ">
<!--adv--> <!--adv-->
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/adv/Full Stack Web Development.jpg" class="cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/Full Stack Web Development.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Full Stack WebDev</div> <div class="overlay">Full Stack WebDev</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/adv/html5 champion.jpg" class="cert-img" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/html5 champion.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">HTML 5 Champion</div> <div class="overlay">HTML 5 Champion</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/adv/SQL BI Analysis Advanced.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis Advanced.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Advanced SQL Analytics</div> <div class="overlay">Advanced SQL Analytics</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/adv/SQL BI Analysis.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/adv/SQL BI Analysis.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">MySQl for Data Analysis</div> <div class="overlay">MySQl for Data Analysis</div>
</div> </div>
<!--web--> <!--web-->
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Basic HTML.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Basic HTML.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Basic HTML</div> <div class="overlay">Basic HTML</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/CakePhp.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/CakePhp.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">CakePhp</div> <div class="overlay">CakePhp</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Dynamic Web Forms with validation.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Dynamic Web Forms with validation.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Dynamic Web Forms with validation</div> <div class="overlay">Dynamic Web Forms with validation</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/GitHub Grundlagen.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/GitHub Grundlagen.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">GitHub Grundlagen</div> <div class="overlay">GitHub Grundlagen</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/HTML 5.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML 5.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">HTML 5</div> <div class="overlay">HTML 5</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/html boot camp.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/html boot camp.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">HTML Bootcamp</div> <div class="overlay">HTML Bootcamp</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/HTML Web Development Crash Course.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/HTML Web Development Crash Course.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Web Development Crash Course</div> <div class="overlay">Web Development Crash Course</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/html5 and css3.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/html5 and css3.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">HTML5 and CSS3</div> <div class="overlay">HTML5 and CSS3</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/InfiniteScroll AJAX MySQL API PHP jQuery.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/InfiniteScroll AJAX MySQL API PHP jQuery.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">InfiniteScroll AJAX</div> <div class="overlay">InfiniteScroll AJAX</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Landing Page Hacks.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Landing Page Hacks.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Landing Page Hacks</div> <div class="overlay">Landing Page Hacks</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Learn HTML5 and CSS3 By Coding Your First Website.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5 and CSS3 By Coding Your First Website.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">HTML5 and CSS3 by Coding</div> <div class="overlay">HTML5 and CSS3 by Coding</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Learn HTML5.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Learn HTML5.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Learn HTML5</div> <div class="overlay">Learn HTML5</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Make Ecommerce Website Front-End.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Make Ecommerce Website Front-End.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Make Ecommerce Website Front-End</div> <div class="overlay">Make Ecommerce Website Front-End</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/PHP&MySQL.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/PHP&MySQL.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">PHP&MySQL</div> <div class="overlay">PHP&MySQL</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/PSD Frontend.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/PSD Frontend.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">PSD Frontend</div> <div class="overlay">PSD Frontend</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Telegram Bot with Python.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Telegram Bot with Python.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Telegram Bot with Python</div> <div class="overlay">Telegram Bot with Python</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-01.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-01.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-01</div> <div class="overlay">XHTML-01</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-02.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-02.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-02</div> <div class="overlay">XHTML-02</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-03.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-03.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-03</div> <div class="overlay">XHTML-03</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-04.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-04.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-04</div> <div class="overlay">XHTML-04</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-05.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-05.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-05</div> <div class="overlay">XHTML-05</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-06.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-06.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-06</div> <div class="overlay">XHTML-06</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/XHTML-07.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/XHTML-07.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">XHTML-07</div> <div class="overlay">XHTML-07</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/web/Yii PHP Framework.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/web/Yii PHP Framework.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Yii PHP Framework</div> <div class="overlay">Yii PHP Framework</div>
</div> </div>
<!--other--> <!--other-->
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Amazon FBA.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Amazon FBA.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Amazon FBA</div> <div class="overlay">Amazon FBA</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/ebay dropshipping.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/ebay dropshipping.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">eBay Dropshipping</div> <div class="overlay">eBay Dropshipping</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Exel 2010 Productivity.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Exel 2010 Productivity.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Exel 2010 Productivity</div> <div class="overlay">Exel 2010 Productivity</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Godot Game Engine.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Godot Game Engine.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Godot Game Engine</div> <div class="overlay">Godot Game Engine</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Google Sheets.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Google Sheets.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Google Sheets</div> <div class="overlay">Google Sheets</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/GoogleDocs.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/GoogleDocs.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">GoogleDocs</div> <div class="overlay">GoogleDocs</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Grundlagen Vermögensverwaltung - Kapitalaufbau.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Grundlagen Vermögensverwaltung - Kapitalaufbau.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Grundlagen Vermögensverwaltung</div> <div class="overlay">Grundlagen Vermögensverwaltung</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Landschaftsfotografie.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Landschaftsfotografie.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Landschaftsfotografie</div> <div class="overlay">Landschaftsfotografie</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Microsoft Exel Pivot.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Microsoft Exel Pivot.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Microsoft Exel Pivot</div> <div class="overlay">Microsoft Exel Pivot</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/Startup & Business.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/Startup & Business.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Startup & Business</div> <div class="overlay">Startup & Business</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/other/VsCode Hacks.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/other/VsCode Hacks.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Visual Studio Code Hacks</div> <div class="overlay">Visual Studio Code Hacks</div>
</div> </div>
<!--robotic--> <!--robotic-->
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/robotic/Robocup_2014.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2014.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Robocup 2014</div> <div class="overlay">Robocup 2014</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/robotic/Robocup_2015.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2015.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Robocup 2015</div> <div class="overlay">Robocup 2015</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/robotic/Robocup_2016.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robocup_2016.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Robocup 2016</div> <div class="overlay">Robocup 2016</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/robotic/Robotik.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Robotik.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Robotik</div> <div class="overlay">Robotik</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/robotic/Seminar_Mechatronik.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/robotic/Seminar_Mechatronik.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Mechatronik Seminar</div> <div class="overlay">Mechatronik Seminar</div>
</div> </div>
<!--newspaper--> <!--newspaper-->
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/newspaper/JPK-146-München.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-146-München.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">146. Jugend Presse Kongress</div> <div class="overlay">146. Jugend Presse Kongress</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/newspaper/JPK-150-Münster.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/JPK-150-Münster.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">150. Jugend Presse Kongress</div> <div class="overlay">150. Jugend Presse Kongress</div>
</div> </div>
<div class="cert-container float-left"> <div class="cert-container float-left">
<img src="Zertifikate/newspaper/MultimediaWorkshop-Weimar.jpg" class="cert-img" id="img1" onclick="modalImg()"> <img src="icons/placeholder.gif" data-src="Zertifikate/newspaper/MultimediaWorkshop-Weimar.jpg" class="lazy cert-img" onclick="modalImg()">
<div class="overlay">Multimedia Workshop</div> <div class="overlay">Multimedia Workshop</div>
</div> </div>
@ -573,11 +574,14 @@
</main> </main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="index.js"></script> <script src="js/icons.js"></script>
<script src="js/cert.js"></script>
<script src="js/yall.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", yall);
</script>
</body> </body>
</html> </html>

14
js/cert.js Normal file
View File

@ -0,0 +1,14 @@
//Certification show
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImage1");
function modalImg() {
modal.style.display = "block";
modalImg.src = this.src;
}
// When the user clicks on <span> (x), close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
};

21
index.js → js/icons.js
View File

@ -24,24 +24,3 @@ $("#cad").hover(
$("#cad1").css("display", "block"); $("#cad1").css("display", "block");
$("#cad2").css("display", "none"); $("#cad2").css("display", "none");
}); });
//Certification show
var modal = document.getElementById("myModal");
var modalImg = document.getElementById("modalImage1");
//var img = document.getElementById("img1");
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
}
function modalImg() {
modal.style.display = "block";
modalImg.src = this.src;
}
// When the user clicks on <span> (x), close the modal
var span = document.getElementsByClassName("close")[0];
span.onclick = function () {
modal.style.display = "none";
}

0
typing-carousel.js → js/typing-carousel.js
View File

5
js/yall.min.js vendored Normal file
View File

@ -0,0 +1,5 @@
/*
* Thanks malchata for your work. Look at his repo: https://github.com/malchata/yall.js
*/
var yall = function () { "use strict"; return function (e) { var n = (e = e || {}).lazyClass || "lazy", t = e.lazyBackgroundClass || "lazy-bg", o = "idleLoadTimeout" in e ? e.idleLoadTimeout : 200, i = e.observeChanges || !1, r = e.events || {}, a = window, s = "requestIdleCallback", u = "IntersectionObserver", c = ["srcset", "src", "poster"], d = [], queryDOM = function (e, o) { return d.slice.call((o || document).querySelectorAll(e || "img." + n + ",video." + n + ",iframe." + n + ",." + t)) }, yallLoad = function (n) { var o = n.parentNode; "PICTURE" == o.nodeName && yallApplyFn(queryDOM("source", o), yallFlipDataAttrs), "VIDEO" == n.nodeName && yallApplyFn(queryDOM("source", n), yallFlipDataAttrs), yallFlipDataAttrs(n), n.autoplay && n.load(); var i = n.classList; i.contains(t) && (i.remove(t), i.add(e.lazyBackgroundLoaded || "lazy-bg-loaded")) }, yallBindEvents = function (e) { for (var n in r) e.addEventListener(n, r[n].listener || r[n], r[n].options || void 0) }, yallFlipDataAttrs = function (e) { var _loop = function (n) { c[n] in e.dataset && a.requestAnimationFrame((function () { e.setAttribute(c[n], e.dataset[c[n]]) })) }; for (var n in c) _loop(n) }, yallApplyFn = function (e, n) { for (var t = 0; t < e.length; t++)n instanceof a[u] ? n.observe(e[t]) : n(e[t]) }, yallIntersectionObserve = function (e) { if (e.isIntersecting || e.intersectionRatio) { var t = e.target; s in a && o ? a[s]((function () { yallLoad(t) }), { timeout: o }) : yallLoad(t), t.classList.remove(n), f.unobserve(t), (l = l.filter((function (e) { return e != t }))).length || i || f.disconnect() } }, yallMutationObserve = function (e) { l.indexOf(e) < 0 && (l.push(e), yallBindEvents(e), f.observe(e)) }, l = queryDOM(); if (/baidu|(?:google|bing|yandex|duckduck)bot/i.test(navigator.userAgent)) yallApplyFn(l, yallLoad); else if (u in a && u + "Entry" in a) { var f = new a[u]((function (e) { yallApplyFn(e, yallIntersectionObserve) }), { rootMargin: ("threshold" in e ? e.threshold : 200) + "px 0%" }); yallApplyFn(l, yallBindEvents), yallApplyFn(l, f), i && yallApplyFn(queryDOM(e.observeRootSelector || "body"), (function (n) { new MutationObserver((function () { yallApplyFn(queryDOM(), yallMutationObserve) })).observe(n, e.mutationObserverOptions || { childList: !0, subtree: !0 }) })) } } }();