Compare commits

..

2 Commits

Author SHA1 Message Date
lukas-heiligenbrunner
f28184a350 readded projects tile 2020-03-25 22:27:17 +01:00
cdcaaffe87 Merge branch 'master' into 'projectstile'
merge master into projects

See merge request lukas/personalwebsite!1
2020-03-25 21:24:44 +00:00
11 changed files with 69 additions and 271 deletions

View File

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

View File

@ -5,24 +5,37 @@
* Copyright (c) 2020 Lukas Heiligenbrunner * Copyright (c) 2020 Lukas Heiligenbrunner
*/ */
/* ID selectors */
#section2 { #section2 {
background-color: #deebff; background-color: #deebff;
min-height: 750px;
} }
#aboutmeText { #aboutmeText {
width: 100%; width: 100%;
} }
.aboutcontainer {
width: 40%;
float: left;
}
.aboutPicContainer {
width: 60%;
height: 300px;
float: left;
}
#aboutPic { #aboutPic {
float: right; float: right;
margin-top: 10%; 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; transition: box-shadow 500ms;
height: 100%; height: 100%;
} }
.aboutcontainer a {
text-decoration: none;
}
#downloadcvbtn { #downloadcvbtn {
margin-top: 15%; margin-top: 15%;
@ -39,40 +52,8 @@
transition: background-color 500ms; 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 { #downloadcvbtn:hover {
/*background-color: #facf4d;*/
color: white; color: white;
background-color: #194378; background-color: #194378;
transition: all 500ms; transition: all 500ms;
@ -81,7 +62,7 @@
/* screen larger than 600px -- desktop */ /* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {
#aboutPic:hover { #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; transition: all 500ms;
} }
} }
@ -104,8 +85,8 @@
} }
#section2 { #section2 {
height: 160%; height: 130%;
min-height: 1000px; min-height: 860px;
} }
#aboutPic { #aboutPic {

View File

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

View File

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

View File

@ -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;*/ /*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; text-transform: uppercase;
font-family: 'Open Sans', arial, sans-serif; font-family: 'Open Sans', arial, sans-serif;
font-weight: bold; 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 */ /* general definition of a tile */
.tile { .tile {
height: 80%; height: 80%;
@ -68,55 +56,6 @@ h1 {
font: bold 15px/1.4 'Open Sans', arial, sans-serif; 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 */ /* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -16,12 +10,11 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library --> <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <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 --> <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- main javascript -->
<script src="js/index.js"></script>
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="css/general.css"> <link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/home.css"> <link rel="stylesheet" href="css/home.css">
@ -29,15 +22,12 @@
<link rel="stylesheet" href="css/experience.css"> <link rel="stylesheet" href="css/experience.css">
<link rel="stylesheet" href="css/projects.css"> <link rel="stylesheet" href="css/projects.css">
<link rel="stylesheet" href="css/contact.css"> <link rel="stylesheet" href="css/contact.css">
<!-- Icon -->
<link rel="icon" href="favicon.png">
</head> </head>
<!-- The scrollable area --> <!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="maincontent"> <div id="maincontent">
<nav class="navbar navbar-expand-sm navbar-dark fixed-top"> <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 --> <!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -100,13 +90,12 @@
</p> </p>
<ul> <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> </ul>
<a href="rsc/curriculumvitaee.pdf" target="_blank"> <a href="rsc/curriculumvitaee.pdf" target="_blank">
<div id="downloadcvbtn"> <div id="downloadcvbtn">
@ -124,7 +113,7 @@
<!-- Experience Page --> <!-- Experience Page -->
<div id="section3" class="tile"> <div id="section3" class="tile">
<div class="container"> <div class="container">
<h1 id="experienceheader">Experience</h1> <h1>Experience</h1>
<div id="experiencecontentcontainer"> <div id="experiencecontentcontainer">
<input class="ratiobtn" id="tab1" type="radio" name="tabs" checked=""> <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
@ -143,7 +132,7 @@
<div class="content"> <div class="content">
<div id="content1"> <div id="content1">
<div class="experiencetitle"> <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>
<div> <div>
extramural research institute extramural research institute
@ -161,7 +150,7 @@
<div id="content2"> <div id="content2">
<div class="experiencetitle"> <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>
<div> <div>
automation technology automation technology
@ -176,8 +165,7 @@
<div id="content3"> <div id="content3">
<div class="experiencetitle"> <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>
<div> <div>
extramural research institute extramural research institute
@ -192,7 +180,7 @@
<div id="content4"> <div id="content4">
<div class="experiencetitle"> <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>
<div> <div>
Heating-Ventilation-Climate-Sanitary Heating-Ventilation-Climate-Sanitary
@ -210,11 +198,23 @@
</div> </div>
</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 --> <!-- Contact Page -->
<div id="section5" class="tile"> <div id="section5" class="tile">
<div class="container"> <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"> <div class="personalcontacts">
<a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank"> <a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank">
<div id="emailsign" class="contactsign"> <div id="emailsign" class="contactsign">

View File

@ -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");
}
});
})

View File

@ -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>

Before

Width:  |  Height:  |  Size: 896 B

View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- 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" <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" 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"> xml:space="preserve">

Before

Width:  |  Height:  |  Size: 661 B

After

Width:  |  Height:  |  Size: 712 B