refreshed styling; better overview; projects list and certificates;

index.css

@@ -1,96 +1,176 @@
 body {
-    font-size:14px;
-    font-family:'Merriweather', serif;
+    font-size: 14px;
+    font-family: 'Merriweather', serif;
     line-height: 1.8;
     color: #d9d9d9;
-    background-color:#ffffff;
-  }
+    background-color: #ffffff;
+}
 
 h1 {
     font-size: 35px;
     text-transform: uppercase;
-    color:#b3b3b3;
+    color: #b3b3b3;
     font-weight: 600;
-  }
+}
 
 a {
-    color:#cccccc;
+    color: #cccccc;
     text-decoration: none;
 }
 
-.clear_top{
+.clear_top {
     font-size: 40px;
-    color:#ffffff;
+    color: #ffffff;
 }
 
-.card-img{
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top:20%;
-  max-height:80%;
-  max-width:80%;
-  border-radius: 20%;
-  border-style: 
-}
-.card-img:hover {
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
+.card-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20%;
+    max-height: 80%;
+    max-width: 80%;
+    border-radius: 20%;
+    border-style:
 }
 
-.list-inline-item{
-  size:15px;
-  color:#00004d;
+    .card-img:hover {
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+    }
+
+.list-inline-item {
+    size: 15px;
+    color: #00004d;
 }
 
-.skill{
-  height:45px;
+.skill {
+    height: 45px;
 }
 
-.show_first{display:block;}
-.show_hover{display:none;}
-
-.terminal{
-  padding-top: 5px;
-  padding-bottom: 10px;
-  background-color: black;
+.show_first {
+    display: block;
 }
 
-.window-top{
-  color: black;
-  background-color: #b0b7b2;
-  border: 1px solid #353535;
+.show_hover {
+    display: none;
 }
 
-.terminal a, .terminal p{
-  position: relative;
-  color: #00ff00;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-}
-.terminal .cursor{
-  position: relative;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  background: black;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  border-left: .5em solid;
 
-  -webkit-animation: typing 12s steps(20, end) infinite,
-        blinking 1s step-end infinite;
-  animation: typing 12s steps(20, end) infinite,
-        blinking 1s step-end infinite;
+.project-folder {
+    background-color: #8cf5f5;
+    color: #1e3332;
+    border: 1px solid grey;
 }
 
-@-webkit-keyframes blinking {
-    from, to { border-color: transparent; }
-    50% { border-color: green; }
+.project-head {
+    padding: 15px;
+    background-color: #548f8f;
 }
 
-@keyframes blinking {
-    from, to { border-color: transparent; }
-    50% { border-color: green; }
+.project a {
+    color: black;
 }
+
+.certifications {
+    background-color: #253ab7;
+    color: #7599c4;
+}
+
+.cert-img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.overlay {
+    position: absolute;
+    bottom: 0;
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.5);
+    color: #f1f1f1;
+    width: 100%;
+    transition: .5s ease;
+    opacity: 0;
+    color: white;
+    font-size: 15px;
+    padding: 15px;
+    text-align: center;
+}
+
+.cert-container {
+    position: relative;
+    width: 50%;
+    max-width: 200px;
+    margin: 5px;
+}
+.cert-container:hover .overlay {
+    opacity: 1;
+}
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (image) */
+.modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+}
+/* Add Animation */
+.modal-content, #caption {
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@-webkit-keyframes zoom {
+    from {
+        -webkit-transform: scale(0)
+    }
+
+    to {
+        -webkit-transform: scale(1)
+    }
+}
+
+@keyframes zoom {
+    from {
+        transform: scale(0)
+    }
+
+    to {
+        transform: scale(1)
+    }
+}
+
+/* The Close Button */
+.close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+    .close:hover,
+    .close:focus {
+        color: #bbb;
+        text-decoration: none;
+        cursor: pointer;
+    }

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <!--[if lt IE 7 ]><html class="ie ie6 no-js" lang="de"> <![endif]-->
 <!--[if IE 7 ]><html class="ie ie7 no-js" lang="de"> <![endif]-->
 <!--[if IE 8 ]><html class="ie ie8 no-js" lang="de"> <![endif]-->
@@ -6,213 +6,578 @@
 <html lang="de">
 <head>
 
-	<!--Metadaten-->
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="title" content="Visitenkarte Robert Jeutter">
-  <meta name="author" content="Robert Jeutter">
-  <meta name="date" content="18-03-2019">
-  <meta property="og:locale" content="de_GER" />
-  <meta name="keywords" content="Webdesign, Programming"> 
-  <meta name="description" content="Visitenkarte von Robert Jeutter">
+    <!--Metadaten-->
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="title" content="Visitenkarte Robert Jeutter">
+    <meta name="author" content="Robert Jeutter">
+    <meta name="date" content="18-03-2019">
+    <meta property="og:locale" content="de_GER" />
+    <meta name="keywords" content="Webdesign, Programming">
+    <meta name="description" content="Visitenkarte von Robert Jeutter">
 
-<!--Website Inhalt-->
-  <title>Robert Jeutter - Student, Freelancer, Ingenieur</title>
+    <!--Website Inhalt-->
+    <title>Robert Jeutter - Student, Entrepreneur, Ingenieur</title>
 
 
- <!-- FontAwesome --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
- <!-- CSS -->
-  	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <link href="https://fonts.googleapis.com/css?family=Merriweather|Roboto" rel="stylesheet"> 
-  	<link href="index.css" rel="stylesheet">
- <!-- Allow IE to render HTML5 -->
-	<!--[if lt IE 9]>
-		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-	<![endif]-->
-    <script src="typing-carousel.js" ></script>
- <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-136461851-1"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-    gtag('js', new Date());
-    gtag('config', 'UA-136461851-1');
-  </script>
+    <!-- FontAwesome -->
+    <script src="https://kit.fontawesome.com/000c050ca2.js" crossorigin="anonymous"></script>
+    <!-- CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
+    <link href="index.css" rel="stylesheet">
+    <!-- Allow IE to render HTML5 -->
+    <!--[if lt IE 9]>
+        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <script src="typing-carousel.js"></script>
 </head>
-<body>
+<main>
+    <header>
+    <noscript class="jumbotron text-center alert alert-danger" role="alert">Bitte JavaScript für die optimale Darstellung der Webseite aktivieren<br> Please activate JavaScript for best performance</noscript>
 
-<noscript class="jumbotron text-center alert alert-danger" role="alert">Bitte JavaScript für die optimale Darstellung der Webseite aktivieren<br> Please activate JavaScript for best view</noscript>
+    <div class="clear_top">Wish you a lucky Day</div>
+    </header>
+    <main>
+    <div class="card container m-auto p-auto bg-info text-white" style="border-radius:20px;">
+        <div class="card-header">
+            <h1 class="my-3 card-title text-center">
+                <span style="color:#ffffff">R</span>obert
+                <span style="color:#ffffff">J</span>eutter
+            </h1>
+        </div>
 
-<div class="clear_top">Wish you a lucky Day</div>
+        <div class="card-body row no-gutters">
+            <div class="col-md-3">
+                <div class="clear"></div>
+                <img src="pic.png" class="card-img" alt="ProfilBild">
+            </div>
+            <div class="col-md-5">
+                <p class="mb-5 lead text-center">Inventor &#183; Entrepreneur &#183; Student</p>
+                <p class="card-text">
+                    Welcome to my Card,<br>
+                    currently I am studying at <i><a href="http://www.tu-ilmenau.de">Technical University of Ilmenau</a></i> in the fields of Computer Sience and Biomechatronics.<br>
+                    In addition i am an active member of the <a href="https://www.bi-club.de">student club</a>, <a href="https://ingenieure-ohne-grenzen.org/">Engineers without Borders</a> and building up my own business <a href="https://www.northscorp.de">NorthScorp</a>.<br>
+                    My Hobbies include Programming, building Robots ever since my <a href="https://www.robocup.org/">RoboCup</a> Qualifications and electromechanical Machines.
+                </p>
+            </div>
+            <div class="col-md-4">
+                <h4 class="mt-5 mb-3 text-center">Skills</h4>
+                <div class="text-center" id="pro">
+                    <h5 class="imgcent text-center">Progamming <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
+                    <div class="show_first" id="pro1">
+                        <p>
+                            <span class="txt-rotate" data-period="2000"
+                                  data-rotate='[ "C", "C#", "C++", "Python", "Java" ]'></span>
+                        </p>
+                    </div>
+                    <div class="show_hover text-center m-auto" id="pro2">
+                        <img class="skill mx-1" src="icons/code_c.png" alt="C">
+                        <img class="skill mx-1" src="icons/code_csharp.png" alt="C#">
+                        <img class="skill mx-1" src="icons/c++.png" alt="C++">
+                        <img class="skill mx-1" src="icons/Python.png" alt="Phyton">
+                        <img class="skill mx-1" src="icons/java.png" alt="Java">
+                    </div>
+                </div>
+                <hr>
 
-<div class="card m-auto p-auto bg-info text-white" style="width: 80%; border-radius:20px;">
-  <div class="row no-gutters">
-    <div class="col-md-3">
-      <div class="clear"></div> 
-      <img src="pic.png" class="card-img" alt="ProfilBild">
+                <div class="text-center" id="full">
+                    <h5 class="imgcent text-center">FullStack WebDev <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
+                    <div class="show_first" id="full1">
+                        <p>
+                            <span class="txt-rotate" data-period="2000"
+                                  data-rotate='[ "HTML5", "CSS", "JavaScript", "PHP", "NodeJS", "SQL", "MongoDB" ]'></span>
+                        </p>
+                    </div>
+                    <div class="show_hover text-center m-auto" id="full2">
+                        <img class="skill mx-1" src="icons/html.png" alt="HTML5">
+                        <img class="skill mx-1" src="icons/css.png" alt="CSS">
+                        <img class="skill mx-1" src="icons/javascript.png" alt="JavaScript">
+                        <img class="skill mx-1" src="icons/php.png" alt="PHP">
+                        <img class="skill mx-1" src="icons/nodejs.png" alt="NodeJS">
+                        <img class="skill mx-1" src="icons/sql.png" alt="SQL">
+                        <img class="skill mx-1" src="icons/mongodb.png" alt="MongoDB">
+                    </div>
+                </div>
+                <hr>
+
+                <div class="text-center" id="cad">
+                    <h5 class="imgcent text-center">CAD, Graphic & Design <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
+                    <div class="show_first" id="cad1">
+                        <p>
+                            <span class="txt-rotate" data-period="2000"
+                                  data-rotate='[ "Inventor", "OpenSCAD", "Photoshop", "Gimp", "Bootstrap" ]'></span>
+                        </p>
+                    </div>
+                    <div class="show_hover text-center m-auto" id="cad2">
+                        <img class="skill mx-1" src="icons/Inventor.png" alt="Inventor">
+                        <img class="skill mx-1" src="icons/openscad.png" alt="OpenSCAD">
+                        <img class="skill mx-1" src="icons/photoshop.png" alt="Photoshop">
+                        <img class="skill mx-1" src="icons/gimp.png" alt="Gimp">
+                        <img class="skill mx-1" src="icons/bootstrap.png" alt="Bootstrap">
+                    </div>
+                </div>
+                <hr>
+
+            </div>
+        </div>
+
+        <div class="card-footer container-fluid text-center">
+            <ul class="list-inline-item">
+                <li class="list-inline-item">
+
+                    <a href="mailto:jeutter@northscorp.de" target="_blank">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-circle fa-stack-2x"></i>
+                            <i class="fas fa-envelope fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="http://www.github.com/wieerwill">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-square fa-stack-2x"></i>
+                            <i class="fab fa-github fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="http://www.northscorp.de" target="_blank">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-brain fa-stack-2x"></i>
+                            <i class="fas fa-globe fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="http://www.tu-ilmenau.de" target="_blank">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-certificate fa-stack-2x"></i>
+                            <i class="fas fa-graduation-cap fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="https://www.udemy.com/user/robert-jeutter/" target="_blank">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-bookmark fa-stack-2x"></i>
+                            <i class="fas fa-university fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+                </li>
+                <li class="list-inline-item">
+                    <a href="https://www.freecodecamp.org/robert-jeutter" target="_blank">
+                        <span class="fa-stack fa-2x">
+                            <i class="fas fa-cloud fa-stack-2x"></i>
+                            <i class="fas fa-code-branch fa-stack-1x fa-inverse"></i>
+                        </span>
+                    </a>
+
+                </li>
+            </ul>
+        </div>
     </div>
-    <div class="col-md-5">
-      <div class="card-body">
-        <h1 class="my-3 card-title text-center">
-          <span style="color:#ffffff">R</span>obert 
-          <span style="color:#ffffff">J</span>eutter</h1>
 
-        <p class="mb-5 lead text-center">Inventor &#183; Freelancer &#183; Student</p>
-        <p class="card-text">Welcome to my Card,<br>
-          currently I am studying at <i><a href="http://www.tu-ilmenau.de">Technical University of Ilmenau</a></i> in the fields of Mechatronic and Biomechatronics.<br>
-          In addition i am an active member of the <a href="https://www.bi-club.de">student club</a>, <a href="https://ingenieure-ohne-grenzen.org/">Engineers without Borders</a> and a studential Makerspace <a href="http://www.unikat-ilmenau.de">UNIKAT</a>.<br>
-          My Hobbies include Programming, building Robots (ever since my <a href="https://www.robocup.org/">RoboCup</a> Qualifications) and Machines.
-        </p>
-
-        <div class="m-auto text-center">
-          <ul class="list-inline-item">
-            <li class="list-inline-item">
-                <a href="mailto:jeutter@northscorp.de" target="_blank">
-                <span class="fa-stack fa-lg"><i class="fas fa-envelope"></i></span></a>
-            </li>
-            <li class="list-inline-item">
-              <a href="http://www.github.com/wieerwill">
-              <span class="fa-stack fa-lg"><i class="fab fa-github"></i></span></a>
-            </li>
-            <li class="list-inline-item">
-                <a href="http://www.northscorp.de" target="_blank">
-                <span class="fa-stack fa-lg"><i class="fas fa-globe"></i></span></a>
-            </li>
-            <li class="list-inline-item">
-                <a href="http://www.tu-ilmenau.de/unikat" target="_blank">
-                <span class="fa-stack fa-lg"><i class="fas fa-graduation-cap"></i></span></a>
-            </li>
-            <li class="list-inline-item">
-                <a href="https://www.udemy.com/user/robert-jeutter/" target="_blank">
-                <span class="fa-stack fa-lg"><i class="fas fa-university"></i></span></a>
-            </li>
-          </ul>
+    <div class="project-folder container mt-5 pt-1 rounded">
+        <div class="project-head rounded container-fluid">
+            <h2>
+                <i class="fas fa-cogs"> </i>
+                My Projects and Works
+            </h2>
+        </div>
+        <div class="project-body container-fluid py-2">
+            <div class="project row">
+                <div class="col-3">
+                    <h4>RoboCup participants</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="https://robocupgermanopen.de/de/junior/soccer"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>Student newspaper</h4>
+                </div>
+                <div class="col-8">
+                    <p>A bit late i joined the schools newspaper and ranked up quickly with articles and proofleading.</p>
+                </div>
+                <div class="col-1">
+                    <a href="https://passwort-sz.jimdofree.com/"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>UNIKAT</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="https://www.tu-ilmenau.de/unikat"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>Robocup Volunteer</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="https://robocupgermanopen.de/de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4> Engineers without borders</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <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>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>Python Intro</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="https://github.com/wieerwill/Python-Intro"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>BI Student Club</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="http://www.bi-club.de"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4>Projectmanagement</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="https://github.com/wieerwill/Project-Management"><i class="fas fa-sign-in-alt fa-2x" style="color:Tomato"></i></a>
+                </div>
+            </div>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4> Business card</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <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>
+            <hr />
+
+            <div class="project row">
+                <div class="col-3">
+                    <h4> Discord Bot</h4>
+                </div>
+                <div class="col-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>
+                </div>
+                <div class="col-1">
+                    <a href="#">coming soon</a>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-    <div class="col-md-4">
-      <h4 class="mt-5 mb-3 text-center">Skills</h4>
-      <div class="text-center" id="pro">
-        <h5 class="imgcent text-center">Progamming <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
-        <div class="show_first" id="pro1">
-          <p><span class="txt-rotate" data-period="2000" 
-  data-rotate='[ "C", "C#", "C++", "Python", "Java" ]'></span></p>
-        </div>
-        <div class="show_hover text-center m-auto" id="pro2">
-            <img class="skill mx-1" src="icons/code_c.png" alt="C">
-            <img class="skill mx-1" src="icons/code_csharp.png" alt="C#">
-            <img class="skill mx-1" src="icons/c++.png" alt="C++">
-            <img class="skill mx-1" src="icons/Python.png" alt="Phyton">
-            <img class="skill mx-1" src="icons/java.png" alt="Java">
-        </div>  
-      </div>
-      <hr>
 
-      <div class="text-center" id="full">
-        <h5 class="imgcent text-center">FullStack WebDev <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
-        <div class="show_first" id="full1">
-          <p><span class="txt-rotate" data-period="2000" 
-  data-rotate='[ "HTML5", "CSS", "JavaScript", "PHP", "NodeJS", "SQL", "MongoDB" ]'></span></p>
-        </div>
-        <div class="show_hover text-center m-auto" id="full2">
-            <img class="skill mx-1" src="icons/html.png" alt="HTML5">
-            <img class="skill mx-1" src="icons/css.png" alt="CSS">
-            <img class="skill mx-1" src="icons/javascript.png" alt="JavaScript">
-            <img class="skill mx-1" src="icons/php.png" alt="PHP">
-            <img class="skill mx-1" src="icons/nodejs.png" alt="NodeJS">
-            <img class="skill mx-1" src="icons/sql.png" alt="SQL">
-            <img class="skill mx-1" src="icons/mongodb.png" alt="MongoDB">
-        </div>
-      </div>
-      <hr>
+    <div class="certifications container my-5 rounded">
+        <h2 class="m-2 text-center bg-info text-dark rounded">Certifications</h2>
+        <div class="m-auto ">
+            <!--adv-->
+            <div class="cert-container float-left">
+                <img src="Zertifikate/adv/Full Stack Web Development.jpg" class="cert-img" onclick="modalImg()">
+                <div class="overlay">Full Stack WebDev</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/adv/html5 champion.jpg" class="cert-img" onclick="modalImg()">
+                <div class="overlay">HTML 5 Champion</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/adv/SQL BI Analysis Advanced.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Advanced SQL Analytics</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/adv/SQL BI Analysis.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">MySQl for Data Analysis</div>
+            </div>
+
+            <!--web-->
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Basic HTML.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Basic HTML</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/CakePhp.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">CakePhp</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Dynamic Web Forms with validation.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Dynamic Web Forms with validation</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/GitHub Grundlagen.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">GitHub Grundlagen</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/HTML 5.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">HTML 5</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/html boot camp.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">HTML Bootcamp</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/HTML Web Development Crash Course.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Web Development Crash Course</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/html5 and css3.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">HTML5 and CSS3</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/InfiniteScroll AJAX MySQL API PHP jQuery.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">InfiniteScroll AJAX</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Landing Page Hacks.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Landing Page Hacks</div>
+            </div>
+
+            <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()">
+                <div class="overlay">HTML5 and CSS3 by Coding</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Learn HTML5.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Learn HTML5</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Make Ecommerce Website Front-End.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Make Ecommerce Website Front-End</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/PHP&MySQL.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">PHP&MySQL</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/PSD Frontend.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">PSD Frontend</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Telegram Bot with Python.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Telegram Bot with Python</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-01.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-01</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-02.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-02</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-03.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-03</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-04.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-04</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-05.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-05</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-06.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-06</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/XHTML-07.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">XHTML-07</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/web/Yii PHP Framework.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Yii PHP Framework</div>
+            </div>
+
+
+            <!--other-->
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Amazon FBA.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Amazon FBA</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/ebay dropshipping.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">eBay Dropshipping</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Exel 2010 Productivity.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Exel 2010 Productivity</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Godot Game Engine.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Godot Game Engine</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Google Sheets.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Google Sheets</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/GoogleDocs.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">GoogleDocs</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Grundlagen Vermögensverwaltung - Kapitalaufbau.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Grundlagen Vermögensverwaltung</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Landschaftsfotografie.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Landschaftsfotografie</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Microsoft Exel Pivot.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Microsoft Exel Pivot</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/Startup & Business.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Startup & Business</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/other/VsCode Hacks.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Visual Studio Code Hacks</div>
+            </div>
+
+            <!--robotic-->
+            <div class="cert-container float-left">
+                <img src="Zertifikate/robotic/Robocup_2014.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Robocup 2014</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/robotic/Robocup_2015.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Robocup 2015</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/robotic/Robocup_2016.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Robocup 2016</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/robotic/Robotik.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Robotik</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/robotic/Seminar_Mechatronik.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Mechatronik Seminar</div>
+            </div>
+
+
+            <!--newspaper-->
+            <div class="cert-container float-left">
+                <img src="Zertifikate/newspaper/JPK-146-München.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">146. Jugend Presse Kongress</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/newspaper/JPK-150-Münster.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">150. Jugend Presse Kongress</div>
+            </div>
+
+            <div class="cert-container float-left">
+                <img src="Zertifikate/newspaper/MultimediaWorkshop-Weimar.jpg" class="cert-img" id="img1" onclick="modalImg()">
+                <div class="overlay">Multimedia Workshop</div>
+            </div>
 
-      <div class="text-center" id="cad">
-        <h5 class="imgcent text-center">CAD, Graphic & Design <i class="text-muted fas fa-search-plus fa-xs"></i></h5>
-        <div class="show_first" id="cad1">
-          <p><span class="txt-rotate" data-period="2000" 
-  data-rotate='[ "Inventor", "OpenSCAD", "Photoshop", "Gimp", "Bootstrap" ]'></span></p>
         </div>
-        <div class="show_hover text-center m-auto" id="cad2">
-            <img class="skill mx-1" src="icons/Inventor.png" alt="Inventor">
-            <img class="skill mx-1" src="icons/openscad.png" alt="OpenSCAD">
-            <img class="skill mx-1" src="icons/photoshop.png" alt="Photoshop">
-            <img class="skill mx-1" src="icons/gimp.png" alt="Gimp">
-            <img class="skill mx-1" src="icons/bootstrap.png" alt="Bootstrap">
-        </div>
-      </div>
-      <hr>
 
     </div>
-  </div>
-</div>
+    <div id="myModal" class="modal">
+        <span class="close">&times;</span>
+        <img class="modal-content" id="modalImage1">
+    </div>
 
-<div class="clear_top">I like your interest in my Site, write me that you found that ;)</div>
+    </main>
     
-<div class="container-fluid row justify-content-around">
-  <div class="col-3 p-1 m-2 bg-secondary text-white">
-    <h3>Long Ago</h3>
-    <ul>
-      <li><small>2008 - 2016</small> higher education entrance qualification</li>
-      <li><small>2009 - 2016</small> member of Robotics Workgroup 'ARA'</li>
-      <li><small>2009 - 2016</small> Robotics and Robocup Scholar Challenges, championships in Germany and Europe</li>
-      <li><small>2012 - 2014</small> autonomous tracked vehicle for outdoor excursions</li>
-      <li><small>2014 - 2016</small> Coilgun with 16 Stages</li>
-    </ul>
-  </div>
-  <div class="col-3 p-1 m-2 bg-info text-white">
-    <h3>Recently</h3>
-    <ul>
-      <li><small>2016 - 2019</small> studying Mechatronics and Biomechatronics at TU Ilmenau</li>
-      <li><small>2016 - 2019</small> <a href="http://www.unikat-ilmenau.de/">UNIKAT</a> Member, responsible for 3DPrinters, CNC-Milling-Machine, Power of the Keys</li>
-      <li><small>2018 - 2019</small> WebDev Bootcamp Refactoring</li>
-    </ul>
-  </div>
-  <div class="col-4 p-1 m-2 bg-primary text-white">
-    <h3>Just Now</h3>
-    <ul>
-      <li><small>since 2017</small> <a href="https://ingenieure-ohne-grenzen.org/">'Engineers without Borders'</a> Member, Executive Committee, Repair-Workshops-Organisation</li>
-      <li><small>since 2018</small> <a href="https://www.bi-club.de/">Student Club</a> Member, disc jockey, doorman, cultural advisor</li>
-      <li><small>since 2019</small><a href="https://github.com/wieerwill/Python-Intro">Python Introduction and Cheatsheet</a></li>
-      <li><small>since 2019</small> studying Computer Sience at TU Ilmenau</li>
-    </ul>
-  </div>
-</div>
 
-<!--
-<div class="container-fluid window-top">Terminal</div>
-<div class="container-fluid terminal" id="start"><p>
-	Rendering finished...<br>
-	Welcome to my Terminal-Shell<br>
-</p></div>
 
-<div class="container-fluid terminal" id="cv"><p>
-	>_CV<br>
-    2008 - 2016: higher education entrance qualification<br>
-    2009 - 2016: member of Robotics Workgroup 'ARA'<br>
-    2016 - today: <a href="http://www.tu-ilmenau.de">TU Ilmenau</a> studying<br>
-    2016 - today: <a href="http://www.unikat-ilmenau.de/">UNIKAT</a> Member, responsible for 3DPrinters, CNC-Milling-Machine, Power of the Keys<br>
-    2017 - today: <a href="https://ingenieure-ohne-grenzen.org/">'Engineers without Borders'</a> Member, Executive Committee, Repair-Workshops-Organisation<br>
-    2018 - today: <a href="https://www.bi-club.de/">Student Club</a> Member, disc jockey, doorman, supervisor<br>
-</p></div>
-
-<div class="container-fluid terminal" id="projects"><p>
-	>_Projects<br>
-    2009 - 2016: Robotics and Robocup Scholar Challenges, championships in Germany and Europe<br>
-	2012 - 2014: autonomous tracked vehicle for outdoor excursions <br>
-	2014 - 2016: Coilgun with 16 Stages<br>
-	2018 - 2019: <a href="https://github.com/wieerwill/webdevbootcamp">WebDev Bootcamp Refactoring</a><br>
-    2019 - today: <a href="http://unikat.rolex-ing.de">UNIKAT Website</a> redesign and refactoring<br>
-    2019 - today: <a href="https://github.com/wieerwill/Python-Intro">Python Introduction and Cheatsheet</a><br>
-</p></div>
-
-<div class="container-fluid terminal" id="cursor">
-	<p>>_<span class="cursor"></span></p>
-</div>-->
-
-<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://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="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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -24,3 +24,24 @@ $("#cad").hover(
   $("#cad1").css("display", "block");
   $("#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";
+}