setting min-heigt for non-mobile about container

better height of about page

.gitlab-ci.yml

@@ -0,0 +1,4 @@
+check_html:
+  image: 18fgsa/html-proofer:gitlab-ci
+  script:
+    - htmlproofer ./ --empty-alt-ignore

css/about.css

@@ -5,37 +5,24 @@
  * Copyright (c) 2020 Lukas Heiligenbrunner
  */
 
+/* ID selectors */
 #section2 {
     background-color: #deebff;
+    min-height: 750px;
 }
 
 #aboutmeText {
     width: 100%;
 }
 
-.aboutcontainer {
-    width: 40%;
-    float: left;
-}
-
-.aboutPicContainer {
-    width: 60%;
-    height: 300px;
-    float: left;
-}
-
 #aboutPic {
     float: right;
     margin-top: 10%;
-    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
+    box-shadow: rgba(2, 12, 27, 0.7) 0 10px 30px -15px;
     transition: box-shadow 500ms;
     height: 100%;
 }
 
-.aboutcontainer a {
-    text-decoration: none;
-}
-
 #downloadcvbtn {
     margin-top: 15%;
 
@@ -52,8 +39,40 @@
     transition: background-color 500ms;
 }
 
+/* CLASS selectors */
+.aboutcontainer {
+    width: 40%;
+    float: left;
+}
+
+.aboutPicContainer {
+    width: 60%;
+    height: 300px;
+    float: left;
+}
+
+.aboutcontainer a {
+    text-decoration: none;
+}
+
+.arrowicon {
+    margin: 0;
+    padding: 7px 0 7px 20px;
+    list-style: none;
+    background-image: url("../rsc/arrow.svg");
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: 20px;
+}
+
+/* HOVER selectors */
+.arrowicon:hover {
+    background-color: #7a96c2;
+    border-radius: 3mm;
+    margin-left: 3mm;
+}
+
 #downloadcvbtn:hover {
-    /*background-color: #facf4d;*/
     color: white;
     background-color: #194378;
     transition: all 500ms;
@@ -62,7 +81,7 @@
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
     #aboutPic:hover {
-        box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
+        box-shadow: rgba(2, 12, 27, 0.7) 0 10px 30px 0;
         transition: all 500ms;
     }
 }
@@ -85,8 +104,8 @@
     }
 
     #section2 {
-        height: 130%;
-        min-height: 860px;
+        height: 160%;
+        min-height: 1000px;
     }
 
     #aboutPic {

css/contact.css

@@ -6,11 +6,20 @@
  */
 
 #section5 {
-    background-color: #7a96c2;
+    background-color: #deebff;
+}
+
+#contactheader{
+    visibility: hidden;
+}
+
+#contactsubheader{
+    visibility: hidden;
 }
 
 .personalcontacts {
     margin-top: 60px;
+    visibility: hidden;
 }
 
 .personalcontacts a {

css/experience.css

@@ -26,12 +26,11 @@
     display: block;
     float: left;
     clear: left;
-    margin: 0px;
     width: 14%;
     left: 0;
     overflow: hidden;
 
-    margin-right: 6mm;
+    margin: 0 6mm 0 0;
 
     border: 6mm solid hsla(0, 100%, 50%, 0);
     padding-left: 2mm;
@@ -65,12 +64,17 @@
     border-radius: 5mm;
 }
 
+#experienceheader {
+    visibility: hidden;
+}
+
 .ratiobtn {
     display: none;
 }
 
 #experiencecontentcontainer {
     margin-top: 100px;
+    visibility: hidden;
 }
 
 .experiencetitle {
@@ -81,11 +85,33 @@
     color: #74f9d4;
 }
 
+.companyname:hover{
+    color: #74f9d0;
+}
+
 .experienceworktext {
     margin-top: 5mm;
     font-size: large;
 }
 
