Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

redesign, part 1!

Browse source
This commit is contained in:
Ellpeck 2019-10-04 21:33:37 +02:00
parent a7ce9ce0e1
commit a4e1ebf073
17 changed files with 1401 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
about.html Normal file
View file

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ellpeck.de - About </title>
<meta name="author" content="Ellpeck">
<meta name="description" content=" A list of some of the answers to some of the questions I get asked ">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style/prettify.css">
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content=" Ellpeck.de - About ">
<meta property="og:description" content=" A list of some of the answers to some of the questions I get asked ">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="scripts/showdown-prettify.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
<!-- Responsive navbar menu opener -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
</nav>
<!-- Content -->
<div class="container main">
<!-- Cookie notification -->
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
<!-- TITLE Ellpeck.de - About -->
<!-- DESCRIPTION A list of some of the answers to some of the questions I get asked -->
<div class="list-display rounded">
<h1>About</h1>
<p>
Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be interesting to you!
</p>
<div id="about-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/about.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer rounded-top">
<span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018-2019 Ellpeck</a> &ndash; <a id="impressum-button" href="#impressum">Impressum</a></span>
<div class="quote">
<span id="quote-text"></span>
<script src="scripts/quote.js"></script>
<img src="res/blobheart.png" id="blobheart">
</div>
</div>
<!-- Commissions -->
<div class="modal fade" id="commissions-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
<p>Here is all the information you need if you want to commission me to make a mod for you:</p>
<ul>
<li>Minecraft Forge mods only</li>
<li>Minecraft Versions 1.10 through 1.13 only</li>
<li>No ports of existing mods</li>
<li>I charge between 10€ ($11) and 30€ ($33) an hour
<ul>
<li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
<li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes</li>
</ul>
</li>
<li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
<li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge</li>
<li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not</li>
</ul>
<p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
</div>
</div>
</div>
</div>
<!-- Impressum -->
<div class="modal fade" id="impressum-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Impressum</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span class="text-muted">If you don't know what this is, read up on it <a href="https://en.wikipedia.org/wiki/Impressum">here</a> or just ignore it.</span>
<div class="impressum-data">
Julian Schubert
<br>Kastanienweg 27
<br>52074 Aachen
<br>Telefon: 0241 45093753
<br>E-Mail: me@ellpeck.de
</div>
<p>
Verantwortlich für den Inhalt (gem. § 55 Abs. 2 RStV):
<br>Siehe oben
</p>
<h3>Disclaimer – rechtliche Hinweise</h3>
<h4>§ 1 Haftungsbeschränkung</h4>
<p>
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website erfolgt auf eigene
Gefahr des Nutzers. Namentlich gekennzeichnete Beiträge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei Vertragsverhältnis
zwischen dem Nutzer und dem Anbieter zustande.
</p>
<h4>§ 2 Externe Links</h4>
<p>
Diese Website enthält Verknüpfungen zu Websites Dritter (“externe Links”). Diese Websites unterliegen der Haftung der jeweiligen Betreiber. Der Anbieter hat bei der erstmaligen Verknüpfung der externen Links die fremden Inhalte daraufhin überprüft, ob
etwaige Rechtsverstöße bestehen. Zu dem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Der Anbieter hat keinerlei Einfluss auf die aktuelle und zukünftige Gestaltung und auf die Inhalte der verknüpften Seiten. Das Setzen von
externen Links bedeutet nicht, dass sich der Anbieter die hinter dem Verweis oder Link liegenden Inhalte zu Eigen macht. Eine ständige Kontrolle der externen Links ist für den Anbieter ohne konkrete Hinweise auf Rechtsverstöße
nicht zumutbar. Bei Kenntnis von Rechtsverstößen werden jedoch derartige externe Links unverzüglich gelöscht.
</p>
<h4>§ 3 Urheber- und Leistungsschutzrechte</h4>
<p>
Die auf dieser Website veröffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters
oder jeweiligen Rechteinhabers. Dies gilt insbesondere für Vervielfältigung, Bearbeitung, Übersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen Medien und Systemen. Inhalte
und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielfältigung oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung von Kopien und Downloads
für den persönlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.
<br>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zulässig.
</p>
<h4>§ 4 Besondere Nutzungsbedingungen</h4>
<p>
Soweit besondere Bedingungen für einzelne Nutzungen dieser Website von den vorgenannten Paragraphen abweichen, wird an entsprechender Stelle ausdrücklich darauf hingewiesen. In diesem Falle gelten im jeweiligen Einzelfall die besonderen Nutzungsbedingungen.
</p>
<h3>Datenschutzerklärung</h3>
<h4>Datenschutz</h4>
<p>
Nachfolgend möchten wir Sie über unsere Datenschutzerklärung informieren. Sie finden hier Informationen über die Erhebung und Verwendung persönlicher Daten bei der Nutzung unserer Webseite. Wir beachten dabei das für Deutschland geltende Datenschutzrecht.
Sie können diese Erklärung jederzeit auf unserer Webseite abrufen.
<br>Wir weisen ausdrücklich darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen und nicht lückenlos vor dem Zugriff durch Dritte geschützt werden kann.
<br>Die Verwendung der Kontaktdaten unseres Impressums zur gewerblichen Werbung ist ausdrücklich nicht erwünscht, es sei denn wir hatten zuvor unsere schriftliche Einwilligung erteilt oder es besteht bereits eine Geschäftsbeziehung.
Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.
</p>
<h4>Personenbezogene Daten</h4>
<p>
Sie können unsere Webseite ohne Angabe personenbezogener Daten besuchen. Soweit auf unseren Seiten personenbezogene Daten (wie Name, Anschrift oder E-Mail Adresse) erhoben werden, erfolgt dies, soweit möglich, auf freiwilliger Basis. Diese Daten werden
ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Sofern zwischen Ihnen und uns ein Vertragsverhältnis begründet, inhaltlich ausgestaltet oder geändert werden soll oder Sie an uns eine Anfrage stellen, erheben und
verwenden wir personenbezogene Daten von Ihnen, soweit dies zu diesen Zwecken erforderlich ist (Bestandsdaten). Wir erheben, verarbeiten und nutzen personenbezogene Daten soweit dies erforderlich ist, um Ihnen die Inanspruchnahme
des Webangebots zu ermöglichen (Nutzungsdaten). Sämtliche personenbezogenen Daten werden nur solange gespeichert wie dies für den geannten Zweck (Bearbeitung Ihrer Anfrage oder Abwicklung eines Vertrags) erforderlich ist. Hierbei
werden steuer- und handelsrechtliche Aufbewahrungsfristen berücksichtigt. Auf Anordnung der zuständigen Stellen dürfen wir im Einzelfall Auskunft über diese Daten (Bestandsdaten) erteilen, soweit dies für Zwecke der Strafverfolgung,
zur Gefahrenabwehr, zur Erfüllung der gesetzlichen Aufgaben der Verfassungsschutzbehörden oder des Militärischen Abschirmdienstes oder zur Durchsetzung der Rechte am geistigen Eigentum erforderlich ist.
</p>
<h4>Auskunftsrecht</h4>
<p>
Sie haben das jederzeitige Recht, sich unentgeltlich und unverzüglich über die zu Ihrer Person erhobenen Daten zu erkundigen. Sie haben das jederzeitige Recht, Ihre Zustimmung zur Verwendung Ihrer angegeben persönlichen Daten mit Wirkung für die Zukunft
zu widerrufen. Zur Auskunftserteilung wenden Sie sich bitte an den Anbieter unter den Kontaktdaten im Impressum.
</p>
<em>Quelle: Impressum Muster von impressum-recht.de</em>
</div>
</div>
</div>
</div>
</body>
</html>

