lukas/PersonalWebsite
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: lukas:master
Branches Tags
lukas:master
lukas:reactify
lukas:projectstile
lukas:v1.0
..
compare: lukas:projectstile
Branches Tags
lukas:reactify
lukas:master
lukas:projectstile
lukas:v1.0

2 Commits
master ... projectsti

Author SHA1 Message Date
lukas-heiligenbrunner
f28184a350 readded projects tile 2020-03-25 22:27:17 +01:00
Lukas Heiligenbrunner
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
Show Stats Expand all files Collapse all files

4
.gitlab-ci.yml
View File

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

61
css/about.css
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 {
@ -114,4 +95,4 @@
margin-right: auto; margin-right: auto;
/* todo nof loating right in middle */ /* todo nof loating right in middle */
} }
} }

11
css/contact.css
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 {

33
css/experience.css
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 {

65
css/general.css
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) {

30
css/home.css
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;
} }
@ -110,4 +98,8 @@
#nameTag { #nameTag {
display: none; display: none;
} }
}
@media only screen and (min-width: 600px) {
/* For tablets: */
} }

BIN
favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

58
index.html
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">
@ -245,4 +245,4 @@
</a> </a>
</body> </body>
</html> </html>

35
js/index.js
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");
}
});
})

41
rsc/arrow.svg
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>
Side by Side

Before

Width:  |  Height:  |  Size: 896 B

2
rsc/check.svg
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">

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 661 B

After

Width:  |  Height:  |  Size: 712 B