Merge branch 'master' into 'projectstile'

merge master into projects

See merge request lukas/personalwebsite!1

css/about.css

@@ -1,4 +1,14 @@
-/* About Me*/
+/*!
+ * about.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
+#section2 {
+    background-color: #deebff;
+}
+
 #aboutmeText {
     width: 100%;
 }
@@ -22,6 +32,33 @@
     height: 100%;
 }
 
+.aboutcontainer a {
+    text-decoration: none;
+}
+
+#downloadcvbtn {
+    margin-top: 15%;
+
+    width: 300px;
+    padding: 10px;
+    background-color: #7a96c2;
+    color: black;
+    border-radius: 5mm;
+    font-size: larger;
+    border-width: 1mm;
+    border-color: #194378;
+    border-style: solid;
+
+    transition: background-color 500ms;
+}
+
+#downloadcvbtn:hover {
+    /*background-color: #facf4d;*/
+    color: white;
+    background-color: #194378;
+    transition: all 500ms;
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
     #aboutPic:hover {
@@ -49,6 +86,7 @@
 
     #section2 {
         height: 130%;
+        min-height: 860px;
     }
 
     #aboutPic {

css/contact.css

@@ -0,0 +1,57 @@
+/*!
+ * contact.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
+#section5 {
+    background-color: #7a96c2;
+}
+
+.personalcontacts {
+    margin-top: 60px;
+}
+
+.personalcontacts a {
+    text-decoration: none;
+}
+
+#githubsign {
+    margin-top: 30px;
+}
+
+#emailsign {
+
+}
+
+#gitlabsign {
+    margin-top: 30px;
+    position: relative;
+    left: -6px;
+}
+
+.contactsign {
+    width: 400px;
+    padding: 10px;
+    border-radius: 5mm;
+    font-size: larger;
+    color: black;
+}
+
+.contactsign:hover {
+    color: white;
+    background-color: #194378;
+    transition: background-color 500ms;
+}
+
+#section5 {
+    height: 50%;
+}
+
+/* Screen smaller than 600px -- general small width screens */
+@media screen and (max-width: 1200px) {
+    /*#section5 {*/
+    /*    height: 100%;*/
+    /*}*/
+}

css/experience.css

@@ -1,5 +1,13 @@
+/*!
+ * experience.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
 #section3 {
-    background-color: #53bf65;
+    background-color: #001631;
+    color: white;
 }
 
 .content > div {
@@ -27,7 +35,7 @@
 
     border: 6mm solid hsla(0, 100%, 50%, 0);
     padding-left: 2mm;
-    border-left-color: #357840;
+    border-left-color: #194378;
     transition: border-left-color 500ms;
 
     border-bottom-right-radius: 5mm;
@@ -35,9 +43,10 @@
 }
 
 .tab:hover {
-    color: aqua;
+    color: #74f9d4;
-    background-color: #357840;
+    background-color: #194378;
     transition: background-color 500ms;
+    cursor: pointer;
 }
 
 .ratiobtn:checked + .tab {
@@ -51,9 +60,9 @@
     width: 80%;
     top: -200px;
     height: 260px;
-    background-color: #357840;
+    background-color: #194378;
     color: white;
-    border-radius: 5mm;;
+    border-radius: 5mm;
 }
 
 .ratiobtn {
@@ -64,15 +73,59 @@
     margin-top: 100px;
 }
 
-.experiencetitle{
+.experiencetitle {
     font-size: x-large;
 }
 
-.companyname{
+.companyname {
-    color: aqua;
+    color: #74f9d4;
 }
 
-.experienceworktext{
+.experienceworktext {
     margin-top: 5mm;
     font-size: large;
 }
+
+/* Screen smaller than 600px -- general small width screens */
+@media screen and (max-width: 1200px) {
+    #section3 {
+        height: 100%;
+        min-height: 700px;
+    }
+
+    .tab {
+        display: inline;
+        width: auto;
+        /*float: left;*/
+        margin: 2px;
+        border: 0.5mm solid hsla(0, 100%, 50%, 0);
+        padding: 2px 2px 2px 0;
+        clear: none;
+        margin-bottom: 20px;
+    }
+
+    #tab1 + .tab {
+        margin-left: 15px;
+    }
+
+    #tab4 + .tab {
+        float: none;
+        display: block;
+    }
+
+    .content {
+        position: static;
+        display: block;
+        float: none;
+        width: auto;
+        height: 350px;
+    }
+
+    .ratiobtn:checked + .tab {
+        color: aqua;
+        background-color: #234177;
+        transition: border-left-color 500ms;
+    }
+
+}
+