240
blog.html Normal file
View file

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ellpeck.de - Blog </title>
<meta name="author" content="Ellpeck">
<meta name="description" content=" Some of the stuff I write about programming, gaming and life ">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style/prettify.css">
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content=" Ellpeck.de - Blog ">
<meta property="og:description" content=" Some of the stuff I write about programming, gaming and life ">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="scripts/showdown-prettify.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
<!-- Responsive navbar menu opener -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
</nav>
<!-- Content -->
<div class="container main">
<!-- Cookie notification -->
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
<!-- TITLE Ellpeck.de - Blog -->
<!-- DESCRIPTION Some of the stuff I write about programming, gaming and life -->
<div class="list-display rounded">
<h1>Blog</h1>
<p>
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to expand the post.
</p>
<div id="blog-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/blog.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer rounded-top">
<span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018-2019 Ellpeck</a> &ndash; <a id="impressum-button" href="#impressum">Impressum</a></span>
<div class="quote">
<span id="quote-text"></span>
<script src="scripts/quote.js"></script>
<img src="res/blobheart.png" id="blobheart">
</div>
</div>
<!-- Commissions -->
<div class="modal fade" id="commissions-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
<p>Here is all the information you need if you want to commission me to make a mod for you:</p>
<ul>
<li>Minecraft Forge mods only</li>
<li>Minecraft Versions 1.10 through 1.13 only</li>
<li>No ports of existing mods</li>
<li>I charge between 10€ ($11) and 30€ ($33) an hour
<ul>
<li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
<li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes</li>
</ul>
</li>
<li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
<li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge</li>
<li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not</li>
</ul>
<p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
</div>
</div>
</div>
</div>
<!-- Impressum -->
<div class="modal fade" id="impressum-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Impressum</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span class="text-muted">If you don't know what this is, read up on it <a href="https://en.wikipedia.org/wiki/Impressum">here</a> or just ignore it.</span>
<div class="impressum-data">
Julian Schubert
<br>Kastanienweg 27
<br>52074 Aachen
<br>Telefon: 0241 45093753
<br>E-Mail: me@ellpeck.de
</div>
<p>
Verantwortlich für den Inhalt (gem. § 55 Abs. 2 RStV):
<br>Siehe oben
</p>
<h3>Disclaimer – rechtliche Hinweise</h3>
<h4>§ 1 Haftungsbeschränkung</h4>
<p>
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website erfolgt auf eigene
Gefahr des Nutzers. Namentlich gekennzeichnete Beiträge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei Vertragsverhältnis
zwischen dem Nutzer und dem Anbieter zustande.
</p>
<h4>§ 2 Externe Links</h4>
<p>
Diese Website enthält Verknüpfungen zu Websites Dritter (“externe Links”). Diese Websites unterliegen der Haftung der jeweiligen Betreiber. Der Anbieter hat bei der erstmaligen Verknüpfung der externen Links die fremden Inhalte daraufhin überprüft, ob
etwaige Rechtsverstöße bestehen. Zu dem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Der Anbieter hat keinerlei Einfluss auf die aktuelle und zukünftige Gestaltung und auf die Inhalte der verknüpften Seiten. Das Setzen von
externen Links bedeutet nicht, dass sich der Anbieter die hinter dem Verweis oder Link liegenden Inhalte zu Eigen macht. Eine ständige Kontrolle der externen Links ist für den Anbieter ohne konkrete Hinweise auf Rechtsverstöße
nicht zumutbar. Bei Kenntnis von Rechtsverstößen werden jedoch derartige externe Links unverzüglich gelöscht.
</p>
<h4>§ 3 Urheber- und Leistungsschutzrechte</h4>
<p>
Die auf dieser Website veröffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters
oder jeweiligen Rechteinhabers. Dies gilt insbesondere für Vervielfältigung, Bearbeitung, Übersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen Medien und Systemen. Inhalte
und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielfältigung oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung von Kopien und Downloads
für den persönlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.
<br>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zulässig.
</p>
<h4>§ 4 Besondere Nutzungsbedingungen</h4>
<p>
Soweit besondere Bedingungen für einzelne Nutzungen dieser Website von den vorgenannten Paragraphen abweichen, wird an entsprechender Stelle ausdrücklich darauf hingewiesen. In diesem Falle gelten im jeweiligen Einzelfall die besonderen Nutzungsbedingungen.
</p>
<h3>Datenschutzerklärung</h3>
<h4>Datenschutz</h4>
<p>
Nachfolgend möchten wir Sie über unsere Datenschutzerklärung informieren. Sie finden hier Informationen über die Erhebung und Verwendung persönlicher Daten bei der Nutzung unserer Webseite. Wir beachten dabei das für Deutschland geltende Datenschutzrecht.
Sie können diese Erklärung jederzeit auf unserer Webseite abrufen.
<br>Wir weisen ausdrücklich darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen und nicht lückenlos vor dem Zugriff durch Dritte geschützt werden kann.
<br>Die Verwendung der Kontaktdaten unseres Impressums zur gewerblichen Werbung ist ausdrücklich nicht erwünscht, es sei denn wir hatten zuvor unsere schriftliche Einwilligung erteilt oder es besteht bereits eine Geschäftsbeziehung.
Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.
</p>
<h4>Personenbezogene Daten</h4>
<p>
Sie können unsere Webseite ohne Angabe personenbezogener Daten besuchen. Soweit auf unseren Seiten personenbezogene Daten (wie Name, Anschrift oder E-Mail Adresse) erhoben werden, erfolgt dies, soweit möglich, auf freiwilliger Basis. Diese Daten werden
ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Sofern zwischen Ihnen und uns ein Vertragsverhältnis begründet, inhaltlich ausgestaltet oder geändert werden soll oder Sie an uns eine Anfrage stellen, erheben und
verwenden wir personenbezogene Daten von Ihnen, soweit dies zu diesen Zwecken erforderlich ist (Bestandsdaten). Wir erheben, verarbeiten und nutzen personenbezogene Daten soweit dies erforderlich ist, um Ihnen die Inanspruchnahme
des Webangebots zu ermöglichen (Nutzungsdaten). Sämtliche personenbezogenen Daten werden nur solange gespeichert wie dies für den geannten Zweck (Bearbeitung Ihrer Anfrage oder Abwicklung eines Vertrags) erforderlich ist. Hierbei
werden steuer- und handelsrechtliche Aufbewahrungsfristen berücksichtigt. Auf Anordnung der zuständigen Stellen dürfen wir im Einzelfall Auskunft über diese Daten (Bestandsdaten) erteilen, soweit dies für Zwecke der Strafverfolgung,
zur Gefahrenabwehr, zur Erfüllung der gesetzlichen Aufgaben der Verfassungsschutzbehörden oder des Militärischen Abschirmdienstes oder zur Durchsetzung der Rechte am geistigen Eigentum erforderlich ist.
</p>
<h4>Auskunftsrecht</h4>
<p>
Sie haben das jederzeitige Recht, sich unentgeltlich und unverzüglich über die zu Ihrer Person erhobenen Daten zu erkundigen. Sie haben das jederzeitige Recht, Ihre Zustimmung zur Verwendung Ihrer angegeben persönlichen Daten mit Wirkung für die Zukunft
zu widerrufen. Zur Auskunftserteilung wenden Sie sich bitte an den Anbieter unter den Kontaktdaten im Impressum.
</p>
<em>Quelle: Impressum Muster von impressum-recht.de</em>
</div>
</div>
</div>
</div>
</body>
</html>

