couldn't sleep so I did some changes

This commit is contained in:
Ellpeck 2018-07-25 01:54:04 +02:00
parent ccf6f21ec1
commit ee665ea86d
5 changed files with 113 additions and 6 deletions

View file

@ -5,6 +5,7 @@
<title>Ellpeck.de</title> <title>Ellpeck.de</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
@ -77,7 +78,8 @@
<div class="list-display"> <div class="list-display">
<h2>About</h2> <h2>About</h2>
<p> <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! 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 intersting to
you!
</p> </p>
<div id="about-list"></div> <div id="about-list"></div>
<script src="scripts/about.js"></script> <script src="scripts/about.js"></script>

View file

@ -0,0 +1,56 @@
const questions = [{
'q': 'How old are you?',
'a': "I'm " + getAge() + " years old. This automatically updates now, too, so I won't ever forget to update it again!"
},
{
'q': 'Where are you from?',
'a': "I am from Neuss, Germany and I'm currently living and going to university in Aachen, Germany."
},
{
'q': 'Why are you called Ellpeck?',
'a': "Well, it actually isn't as interesting of a story as some of you might hope. Long story short, when I was little (and was, apparently, very bad at English), I decided to make a YouTube channel called \"LetsPlayEveryGames.\" Shortly after, I also made a Minecraft account that I was going to call the same thing. At the time, though, there was a limit for how many characters your name could have, and so I opted for calling myself \"LPEG\" instead. When a friend of mine came along and started trying to pronounce that name, instead of saying each individual letter on its own, he started pronouncing it like a word: Ell-Peg. ...Ellpeck. I liked that pronounciation and so I stuck with the name."
},
{
'q': "What's your gender?",
'a': "I like to think this is pretty clear, but in case anyone is wondering anyway: I'm male."
},
{
'q': "What's your sexual orientation?",
'a': 'I like cute guys.'
},
{
'q': 'Are you in a relationship?',
'a': 'I feel like my relationship status is constantly "It\'s complicated".'
},
{
'q': 'What languages do you speak?',
'a': 'German, English, Java, JavaScript, C# and a bit of C, HTML and CSS.'
},
{
'q': "What's your job/occupation?",
'a': "I'm currently studying Computer Science at the <a href=\"https://www.rwth-aachen.de/\">RWTH Aachen</a>. I don't have a job on the side or anything, though."
},
{
'q': 'What do you use to code?',
'a': "For my Java projects, I use IntelliJ IDEA. For most of my other projects, which are usually rather small, I use Atom because it's simple and fast."
},
{
'q': 'Tabs or spaces?',
'a': (Math.random() >= 0.5 ? 'Tabs' : 'Spaces') + '.'
}
];
let a = '';
for (question of questions) {
a += '<p>';
a += '<strong>Q: ' + question['q'] + '</strong><br>';
a += '<strong>A:</strong> ' + question['a'];
a += '</p>';
}
$('#about-list').html(a);
function getAge() {
let birthdate = new Date("1999-05-21");
let age = new Date(Date.now()).getUTCFullYear() - birthdate.getUTCFullYear();
return age;
}

View file

@ -7,6 +7,11 @@ const greetings = [
'It\'s nice to see you!', 'It\'s nice to see you!',
'How are you?', 'How are you?',
'What\'s up?', 'What\'s up?',
'Hello!' 'Hello!',
'You\'re looking great today!',
'Good day mate!',
'Hello friend!',
'Howdy!',
'Guten Tag!'
]; ];
$('#intro-text').html(greetings[Math.floor(Math.random() * greetings.length)]); $('#intro-text').html(greetings[Math.floor(Math.random() * greetings.length)]);

View file

@ -1,10 +1,29 @@
const projects = [{ const projects = [{
'name': 'Rock Bottom',
'desc': 'Rock Bottom is a game I\'ve been working on for a little more than a year now. It\'s a 2D-sidescrolling sandbox game with a storyline that has multiplayer support, a modding API and a lot more fun stuff. It\'s currently still in early development.',
'links': {
'Website': 'https://rockbottom.ellpeck.de',
'API on GitHub': 'https://github.com/RockBottomGame/API'
},
'status': 'In Development'
},
{
'name': 'Actually Additions',
'desc': 'Actually Additions is a rather popular Minecraft mod that I used to work on. It\'s become widely known in the modding community and has reached over 10 million downloads by now, which is crazy. I don\'t work on it anymore myself, but it\'s being maintained for current versions by someone else.',
'links': {
'CurseForge page': 'https://www.ellpeck.de/actadd',
'Online manual': 'https://www.ellpeck.de/actaddmanual/'
},
'status': 'Handed off'
},
{
'name': 'Sudoku', '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.', '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': { 'links': {
'Play it here': 'https://ellpeck.de/sudoku', 'Play it here': 'https://ellpeck.de/sudoku',
'Check the source': 'https://github.com/Ellpeck/Sudoku' 'Check the source': 'https://github.com/Ellpeck/Sudoku'
} },
'status': 'Finished'
}, },
{ {
'name': 'Memory', 'name': 'Memory',
@ -12,7 +31,24 @@ const projects = [{
'links': { 'links': {
'Play it here': 'https://ellpeck.de/memory', 'Play it here': 'https://ellpeck.de/memory',
'Check the source': 'https://github.com/Ellpeck/Memory' 'Check the source': 'https://github.com/Ellpeck/Memory'
} },
'status': 'Finished'
},
{
'name': 'Crossword Puzzle Generator',
'desc': 'This was the first thing I made in JavaScript. It generates a crossword puzzle based on a predefined list of hints and words that you can fill out. You can also check if your answers are correct. It\'s a bit sloppy and sometimes it generates really small puzzles, but I think it\'s alright for a first project.',
'links': {
'Play it here': 'https://www.ellpeck.de/crossword/'
},
'status': 'On hold'
},
{
'name': 'Poem Generator',
'desc': 'This was a bit of a failed experiment. It was supposed to generate poems in the style of the ones that I write based on a list of predefined words, but I noticed quickly that it\'s just to random to generate anything nice.',
'links': {
'Check it out here': 'https://www.ellpeck.de/poemgen/'
},
'status': 'Cancelled'
} }
]; ];
@ -22,12 +58,13 @@ for (project of projects) {
p += '<div class="card-body">'; p += '<div class="card-body">';
p += '<img class="project-image" src="res/projects/' + project['name'].toLowerCase() + '.png" alt="">'; p += '<img class="project-image" src="res/projects/' + project['name'].toLowerCase() + '.png" alt="">';
p += '<h5 class="card-title">' + project['name'] + '</h5>'; p += '<h4 class="card-title">' + project['name'] + '</h4>';
p += '<p class="card-text">' + project['desc'] + '</p>'; p += '<p class="card-text">' + project['desc'] + '</p>';
p += '<span class="text-muted project-status">' + project['status'] + '</span>';
let links = project['links']; let links = project['links'];
for (let name in links) { for (let name in links) {
p += '<a href="' + links[name] + '" class="card-link">' + name + '</a>'; p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info">' + name + '</a>';
} }
p += '</div>'; p += '</div>';

View file

@ -1,6 +1,7 @@
body { body {
padding-top: 66px; padding-top: 66px;
position: relative; position: relative;
font-family: Roboto;
} }
.main { .main {
@ -28,6 +29,12 @@ body {
align-self: left; align-self: left;
} }
.project-status {
position: absolute;
right: 20px;
bottom: 15px;
}
.social-button { .social-button {
width: 200px; width: 200px;
margin: 10px; margin: 10px;