Initial release of thiemoo.at

This commit is contained in:
Givou 2022-11-10 22:43:10 +01:00
commit 8e77e4eab7
28 changed files with 8225 additions and 0 deletions

0
admin/login.php Normal file
View File

95
css/animation.css Normal file
View 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

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

195
css/mobile.css Normal file
View 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
View 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

Binary file not shown.

41
images/arrow.svg Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 773 KiB

BIN
images/nerdcity.at.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
images/profile.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
images/thiemoo.at.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

203
index.php Normal file
View 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 au­to­di­dak­tischer <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">&nbsp;</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">&nbsp;</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
View 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

File diff suppressed because one or more lines are too long

1541
js/particles.js Normal file

File diff suppressed because it is too large Load Diff

51
js/sidebar.js Normal file
View 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
View 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
View 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