39
generate.js Normal file
View file

@ -0,0 +1,39 @@
var fs = require("fs");
var subPages = [
"index",
"projects",
"social",
"about",
"blog"
];
if (process.argv[2] == "delete") {
for (var s of subPages) {
var path = s + ".html";
if (fs.existsSync(path)) {
console.log("Deleting " + path);
fs.unlinkSync(path);
}
}
} else {
var main = fs.readFileSync("templates/main.html").toString();
for (var s of subPages) {
var path = s + ".html";
var content = main;
var template = fs.readFileSync("templates/" + path).toString();
content = content.replace("INSERT CONTENT", template);
var titleIndex = template.indexOf("TITLE") + 5;
var title = template.substring(titleIndex, template.indexOf("-->", titleIndex));
content = content.split("INSERT TITLE").join(title);
var descIndex = template.indexOf("DESCRIPTION") + 11;
var desc = template.substring(descIndex, template.indexOf("-->", descIndex))
content = content.split("INSERT DESCRIPTION").join(desc);
console.log("Creating " + path);
fs.writeFileSync(path, content);
}
}

151
index.html
View file

@ -5,9 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellpeck.de</title>
<title> Ellpeck.de </title>
<meta name="author" content="Ellpeck">
<meta name="description" content="Ellpeck's little internet place">
<meta name="description" content=" Ellpeck's little internet place ">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
@ -16,8 +16,8 @@
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content="Ellpeck.de">
<meta property="og:description" content="Ellpeck's little internet place">
<meta property="og:title" content=" Ellpeck.de ">
<meta property="og:description" content=" Ellpeck's little internet place ">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
@ -34,13 +34,19 @@
<script src="scripts/main.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script src="scripts/navbar.js"></script>
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#">
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
@ -52,15 +58,25 @@
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#social">Social</a>
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#blog">Blog</a>
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
@ -68,93 +84,44 @@
<!-- Content -->
<div class="container main">
<!-- Home -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-auto">
<img src="res/me.png" class="rounded-circle" width="200" height="200" id="navbar-image">
</div>
<div class="col">
<h1 class="display-4" id="intro-text"></h1>
<script src="scripts/greet.js"></script>
<p class="lead">Welcome to my little website! I'm Ellpeck, a student and programmer from Germany. I do a lot of stuff, actually. My life is pretty busy.</p>
<p>Look around this website to find out more about my projects and other places you can find me!</p>
</div>
</div>
</div>
</div>
<!-- Cookie notification -->
<script src="scripts/cookies.js"></script>
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
<!-- Projects -->
<a class="anchor" id="projects"></a>
<div class="list-display rounded">
<h1>Projects</h1>
<p>
Here is a list of some of the things that you might know me from. If you want to have a more in-depth look at everything I do, check out some of the sites linked in the <a href="#social">Social</a> section.
</p>
<div id="project-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
<!-- TITLE Ellpeck.de -->
<!-- DESCRIPTION Ellpeck's little internet place -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-auto">
<img src="res/me.png" class="rounded-circle" width="200" height="200" id="navbar-image">
</div>
<script src="scripts/projects.js"></script>
</div>
<!-- Social -->
<a class="anchor" id="social"></a>
<div class="list-display rounded">
<h1>Social</h1>
<p>
These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
</p>
<div class="row">
<div class="col">
<div id="social-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
Additionally, here are some miscellaneous platforms:
<ul>
<li>My Nintendo Switch friend code is <strong>SW-5281-8834-6801</strong></li>
<li>If you want to play my Mario Maker 2 levels, my ID is <strong>8BH-566-4WF</strong></li>
<li>If you play The Sims 4, you can check out my builds on the gallery by searching for <strong>Ellpeck</strong></li>
</ul>
</div>
<div class="col-md-auto" id="discord-div">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<div class="col">
<h1 class="display-4" id="intro-text"></h1>
<script src="scripts/greet.js"></script>
<p class="lead">Welcome to my little website! I'm Ellpeck, a student and programmer from Germany. I do a lot of stuff, actually. My life is pretty busy.</p>
<p>Look around this website to find out more about my projects and other places you can find me!</p>
</div>
<script src="scripts/social.js"></script>
</div>
<!-- About -->
<a class="anchor" id="about"></a>
<div class="list-display rounded">
<h1>About</h1>
<p>
Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be interesting to you!
</p>
<div id="about-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/about.js"></script>
</div>
<!-- Blog -->
<a class="anchor" id="blog"></a>
<div class="list-display rounded">
<h1>Blog</h1>
<p>
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to expand the post.
</p>
<div id="blog-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/blog.js"></script>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer rounded-top">