+/* navbar animation */
+.experiencecontaineranimation :nth-child(2){
+    visibility: hidden;
+    animation: textfade 500ms 600ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(4){
+    visibility: hidden;
+    animation: textfade 500ms 700ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(6){
+    visibility: hidden;
+    animation: textfade 500ms 800ms 1 forwards;
+}
+.experiencecontaineranimation :nth-child(8){
+    visibility: hidden;
+    animation: textfade 500ms 900ms 1 forwards;
+}
+
 /* Screen smaller than 600px -- general small width screens */
 @media screen and (max-width: 1200px) {
     #section3 {
@@ -97,11 +123,10 @@
         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;
+        margin: 2px 2px 20px;
     }
 
     #tab1 + .tab {

css/general.css

@@ -12,12 +12,24 @@ body, html, #maincontent {
     /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
 }
 
-h1{
+h1 {
     text-transform: uppercase;
-    font-family:  'Open Sans', arial, sans-serif;
+    font-family: 'Open Sans', arial, sans-serif;
     font-weight: bold;
 }
 
+.animationappearnow {
+    animation: textappear 1s 0ms 1 forwards;
+}
+
+.animationappear300ms {
+    animation: textappear 1s 300ms 1 forwards;
+}
+
+.animationappear600ms {
+    animation: textappear 1s 600ms 1 forwards;
+}
+
 /* general definition of a tile */
 .tile {
     height: 80%;
@@ -56,6 +68,55 @@ h1{
     font: bold 15px/1.4 'Open Sans', arial, sans-serif;
 }
 
+/* navbar animation */
+.nav :nth-child(1) a{
+    visibility: hidden;
+    animation: textfade 1s 600ms 1 forwards;
+}
+
+.nav :nth-child(2) a{
+    visibility: hidden;
+    animation: textfade 1s 700ms 1 forwards;
+}
+
+.nav :nth-child(3) a{
+    visibility: hidden;
+    animation: textfade 1s 800ms 1 forwards;
+}
+
+.nav :nth-child(4) a{
+    visibility: hidden;
+    animation: textfade 1s 900ms 1 forwards;
+}
+
+/* The animation code */
+@keyframes textfade {
+    from {
+        visibility: hidden;
+        position: relative;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        position: relative;
+        top: 0;
+    }
+}
+
+/* The animation code */
+@keyframes textappear {
+    from {
+        visibility: hidden;
+        opacity: 0;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        opacity: 1;
+        top: 0;
+    }
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
 

css/home.css

@@ -5,11 +5,6 @@
  * Copyright (c) 2020 Lukas Heiligenbrunner
  */
 
-#section1 {
-    background-color: #001631;
-    color: white;
-    padding-top: 200px;
-}
 
 .lightOpacity {
     opacity: 0.6;
@@ -19,10 +14,19 @@
     font-family: 'Helvetica Neue', fantasy;
 }
 
+#section1 {
+    background-color: #001631;
+    color: white;
+    padding-top: 200px;
+}
+
 #preTitle {
     font-size: 35px;
     opacity: 0.8;
     color: #78ffd9;
+
+    visibility: hidden;
+    animation: textfade 1s 900ms 1 forwards;
 }
 
 #homepicture {
@@ -40,21 +44,29 @@
 #titleText {
     font-size: 80px;
     color: #ced5f6;
+
+    visibility: hidden;
+    animation: textfade 1s 600ms 1 forwards;
 }
 
 #subTitleText {
     font-size: 50px;
     color: #bec1d4;
+
+    visibility: hidden;
+    animation: textfade 1s 300ms 1 forwards;
 }
 
 #meaningFullSentence {
     width: 40%;
     color: #babccd;
+
+    animation: textfade 1s 0ms 1 forwards;
 }
 
-/* todo maybe a bit weird??  */
+/* hover effects */
 #homepicture:hover {
-    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
+    box-shadow: rgba(2, 12, 27, 0.7) 0 10px 30px 0;
     transition: all 500ms;
 }
 
@@ -99,7 +111,3 @@
         display: none;
     }
 }
-
-@media only screen and (min-width: 600px) {
-    /* For tablets: */
-}

index.html

@@ -1,3 +1,9 @@
+<!--
+-- index.html - https://heili.eu
+-- Licensed under the MIT license - http://opensource.org/licenses/MIT
+-- E-mail: lukas.heiligenbrunner@gmail.com
+-- Copyright (c) 2020 Lukas Heiligenbrunner
+-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -10,11 +16,12 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <!-- Popper JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
+    <!--  main javascript  -->
+    <script src="js/index.js"></script>
+
     <!--  Stylesheets  -->
     <link rel="stylesheet" href="css/general.css">
     <link rel="stylesheet" href="css/home.css">
@@ -22,12 +29,15 @@
     <link rel="stylesheet" href="css/experience.css">
     <link rel="stylesheet" href="css/projects.css">
     <link rel="stylesheet" href="css/contact.css">
+
+    <!-- Icon -->
+    <link rel="icon" href="favicon.png">
 </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="#"><div id="nameTag">Lukas</div></a>
