Compare commits
2 Commits
master
...
projectsti
| Author | SHA1 | Date | |
|---|---|---|---|
|
f28184a350 | ||
| cdcaaffe87 |
@ -1,4 +0,0 @@
|
||||
check_html:
|
||||
image: 18fgsa/html-proofer:gitlab-ci
|
||||
script:
|
||||
- htmlproofer ./ --empty-alt-ignore
|
||||
@ -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%;
|
||||
min-height: 1000px;
|
||||
height: 130%;
|
||||
min-height: 860px;
|
||||
}
|
||||
|
||||
#aboutPic {
|
||||
@ -114,4 +95,4 @@
|
||||
margin-right: auto;
|
||||
/* todo nof loating right in middle */
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,20 +6,11 @@
|
||||
*/
|
||||
|
||||
#section5 {
|
||||
background-color: #deebff;
|
||||
}
|
||||
|
||||
#contactheader{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#contactsubheader{
|
||||
visibility: hidden;
|
||||
background-color: #7a96c2;
|
||||
}
|
||||
|
||||
.personalcontacts {
|
||||
margin-top: 60px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.personalcontacts a {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
|
||||
30
css/home.css
30
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;
|
||||
}
|
||||
|
||||
@ -110,4 +98,8 @@
|
||||
#nameTag {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
/* For tablets: */
|
||||
}
|
||||
BIN
favicon.png
BIN
favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
58
index.html
58
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 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>
|
||||
<li>C++</li>
|
||||
<li>Java</li>
|
||||
<li>Kotlin</li>
|
||||
<li>HTML/CSS/JS</li>
|
||||
<li>Latex</li>
|
||||
<li>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
|
||||
<a href="https://www.profactor.at/en/" class="companyname">@Profactor</a>
|
||||
Software and electronics engineer <span class="companyname">@Profactor</span>
|
||||
</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>
|
||||
<h3 id="contactsubheader">I'd love to hear from You!</h3>
|
||||
<h1>Contact</h1>
|
||||
<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">
|
||||
@ -245,4 +245,4 @@
|
||||
</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
35
js/index.js
35
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");
|
||||
}
|
||||
});
|
||||
})
|
||||
@ -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 |
@ -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">
|
||||
|
||||
|
Before Width: | Height: | Size: 661 B After Width: | Height: | Size: 712 B |
Loading…
Reference in New Issue
Block a user