48
node/sitemap.js
View file

@ -1,48 +0,0 @@
const express = require('express');
const {
createSitemap
} = require('sitemap');
const fs = require("fs");
let app = express();
app.get('/sitemap.xml', function (_req, res) {
let sitemap = createSitemap({
hostname: 'https://ellpeck.de',
urls: [{
url: '/',
priority: 0.8
},
{
url: '/#projects',
changefreq: 'monthly'
},
{
url: '/#social',
changefreq: 'yearly'
},
{
url: '/#about',
changefreq: 'monthly'
},
{
url: '/#blog',
changefreq: 'weekly',
priority: 0.6
}
]
});
fs.readFile(__dirname + "/../blog/posts.json", function (_, data) {
var json = JSON.parse(data);
for (var post of json) {
sitemap.add({
url: "/#blog-" + post["id"],
priority: 0.4
});
}
res.header('Content-Type', 'application/xml');
res.send(sitemap.toXML());
});
});
app.listen(3000);

240
projects.html Normal file
View file

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ellpeck.de - Projects </title>
<meta name="author" content="Ellpeck">
<meta name="description" content=" A list of some of the things that I created and that you might know me from ">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style/prettify.css">
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content=" Ellpeck.de - Projects ">
<meta property="og:description" content=" A list of some of the things that I created and that you might know me from ">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="scripts/showdown-prettify.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
<!-- Responsive navbar menu opener -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
</nav>
<!-- Content -->
<div class="container main">
<!-- Cookie notification -->
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
<!-- TITLE Ellpeck.de - Projects -->
<!-- DESCRIPTION A list of some of the things that I created and that you might know me from -->
<div class="list-display rounded">
<h1>Projects</h1>
<p>
Here is a list of some of the things that you might know me from. If you want to have a more in-depth look at everything I do, check out some of the sites linked in the <a href="#social">Social</a> section.
</p>
<div id="project-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/projects.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer rounded-top">
<span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018-2019 Ellpeck</a> &ndash; <a id="impressum-button" href="#impressum">Impressum</a></span>
<div class="quote">
<span id="quote-text"></span>
<script src="scripts/quote.js"></script>
<img src="res/blobheart.png" id="blobheart">
</div>
</div>
<!-- Commissions -->
<div class="modal fade" id="commissions-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
<p>Here is all the information you need if you want to commission me to make a mod for you:</p>
<ul>
<li>Minecraft Forge mods only</li>
<li>Minecraft Versions 1.10 through 1.13 only</li>
<li>No ports of existing mods</li>
<li>I charge between 10€ ($11) and 30€ ($33) an hour
<ul>
<li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
<li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes</li>
</ul>
</li>
<li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
<li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge</li>
<li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not</li>
</ul>
<p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
</div>
</div>
</div>
</div>
<!-- Impressum -->
<div class="modal fade" id="impressum-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Impressum</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span class="text-muted">If you don't know what this is, read up on it <a href="https://en.wikipedia.org/wiki/Impressum">here</a> or just ignore it.</span>
<div class="impressum-data">
Julian Schubert
<br>Kastanienweg 27
<br>52074 Aachen
<br>Telefon: 0241 45093753
<br>E-Mail: me@ellpeck.de
</div>
<p>
Verantwortlich für den Inhalt (gem. § 55 Abs. 2 RStV):
<br>Siehe oben
</p>
<h3>Disclaimer – rechtliche Hinweise</h3>
<h4>§ 1 Haftungsbeschränkung</h4>
<p>
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website erfolgt auf eigene
Gefahr des Nutzers. Namentlich gekennzeichnete Beiträge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei Vertragsverhältnis
zwischen dem Nutzer und dem Anbieter zustande.
</p>
<h4>§ 2 Externe Links</h4>
<p>
Diese Website enthält Verknüpfungen zu Websites Dritter (“externe Links”). Diese Websites unterliegen der Haftung der jeweiligen Betreiber. Der Anbieter hat bei der erstmaligen Verknüpfung der externen Links die fremden Inhalte daraufhin überprüft, ob
etwaige Rechtsverstöße bestehen. Zu dem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Der Anbieter hat keinerlei Einfluss auf die aktuelle und zukünftige Gestaltung und auf die Inhalte der verknüpften Seiten. Das Setzen von
externen Links bedeutet nicht, dass sich der Anbieter die hinter dem Verweis oder Link liegenden Inhalte zu Eigen macht. Eine ständige Kontrolle der externen Links ist für den Anbieter ohne konkrete Hinweise auf Rechtsverstöße
nicht zumutbar. Bei Kenntnis von Rechtsverstößen werden jedoch derartige externe Links unverzüglich gelöscht.
</p>
<h4>§ 3 Urheber- und Leistungsschutzrechte</h4>
<p>
Die auf dieser Website veröffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters
oder jeweiligen Rechteinhabers. Dies gilt insbesondere für Vervielfältigung, Bearbeitung, Übersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen Medien und Systemen. Inhalte
und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielfältigung oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung von Kopien und Downloads
für den persönlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.
<br>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zulässig.
</p>
<h4>§ 4 Besondere Nutzungsbedingungen</h4>
<p>
Soweit besondere Bedingungen für einzelne Nutzungen dieser Website von den vorgenannten Paragraphen abweichen, wird an entsprechender Stelle ausdrücklich darauf hingewiesen. In diesem Falle gelten im jeweiligen Einzelfall die besonderen Nutzungsbedingungen.
</p>
<h3>Datenschutzerklärung</h3>
<h4>Datenschutz</h4>
<p>
Nachfolgend möchten wir Sie über unsere Datenschutzerklärung informieren. Sie finden hier Informationen über die Erhebung und Verwendung persönlicher Daten bei der Nutzung unserer Webseite. Wir beachten dabei das für Deutschland geltende Datenschutzrecht.
Sie können diese Erklärung jederzeit auf unserer Webseite abrufen.
<br>Wir weisen ausdrücklich darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen und nicht lückenlos vor dem Zugriff durch Dritte geschützt werden kann.
<br>Die Verwendung der Kontaktdaten unseres Impressums zur gewerblichen Werbung ist ausdrücklich nicht erwünscht, es sei denn wir hatten zuvor unsere schriftliche Einwilligung erteilt oder es besteht bereits eine Geschäftsbeziehung.
Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.
</p>
<h4>Personenbezogene Daten</h4>
<p>
Sie können unsere Webseite ohne Angabe personenbezogener Daten besuchen. Soweit auf unseren Seiten personenbezogene Daten (wie Name, Anschrift oder E-Mail Adresse) erhoben werden, erfolgt dies, soweit möglich, auf freiwilliger Basis. Diese Daten werden
ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Sofern zwischen Ihnen und uns ein Vertragsverhältnis begründet, inhaltlich ausgestaltet oder geändert werden soll oder Sie an uns eine Anfrage stellen, erheben und
verwenden wir personenbezogene Daten von Ihnen, soweit dies zu diesen Zwecken erforderlich ist (Bestandsdaten). Wir erheben, verarbeiten und nutzen personenbezogene Daten soweit dies erforderlich ist, um Ihnen die Inanspruchnahme
des Webangebots zu ermöglichen (Nutzungsdaten). Sämtliche personenbezogenen Daten werden nur solange gespeichert wie dies für den geannten Zweck (Bearbeitung Ihrer Anfrage oder Abwicklung eines Vertrags) erforderlich ist. Hierbei
werden steuer- und handelsrechtliche Aufbewahrungsfristen berücksichtigt. Auf Anordnung der zuständigen Stellen dürfen wir im Einzelfall Auskunft über diese Daten (Bestandsdaten) erteilen, soweit dies für Zwecke der Strafverfolgung,
zur Gefahrenabwehr, zur Erfüllung der gesetzlichen Aufgaben der Verfassungsschutzbehörden oder des Militärischen Abschirmdienstes oder zur Durchsetzung der Rechte am geistigen Eigentum erforderlich ist.
</p>
<h4>Auskunftsrecht</h4>
<p>
Sie haben das jederzeitige Recht, sich unentgeltlich und unverzüglich über die zu Ihrer Person erhobenen Daten zu erkundigen. Sie haben das jederzeitige Recht, Ihre Zustimmung zur Verwendung Ihrer angegeben persönlichen Daten mit Wirkung für die Zukunft
zu widerrufen. Zur Auskunftserteilung wenden Sie sich bitte an den Anbieter unter den Kontaktdaten im Impressum.
</p>
<em>Quelle: Impressum Muster von impressum-recht.de</em>
</div>
</div>
</div>
</div>
</body>
</html>

