From 4c644f4d454febd3127fca3e8c7ffd45f6342a46 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Thu, 19 Mar 2020 22:01:26 +0100
Subject: [PATCH] experience page

---
 css/experience.css | 70 ++++++++++++++++++++++++++++++++++------------
 index.html         | 69 ++++++++++++++++++++++++++-------------------
 2 files changed, 93 insertions(+), 46 deletions(-)

diff --git a/css/experience.css b/css/experience.css
index 29fc631..c532eb9 100644
--- a/css/experience.css
+++ b/css/experience.css
@@ -1,8 +1,11 @@
-#section3{
+#section3 {
     background-color: #53bf65;
 }
 
-.content > div {display: none; padding: 20px 25px 5px;}
+.content > div {
+    display: none;
+    padding: 20px 25px 5px;
+}
 
 #tab1:checked ~ .content #content1,
 #tab2:checked ~ .content #content2,
@@ -11,34 +14,65 @@
     display: block;
 }
 
-.tab{
+.tab {
     display: block;
     float: left;
     clear: left;
-    /*float: left;*/
-    margin-top: 10px;
-    width: 10%;
-    background-color: white;
-    left:0;
+    margin: 0px;
+    width: 14%;
+    left: 0;
     overflow: hidden;
-    /*border: 10px;*/
+
+    margin-right: 6mm;
+
+    border: 6mm solid hsla(0, 100%, 50%, 0);
+    padding-left: 2mm;
+    border-left-color: #357840;
+    transition: border-left-color 500ms;
+
+    border-bottom-right-radius: 5mm;
+    border-top-right-radius: 5mm;
 }
 
-.content{
+.tab:hover {
+    color: aqua;
+    background-color: #357840;
+    transition: background-color 500ms;
+}
+
+.ratiobtn:checked + .tab {
+    border-left-color: aqua;
+    transition: border-left-color 500ms;
+}
+
+.content {
     position: relative;
     float: left;
     width: 80%;
-    top: -140px;
+    top: -200px;
+    height: 260px;
+    background-color: #357840;
+    color: white;
+    border-radius: 5mm;;
 }
 
-#tab4{
-    float: left;
-}
-
-.ratiobtn{
+.ratiobtn {
     display: none;
 }
 
-#experiencecontentcontainer{
-    margin-top: 25px;
+#experiencecontentcontainer {
+    margin-top: 100px;
+}
+
+.experiencetitle{
+    font-size: x-large;
+}
+
+.companyname{
+    color: aqua;
+}
+
+.experienceworktext{
+    margin-top: 5mm;
+    font-size: large;
 }
diff --git a/index.html b/index.html
index edfc079..be0c032 100644
--- a/index.html
+++ b/index.html
@@ -126,52 +126,65 @@
 
                 <div class="content">
                     <div id="content1">
-                        <div>
-                            Engineer @Profactor
+                        <div class="experiencetitle">
+                            Software engineer <span class="companyname">@Profactor</span>
                         </div>
                         <div>
-                            research lab
+                            extramural research institute
                         </div>
                         <div>
                             07.2019 – 08.2019
                         </div>
-                        <p>
-                            Development of picture corrections for a surface inspection robot with the help of
-                            OpenCV.<br>
-                            außeruniversitäres Forschungsinstitut
-                            ▪ Programmieren von Bildkorrekturen für
-                            Oberflächeninspektionen mithilfe von OpenCV in C++
-                            Diplomarbeit – „Bildkorrektur für Oberflächeninspektion“
-                            ● Entwicklung einer C++ Bibliothek zur Entzerrung
-                            eines von einem Roboterarm aufgenommenen
-                            Oberflächenbildes
-                            ● Bearbeitung mit Hilfe von OpenCV und überwiegend
-                            der Affinen-Transformation
+                        <p class="experienceworktext">
+                            Diploma thesis - "Image correction for surface inspection": Development of picture corrections for a surface inspection robot in C++.
+                            A C++ library was created for equalization of one of the parts picked up by a robot arm.
+                            Surface picture Processing using OpenCV and especially the affine transformation.
                         </p>
                     </div>
 
                     <div id="content2">
-                        <p>
-                            todo
-                            Automatisierungsprojekte
-                            ▪ Aufbau einer Dichtprüfanlage für BMW Werk Steyr in
-                            Ellwangen/Deutschland
+                        <div class="experiencetitle">
+                            Electrician <span class="companyname">@SPS Technik</span>
+                        </div>
+                        <div>
+                            automation technology
+                        </div>
+                        <div>
+                            08.2017 – 09.2017
+                        </div>
+                        <p class="experienceworktext">
+                            Electronic setup of a leak test system in Ellwangen in Germany for the company BMW Steyr.
                         </p>
                     </div>
 
                     <div id="content3">
-                        <p>
-                            todo außeruniversitäres Forschungsinstitut
-                            ▪ Aufbauen und Programmieren eines
-                            Oberflächeninspektions-Roboters
+                        <div class="experiencetitle">
+                            Software and electronics engineer <span class="companyname">@Profactor</span>
+                        </div>
+                        <div>
+                            extramural research institute
+                        </div>
+                        <div>
+                            07.2017 – 08.2017
+                        </div>
+                        <p class="experienceworktext">
+                            Design and programming of a surface inspection robot
                         </p>
                     </div>
 
                     <div id="content4">
-                        <p>
-                            todo Heizung-Lüftung-Klima-Sanitär
-                            ▪ Mithilfe bei Ölbrenner- und Gasthermenservice
-                            ▪ Mithilfe bei Badsanierung und -installation
+                        <div class="experiencetitle">
+                            plumber & maintenance worker <span class="companyname">@Klausriegler</span>
+                        </div>
+                        <div>
+                            Heating-Ventilation-Climate-Sanitary
+                        </div>
+                        <div>
+                            07.2016 – 08.2016
+                        </div>
+                        <p class="experienceworktext">
+                            Assistance with oil burner and gas heater service.
+                            Furthermore, assistance with bathroom renovation and installation.
                         </p>
                     </div>
                 </div>