Browse Source

Got almost everything working!

pull/1/head
Ellpeck 2 years ago
commit
ccf6f21ec1
23 changed files with 352 additions and 0 deletions
  1. BIN
      favicon.ico
  2. +171
    -0
      index.html
  3. BIN
      res/logo.png
  4. BIN
      res/projects/memory.png
  5. BIN
      res/projects/sudoku.png
  6. BIN
      res/social/discord.png
  7. BIN
      res/social/facebook.png
  8. BIN
      res/social/github.png
  9. BIN
      res/social/instagram.png
  10. BIN
      res/social/last.fm.png
  11. BIN
      res/social/patreon.png
  12. BIN
      res/social/reddit.png
  13. BIN
      res/social/spotify.png
  14. BIN
      res/social/steam.png
  15. BIN
      res/social/twitch.png
  16. BIN
      res/social/twitter.png
  17. BIN
      res/social/youtube.png
  18. +0
    -0
      scripts/about.js
  19. +12
    -0
      scripts/greet.js
  20. +5
    -0
      scripts/main.js
  21. +36
    -0
      scripts/projects.js
  22. +58
    -0
      scripts/social.js
  23. +70
    -0
      style.css

BIN
favicon.ico View File

Before After
Width: 650  |  Height: 650  |  Size: 14 KiB

+ 171
- 0
index.html View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ellpeck.de</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.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="scripts/main.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<a class="anchor" id="home"></a>

<!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
<!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#home">
<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">
<a class="nav-item nav-link" href="#home">Home</a>
<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>
</div>
</div>
</nav>

<!-- Content -->
<div class="container main">
<!-- Home -->
<div class="jumbotron">
<div class="container">
<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 hobbyist coder and writer from Germany.</p>
<p>Look around this website to find out more about my projects and other places you can find me!</p>
</div>
</div>

<!-- Projects -->
<a class="anchor" id="projects"></a>
<div class="list-display">
<h2>Projects</h2>
<p>
Below is a list of all of the projects that I'm working on or that I've made in the past. Check them out if you want!
</p>
<div id="project-list"></div>
<script src="scripts/projects.js"></script>
</div>

<!-- Social -->
<a class="anchor" id="social"></a>
<div class="list-display">
<h2>Social</h2>
<p>
Below is a list of the social networks and websites that I regularly use. The closer to the front of the list they are, the more frequently I use them, generally.
</p>
<div id="social-list"></div>
<script src="scripts/social.js"></script>
</div>

<!-- About -->
<a class="anchor" id="about"></a>
<div class="list-display">
<h2>About</h2>
<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 so that I don't have to keep repeating them. If you're curious about me, this might be intersting to you!
</p>
<div id="about-list"></div>
<script src="scripts/about.js"></script>
</div>
</div>

<!-- Footer -->
<div class="footer">
<div class="container footer-content">
<span class="text-muted">&copy; 2018 Ellpeck - <a href="" data-toggle="modal" data-target="#impressum-modal">Impressum</a></span>
</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>

BIN
res/logo.png View File

Before After
Width: 650  |  Height: 650  |  Size: 8.8 KiB

BIN
res/projects/memory.png View File

Before After
Width: 399  |  Height: 319  |  Size: 7.2 KiB

BIN
res/projects/sudoku.png View File

Before After
Width: 135  |  Height: 135  |  Size: 1.3 KiB

BIN
res/social/discord.png View File

Before After
Width: 256  |  Height: 256  |  Size: 3.7 KiB

BIN
res/social/facebook.png View File

Before After
Width: 256  |  Height: 256  |  Size: 3.0 KiB

BIN
res/social/github.png View File

Before After
Width: 256  |  Height: 256  |  Size: 4.4 KiB

BIN
res/social/instagram.png View File

Before After
Width: 256  |  Height: 256  |  Size: 78 KiB

BIN
res/social/last.fm.png View File

Before After
Width: 256  |  Height: 256  |  Size: 11 KiB

BIN
res/social/patreon.png View File

Before After
Width: 256  |  Height: 256  |  Size: 7.5 KiB

BIN
res/social/reddit.png View File

Before After
Width: 256  |  Height: 256  |  Size: 12 KiB

BIN
res/social/spotify.png View File

Before After
Width: 256  |  Height: 256  |  Size: 9.3 KiB

BIN
res/social/steam.png View File

Before After
Width: 256  |  Height: 256  |  Size: 12 KiB

BIN
res/social/twitch.png View File

Before After
Width: 256  |  Height: 256  |  Size: 2.8 KiB

BIN
res/social/twitter.png View File

Before After
Width: 256  |  Height: 256  |  Size: 3.7 KiB

