Initial release of thiemoo.at
This commit is contained in:
commit
8e77e4eab7
0
admin/login.php
Normal file
0
admin/login.php
Normal file
95
css/animation.css
Normal file
95
css/animation.css
Normal file
@ -0,0 +1,95 @@
|
||||
@keyframes name-fade {
|
||||
from {
|
||||
color: white;
|
||||
} 50% {
|
||||
color: #66c2ff;
|
||||
} to {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes name-color {
|
||||
from {
|
||||
color: white;
|
||||
} to {
|
||||
color: #66c2ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is a animation from codepen, you can find it here
|
||||
Link: https://codepen.io/jayhollywood/pen/JWPPZp
|
||||
*/
|
||||
@keyframes mouse-wheel {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(0);
|
||||
height: 4px;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
height: 20px;
|
||||
}
|
||||
70% {
|
||||
transform: translateY(15px);
|
||||
height: 4px;
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(15px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Servers */
|
||||
|
||||
@keyframes online {
|
||||
0% {
|
||||
color: #ffff99;
|
||||
} 20% {
|
||||
color: #66ff66;
|
||||
} 30% {
|
||||
color: #ffff99;
|
||||
} 35% {
|
||||
color: #66ff66;
|
||||
} 37% {
|
||||
color: #ffff99;
|
||||
} 40% {
|
||||
color: #66ff66;
|
||||
} 50% {
|
||||
color: #ffff99;
|
||||
} 52% {
|
||||
color: #66ff66;
|
||||
} 55% {
|
||||
color: #ffff99;
|
||||
} 60% {
|
||||
color: #66ff66;
|
||||
} 65% {
|
||||
color: #ffff99;
|
||||
} 67% {
|
||||
color: #66ff66;
|
||||
} 85% {
|
||||
color: #ffff99;
|
||||
} 87% {
|
||||
color: #66ff66;
|
||||
} 90% {
|
||||
color: #ffff99;
|
||||
} 93% {
|
||||
color: #66ff66;
|
||||
} 95% {
|
||||
color: #ffff99;
|
||||
} 97% {
|
||||
color: #66ff66;
|
||||
} 100% {
|
||||
color: #66ff66;
|
||||
}
|
||||
}
|
||||
2337
css/font-awesome/css/font-awesome.css
vendored
Normal file
2337
css/font-awesome/css/font-awesome.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
4
css/font-awesome/css/font-awesome.min.css
vendored
Normal file
4
css/font-awesome/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
css/font-awesome/fonts/FontAwesome.otf
Normal file
BIN
css/font-awesome/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.eot
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
css/font-awesome/fonts/fontawesome-webfont.svg
Normal file
2671
css/font-awesome/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
css/font-awesome/fonts/fontawesome-webfont.ttf
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.woff
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
css/font-awesome/fonts/fontawesome-webfont.woff2
Normal file
BIN
css/font-awesome/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
195
css/mobile.css
Normal file
195
css/mobile.css
Normal file
@ -0,0 +1,195 @@
|
||||
@media only screen and (max-width: 700px) {
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 35%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.uncolapsed {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.visible {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 330px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.sidebar hr {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
margin-top: 7%;
|
||||
}
|
||||
|
||||
.sidebar li span {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.sidebar .icon {
|
||||
margin-right: 3%;
|
||||
margin-left: 35%;
|
||||
}
|
||||
|
||||
.my-world {
|
||||
position: absolute;
|
||||
transform: rotate(0deg);
|
||||
|
||||
text-align: center;
|
||||
top: 55%;
|
||||
left: none;
|
||||
}
|
||||
|
||||
.my-world h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.my-world span {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.my-world p {
|
||||
color: #cccccc;
|
||||
margin-top: 60px;
|
||||
text-align: center;
|
||||
margin-left: -80%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.portfolio-wrapper {
|
||||
height: 400px !important;
|
||||
}
|
||||
|
||||
.projekte-grid {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
.footer-socialmedia {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
position: relative;
|
||||
width: 20%;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.portfolio-wrapper p {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.server-wrapper {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.server-wrapper p {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.server-index {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.server-index:last-child {
|
||||
margin-left: 0px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
width: 10%;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.projekte-grid {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.server-index .server-led {
|
||||
left: 50.4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 660px) {
|
||||
.server-index .server-led {
|
||||
left: 50.7%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 610px) {
|
||||
.server-index .server-led {
|
||||
left: 51%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 570px) {
|
||||
.portfolio-wrapper {
|
||||
height: 450px !important;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
left: 51.7%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 465px) {
|
||||
.portfolio-wrapper {
|
||||
height: 550px !important;
|
||||
}
|
||||
|
||||
.avatar h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.avatar .name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
left: 53.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 350px) {
|
||||
.portfolio-wrapper {
|
||||
height: 650px !important;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
left: 55.7%;
|
||||
}
|
||||
}
|
||||
|
||||
/* IMPRESSUM */
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.impressum {
|
||||
left: -20%;
|
||||
}
|
||||
|
||||
.thats-me {
|
||||
margin-left: 120px;
|
||||
}
|
||||
}
|
||||
778
css/style.css
Normal file
778
css/style.css
Normal file
@ -0,0 +1,778 @@
|
||||
html, body {
|
||||
background: #121921;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
margin-top: 1%;
|
||||
animation-name: avatar-picture-fadein;
|
||||
animation-duration: 1.5s;
|
||||
box-shadow: 2px 1px 3px 1px #1b2631;
|
||||
}
|
||||
|
||||
.avatar .name {
|
||||
margin-left: -5%;
|
||||
margin-top: -1px;
|
||||
margin-bottom: 0;
|
||||
color: #7996b9;
|
||||
}
|
||||
|
||||
.avatar .social-media {
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
margin-left: 20%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.avatar a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.avatar a:hover {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.avatar .social-media i {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.my-world {
|
||||
position: absolute;
|
||||
transform: rotate(10deg);
|
||||
|
||||
top: 30%;
|
||||
left: 45%;
|
||||
}
|
||||
|
||||
.my-world h1 {
|
||||
color: #7996b9;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.my-world span {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.my-world p {
|
||||
margin-left: 10px;
|
||||
margin-top: -15px;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Navbar shit */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
transition-duration:0.6s;
|
||||
|
||||
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
|
||||
transition: background-color 0.5s;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.welcome .colored {
|
||||
background-color: #1b2631 !important;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.navbar .navbar-name {
|
||||
position: relative;
|
||||
top: 20%;
|
||||
left: 5%;
|
||||
color: white;
|
||||
font-family: 'DishOut';
|
||||
|
||||
font-size: 2.1em;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.navbar .menu-button {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 25%;
|
||||
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar .menu-button {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.navbar .menu-button:hover {
|
||||
color: #66c2ff
|
||||
}
|
||||
|
||||
/* Sidebar shit */
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
background-color: #243242;
|
||||
transition: 1s;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
|
||||
z-index: 2;
|
||||
box-shadow: 1px 1px #1b2631;
|
||||
}
|
||||
|
||||
.sidebar hr {
|
||||
color: #1b2631;
|
||||
}
|
||||
|
||||
.uncolapsed {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
left: -200px;
|
||||
transition: 1s;
|
||||
text-align: center;
|
||||
color: white;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.visible {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
margin-left: -40px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
height: 75px;
|
||||
transition: 0.5s;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.sidebar li:hover {
|
||||
background-color: #1b2631;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 10%;
|
||||
text-decoration: none;
|
||||
color: #5d5f63;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sidebar .icon {
|
||||
margin-right: 15%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.sidebar li span {
|
||||
margin-left: 20px;
|
||||
text-align: right;
|
||||
font-size: 1.3em;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.sidebar li i {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.home .icon::before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f015';
|
||||
color: #5d5f63;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.portfolio .icon::before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f1ea';
|
||||
color: #5d5f63;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.server .icon::before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f233';
|
||||
color: #5d5f63;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.projekte .icon::before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f21e';
|
||||
color: #5d5f63;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.blog .icon::before {
|
||||
font-family: FontAwesome;
|
||||
content: '\f040';
|
||||
color: #5d5f63;
|
||||
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.sidebar .active::before {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.sidebar .active {
|
||||
color: #10b981;
|
||||
background-color: #1b2631;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Animation vavbar-name */
|
||||
|
||||
.navbar .name-t {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.navbar .name-h {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.125s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .name-i {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .name-e {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.375s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .name-m {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .name-o {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.625s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .name-o2 {
|
||||
animation-name: name-fade;
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: 0.75s;
|
||||
animation-fill-mode: forwards;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* DIVIDER */
|
||||
|
||||
.navbar .navbar-name:hover .name-t {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-h {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.125s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-i {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-e {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.375s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-m {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-o {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0.125s;
|
||||
}
|
||||
|
||||
.navbar .navbar-name:hover .name-o2 {
|
||||
animation-name: name-color;
|
||||
animation-duration: 0.5s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
/* External css */
|
||||
.mouse {
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:90%;
|
||||
width:24px;
|
||||
margin: -12px;
|
||||
height:50px;
|
||||
border:2px solid white;
|
||||
border-radius:30px;
|
||||
opacity:.3;
|
||||
}
|
||||
|
||||
.mouse:after {
|
||||
display: block;
|
||||
content:"";
|
||||
position:absolute;
|
||||
left:13px;
|
||||
top:10px;
|
||||
width:4px;
|
||||
height:4px;
|
||||
margin-left: -3px;
|
||||
background-color:white;
|
||||
border-radius:2px;
|
||||
animation: mouse-wheel 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
|
||||
}
|
||||
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
font-family: DishOut;
|
||||
src: url(../fonts/dishout.ttf);
|
||||
}
|
||||
|
||||
/* Portfolio */
|
||||
.portfolio-wrapper {
|
||||
vertical-align: center;
|
||||
background-color: white;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.portfolio-wrapper h1 {
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
padding-top: 20px;
|
||||
font-family: DishOut;
|
||||
}
|
||||
|
||||
.portfolio-wrapper p {
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
color: #1a1a1a;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Server */
|
||||
.server-wrapper {
|
||||
vertical-align: center;
|
||||
background-color: #233142;
|
||||
margin-top: -22px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.server-wrapper h1 {
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
padding-top: 20px;
|
||||
font-family: DishOut;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.server-index {
|
||||
display: inline-block;
|
||||
color: #7996b9;
|
||||
}
|
||||
|
||||
.servers {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.server-index .server-icon {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 0.9em;
|
||||
left: 37px;
|
||||
top: -32px;
|
||||
|
||||
animation-name: online;
|
||||
animation-fill-mode:forwards;
|
||||
animation-duration: 5s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.server-index .server-led:nth-child(3) {
|
||||
top: -73px;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.server-index .server-led:nth-child(4) {
|
||||
top: -115px;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.server-index .server-led {
|
||||
color: #66ff66;
|
||||
}
|
||||
|
||||
.server-wrapper .server-info {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.server-wrapper .server-name {
|
||||
margin-top: -45px;
|
||||
}
|
||||
|
||||
.server-wrapper a {
|
||||
text-decoration: none;
|
||||
color: #7996b9;
|
||||
}
|
||||
|
||||
.server-index:last-child {
|
||||
margin-left: 400px;
|
||||
}
|
||||
|
||||
.server-wrapper p {
|
||||
color: white;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Projekte */
|
||||
|
||||
.projekte-wrapper {
|
||||
vertical-align: center;
|
||||
background-color: white;
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
.projekte-wrapper h1 {
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
padding-top: 20px;
|
||||
font-family: DishOut;
|
||||
}
|
||||
|
||||
.projekte-wrapper p {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.projekte-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.projekt {
|
||||
margin-top: 25px;
|
||||
width: 90%;
|
||||
background: #d9d9d9;
|
||||
box-shadow: 2px 2px 1px #e6e6e6;
|
||||
}
|
||||
|
||||
.projekt img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.projekt h2 {
|
||||
color: black;
|
||||
font-family: DishOut;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.projekt a {
|
||||
font-style: none;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.projekt p {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.projekt .button {
|
||||
border: 0;
|
||||
background: #354a64;
|
||||
color: #bfbfbf;
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 1em;
|
||||
transition-duration: 0.4s;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.projekt .button:hover {
|
||||
background-color: #006080;
|
||||
}
|
||||
|
||||
/* Blog */
|
||||
.blog-wrapper {
|
||||
vertical-align: center;
|
||||
background-color: #233142;
|
||||
margin-top: -22px;
|
||||
}
|
||||
|
||||
.blog-wrapper h1 {
|
||||
text-align: center;
|
||||
left: 50%;
|
||||
padding-top: 20px;
|
||||
font-family: DishOut;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blog-wrapper p {
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.blog-index {
|
||||
margin-top: 25px;
|
||||
width: 90%;
|
||||
background: #354a64;
|
||||
box-shadow: 2px 2px 1px #2c3e54;
|
||||
}
|
||||
|
||||
.blog-index h2 {
|
||||
font-family: DishOut;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.blog-index p {
|
||||
width: 90%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.blog-index .button {
|
||||
border: 0;
|
||||
background: #233142;
|
||||
color: #bfbfbf;
|
||||
width: 110px;
|
||||
height: 40px;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 1em;
|
||||
transition-duration: 0.4s;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.blog-index .button:hover {
|
||||
background-color: #006080;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
vertical-align: center;
|
||||
background-color: white;
|
||||
/*margin-top: -21px;*/
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
bottom: -30px;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.footer i {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #333333;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
position: relative;
|
||||
width: 20%;
|
||||
top: 40px;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.footer-socialmedia {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.footer-socialmedia a:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.footer-socialmedia a {
|
||||
display: inline-block;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.footer-socialmedia i {
|
||||
color: #233142;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.footer-socialmedia i:hover {
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
/* Impressum */
|
||||
|
||||
.impressum {
|
||||
position: fixed;
|
||||
margin: 0 auto;
|
||||
top: 10%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thats-me {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-family: 'DishOut';
|
||||
color: #7996b9;
|
||||
margin-left: 190px;
|
||||
top: -245px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thats-me-arrow {
|
||||
position: absolute;
|
||||
height: 125px;
|
||||
margin-left: 100px;
|
||||
top: 20px;
|
||||
transform: rotate(93deg);
|
||||
color: #6699ff;
|
||||
}
|
||||
|
||||
.impressum-info {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.impressum-info span {
|
||||
color: #8aa3c1;
|
||||
}
|
||||
|
||||
.impressum-info p {
|
||||
color: #466386;
|
||||
}
|
||||
|
||||
.impressum-info a {
|
||||
text-decoration: none;
|
||||
color: #7996b9;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
.impressum-info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
BIN
fonts/dishout.ttf
Normal file
BIN
fonts/dishout.ttf
Normal file
Binary file not shown.
41
images/arrow.svg
Normal file
41
images/arrow.svg
Normal file
@ -0,0 +1,41 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 302.816 302.816" style="enable-background:new 0 0 302.816 302.816;" xml:space="preserve">
|
||||
<path fill="#466386" id="XMLID_6_" d="M298.423,152.996c-5.857-5.858-15.354-5.858-21.213,0l-35.137,35.136
|
||||
c-5.871-59.78-50.15-111.403-112.001-123.706c-45.526-9.055-92.479,5.005-125.596,37.612c-5.903,5.813-5.977,15.31-0.165,21.213
|
||||
c5.813,5.903,15.31,5.977,21.212,0.164c26.029-25.628,62.923-36.679,98.695-29.565c48.865,9.72,83.772,50.677,88.07,97.978
|
||||
l-38.835-38.835c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l62.485,62.485
|
||||
c2.929,2.929,6.768,4.393,10.606,4.393s7.678-1.464,10.607-4.393l62.483-62.482C304.281,168.352,304.281,158.854,298.423,152.996z"
|
||||
/>
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
images/example.jpg
Normal file
BIN
images/example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 773 KiB |
BIN
images/nerdcity.at.png
Normal file
BIN
images/nerdcity.at.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
images/profile.png
Normal file
BIN
images/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 MiB |
BIN
images/status.thiemoo.at.png
Normal file
BIN
images/status.thiemoo.at.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
images/thiemoo.at.png
Normal file
BIN
images/thiemoo.at.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
203
index.php
Normal file
203
index.php
Normal file
@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/mobile.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/animation.css" />
|
||||
<link type="text/css" rel="stylesheet" href="css/font-awesome/css/font-awesome.css" />
|
||||
|
||||
<title>Thiemoo.at - der Alpenmann</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar" class="sidebar">
|
||||
<div id="content" class="content">
|
||||
<h1 class="sidebar-header">Navigation</h1>
|
||||
<hr>
|
||||
|
||||
<ul>
|
||||
<li id="nav-home" class="home active"><a href="#home"><i class="icon active"></i><span>Home</span></a></li>
|
||||
<li id="nav-portfolio" class="portfolio"><a href="#portfolio"><i class="icon"></i><span>Portfolio</span></a></li>
|
||||
<li id="nav-server" class="server"><a href="#server"><i class="icon"></i><span>Server</span></a></li>
|
||||
<li id="nav-projekte" class="projekte"><a href="#projekte"><i class="icon"></i><span>Projekte</span></a></li>
|
||||
<li id="nav-blog" class="blog"><a href="#blog"><i class="icon"></i><span>Blog</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="welcome">
|
||||
<div class="navbar" id="navbar">
|
||||
<a class="navbar-name" href="https://thiemoo.at">
|
||||
<span class="name-t">T</span><span class="name-h">h</span><span class="name-i">i</span><span class="name-e">e</span><span class="name-m">m</span><span class="name-o">o</span><span class="name-o2">o</span>
|
||||
</a>
|
||||
<a class="menu-button" onclick="switchNav()"><i id="navbar-icon" class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="avatar">
|
||||
<img class="avatar-img" src="images/profile.png" alt="Avatar">
|
||||
<h1 class="name">Thiemo Tiziani</h1>
|
||||
<div class="social-media">
|
||||
<a href="ts3server://thiemoo.at"><i class="fa fa-microphone" aria-hidden="true"></i></a>
|
||||
<a href="https://git.thiemoo.at" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a href="https://steamcommunity.com/id/WienerWirschtl/" target="_blank"><i class="fa fa-steam" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-world">
|
||||
<h1>Willkommen in <span>meiner</span> Welt!</h1>
|
||||
<p>Ein autodidaktischer <span>Serveradministrator</span> und <span
|
||||
class="txt-rotate"
|
||||
data-period="1500"
|
||||
data-rotate='[ " Java", " C", " SQL", " Webentwickler" ]'></span> Entwickler</p>
|
||||
</div>
|
||||
|
||||
<div class="mouse"></div>
|
||||
<div class="particles-js" id="particles-js" onClick="closeNav()"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="portfolio-wrapper">
|
||||
<h1>Portfolio</h1>
|
||||
<p>Abend, mein Name ist Thiemo(ausgesprochen Timo). Ich betreibe seit 2016 durchgehend Server, damals
|
||||
meine Anfänge in der Leitung des GG-Projekt gemacht und nun nur noch meine kleinen eigenen Dienste.
|
||||
In das Programmieren bin ich schon früher durch das Spiel "Minecraft" gekommen, in dem ich Plugins(Add-ons) für
|
||||
Server entwickelt habe. Die meisten meiner Projekte entstanden durch langweile, es gibt auch welche wo ein Team dahintersteckt.
|
||||
In der Zeit abseits meiner Hinneigung zur IT fahre ich gerne Motorrad, repariere allerlei Geräte und baue und bastle eigene Konzepte aus, auch bin ich wohl
|
||||
wie die meisten in meiner Generation ein leidenschaftlicher Computerspieler, wo es mir am meisten Spaß macht in Virtual Reality herumzuspielen.
|
||||
Ich helfe auch sehr gerne anderen Leuten bei der Umsetzung ihrer verrückten Ideen, falls du da also was hast und Unterstützung brauchst kannst du dich gerne melden, würde mich freuen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="server-wrapper">
|
||||
<h1>Server</h1>
|
||||
<p>Das sind meine zwei Server, solange die Statuslampen blinken ist der Status des Servers 'Online', sind sie rot dann liegt eine Störung vor. Du kommst auf meine Statusseite indem du auf einen der Server klickst!</p>
|
||||
<div class="servers">
|
||||
<div class="server-index">
|
||||
<a href="https://status.thiemoo.at" target="_blank">
|
||||
<i class="fa fa-server server-icon" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<p class="server-name">Node-1</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="server-index">
|
||||
<a href="https://status.thiemoo.at" target="_blank">
|
||||
<i class="fa fa-server server-icon" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<i class="fa fa-circle server-led" aria-hidden="true"></i>
|
||||
<p class="server-name">Node-2</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projekte-wrapper">
|
||||
<h1>Projekte</h1>
|
||||
<p>Hier siehst du an welchen Projekten ich beteiligt bin, oder selber betreibe / administriere / ausführe. Einfach alles, was mit mir zu tun hat :)</p>
|
||||
|
||||
<div class="projekte-grid">
|
||||
<div class="projekt">
|
||||
<img src="images/thiemoo.at.png" alt="example">
|
||||
<h2>Thiemoo.at</h2>
|
||||
<p>Wie man sich denken kann, leite ich alles, was mit der Domain "thiemoo.at" zu tun hat. Dazu gehört auch eine PixelFed Instanz:
|
||||
<a href="https://shot.thiemoo.at" target="_blank">https://shot.thiemoo.at/</a> auch ein Teamspeak Server, wo ich eigentlich jeden Tag aktiv bin(<a href="ts3server://thiemoo.at" target="_blank">join</a>).
|
||||
Wenn du Fragen über meine Projekte hast, mich bei einem dabei haben willst oder generell mit mir reden möchtest, kannst du mich über diesen Teamspeak oder über die Kontaktform, welche du weiter unten findest,
|
||||
kontaktieren! Ich würde mich über deinen Besuch sehr freuen :)</p>
|
||||
|
||||
<a href="#" class="button">Ansehen</a>
|
||||
</div>
|
||||
|
||||
<div class="projekt">
|
||||
<img src="images/status.thiemoo.at.png" alt="example">
|
||||
<h2>Webstatus</h2>
|
||||
<p>WebStatus ist ein Projekt, welches ich vor einem Jahr, als ich etwas fortgeschrittener in PHP war umgesetzt habe. Es war ein Projekt, um sich mehr mit
|
||||
HTML, CSS und vor allem PHP auseinanderzusetzen, es war auch die erste Website, in welche ich viel Zeit gesteckt habe, um ein gutes Design umzusetzen. An diesem Projekt
|
||||
habe ich vor in Zukunft weiterzuarbeiten und dabei einige Funktionen sowie eine Projektwebseite hinzuzufügen. WebStatus läuft auch als Statuswebseite für NerdCity sowie Thiemoo: <a href="https://status.thiemoo.at" target="_blank">https://status.thiemoo.at/</a></p>
|
||||
|
||||
<a href="https://git.thiemoo.at/Givou/WebStatus" target="_blank" class="button">Ansehen</a>
|
||||
</div>
|
||||
|
||||
<div class="projekt">
|
||||
<img src="images/nerdcity.at.png" alt="example">
|
||||
<h2>NerdCity.at</h2>
|
||||
<p>NerdCity sollte ein Hosting unternehmen werden, dieses Projekt steht aktuell mehr oder weniger auf Eis, da es uns dabei an Zeit und Entwickler mangelt. Wir stellen
|
||||
bei dem Projekt uns selber verdammt hohe Ansprüche und wollen alles perfekt umsetzen und so sicher, datenschutzfreundlich und benutzerfreundlich wie möglich umzusetzen,
|
||||
dabei jedoch trotzdem niedrige Preise anbieten können. Das Projekt ist jedoch nicht abgebrochen und wir haben </p>
|
||||
|
||||
<a href="https://nerdcity.at" target="_blank" class="button">Ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="placeholder"> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="blog-wrapper">
|
||||
<h1>Blog</h1>
|
||||
<div class="blog-grid">
|
||||
<div class="blog-index">
|
||||
<h2>Eintrag-Titel</h2>
|
||||
<p>Dies ist eine kurzfassung eines eventuelles Blogeintrages, die kurzfassungen des echten Blog eintrages werden dann über das Admin Panel deklariert. Yeah, unwichtig TrolluZz,
|
||||
scheiß auf Rechtsshreibung zu spät daf+r du Affenme...</p>
|
||||
|
||||
<a href="#" class="button">Ansehen</a>
|
||||
</div>
|
||||
|
||||
<div class="blog-index">
|
||||
<h2>Eintrag-Titel</h2>
|
||||
<p>Dies ist eine kurzfassung eines eventuelles Blogeintrages, die kurzfassungen des echten Blog eintrages werden dann über das Admin Panel deklariert. Yeah, unwichtig TrolluZz,
|
||||
scheiß auf Rechtsshreibung zu spät daf+r du Affenme...</p>
|
||||
|
||||
<a href="#" class="button">Ansehen</a>
|
||||
</div>
|
||||
|
||||
<div class="blog-index">
|
||||
<h2>Eintrag-Titel</h2>
|
||||
<p>Dies ist eine kurzfassung eines eventuelles Blogeintrages, die kurzfassungen des echten Blog eintrages werden dann über das Admin Panel deklariert. Yeah, unwichtig TrolluZz,
|
||||
scheiß auf Rechtsshreibung zu spät daf+r du Affenme...</p>
|
||||
|
||||
<a href="#" class="button">Ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="placeholder"> </p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-links">
|
||||
<a href="pages/impressum.html">Impressum</a>
|
||||
<a href="pages/datenschutz.html">Datenschutzerklärung</a>
|
||||
<a target="_blank" href="https://status.thiemoo.at">Status</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-socialmedia">
|
||||
<a href="ts3server://thiemoo.at"><i class="fa fa-microphone" aria-hidden="true"></i></a>
|
||||
<a href="https://git.thiemoo.at" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a>
|
||||
<a href="https://steamcommunity.com/id/WienerWirschtl/" target="_blank"><i class="fa fa-steam" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
<p>© <script>date=new Date(); document.write(date.getFullYear())</script> | Made with <i class="footer-heart fa fa-heart"></i> by Givou</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="js/jquery2.1.1.js"></script>
|
||||
<script type="text/javascript" src="js/particles.js"></script>
|
||||
<script type="text/javascript" src="js/intro.js"></script>
|
||||
<script type="text/javascript" src="js/sidebar.js"></script>
|
||||
<script type="text/javascript" src="js/typewriter.js"></script>
|
||||
|
||||
</html>
|
||||
3
js/intro.js
Normal file
3
js/intro.js
Normal file
@ -0,0 +1,3 @@
|
||||
particlesJS.load('particles-js', './json/particles.json', function() {
|
||||
console.log('callback - particles.js config loaded');
|
||||
});
|
||||
4
js/jquery2.1.1.js
Normal file
4
js/jquery2.1.1.js
Normal file
File diff suppressed because one or more lines are too long
1541
js/particles.js
Normal file
1541
js/particles.js
Normal file
File diff suppressed because it is too large
Load Diff
51
js/sidebar.js
Normal file
51
js/sidebar.js
Normal file
@ -0,0 +1,51 @@
|
||||
var sidebar = document.getElementById("sidebar");
|
||||
var content = document.getElementById("content");
|
||||
var icon = document.getElementById("navbar-icon");
|
||||
var navbar = document.getElementById("navbar");
|
||||
|
||||
|
||||
|
||||
function switchNav() {
|
||||
if(sidebar.className == "sidebar uncolapsed") {
|
||||
sidebar.className = "sidebar";
|
||||
icon.className = "fa fa-bars";
|
||||
content.className = "content";
|
||||
|
||||
updateNavbar();
|
||||
} else if(sidebar.className == "sidebar") {
|
||||
sidebar.className = "sidebar uncolapsed";
|
||||
icon.className = "fa fa-bars";
|
||||
content.className = "content visible";
|
||||
navbar.className = "navbar colored";
|
||||
}
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
sidebar.className = "sidebar";
|
||||
icon.className = "fa fa-bars";
|
||||
content.className = "content";
|
||||
}
|
||||
|
||||
let home = document.getElementById("nav-home");
|
||||
let portfolio = document.getElementById("nav-portfolio");
|
||||
let server = document.getElementById("nav-server");
|
||||
let projekte = document.getElementById("nav-projekte");
|
||||
let blog = document.getElementById("nav-blog");
|
||||
|
||||
window.onscroll = function() {scrollFunction()};
|
||||
|
||||
function scrollFunction() {
|
||||
updateNavbar();
|
||||
}
|
||||
|
||||
function updateNavbar() {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
navbar.className = "navbar colored";
|
||||
} else {
|
||||
if(sidebar.className == "sidebar uncolapsed") {
|
||||
navbar.className = "navbar colored";
|
||||
} else {
|
||||
navbar.className = "navbar";
|
||||
}
|
||||
}
|
||||
}
|
||||
56
js/typewriter.js
Normal file
56
js/typewriter.js
Normal file
@ -0,0 +1,56 @@
|
||||
var TxtRotate = function(el, toRotate, period) {
|
||||
this.toRotate = toRotate;
|
||||
this.el = el;
|
||||
this.loopNum = 0;
|
||||
this.period = parseInt(period, 10) || 2000;
|
||||
this.txt = '';
|
||||
this.tick();
|
||||
this.isDeleting = false;
|
||||
};
|
||||
|
||||
TxtRotate.prototype.tick = function() {
|
||||
var i = this.loopNum % this.toRotate.length;
|
||||
var fullTxt = this.toRotate[i];
|
||||
|
||||
if (this.isDeleting) {
|
||||
this.txt = fullTxt.substring(0, this.txt.length - 1);
|
||||
} else {
|
||||
this.txt = fullTxt.substring(0, this.txt.length + 1);
|
||||
}
|
||||
|
||||
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
|
||||
|
||||
var that = this;
|
||||
var delta = 240 - Math.random() * 100;
|
||||
|
||||
if (this.isDeleting) { delta /= 2; }
|
||||
|
||||
if (!this.isDeleting && this.txt === fullTxt) {
|
||||
delta = this.period;
|
||||
this.isDeleting = true;
|
||||
} else if (this.isDeleting && this.txt === '') {
|
||||
this.isDeleting = false;
|
||||
this.loopNum++;
|
||||
delta = 500;
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
that.tick();
|
||||
}, delta);
|
||||
};
|
||||
|
||||
$(document).ready(function() {
|
||||
var elements = document.getElementsByClassName('txt-rotate');
|
||||
for (var i=0; i<elements.length; i++) {
|
||||
var toRotate = elements[i].getAttribute('data-rotate');
|
||||
var period = elements[i].getAttribute('data-period');
|
||||
if (toRotate) {
|
||||
new TxtRotate(elements[i], JSON.parse(toRotate), period);
|
||||
}
|
||||
}
|
||||
// INJECT CSS
|
||||
//var css = document.createElement("style");
|
||||
//css.type = "text/css";
|
||||
//css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
|
||||
//document.body.appendChild(css);
|
||||
});
|
||||
110
json/particles.json
Normal file
110
json/particles.json
Normal file
@ -0,0 +1,110 @@
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 4000
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"]
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 7,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 10,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 300,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 4,
|
||||
"direction": "none",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 800,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 800,
|
||||
"size": 80,
|
||||
"duration": 2,
|
||||
"opacity": 0.8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 400,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
74
pages/datenschutz.html
Normal file
74
pages/datenschutz.html
Normal file
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/mobile.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/animation.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/font-awesome/css/font-awesome.css" />
|
||||
|
||||
<title>Thiemoo.at - der Alpenmann</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="align-center privacy">
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
<h2>Einleitung</h2>
|
||||
<p>Mit der folgenden Datenschutzerklärung möchten wir Sie darüber aufklären, welche Arten Ihrer personenbezogenen Daten (nachfolgend auch kurz als "Daten“ bezeichnet) wir zu welchen Zwecken und in welchem Umfang verarbeiten. Die Datenschutzerklärung gilt für alle von uns durchgeführten Verarbeitungen personenbezogener Daten, sowohl im Rahmen der Erbringung unserer Leistungen als auch insbesondere auf unseren Webseiten, in mobilen Applikationen sowie innerhalb externer Onlinepräsenzen, wie z.B. unserer Social-Media-Profile (nachfolgend zusammenfassend bezeichnet als "Onlineangebot“).</p>
|
||||
<p>Die verwendeten Begriffe sind nicht geschlechtsspezifisch.</p>
|
||||
<p>Stand: 17. März 2021</p><br>
|
||||
<p>Geltend für folgende Domains:</p>
|
||||
<p>» *.thiemoo.at</p>
|
||||
<p>» status.nerdcity.at</p>
|
||||
|
||||
<h2>Inhaltsübersicht</h2> <ul class="index"><li><a class="index-link" href="#m14">Einleitung</a></li><li><a class="index-link" href="#m3">Verantwortlicher</a></li><li><a class="index-link" href="#mOverview">Übersicht der Verarbeitungen</a></li><li><a class="index-link" href="#m13">Maßgebliche Rechtsgrundlagen</a></li><li><a class="index-link" href="#m27">Sicherheitsmaßnahmen</a></li><li><a class="index-link" href="#m24">Datenverarbeitung in Drittländern</a></li><li><a class="index-link" href="#m134">Einsatz von Cookies</a></li><li><a class="index-link" href="#m367">Registrierung, Anmeldung und Nutzerkonto</a></li><li><a class="index-link" href="#m432">Community Funktionen</a></li><li><a class="index-link" href="#m136">Präsenzen in sozialen Netzwerken (Social Media)</a></li><li><a class="index-link" href="#m12">Löschung von Daten</a></li><li><a class="index-link" href="#m15">Änderung und Aktualisierung der Datenschutzerklärung</a></li><li><a class="index-link" href="#m10">Rechte der betroffenen Personen</a></li><li><a class="index-link" href="#m41">Eingebettete Social Media Elemente Datenschutzerklärung</a></li><li><a class="index-link" href="#m42">Begriffsdefinitionen</a></li></ul><h2 id="m3">Verantwortlicher</h2><p>Thiemo Tiziani<br>Pufferweg 2<br>4400 Steyr<br>Österreich</p>
|
||||
<p>E-Mail-Adresse: <a href="mailto:thiemo.tiziani@nerdcity.at">thiemo.tiziani@nerdcity.at</a>.</p>
|
||||
<p>Impressum: <a href="https://thiemoo.at/impressum.html" target="_blank">https://thiemoo.at/impressum.html</a>.</p>
|
||||
<h2 id="mOverview">Übersicht der Verarbeitungen</h2><p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.</p><h3>Arten der verarbeiteten Daten</h3>
|
||||
<ul><li>Bestandsdaten (z.B. Namen, Adressen).</li><li>Inhaltsdaten (z.B. Eingaben in Onlineformularen).</li><li>Kontaktdaten (z.B. E-Mail, Telefonnummern).</li><li>Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li><li>Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten).</li></ul><h3>Kategorien betroffener Personen</h3><ul><li>Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li></ul><h3>Zwecke der Verarbeitung</h3><ul><li>Feedback (z.B. Sammeln von Feedback via Online-Formular).</li><li>Marketing.</li><li>Kontaktanfragen und Kommunikation.</li><li>Sicherheitsmaßnahmen.</li><li>Erbringung vertragliche Leistungen und Kundenservice.</li><li>Verwaltung und Beantwortung von Anfragen.</li></ul><h3 id="m13">Maßgebliche Rechtsgrundlagen</h3><p>Im Folgenden erhalten Sie eine Übersicht der Rechtsgrundlagen der DSGVO, auf deren Basis wir personenbezogenen Daten verarbeiten. Bitte nehmen Sie zur Kenntnis, dass neben den Regelungen der DSGVO nationale Datenschutzvorgaben in Ihrem bzw. unserem Wohn- oder Sitzland gelten können. Sollten ferner im Einzelfall speziellere Rechtsgrundlagen maßgeblich sein, teilen wir Ihnen diese in der Datenschutzerklärung mit.</p>
|
||||
<ul><li><strong>Einwilligung (Art. 6 Abs. 1 S. 1 lit. a. DSGVO)</strong> - Die betroffene Person hat ihre Einwilligung in die Verarbeitung der sie betreffenden personenbezogenen Daten für einen spezifischen Zweck oder mehrere bestimmte Zwecke gegeben.</li><li><strong>Vertragserfüllung und vorvertragliche Anfragen (Art. 6 Abs. 1 S. 1 lit. b. DSGVO)</strong> - Die Verarbeitung ist für die Erfüllung eines Vertrags, dessen Vertragspartei die betroffene Person ist, oder zur Durchführung vorvertraglicher Maßnahmen erforderlich, die auf Anfrage der betroffenen Person erfolgen.</li><li><strong>Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO)</strong> - Die Verarbeitung ist zur Wahrung der berechtigten Interessen des Verantwortlichen oder eines Dritten erforderlich, sofern nicht die Interessen oder Grundrechte und Grundfreiheiten der betroffenen Person, die den Schutz personenbezogener Daten erfordern, überwiegen.</li></ul><p><strong>Nationale Datenschutzregelungen in Deutschland</strong>: Zusätzlich zu den Datenschutzregelungen der Datenschutz-Grundverordnung gelten nationale Regelungen zum Datenschutz in Deutschland. Hierzu gehört insbesondere das Gesetz zum Schutz vor Missbrauch personenbezogener Daten bei der Datenverarbeitung (Bundesdatenschutzgesetz – BDSG). Das BDSG enthält insbesondere Spezialregelungen zum Recht auf Auskunft, zum Recht auf Löschung, zum Widerspruchsrecht, zur Verarbeitung besonderer Kategorien personenbezogener Daten, zur Verarbeitung für andere Zwecke und zur Übermittlung sowie automatisierten Entscheidungsfindung im Einzelfall einschließlich Profiling. Des Weiteren regelt es die Datenverarbeitung für Zwecke des Beschäftigungsverhältnisses (§ 26 BDSG), insbesondere im Hinblick auf die Begründung, Durchführung oder Beendigung von Beschäftigungsverhältnissen sowie die Einwilligung von Beschäftigten. Ferner können Landesdatenschutzgesetze der einzelnen Bundesländer zur Anwendung gelangen.</p>
|
||||
<h2 id="m27">Sicherheitsmaßnahmen</h2><p>Wir treffen nach Maßgabe der gesetzlichen Vorgaben unter Berücksichtigung des Stands der Technik, der Implementierungskosten und der Art, des Umfangs, der Umstände und der Zwecke der Verarbeitung sowie der unterschiedlichen Eintrittswahrscheinlichkeiten und des Ausmaßes der Bedrohung der Rechte und Freiheiten natürlicher Personen geeignete technische und organisatorische Maßnahmen, um ein dem Risiko angemessenes Schutzniveau zu gewährleisten.</p>
|
||||
<p>Zu den Maßnahmen gehören insbesondere die Sicherung der Vertraulichkeit, Integrität und Verfügbarkeit von Daten durch Kontrolle des physischen und elektronischen Zugangs zu den Daten als auch des sie betreffenden Zugriffs, der Eingabe, der Weitergabe, der Sicherung der Verfügbarkeit und ihrer Trennung. Des Weiteren haben wir Verfahren eingerichtet, die eine Wahrnehmung von Betroffenenrechten, die Löschung von Daten und Reaktionen auf die Gefährdung der Daten gewährleisten. Ferner berücksichtigen wir den Schutz personenbezogener Daten bereits bei der Entwicklung bzw. Auswahl von Hardware, Software sowie Verfahren entsprechend dem Prinzip des Datenschutzes, durch Technikgestaltung und durch datenschutzfreundliche Voreinstellungen.</p>
|
||||
<p><strong>SSL-Verschlüsselung (https)</strong>: Um Ihre via unser Online-Angebot übermittelten Daten zu schützen, nutzen wir eine SSL-Verschlüsselung. Sie erkennen derart verschlüsselte Verbindungen an dem Präfix https:// in der Adresszeile Ihres Browsers.</p>
|
||||
<h2 id="m24">Datenverarbeitung in Drittländern</h2><p>Sofern wir Daten in einem Drittland (d.h., außerhalb der Europäischen Union (EU), des Europäischen Wirtschaftsraums (EWR)) verarbeiten oder die Verarbeitung im Rahmen der Inanspruchnahme von Diensten Dritter oder der Offenlegung bzw. Übermittlung von Daten an andere Personen, Stellen oder Unternehmen stattfindet, erfolgt dies nur im Einklang mit den gesetzlichen Vorgaben. </p>
|
||||
<p>Vorbehaltlich ausdrücklicher Einwilligung oder vertraglich oder gesetzlich erforderlicher Übermittlung verarbeiten oder lassen wir die Daten nur in Drittländern mit einem anerkannten Datenschutzniveau, vertraglichen Verpflichtung durch sogenannte Standardschutzklauseln der EU-Kommission, beim Vorliegen von Zertifizierungen oder verbindlicher internen Datenschutzvorschriften verarbeiten (Art. 44 bis 49 DSGVO, Informationsseite der EU-Kommission: <a href="https://ec.europa.eu/info/law/law-topic/data-protection/international-dimension-data-protection_de" target="_blank">https://ec.europa.eu/info/law/law-topic/data-protection/international-dimension-data-protection_de</a>).</p>
|
||||
<h2 id="m134">Einsatz von Cookies</h2><p>Cookies sind Textdateien, die Daten von besuchten Websites oder Domains enthalten und von einem Browser auf dem Computer des Benutzers gespeichert werden. Ein Cookie dient in erster Linie dazu, die Informationen über einen Benutzer während oder nach seinem Besuch innerhalb eines Onlineangebotes zu speichern. Zu den gespeicherten Angaben können z.B. die Spracheinstellungen auf einer Webseite, der Loginstatus, ein Warenkorb oder die Stelle, an der ein Video geschaut wurde, gehören. Zu dem Begriff der Cookies zählen wir ferner andere Technologien, die die gleichen Funktionen wie Cookies erfüllen (z.B., wenn Angaben der Nutzer anhand pseudonymer Onlinekennzeichnungen gespeichert werden, auch als "Nutzer-IDs" bezeichnet)</p>
|
||||
<p><strong>Die folgenden Cookie-Typen und Funktionen werden unterschieden:</strong></p><ul><li><strong>Temporäre Cookies (auch: Session- oder Sitzungs-Cookies):</strong> Temporäre Cookies werden spätestens gelöscht, nachdem ein Nutzer ein Online-Angebot verlassen und seinen Browser geschlossen hat.</li><li><strong>Permanente Cookies:</strong> Permanente Cookies bleiben auch nach dem Schließen des Browsers gespeichert. So kann beispielsweise der Login-Status gespeichert oder bevorzugte Inhalte direkt angezeigt werden, wenn der Nutzer eine Website erneut besucht. Ebenso können die Interessen von Nutzern, die zur Reichweitenmessung oder zu Marketingzwecken verwendet werden, in einem solchen Cookie gespeichert werden.</li><li><strong>First-Party-Cookies:</strong> First-Party-Cookies werden von uns selbst gesetzt.</li><li><strong>Third-Party-Cookies (auch: Drittanbieter-Cookies)</strong>: Drittanbieter-Cookies werden hauptsächlich von Werbetreibenden (sog. Dritten) verwendet, um Benutzerinformationen zu verarbeiten.</li><li><strong>Notwendige (auch: essentielle oder unbedingt erforderliche) Cookies:</strong> Cookies können zum einen für den Betrieb einer Webseite unbedingt erforderlich sein (z.B. um Logins oder andere Nutzereingaben zu speichern oder aus Gründen der Sicherheit).</li><li><strong>Statistik-, Marketing- und Personalisierungs-Cookies</strong>: Ferner werden Cookies im Regelfall auch im Rahmen der Reichweitenmessung eingesetzt sowie dann, wenn die Interessen eines Nutzers oder sein Verhalten (z.B. Betrachten bestimmter Inhalte, Nutzen von Funktionen etc.) auf einzelnen Webseiten in einem Nutzerprofil gespeichert werden. Solche Profile dienen dazu, den Nutzern z.B. Inhalte anzuzeigen, die ihren potentiellen Interessen entsprechen. Dieses Verfahren wird auch als "Tracking", d.h., Nachverfolgung der potentiellen Interessen der Nutzer bezeichnet. Soweit wir Cookies oder "Tracking"-Technologien einsetzen, informieren wir Sie gesondert in unserer Datenschutzerklärung oder im Rahmen der Einholung einer Einwilligung.</li></ul><p><strong>Hinweise zu Rechtsgrundlagen: </strong> Auf welcher Rechtsgrundlage wir Ihre personenbezogenen Daten mit Hilfe von Cookies verarbeiten, hängt davon ab, ob wir Sie um eine Einwilligung bitten. Falls dies zutrifft und Sie in die Nutzung von Cookies einwilligen, ist die Rechtsgrundlage der Verarbeitung Ihrer Daten die erklärte Einwilligung. Andernfalls werden die mithilfe von Cookies verarbeiteten Daten auf Grundlage unserer berechtigten Interessen (z.B. an einem betriebswirtschaftlichen Betrieb unseres Onlineangebotes und dessen Verbesserung) verarbeitet oder, wenn der Einsatz von Cookies erforderlich ist, um unsere vertraglichen Verpflichtungen zu erfüllen.</p>
|
||||
<p><strong>Speicherdauer: </strong>Sofern wir Ihnen keine expliziten Angaben zur Speicherdauer von permanenten Cookies mitteilen (z. B. im Rahmen eines sog. Cookie-Opt-Ins), gehen Sie bitte davon aus, dass die Speicherdauer bis zu zwei Jahre betragen kann.</p>
|
||||
<p><strong>Allgemeine Hinweise zum Widerruf und Widerspruch (Opt-Out): </strong> Abhängig davon, ob die Verarbeitung auf Grundlage einer Einwilligung oder gesetzlichen Erlaubnis erfolgt, haben Sie jederzeit die Möglichkeit, eine erteilte Einwilligung zu widerrufen oder der Verarbeitung Ihrer Daten durch Cookie-Technologien zu widersprechen (zusammenfassend als "Opt-Out" bezeichnet). Sie können Ihren Widerspruch zunächst mittels der Einstellungen Ihres Browsers erklären, z.B., indem Sie die Nutzung von Cookies deaktivieren (wobei hierdurch auch die Funktionsfähigkeit unseres Onlineangebotes eingeschränkt werden kann). Ein Widerspruch gegen den Einsatz von Cookies zu Zwecken des Onlinemarketings kann auch mittels einer Vielzahl von Diensten, vor allem im Fall des Trackings, über die Webseiten <a href="https://optout.aboutads.info" target="_blank">https://optout.aboutads.info</a> und <a href="https://www.youronlinechoices.com/" target="_blank">https://www.youronlinechoices.com/</a> erklärt werden. Daneben können Sie weitere Widerspruchshinweise im Rahmen der Angaben zu den eingesetzten Dienstleistern und Cookies erhalten.</p>
|
||||
<ul class="m-elements"><li><strong>Verarbeitete Datenarten:</strong> Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li><li><strong>Betroffene Personen:</strong> Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li><li><strong>Rechtsgrundlagen:</strong> Einwilligung (Art. 6 Abs. 1 S. 1 lit. a. DSGVO), Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).</li></ul><h2 id="m367">Registrierung, Anmeldung und Nutzerkonto</h2><p>Nutzer können ein Nutzerkonto anlegen. Im Rahmen der Registrierung werden den Nutzern die erforderlichen Pflichtangaben mitgeteilt und zu Zwecken der Bereitstellung des Nutzerkontos auf Grundlage vertraglicher Pflichterfüllung verarbeitet. Zu den verarbeiteten Daten gehören insbesondere die Login-Informationen (Nutzername, Passwort sowie eine E-Mail-Adresse).</p>
|
||||
<p>Im Rahmen der Inanspruchnahme unserer Registrierungs- und Anmeldefunktionen sowie der Nutzung des Nutzerkontos speichern wir die IP-Adresse und den Zeitpunkt der jeweiligen Nutzerhandlung. Die Speicherung erfolgt auf Grundlage unserer berechtigten Interessen als auch jener der Nutzer an einem Schutz vor Missbrauch und sonstiger unbefugter Nutzung. Eine Weitergabe dieser Daten an Dritte erfolgt grundsätzlich nicht, es sei denn, sie ist zur Verfolgung unserer Ansprüche erforderlich oder es besteht eine gesetzliche Verpflichtung hierzu.</p>
|
||||
<p>Die Nutzer können über Vorgänge, die für deren Nutzerkonto relevant sind, wie z.B. technische Änderungen, per E-Mail informiert werden.</p>
|
||||
<p><strong>Registrierung mit Pseudonymen</strong>: Nutzer dürfen statt Klarnamen Pseudonyme als Nutzernamen verwenden.</p>
|
||||
<p><strong>Profile der Nutzer sind öffentlich</strong>: Die Profile der Nutzer sind öffentlich sichtbar und zugänglich.</p>
|
||||
<p><strong>Zwei-Faktor-Authentifizierung</strong>: Die Zwei-Faktor-Authentifizierung bietet eine zusätzliche Sicherheitsebene für Ihr Benutzerkonto und stellt sicher, dass nur Sie auf Ihr Konto zugreifen können, auch, wenn jemand anderes Ihr Passwort kennt. Zu diesem Zweck müssen Sie zusätzlich zu Ihrem Passwort eine weitere Authentifizierungsmaßnahme durchführen (z.B. einen an ein mobiles Gerät gesandten Code eingeben). Wir werden Sie über das von uns eingesetzte Verfahren informieren.</p>
|
||||
<p><strong>Löschung von Daten nach Kündigung</strong>: Wenn Nutzer ihr Nutzerkonto gekündigt haben, werden deren Daten im Hinblick auf das Nutzerkonto, vorbehaltlich einer gesetzlichen Erlaubnis, Pflicht oder Einwilligung der Nutzer, gelöscht.</p>
|
||||
<p>Es obliegt den Nutzern, ihre Daten bei erfolgter Kündigung vor dem Vertragsende zu sichern. Wir sind berechtigt, sämtliche während der Vertragsdauer gespeicherte Daten des Nutzers unwiederbringlich zu löschen.</p>
|
||||
<ul class="m-elements"><li><strong>Verarbeitete Datenarten:</strong> Bestandsdaten (z.B. Namen, Adressen), Kontaktdaten (z.B. E-Mail, Telefonnummern), Inhaltsdaten (z.B. Eingaben in Onlineformularen), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li><li><strong>Betroffene Personen:</strong> Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li><li><strong>Zwecke der Verarbeitung:</strong> Erbringung vertragliche Leistungen und Kundenservice, Sicherheitsmaßnahmen, Verwaltung und Beantwortung von Anfragen.</li><li><strong>Rechtsgrundlagen:</strong> Vertragserfüllung und vorvertragliche Anfragen (Art. 6 Abs. 1 S. 1 lit. b. DSGVO), Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).</li></ul><h2 id="m432">Community Funktionen</h2><p>Die von uns bereitgestellten Community Funktionen erlauben es Nutzern miteinander in Konversationen oder sonst miteinander in einen Austausch zu treten. Hierbei bitten wir zu beachten, dass die Nutzung der Communityfunktionen nur unter Beachtung der geltenden Rechtslage, unserer Bedingungen und Richtlinien sowie der Rechte anderer Nutzer und Dritter gestattet ist.</p>
|
||||
<p><strong>Einstellung der Sichtbarkeit von Beiträgen</strong>: Die Nutzer können mittels Einstellungen bestimmen, in welchem Umfang die von ihnen erstellten Beiträge und Inhalte für die Öffentlichkeit oder nur für bestimmte Personen oder Gruppen sichtbar, bzw. zugänglich sind.</p>
|
||||
<p><strong>Schutz eigener Daten</strong>: Die Nutzer entscheiden selbst, welche Daten sie über sich innerhalb unseres Onlineangebotes preisgeben. Zum Beispiel, wenn Nutzer Angaben zur eigenen Person machen oder an Konversationen teilnehmen. Wir bitten die Nutzer ihre Daten zu schützen und persönliche Daten nur mit Bedacht und nur im erforderlichen Umfang zu veröffentlichen. Insbesondere bitten wir die Nutzer zu beachten, dass sie die Zugangsdaten ganz besonders schützen und sichere Passwörter verwenden müssen (d.h. vor allem möglichst lange und zufällige Zeichenkombinationen).</p>
|
||||
<ul class="m-elements"><li><strong>Verarbeitete Datenarten:</strong> Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li><li><strong>Betroffene Personen:</strong> Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li><li><strong>Zwecke der Verarbeitung:</strong> Erbringung vertragliche Leistungen und Kundenservice, Sicherheitsmaßnahmen.</li><li><strong>Rechtsgrundlagen:</strong> Vertragserfüllung und vorvertragliche Anfragen (Art. 6 Abs. 1 S. 1 lit. b. DSGVO), Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).</li></ul><h2 id="m136">Präsenzen in sozialen Netzwerken (Social Media)</h2><p>Wir unterhalten Onlinepräsenzen innerhalb sozialer Netzwerke und verarbeiten in diesem Rahmen Daten der Nutzer, um mit den dort aktiven Nutzern zu kommunizieren oder um Informationen über uns anzubieten.</p>
|
||||
<p>Wir weisen darauf hin, dass dabei Daten der Nutzer außerhalb des Raumes der Europäischen Union verarbeitet werden können. Hierdurch können sich für die Nutzer Risiken ergeben, weil so z.B. die Durchsetzung der Rechte der Nutzer erschwert werden könnte.</p>
|
||||
<p>Ferner werden die Daten der Nutzer innerhalb sozialer Netzwerke im Regelfall für Marktforschungs- und Werbezwecke verarbeitet. So können z.B. anhand des Nutzungsverhaltens und sich daraus ergebender Interessen der Nutzer Nutzungsprofile erstellt werden. Die Nutzungsprofile können wiederum verwendet werden, um z.B. Werbeanzeigen innerhalb und außerhalb der Netzwerke zu schalten, die mutmaßlich den Interessen der Nutzer entsprechen. Zu diesen Zwecken werden im Regelfall Cookies auf den Rechnern der Nutzer gespeichert, in denen das Nutzungsverhalten und die Interessen der Nutzer gespeichert werden. Ferner können in den Nutzungsprofilen auch Daten unabhängig der von den Nutzern verwendeten Geräte gespeichert werden (insbesondere, wenn die Nutzer Mitglieder der jeweiligen Plattformen sind und bei diesen eingeloggt sind).</p>
|
||||
<p>Für eine detaillierte Darstellung der jeweiligen Verarbeitungsformen und der Widerspruchsmöglichkeiten (Opt-Out) verweisen wir auf die Datenschutzerklärungen und Angaben der Betreiber der jeweiligen Netzwerke.</p>
|
||||
<p>Auch im Fall von Auskunftsanfragen und der Geltendmachung von Betroffenenrechten weisen wir darauf hin, dass diese am effektivsten bei den Anbietern geltend gemacht werden können. Nur die Anbieter haben jeweils Zugriff auf die Daten der Nutzer und können direkt entsprechende Maßnahmen ergreifen und Auskünfte geben. Sollten Sie dennoch Hilfe benötigen, dann können Sie sich an uns wenden.</p>
|
||||
<ul class="m-elements"><li><strong>Verarbeitete Datenarten:</strong> Kontaktdaten (z.B. E-Mail, Telefonnummern), Inhaltsdaten (z.B. Eingaben in Onlineformularen), Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li><li><strong>Betroffene Personen:</strong> Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li><li><strong>Zwecke der Verarbeitung:</strong> Kontaktanfragen und Kommunikation, Feedback (z.B. Sammeln von Feedback via Online-Formular), Marketing.</li><li><strong>Rechtsgrundlagen:</strong> Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).</li></ul><h2 id="m12">Löschung von Daten</h2><p>Die von uns verarbeiteten Daten werden nach Maßgabe der gesetzlichen Vorgaben gelöscht, sobald deren zur Verarbeitung erlaubten Einwilligungen widerrufen werden oder sonstige Erlaubnisse entfallen (z.B., wenn der Zweck der Verarbeitung dieser Daten entfallen ist oder sie für den Zweck nicht erforderlich sind).</p>
|
||||
<p>Sofern die Daten nicht gelöscht werden, weil sie für andere und gesetzlich zulässige Zwecke erforderlich sind, wird deren Verarbeitung auf diese Zwecke beschränkt. D.h., die Daten werden gesperrt und nicht für andere Zwecke verarbeitet. Das gilt z.B. für Daten, die aus handels- oder steuerrechtlichen Gründen aufbewahrt werden müssen oder deren Speicherung zur Geltendmachung, Ausübung oder Verteidigung von Rechtsansprüchen oder zum Schutz der Rechte einer anderen natürlichen oder juristischen Person erforderlich ist.</p>
|
||||
<p>Unsere Datenschutzhinweise können ferner weitere Angaben zu der Aufbewahrung und Löschung von Daten beinhalten, die für die jeweiligen Verarbeitungen vorrangig gelten.</p>
|
||||
<h2 id="m15">Änderung und Aktualisierung der Datenschutzerklärung</h2><p>Wir bitten Sie, sich regelmäßig über den Inhalt unserer Datenschutzerklärung zu informieren. Wir passen die Datenschutzerklärung an, sobald die Änderungen der von uns durchgeführten Datenverarbeitungen dies erforderlich machen. Wir informieren Sie, sobald durch die Änderungen eine Mitwirkungshandlung Ihrerseits (z.B. Einwilligung) oder eine sonstige individuelle Benachrichtigung erforderlich wird.</p>
|
||||
<p>Sofern wir in dieser Datenschutzerklärung Adressen und Kontaktinformationen von Unternehmen und Organisationen angeben, bitten wir zu beachten, dass die Adressen sich über die Zeit ändern können und bitten die Angaben vor Kontaktaufnahme zu prüfen.</p>
|
||||
<h2 id="m10">Rechte der betroffenen Personen</h2><p>Ihnen stehen als Betroffene nach der DSGVO verschiedene Rechte zu, die sich insbesondere aus Art. 15 bis 21 DSGVO ergeben:</p><ul><li><strong>Widerspruchsrecht: Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation ergeben, jederzeit gegen die Verarbeitung der Sie betreffenden personenbezogenen Daten, die aufgrund von Art. 6 Abs. 1 lit. e oder f DSGVO erfolgt, Widerspruch einzulegen; dies gilt auch für ein auf diese Bestimmungen gestütztes Profiling. Werden die Sie betreffenden personenbezogenen Daten verarbeitet, um Direktwerbung zu betreiben, haben Sie das Recht, jederzeit Widerspruch gegen die Verarbeitung der Sie betreffenden personenbezogenen Daten zum Zwecke derartiger Werbung einzulegen; dies gilt auch für das Profiling, soweit es mit solcher Direktwerbung in Verbindung steht.</strong></li><li><strong>Widerrufsrecht bei Einwilligungen:</strong> Sie haben das Recht, erteilte Einwilligungen jederzeit zu widerrufen.</li><li><strong>Auskunftsrecht:</strong> Sie haben das Recht, eine Bestätigung darüber zu verlangen, ob betreffende Daten verarbeitet werden und auf Auskunft über diese Daten sowie auf weitere Informationen und Kopie der Daten entsprechend den gesetzlichen Vorgaben.</li><li><strong>Recht auf Berichtigung:</strong> Sie haben entsprechend den gesetzlichen Vorgaben das Recht, die Vervollständigung der Sie betreffenden Daten oder die Berichtigung der Sie betreffenden unrichtigen Daten zu verlangen.</li><li><strong>Recht auf Löschung und Einschränkung der Verarbeitung:</strong> Sie haben nach Maßgabe der gesetzlichen Vorgaben das Recht, zu verlangen, dass Sie betreffende Daten unverzüglich gelöscht werden, bzw. alternativ nach Maßgabe der gesetzlichen Vorgaben eine Einschränkung der Verarbeitung der Daten zu verlangen.</li><li><strong>Recht auf Datenübertragbarkeit:</strong> Sie haben das Recht, Sie betreffende Daten, die Sie uns bereitgestellt haben, nach Maßgabe der gesetzlichen Vorgaben in einem strukturierten, gängigen und maschinenlesbaren Format zu erhalten oder deren Übermittlung an einen anderen Verantwortlichen zu fordern.</li><li><strong>Beschwerde bei Aufsichtsbehörde:</strong> Sie haben unbeschadet eines anderweitigen verwaltungsrechtlichen oder gerichtlichen Rechtsbehelfs das Recht auf Beschwerde bei einer Aufsichtsbehörde, insbesondere in dem Mitgliedstaat ihres gewöhnlichen Aufenthaltsorts, ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes, wenn Sie der Ansicht sind, dass die Verarbeitung der Sie betreffenden personenbezogenen Daten gegen die Vorgaben der DSGVO verstößt.</li></ul>
|
||||
<h2 id="m41">Eingebettete Social Media Elemente Datenschutzerklärung</h2>
|
||||
<p>Wir binden auf unserer Webseite Elemente von Social Media Diensten ein um Bilder, Videos und Texte anzuzeigen.
|
||||
Durch den Besuch von Seiten die diese Elemente darstellen, werden Daten von Ihrem Browser zum jeweiligen Social Media Dienst übertragen und dort gespeichert. Wir haben keinen Zugriff auf diese Daten.
|
||||
Die folgenden Links führen Sie zu den Seiten der jeweiligen Social Media Dienste wo erklärt wird, wie diese mit Ihren Daten umgehen:</p>
|
||||
<ul><li>Tchncs Datenschutzrichtlinie: <a href="https://tchncs.de/privacy" target="_blank" rel="noopener nofollow" class="external">https://tchncs.de/privacy</a></li></ul>
|
||||
<h2 id="m42">Begriffsdefinitionen</h2><p>In diesem Abschnitt erhalten Sie eine Übersicht über die in dieser Datenschutzerklärung verwendeten Begrifflichkeiten. Viele der Begriffe sind dem Gesetz entnommen und vor allem im Art. 4 DSGVO definiert. Die gesetzlichen Definitionen sind verbindlich. Die nachfolgenden Erläuterungen sollen dagegen vor allem dem Verständnis dienen. Die Begriffe sind alphabetisch sortiert.</p>
|
||||
<ul class="glossary"><li><strong>Personenbezogene Daten:</strong> "Personenbezogene Daten“ sind alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person (im Folgenden "betroffene Person“) beziehen; als identifizierbar wird eine natürliche Person angesehen, die direkt oder indirekt, insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer Kennnummer, zu Standortdaten, zu einer Online-Kennung (z.B. Cookie) oder zu einem oder mehreren besonderen Merkmalen identifiziert werden kann, die Ausdruck der physischen, physiologischen, genetischen, psychischen, wirtschaftlichen, kulturellen oder sozialen Identität dieser natürlichen Person sind. </li><li><strong>Verantwortlicher:</strong> Als "Verantwortlicher“ wird die natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet, bezeichnet. </li><li><strong>Verarbeitung:</strong> "Verarbeitung" ist jeder mit oder ohne Hilfe automatisierter Verfahren ausgeführte Vorgang oder jede solche Vorgangsreihe im Zusammenhang mit personenbezogenen Daten. Der Begriff reicht weit und umfasst praktisch jeden Umgang mit Daten, sei es das Erheben, das Auswerten, das Speichern, das Übermitteln oder das Löschen. </li></ul><p class="seal"><a href="https://datenschutz-generator.de/?l=de" title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank" rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a></p>
|
||||
<a href="../index.php" class="button button-tx button-left">Zurück</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
62
pages/impressum.html
Normal file
62
pages/impressum.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="../css/style.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/mobile.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/animation.css" />
|
||||
<link type="text/css" rel="stylesheet" href="../css/font-awesome/css/font-awesome.css" />
|
||||
|
||||
<title>Thiemoo.at - der Alpenmann</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
<div id="content" class="content">
|
||||
<h1 class="sidebar-header">Navigation</h1>
|
||||
<hr>
|
||||
|
||||
<ul>
|
||||
<li id="nav-home" class="home active"><a href="#home"><i class="icon active"></i><span>Home</span></a></li>
|
||||
<li id="nav-portfolio" class="portfolio"><a href="#portfolio"><i class="icon"></i><span>Portfolio</span></a></li>
|
||||
<li id="nav-server" class="server"><a href="#server"><i class="icon"></i><span>Server</span></a></li>
|
||||
<li id="nav-projekte" class="projekte"><a href="#projekte"><i class="icon"></i><span>Projekte</span></a></li>
|
||||
<li id="nav-blog" class="blog"><a href="#blog"><i class="icon"></i><span>Blog</span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar" id="navbar">
|
||||
<a class="navbar-name" href="https://thiemoo.at">
|
||||
<span class="name-t">T</span><span class="name-h">h</span><span class="name-i">i</span><span class="name-e">e</span><span class="name-m">m</span><span class="name-o">o</span><span class="name-o2">o</span>
|
||||
</a>
|
||||
<a class="menu-button" onclick="switchNav()"><i id="navbar-icon" class="fa fa-bars" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="impressum">
|
||||
<img class="avatar-img" src="../images/profile.png" alt="Avatar"></img>
|
||||
|
||||
<p class="thats-me">Yep, das bin wirklich ich!</p>
|
||||
<img class="thats-me-arrow" src="../images/arrow.svg" alt="Arrow"></img>
|
||||
</div>
|
||||
|
||||
<div class="impressum-info">
|
||||
<p class="placeholder"> </p>
|
||||
|
||||
<p><span>☛</span> Thiemo Tiziani</p>
|
||||
<p><span>☛</span> Pufferweg 2</p>
|
||||
<p><span>☛</span> 4400 Steyr</p>
|
||||
<p><span>☛</span> Österreich</p>
|
||||
<p class="placeholder"> </p>
|
||||
<p><span>✉</span> E-Mail: <a href="mailto: thiemo.tiziani@thiemoo.at" class="links">thiemo.tiziani@thiemoo.at</a></p>
|
||||
<p><span>✆</span> Telefon: <span>+43 677 64 782240</span></p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="../js/sidebar.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user