+        <a class="navbar-brand" href="index.html"><img id="nameTag" src="favicon.png" height="50px" alt=""/></a>
         <!-- Toggler/collapsibe Button -->
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
             <span class="navbar-toggler-icon"></span>
@@ -90,12 +100,13 @@
                 </p>
 
                 <ul>
-                    <li>C++</li>
-                    <li>Java</li>
-                    <li>Kotlin</li>
-                    <li>HTML/CSS/JS</li>
-                    <li>Latex</li>
-                    <li>OpenSCAD</li>
+                    <li class="arrowicon">C++</li>
+                    <li class="arrowicon">Java</li>
+                    <li class="arrowicon">Kotlin</li>
+                    <li class="arrowicon">HTML/CSS</li>
+                    <li class="arrowicon">JavaScript (React)</li>
+                    <li class="arrowicon">Latex</li>
+                    <li class="arrowicon">OpenSCAD</li>
                 </ul>
                 <a href="rsc/curriculumvitaee.pdf" target="_blank">
                     <div id="downloadcvbtn">
@@ -113,7 +124,7 @@
     <!-- Experience Page -->
     <div id="section3" class="tile">
         <div class="container">
-            <h1>Experience</h1>
+            <h1 id="experienceheader">Experience</h1>
             <div id="experiencecontentcontainer">
 
                 <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
@@ -132,7 +143,7 @@
                 <div class="content">
                     <div id="content1">
                         <div class="experiencetitle">
-                            Software engineer <span class="companyname">@Profactor</span>
+                            Software engineer <a href="https://www.profactor.at/en/" class="companyname">@Profactor</a>
                         </div>
                         <div>
                             extramural research institute
@@ -150,7 +161,7 @@
 
                     <div id="content2">
                         <div class="experiencetitle">
-                            Electrician <span class="companyname">@SPS Technik</span>
+                            Electrician <a href="https://www.sps.at/en/" class="companyname">@SPS Technik</a>
                         </div>
                         <div>
                             automation technology
@@ -165,7 +176,8 @@
 
                     <div id="content3">
                         <div class="experiencetitle">
-                            Software and electronics engineer <span class="companyname">@Profactor</span>
+                            Software and electronics engineer
+                            <a href="https://www.profactor.at/en/" class="companyname">@Profactor</a>
                         </div>
                         <div>
                             extramural research institute
@@ -180,7 +192,7 @@
 
                     <div id="content4">
                         <div class="experiencetitle">
-                            plumber & maintenance worker <span class="companyname">@Klausriegler</span>
+                            plumber & maintenance worker <a href="https://www.klausriegler.at/" class="companyname">@Klausriegler</a>
                         </div>
                         <div>
                             Heating-Ventilation-Climate-Sanitary
@@ -198,23 +210,11 @@
         </div>
     </div>
 
-    <!-- Projects Page -->
-    <div id="section4" class="bg-secondary 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="tile">
         <div class="container">
-            <h1>Contact</h1>
-            <h3>I'd love to hear from You!</h3>
+            <h1 id="contactheader">Contact</h1>
+            <h3 id="contactsubheader">I'd love to hear from You!</h3>
             <div class="personalcontacts">
                 <a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank">
                     <div id="emailsign" class="contactsign">

js/index.js

@@ -0,0 +1,35 @@
+$(function () {
+    ;(function ($, win) {
+        $.fn.inViewport = function (cb) {
+            return this.each(function (i, el) {
+                function visPx() {
+                    const H = $(this).height(),
+                        r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
+                    return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
+                }
+
+                visPx();
+                $(win).on("resize scroll", visPx);
+            });
+        };
+    }(jQuery, window));
+
+
+    $("#section3").inViewport(function (px) {
+        if (px) {
+            $("#experienceheader").addClass("animationappear600ms");
+
+            const expcontainer = $("#experiencecontentcontainer");
+            expcontainer.addClass("animationappear300ms");
+            expcontainer.addClass("experiencecontaineranimation");
+        }
+    });
+
+    $("#section5").inViewport(function (px) {
+        if (px) {
+            $("#contactheader").addClass("animationappear600ms");
+            $("#contactsubheader").addClass("animationappear300ms");
+            $(".personalcontacts").addClass("animationappearnow");
+        }
+    });
+})

rsc/arrow.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="451.846px" height="451.847px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;"
+	 xml:space="preserve">
+<g>
+	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
+		L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
+		c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

rsc/check.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN">
 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="215.434px" height="215.434px" viewBox="0 0 215.434 215.434" enable-background="new 0 0 215.434 215.434"
 	 xml:space="preserve">