readded projects tile

merge master into projects

See merge request lukas/personalwebsite!1

.gitlab-ci.yml

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

css/about.css

@@ -5,24 +5,37 @@
  * 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) 0 10px 30px -15px;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
     transition: box-shadow 500ms;
     height: 100%;
 }
 
+.aboutcontainer a {
+    text-decoration: none;
+}
+
 #downloadcvbtn {
     margin-top: 15%;
 
@@ -39,40 +52,8 @@
     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;
@@ -81,7 +62,7 @@
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
     #aboutPic:hover {
-        box-shadow: rgba(2, 12, 27, 0.7) 0 10px 30px 0;
+        box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
         transition: all 500ms;
     }
 }
@@ -104,8 +85,8 @@
     }
 
     #section2 {
-        height: 160%;
+        height: 130%;
-        min-height: 1000px;
+        min-height: 860px;
     }
 
     #aboutPic {

css/contact.css

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

css/experience.css

@@ -26,11 +26,12 @@
     display: block;
     float: left;
     clear: left;
+    margin: 0px;
     width: 14%;
     left: 0;
     overflow: hidden;
 
-    margin: 0 6mm 0 0;
+    margin-right: 6mm;
 
     border: 6mm solid hsla(0, 100%, 50%, 0);
     padding-left: 2mm;
@@ -64,17 +65,12 @@
     border-radius: 5mm;
 }
 
-#experienceheader {
-    visibility: hidden;
-}
-
 .ratiobtn {
     display: none;
 }
 
 #experiencecontentcontainer {
     margin-top: 100px;
-    visibility: hidden;
 }
 
 .experiencetitle {
@@ -85,33 +81,11 @@
     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 {
@@ -123,10 +97,11 @@
         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: 2px 2px 20px;
+        margin-bottom: 20px;
     }
 
     #tab1 + .tab {

css/general.css

@@ -12,24 +12,12 @@ 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%;
@@ -68,55 +56,6 @@ 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,6 +5,11 @@
  * Copyright (c) 2020 Lukas Heiligenbrunner
  */
 
+#section1 {
+    background-color: #001631;
+    color: white;
+    padding-top: 200px;
+}
 
 .lightOpacity {
     opacity: 0.6;
@@ -14,19 +19,10 @@
     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 {
@@ -44,29 +40,21 @@
 #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;
 }
 
-/* hover effects */
+/* todo maybe a bit weird??  */
 #homepicture:hover {
-    box-shadow: rgba(2, 12, 27, 0.7) 0 10px 30px 0;
+    box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
     transition: all 500ms;
 }
 
@@ -111,3 +99,7 @@
         display: none;
     }
 }
+
+@media only screen and (min-width: 600px) {
+    /* For tablets: */
+}

index.html

@@ -1,9 +1,3 @@
-<!--
--- 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>
@@ -16,12 +10,11 @@
     <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">
@@ -29,15 +22,12 @@
     <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="index.html"><img id="nameTag" src="favicon.png" height="50px" alt=""/></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>
@@ -100,13 +90,12 @@
                 </p>
 
                 <ul>
-                    <li class="arrowicon">C++</li>
+                    <li>C++</li>
-                    <li class="arrowicon">Java</li>
+                    <li>Java</li>
-                    <li class="arrowicon">Kotlin</li>
+                    <li>Kotlin</li>
-                    <li class="arrowicon">HTML/CSS</li>
+                    <li>HTML/CSS/JS</li>
-                    <li class="arrowicon">JavaScript (React)</li>
+                    <li>Latex</li>
-                    <li class="arrowicon">Latex</li>
+                    <li>OpenSCAD</li>
-                    <li class="arrowicon">OpenSCAD</li>
                 </ul>
                 <a href="rsc/curriculumvitaee.pdf" target="_blank">
                     <div id="downloadcvbtn">
@@ -124,7 +113,7 @@
     <!-- Experience Page -->
     <div id="section3" class="tile">
         <div class="container">
-            <h1 id="experienceheader">Experience</h1>
+            <h1>Experience</h1>
             <div id="experiencecontentcontainer">
 
                 <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
@@ -143,7 +132,7 @@
                 <div class="content">
                     <div id="content1">
                         <div class="experiencetitle">
-                            Software engineer <a href="https://www.profactor.at/en/" class="companyname">@Profactor</a>
+                            Software engineer <span class="companyname">@Profactor</span>
                         </div>
                         <div>
                             extramural research institute
@@ -161,7 +150,7 @@
 
                     <div id="content2">
                         <div class="experiencetitle">
-                            Electrician <a href="https://www.sps.at/en/" class="companyname">@SPS Technik</a>
+                            Electrician <span class="companyname">@SPS Technik</span>
                         </div>
                         <div>
                             automation technology
@@ -176,8 +165,7 @@
 
                     <div id="content3">
                         <div class="experiencetitle">
-                            Software and electronics engineer
+                            Software and electronics engineer <span class="companyname">@Profactor</span>
-                            <a href="https://www.profactor.at/en/" class="companyname">@Profactor</a>
                         </div>
                         <div>
                             extramural research institute
@@ -192,7 +180,7 @@
 
                     <div id="content4">
                         <div class="experiencetitle">
-                            plumber & maintenance worker <a href="https://www.klausriegler.at/" class="companyname">@Klausriegler</a>
+                            plumber & maintenance worker <span class="companyname">@Klausriegler</span>
                         </div>
                         <div>
                             Heating-Ventilation-Climate-Sanitary
@@ -210,11 +198,23 @@
         </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 id="contactheader">Contact</h1>
+            <h1>Contact</h1>
-            <h3 id="contactsubheader">I'd love to hear from You!</h3>
+            <h3>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

@@ -1,35 +0,0 @@
-$(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

@@ -1,41 +0,0 @@
-<?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">
+<!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="215.434px" height="215.434px" viewBox="0 0 215.434 215.434" enable-background="new 0 0 215.434 215.434"
 	 xml:space="preserve">