css/general.css

@@ -1,18 +1,32 @@
+/*!
+ * general.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
 body, html, #maincontent {
     height: 100%;
     scroll-behavior: smooth;
+    min-width: fit-content;
     /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
 }
 
+h1{
+    text-transform: uppercase;
+    font-family:  'Open Sans', arial, sans-serif;
+    font-weight: bold;
+}
+
 /* general definition of a tile */
 .tile {
     height: 80%;
     padding-top: 70px;
     padding-bottom: 70px;
-    min-height: 530px;
+    min-height: 570px;
 }
 
-#backtotopbutton{
+#backtotopbutton {
     position: fixed;
     bottom: 0;
     right: 0;
@@ -21,7 +35,7 @@ body, html, #maincontent {
 
     margin-bottom: 40px;
     margin-right: 60px;
-    background-color: #311E25;
+    background-color: #194378;
     opacity: 0.5;
     transition: opacity 500ms;
     color: white;
@@ -30,7 +44,7 @@ body, html, #maincontent {
     text-align: center;
 }
 
-#backtotopbutton:hover{
+#backtotopbutton:hover {
     opacity: 1;
     transition: opacity 500ms;
 }
@@ -51,14 +65,10 @@ body, html, #maincontent {
 @media screen and (max-width: 1200px) {
     /*background color of collapsed navbar*/
     .navbar-nav {
-        background: #311E25;
+        background: #001631;
     }
 
-    .tile {
+    #backtotopbutton {
-        min-height: 300px;
-    }
-
-    #backtotopbutton{
         display: none; /* hide scroll to top button on mobile devices */
     }
 }

css/home.css

@@ -1,6 +1,14 @@
+/*!
+ * home.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
 #section1 {
-    background-color: #311E25;
+    background-color: #001631;
     color: white;
+    padding-top: 200px;
 }
 
 .lightOpacity {
@@ -12,8 +20,9 @@
 }
 
 #preTitle {
+    font-size: 35px;
     opacity: 0.8;
-    color: #fffd80;
+    color: #78ffd9;
 }
 
 #homepicture {
@@ -21,36 +30,42 @@
     height: 400px;
 }
 
-/* screen larger than 600px -- desktop */
+#selfimg1 {
-@media screen and (min-width: 1201px) {
+    display: block;
-    #section1 {
+    margin-left: auto;
-        padding-top: 200px;
+    margin-right: auto;
-    }
+    height: 100%
+}
 
-    #preTitle {
+#titleText {
-        font-size: 35px;
+    font-size: 80px;
-    }
+    color: #ced5f6;
+}
 
-    #titleText {
+#subTitleText {
-        font-size: 80px;
+    font-size: 50px;
-    }
+    color: #bec1d4;
+}
 
-    #subTitleText {
+#meaningFullSentence {
-        font-size: 50px;
+    width: 40%;
-    }
+    color: #babccd;
+}
 
-    #meaningFullSentence {
+/* todo maybe a bit weird??  */
-        width: 40%;
+#homepicture:hover {
-    }
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
+    transition: all 500ms;
+}
 
-    /* todo maybe a bit weird??  */
+/* height smaller than 720px */
-    #homepicture:hover {
+@media screen and (max-height: 720px) {
-        box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
+    #homepicture {
-        transition: all 500ms;
+        height: 300px;
     }
 }
 
-/* Screen smaller than 600px -- mobile */
+/* Screen smaller than 600px -- general small width screens */
 @media screen and (max-width: 1200px) {
     #section1 {
         padding-top: 100px;
@@ -78,4 +93,13 @@
         height: 300px;
         width: 100%;
     }
+
+    /* hide name tag on mobiles */
+    #nameTag {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: 600px) {
+    /* For tablets: */
 }

css/projects.css

@@ -1,3 +1,10 @@
-#section4{
+/*!
+ * projects.css - https://heili.eu
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ * E-mail: lukas.heiligenbrunner@gmail.com
+ * Copyright (c) 2020 Lukas Heiligenbrunner
+ */
+
+#section4 {
     background-color: #6c757d;
 }

