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
*/
/* 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 */
}
}
}

View File

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

View File

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

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;*/
}
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) {

View File

@ -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: */
}

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

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"?>
<!-- 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