BIN
res/social/youtube.png View File

Before After
Width: 256  |  Height: 256  |  Size: 7.9 KiB

+ 0
- 0
scripts/about.js View File


+ 12
- 0
scripts/greet.js View File

@@ -0,0 +1,12 @@
//Select a random greeting each time
const greetings = [
'Hey!',
'How\'s it going?',
'Welcome!',
'Hello to you!',
'It\'s nice to see you!',
'How are you?',
'What\'s up?',
'Hello!'
];
$('#intro-text').html(greetings[Math.floor(Math.random() * greetings.length)]);

+ 5
- 0
scripts/main.js View File

@@ -0,0 +1,5 @@
$(function() {
$('.navbar-collapse a').click(function() {
$(".navbar-collapse").collapse('hide');
});
});

+ 36
- 0
scripts/projects.js View File

@@ -0,0 +1,36 @@
const projects = [{
'name': 'Sudoku',
'desc': 'A simple game of sudoku. Fill in the board with numbers one through nine, making sure each row, column and three by three field only ever has one of the same number. A board is randomly generated for you every time you refresh the page. Use the scroll wheel to input numbers into a selected field.',
'links': {
'Play it here': 'https://ellpeck.de/sudoku',
'Check the source': 'https://github.com/Ellpeck/Sudoku'
}
},
{
'name': 'Memory',
'desc': 'A game of memory. Turn over fields to see the numbers they have. Try to combine all of the same-numbered fields to uncover the board!',
'links': {
'Play it here': 'https://ellpeck.de/memory',
'Check the source': 'https://github.com/Ellpeck/Memory'
}
}
];

let p = '';
for (project of projects) {
p += '<div class="card bg-light project">';
p += '<div class="card-body">';
p += '<img class="project-image" src="res/projects/' + project['name'].toLowerCase() + '.png" alt="">';

p += '<h5 class="card-title">' + project['name'] + '</h5>';
p += '<p class="card-text">' + project['desc'] + '</p>';

let links = project['links'];
for (let name in links) {
p += '<a href="' + links[name] + '" class="card-link">' + name + '</a>';
}

p += '</div>';
p += '</div>';
}
$('#project-list').html(p);

+ 58
- 0
scripts/social.js View File

@@ -0,0 +1,58 @@
const socials = [{
'name': 'Discord',
'link': 'https://www.ellpeck.de/discord',
},
{
'name': 'Patreon',
'link': 'http://www.patreon.com/Ellpeck'
},
{
'name': 'Twitter',
'link': 'https://twitter.com/Ellpeck'
},
{
'name': 'YouTube',
'link': 'https://www.youtube.com/c/ellpeck'
},
{
'name': 'Twitch',
'link': 'http://twitch.tv/ellpeck'
},
{
'name': 'GitHub',
'link': 'https://github.com/Ellpeck/'
},
{
'name': 'Reddit',
'link': 'https://www.reddit.com/user/Ellpeck/'
},
{
'name': 'Instagram',
'link': 'https://instagram.com/Ellopecko'
},
{
'name': 'Spotify',
'link': 'https://open.spotify.com/user/ellpeck'
},
{
'name': 'Last.fm',
'link': 'https://www.last.fm/user/Ellpeck'
},
{
'name': 'Steam',
'link': 'http://steamcommunity.com/id/ellpeck/'
},
{
'name': 'Facebook',
'link': 'https://www.facebook.com/Ellpeck'
}
];

let s = '';
for (social of socials) {
s += '<a class="btn btn-light social-button" href="' + social['link'] + '"">';
s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">';
s += ' ' + social['name'];
s += '</a>'
}
$('#social-list').html(s);

+ 70
- 0
style.css View File

@@ -0,0 +1,70 @@
body {
padding-top: 66px;
position: relative;
}

.main {
margin-top: 20px;
}

.project {
margin-top: 50px;
}

.list-display {
width: 80%;
display: block;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
}

.project-image {
position: absolute;
right: -30px;
top: -30px;
width: 80px;
height: auto;
align-self: left;
}

.social-button {
width: 200px;
margin: 10px;
line-height: 40px;
}

.social-image {
width: 40px;
height: 40px;
float: left;
}

#social-list {
text-align: center;
}

a.anchor {
display: block;
position: relative;
top: -66px;
visibility: hidden;
}

.footer {
bottom: 0;
width: 100%;
line-height: 30px;
background-color: #f5f5f5;
}

.footer-content {
text-align: center;
padding: 15px;
}

.impressum-data {
padding: 15px;
font-weight: bold;
font-size: 125%;
}

Loading…
Cancel
Save