index.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta NAME="author" CONTENT="Lukas Heiligenbrunner">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, user-scaleable=0">
     <title>Lukas Heiligenbrunner</title>
 
     <!-- Latest compiled and minified CSS -->
@@ -20,12 +21,13 @@
     <link rel="stylesheet" href="css/about.css">
     <link rel="stylesheet" href="css/experience.css">
     <link rel="stylesheet" href="css/projects.css">
+    <link rel="stylesheet" href="css/contact.css">
 </head>
 <!-- The scrollable area -->
 <body data-spy="scroll" data-target=".navbar" data-offset="50">
 <div id="maincontent">
     <nav class="navbar navbar-expand-sm navbar-dark fixed-top">
-        <a class="navbar-brand" href="#">Lukas</a>
+        <a class="navbar-brand" href="#"><div id="nameTag">Lukas</div></a>
         <!-- Toggler/collapsibe Button -->
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
             <span class="navbar-toggler-icon"></span>
@@ -43,9 +45,6 @@
                 <li class="nav-item">
                     <a class="nav-link" href="#section3">Experience</a>
                 </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#section4">Projects</a>
-                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#section5">Contact</a>
                 </li>
@@ -67,13 +66,13 @@
                 </p>
             </div>
             <div id="homepicture">
-                <img src="rsc/self3.png" height="100%" style="display: block;margin-left: auto; margin-right: auto">
+                <img id="selfimg1" src="rsc/self3.png" alt="">
             </div>
         </div>
     </div>
 
     <!-- About Page -->
-    <div id="section2" class="bg-warning tile">
+    <div id="section2" class="tile">
         <div class="container">
             <div class="aboutcontainer">
                 <h1>About me</h1>
@@ -98,9 +97,15 @@
                     <li>Latex</li>
                     <li>OpenSCAD</li>
                 </ul>
+                <a href="rsc/curriculumvitaee.pdf" target="_blank">
+                    <div id="downloadcvbtn">
+                        Download Curriculum Vitae
+                    </div>
+                </a>
             </div>
+
             <div class="aboutPicContainer">
-                <img src="rsc/self4.jpg" id="aboutPic">
+                <img src="rsc/self4.jpg" alt="" id="aboutPic">
             </div>
         </div>
     </div>
@@ -136,7 +141,8 @@
                             07.2019 – 08.2019
                         </div>
                         <p class="experienceworktext">
-                            Diploma thesis - "Image correction for surface inspection": Development of picture corrections for a surface inspection robot in C++.
+                            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>
@@ -192,26 +198,28 @@
         </div>
     </div>
 
-    <!-- Projects Page -->
-    <div id="section4" class="tile">
-        <div class="container">
-            <h1>Projects</h1>
-            <p>Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
-                Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page!
-                Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo Projects Page! Todo
-                Projects Page! </p>
-        </div>
-    </div>
-
     <!-- Contact Page -->
-    <div id="section5" class="bg-danger tile">
+    <div id="section5" class="tile">
         <div class="container">
             <h1>Contact</h1>
-            <h3>Stay in Contact!</h3>
+            <h3>I'd love to hear from You!</h3>
-            <p>Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo
+            <div class="personalcontacts">
-                Contacts page! Todo Contacts page!
+                <a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank">
-                Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page!
+                    <div id="emailsign" class="contactsign">
-                Todo Contacts page! Todo Contacts page! Todo Contacts page! Todo Contacts page! </p>
+                        <span><img src="rsc/emailicon.png" alt="" height="32px"> &nbsp; lukas.heiligenbrunner@gmail.com</span>
+                    </div>
+                </a>
+                <a href="https://github.com/lukas-heiligenbrunner" target="_blank">
+                    <div id="githubsign" class="contactsign">
+                        <span><img src="rsc/GitHub-Mark-64px.png" alt="" height="32px"> &nbsp; github.com/Lukas-Heiligenbrunner</span>
+                    </div>
+                </a>
+                <a href="https://gitlab.heili.eu/lukas" target="_blank">
+                    <div id="gitlabsign" class="contactsign">
+                        <span><img src="rsc/gitlab-icon-black.png" alt="" height="40px"> gitlab.heili.eu/lukas</span>
+                    </div>
+                </a>
+            </div>
         </div>
     </div>
 </div>