15
scripts/cookies.js
View file

@ -1,15 +0,0 @@
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}

8
scripts/main.js
View file

@ -32,14 +32,6 @@ $(function () {
$('#navbar-image').attr('src', 'res/heart.png');
});
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
PR.prettyPrint();
});

5
scripts/navbar.js
View file

@ -1,5 +0,0 @@
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}

255
social.html Normal file
View file

@ -0,0 +1,255 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Ellpeck.de - Social </title>
<meta name="author" content="Ellpeck">
<meta name="description" content=" Other websites where you can find me and the things I do, as well as a lot of ways to reach me ">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style/prettify.css">
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content=" Ellpeck.de - Social ">
<meta property="og:description" content=" Other websites where you can find me and the things I do, as well as a lot of ways to reach me ">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="scripts/showdown-prettify.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
<!-- Responsive navbar menu opener -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
</nav>
<!-- Content -->
<div class="container main">
<!-- Cookie notification -->
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
<!-- TITLE Ellpeck.de - Social -->
<!-- DESCRIPTION Other websites where you can find me and the things I do, as well as a lot of ways to reach me -->
<div class="list-display rounded">
<h1>Social</h1>
<p>
These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
</p>
<div class="row">
<div class="col">
<div id="social-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
Additionally, here are some miscellaneous platforms:
<ul>
<li>My Nintendo Switch friend code is <strong>SW-5281-8834-6801</strong></li>
<li>If you want to play my Mario Maker 2 levels, my ID is <strong>8BH-566-4WF</strong></li>
<li>If you play The Sims 4, you can check out my builds on the gallery by searching for <strong>Ellpeck</strong></li>
</ul>
</div>
<div class="col-md-auto" id="discord-div">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
</div>
<script src="scripts/social.js"></script>
</div>
</div>
<!-- Footer -->
<div class="footer rounded-top">
<span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018-2019 Ellpeck</a> &ndash; <a id="impressum-button" href="#impressum">Impressum</a></span>
<div class="quote">
<span id="quote-text"></span>
<script src="scripts/quote.js"></script>
<img src="res/blobheart.png" id="blobheart">
</div>
</div>
<!-- Commissions -->
<div class="modal fade" id="commissions-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
<p>Here is all the information you need if you want to commission me to make a mod for you:</p>
<ul>
<li>Minecraft Forge mods only</li>
<li>Minecraft Versions 1.10 through 1.13 only</li>
<li>No ports of existing mods</li>
<li>I charge between 10€ ($11) and 30€ ($33) an hour
<ul>
<li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
<li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes</li>
</ul>
</li>
<li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
<li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge</li>
<li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not</li>
</ul>
<p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
</div>
</div>
</div>
</div>
<!-- Impressum -->
<div class="modal fade" id="impressum-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Impressum</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span class="text-muted">If you don't know what this is, read up on it <a href="https://en.wikipedia.org/wiki/Impressum">here</a> or just ignore it.</span>
<div class="impressum-data">
Julian Schubert
<br>Kastanienweg 27
<br>52074 Aachen
<br>Telefon: 0241 45093753
<br>E-Mail: me@ellpeck.de
</div>
<p>
Verantwortlich für den Inhalt (gem. § 55 Abs. 2 RStV):
<br>Siehe oben
</p>
<h3>Disclaimer – rechtliche Hinweise</h3>
<h4>§ 1 Haftungsbeschränkung</h4>
<p>
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website erfolgt auf eigene
Gefahr des Nutzers. Namentlich gekennzeichnete Beiträge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei Vertragsverhältnis
zwischen dem Nutzer und dem Anbieter zustande.
</p>
<h4>§ 2 Externe Links</h4>
<p>
Diese Website enthält Verknüpfungen zu Websites Dritter (“externe Links”). Diese Websites unterliegen der Haftung der jeweiligen Betreiber. Der Anbieter hat bei der erstmaligen Verknüpfung der externen Links die fremden Inhalte daraufhin überprüft, ob
etwaige Rechtsverstöße bestehen. Zu dem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Der Anbieter hat keinerlei Einfluss auf die aktuelle und zukünftige Gestaltung und auf die Inhalte der verknüpften Seiten. Das Setzen von
externen Links bedeutet nicht, dass sich der Anbieter die hinter dem Verweis oder Link liegenden Inhalte zu Eigen macht. Eine ständige Kontrolle der externen Links ist für den Anbieter ohne konkrete Hinweise auf Rechtsverstöße
nicht zumutbar. Bei Kenntnis von Rechtsverstößen werden jedoch derartige externe Links unverzüglich gelöscht.
</p>
<h4>§ 3 Urheber- und Leistungsschutzrechte</h4>
<p>
Die auf dieser Website veröffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters
oder jeweiligen Rechteinhabers. Dies gilt insbesondere für Vervielfältigung, Bearbeitung, Übersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen Medien und Systemen. Inhalte
und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielfältigung oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung von Kopien und Downloads
für den persönlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.
<br>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zulässig.
</p>
<h4>§ 4 Besondere Nutzungsbedingungen</h4>
<p>
Soweit besondere Bedingungen für einzelne Nutzungen dieser Website von den vorgenannten Paragraphen abweichen, wird an entsprechender Stelle ausdrücklich darauf hingewiesen. In diesem Falle gelten im jeweiligen Einzelfall die besonderen Nutzungsbedingungen.
</p>
<h3>Datenschutzerklärung</h3>
<h4>Datenschutz</h4>
<p>
Nachfolgend möchten wir Sie über unsere Datenschutzerklärung informieren. Sie finden hier Informationen über die Erhebung und Verwendung persönlicher Daten bei der Nutzung unserer Webseite. Wir beachten dabei das für Deutschland geltende Datenschutzrecht.
Sie können diese Erklärung jederzeit auf unserer Webseite abrufen.
<br>Wir weisen ausdrücklich darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen und nicht lückenlos vor dem Zugriff durch Dritte geschützt werden kann.
<br>Die Verwendung der Kontaktdaten unseres Impressums zur gewerblichen Werbung ist ausdrücklich nicht erwünscht, es sei denn wir hatten zuvor unsere schriftliche Einwilligung erteilt oder es besteht bereits eine Geschäftsbeziehung.
Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.
</p>
<h4>Personenbezogene Daten</h4>
<p>
Sie können unsere Webseite ohne Angabe personenbezogener Daten besuchen. Soweit auf unseren Seiten personenbezogene Daten (wie Name, Anschrift oder E-Mail Adresse) erhoben werden, erfolgt dies, soweit möglich, auf freiwilliger Basis. Diese Daten werden
ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Sofern zwischen Ihnen und uns ein Vertragsverhältnis begründet, inhaltlich ausgestaltet oder geändert werden soll oder Sie an uns eine Anfrage stellen, erheben und
verwenden wir personenbezogene Daten von Ihnen, soweit dies zu diesen Zwecken erforderlich ist (Bestandsdaten). Wir erheben, verarbeiten und nutzen personenbezogene Daten soweit dies erforderlich ist, um Ihnen die Inanspruchnahme
des Webangebots zu ermöglichen (Nutzungsdaten). Sämtliche personenbezogenen Daten werden nur solange gespeichert wie dies für den geannten Zweck (Bearbeitung Ihrer Anfrage oder Abwicklung eines Vertrags) erforderlich ist. Hierbei
werden steuer- und handelsrechtliche Aufbewahrungsfristen berücksichtigt. Auf Anordnung der zuständigen Stellen dürfen wir im Einzelfall Auskunft über diese Daten (Bestandsdaten) erteilen, soweit dies für Zwecke der Strafverfolgung,
zur Gefahrenabwehr, zur Erfüllung der gesetzlichen Aufgaben der Verfassungsschutzbehörden oder des Militärischen Abschirmdienstes oder zur Durchsetzung der Rechte am geistigen Eigentum erforderlich ist.
</p>
<h4>Auskunftsrecht</h4>
<p>
Sie haben das jederzeitige Recht, sich unentgeltlich und unverzüglich über die zu Ihrer Person erhobenen Daten zu erkundigen. Sie haben das jederzeitige Recht, Ihre Zustimmung zur Verwendung Ihrer angegeben persönlichen Daten mit Wirkung für die Zukunft
zu widerrufen. Zur Auskunftserteilung wenden Sie sich bitte an den Anbieter unter den Kontaktdaten im Impressum.
</p>
<em>Quelle: Impressum Muster von impressum-recht.de</em>
</div>
</div>
</div>
</div>
</body>
</html>

19
style/style.css
View file

@ -1,6 +1,10 @@
html {
position: relative;
min-height: 100%;
}
body {
margin-top: 106px;
position: relative;
font-family: Roboto;
background-color: #404142;
}
@ -16,6 +20,7 @@ body {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 100px;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 60px;
@ -28,7 +33,8 @@ body {
}
.jumbotron {
margin-bottom: 0;
margin-bottom: 100px;
margin-top: 40px;
}
.project-image {
@ -98,11 +104,16 @@ body {
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
line-height: 30px;
background-color: #f5f5f5;
padding: 15px;
padding-left: 15px;
padding-right: 15px;
overflow: auto;
height: 60px;
line-height: 60px;
}
.impressum-data {

13
templates/about.html Normal file
View file

@ -0,0 +1,13 @@
<!-- TITLE Ellpeck.de - About -->
<!-- DESCRIPTION A list of some of the answers to some of the questions I get asked -->
<div class="list-display rounded">
<h1>About</h1>
<p>
Sometimes, some people ask me some questions about myself or my projects, so I decided to compile a list of some of the answers in a Q&A-like fashion so that I don't have to keep repeating them. If you're curious about me, this might be interesting to you!
</p>
<div id="about-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/about.js"></script>
</div>

13
templates/blog.html Normal file
View file

@ -0,0 +1,13 @@
<!-- TITLE Ellpeck.de - Blog -->
<!-- DESCRIPTION Some of the stuff I write about programming, gaming and life -->
<div class="list-display rounded">
<h1>Blog</h1>
<p>
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to expand the post.
</p>
<div id="blog-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/blog.js"></script>
</div>

18
templates/index.html Normal file
View file

@ -0,0 +1,18 @@
<!-- TITLE Ellpeck.de -->
<!-- DESCRIPTION Ellpeck's little internet place -->
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-auto">
<img src="res/me.png" class="rounded-circle" width="200" height="200" id="navbar-image">
</div>
<div class="col">
<h1 class="display-4" id="intro-text"></h1>
<script src="scripts/greet.js"></script>
<p class="lead">Welcome to my little website! I'm Ellpeck, a student and programmer from Germany. I do a lot of stuff, actually. My life is pretty busy.</p>
<p>Look around this website to find out more about my projects and other places you can find me!</p>
</div>
</div>
</div>
</div>

228
templates/main.html Normal file
View file

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INSERT TITLE</title>
<meta name="author" content="Ellpeck">
<meta name="description" content="INSERT DESCRIPTION">
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="style/prettify.css">
<link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico">
<meta property="og:title" content="INSERT TITLE">
<meta property="og:description" content="INSERT DESCRIPTION">
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
<script src="scripts/showdown-prettify.js"></script>
<script src="scripts/main.js"></script>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script>
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="index.html">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
</a>
<!-- Responsive navbar menu opener -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="index.html">Home</a>
<a class="nav-item nav-link" href="projects.html">Projects</a>
<a class="nav-item nav-link" href="social.html">Social</a>
<a class="nav-item nav-link" href="about.html">About</a>
<a class="nav-item nav-link" href="blog.html">Blog</a>
</div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
<script>
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
setCookie("dark", $(this).prop('checked'), 365);
window.location.hash = "";
location.reload();
});
</script>
</div>
</span>
</div>
</nav>
<!-- Content -->
<div class="container main">
<!-- Cookie notification -->
<script>
if (cookieNotification) {
let notif = "";
notif += '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
notif += "<strong>This site uses cookies to store information about your browsing activity.</strong>";
notif += "<br>Note that, due to widgets and embeds, additional information might be stored by other sites. Please refer to those sites' privacy policies for more information.";
notif += "<br>Keep in mind that you can review or delete stored cookies for any site at any time in your browser's settings. Have a nice day!";
notif += '<button type="button" class="close" data-dismiss="alert" id="notif-close">';
notif += '<span>&times;</span>';
notif += '</button></div>';
document.write(notif);
$("#notif-close").on("click", function () {
setCookie("notification", "true", 365);
});
}
</script>
INSERT CONTENT
</div>
<!-- Footer -->
<div class="footer rounded-top">
<span class="text-muted"><a href="https://github.com/Ellpeck/Web">&copy; 2018-2019 Ellpeck</a> &ndash; <a id="impressum-button" href="#impressum">Impressum</a></span>
<div class="quote">
<span id="quote-text"></span>
<script src="scripts/quote.js"></script>
<img src="res/blobheart.png" id="blobheart">
</div>
</div>
<!-- Commissions -->
<div class="modal fade" id="commissions-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title">Ellpeck's Minecraft Mod Commissions</h1>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>If you need a small to medium sized Minecraft mod for a modpack, a video or for personal use, you can contact me to make it for you.</p>
<p>Here is all the information you need if you want to commission me to make a mod for you:</p>
<ul>
<li>Minecraft Forge mods only</li>
<li>Minecraft Versions 1.10 through 1.13 only</li>
<li>No ports of existing mods</li>
<li>I charge between 10€ ($11) and 30€ ($33) an hour
<ul>
<li>I estimate the total amount of time it will take based on the size and complexity of the mod beforehand</li>
<li>The amount I estimate will be what you pay for, no matter how much longer or shorter it actually takes</li>
</ul>
</li>
<li>You will have the choice of whether you want to receive the source code privately or whether I should publish it on GitHub</li>
<li>You will have the choice of whether you want to be sent the mod jar or whether I should publish the mod on CurseForge</li>
<li>After the mod is completed, bug fixes are included for free, but feature updates and Minecraft version updates are not</li>
</ul>
<p>If you're interested, you can either <a href="mailto:me@ellpeck.de">send me an email</a>, but better yet, <a href="https://ellpeck.de/discord">join my Discord server</a> and message me privately from there so we can talk about the details.</p>
</div>
</div>
</div>
</div>
<!-- Impressum -->
<div class="modal fade" id="impressum-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Impressum</h5>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<span class="text-muted">If you don't know what this is, read up on it <a href="https://en.wikipedia.org/wiki/Impressum">here</a> or just ignore it.</span>
<div class="impressum-data">
Julian Schubert
<br>Kastanienweg 27
<br>52074 Aachen
<br>Telefon: 0241 45093753
<br>E-Mail: me@ellpeck.de
</div>
<p>
Verantwortlich für den Inhalt (gem. § 55 Abs. 2 RStV):
<br>Siehe oben
</p>
<h3>Disclaimer – rechtliche Hinweise</h3>
<h4>§ 1 Haftungsbeschränkung</h4>
<p>
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website erfolgt auf eigene
Gefahr des Nutzers. Namentlich gekennzeichnete Beiträge geben die Meinung des jeweiligen Autors und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei Vertragsverhältnis
zwischen dem Nutzer und dem Anbieter zustande.
</p>
<h4>§ 2 Externe Links</h4>
<p>
Diese Website enthält Verknüpfungen zu Websites Dritter (“externe Links”). Diese Websites unterliegen der Haftung der jeweiligen Betreiber. Der Anbieter hat bei der erstmaligen Verknüpfung der externen Links die fremden Inhalte daraufhin überprüft, ob
etwaige Rechtsverstöße bestehen. Zu dem Zeitpunkt waren keine Rechtsverstöße ersichtlich. Der Anbieter hat keinerlei Einfluss auf die aktuelle und zukünftige Gestaltung und auf die Inhalte der verknüpften Seiten. Das Setzen von
externen Links bedeutet nicht, dass sich der Anbieter die hinter dem Verweis oder Link liegenden Inhalte zu Eigen macht. Eine ständige Kontrolle der externen Links ist für den Anbieter ohne konkrete Hinweise auf Rechtsverstöße
nicht zumutbar. Bei Kenntnis von Rechtsverstößen werden jedoch derartige externe Links unverzüglich gelöscht.
</p>
<h4>§ 3 Urheber- und Leistungsschutzrechte</h4>
<p>
Die auf dieser Website veröffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht. Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen Zustimmung des Anbieters
oder jeweiligen Rechteinhabers. Dies gilt insbesondere für Vervielfältigung, Bearbeitung, Übersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen Medien und Systemen. Inhalte
und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielfältigung oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung von Kopien und Downloads
für den persönlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.
<br>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zulässig.
</p>
<h4>§ 4 Besondere Nutzungsbedingungen</h4>
<p>
Soweit besondere Bedingungen für einzelne Nutzungen dieser Website von den vorgenannten Paragraphen abweichen, wird an entsprechender Stelle ausdrücklich darauf hingewiesen. In diesem Falle gelten im jeweiligen Einzelfall die besonderen Nutzungsbedingungen.
</p>
<h3>Datenschutzerklärung</h3>
<h4>Datenschutz</h4>
<p>
Nachfolgend möchten wir Sie über unsere Datenschutzerklärung informieren. Sie finden hier Informationen über die Erhebung und Verwendung persönlicher Daten bei der Nutzung unserer Webseite. Wir beachten dabei das für Deutschland geltende Datenschutzrecht.
Sie können diese Erklärung jederzeit auf unserer Webseite abrufen.
<br>Wir weisen ausdrücklich darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen und nicht lückenlos vor dem Zugriff durch Dritte geschützt werden kann.
<br>Die Verwendung der Kontaktdaten unseres Impressums zur gewerblichen Werbung ist ausdrücklich nicht erwünscht, es sei denn wir hatten zuvor unsere schriftliche Einwilligung erteilt oder es besteht bereits eine Geschäftsbeziehung.
Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.
</p>
<h4>Personenbezogene Daten</h4>
<p>
Sie können unsere Webseite ohne Angabe personenbezogener Daten besuchen. Soweit auf unseren Seiten personenbezogene Daten (wie Name, Anschrift oder E-Mail Adresse) erhoben werden, erfolgt dies, soweit möglich, auf freiwilliger Basis. Diese Daten werden
ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. Sofern zwischen Ihnen und uns ein Vertragsverhältnis begründet, inhaltlich ausgestaltet oder geändert werden soll oder Sie an uns eine Anfrage stellen, erheben und
verwenden wir personenbezogene Daten von Ihnen, soweit dies zu diesen Zwecken erforderlich ist (Bestandsdaten). Wir erheben, verarbeiten und nutzen personenbezogene Daten soweit dies erforderlich ist, um Ihnen die Inanspruchnahme
des Webangebots zu ermöglichen (Nutzungsdaten). Sämtliche personenbezogenen Daten werden nur solange gespeichert wie dies für den geannten Zweck (Bearbeitung Ihrer Anfrage oder Abwicklung eines Vertrags) erforderlich ist. Hierbei
werden steuer- und handelsrechtliche Aufbewahrungsfristen berücksichtigt. Auf Anordnung der zuständigen Stellen dürfen wir im Einzelfall Auskunft über diese Daten (Bestandsdaten) erteilen, soweit dies für Zwecke der Strafverfolgung,
zur Gefahrenabwehr, zur Erfüllung der gesetzlichen Aufgaben der Verfassungsschutzbehörden oder des Militärischen Abschirmdienstes oder zur Durchsetzung der Rechte am geistigen Eigentum erforderlich ist.
</p>
<h4>Auskunftsrecht</h4>
<p>
Sie haben das jederzeitige Recht, sich unentgeltlich und unverzüglich über die zu Ihrer Person erhobenen Daten zu erkundigen. Sie haben das jederzeitige Recht, Ihre Zustimmung zur Verwendung Ihrer angegeben persönlichen Daten mit Wirkung für die Zukunft
zu widerrufen. Zur Auskunftserteilung wenden Sie sich bitte an den Anbieter unter den Kontaktdaten im Impressum.
</p>
<em>Quelle: Impressum Muster von impressum-recht.de</em>
</div>
</div>
</div>
</div>
</body>
</html>

13
templates/projects.html Normal file
View file

@ -0,0 +1,13 @@
<!-- TITLE Ellpeck.de - Projects -->
<!-- DESCRIPTION A list of some of the things that I created and that you might know me from -->
<div class="list-display rounded">
<h1>Projects</h1>
<p>
Here is a list of some of the things that you might know me from. If you want to have a more in-depth look at everything I do, check out some of the sites linked in the <a href="#social">Social</a> section.
</p>
<div id="project-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/projects.js"></script>
</div>

28
templates/social.html Normal file
View file

@ -0,0 +1,28 @@
<!-- TITLE Ellpeck.de - Social -->
<!-- DESCRIPTION Other websites where you can find me and the things I do, as well as a lot of ways to reach me -->
<div class="list-display rounded">
<h1>Social</h1>
<p>
These are other websites where you can find me and the things I do, including the pages where I publish my code and games and where I sometimes stream and upload videos. This list also includes a lot of ways to reach me.
</p>
<div class="row">
<div class="col">
<div id="social-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
Additionally, here are some miscellaneous platforms:
<ul>
<li>My Nintendo Switch friend code is <strong>SW-5281-8834-6801</strong></li>
<li>If you want to play my Mario Maker 2 levels, my ID is <strong>8BH-566-4WF</strong></li>
<li>If you play The Sims 4, you can check out my builds on the gallery by searching for <strong>Ellpeck</strong></li>
</ul>
</div>
<div class="col-md-auto" id="discord-div">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
</div>
<script src="scripts/social.js"></script>
</div>