-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (107 loc) · 5.34 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Benny's Webseite</title>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images\128, trans black.png">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.tabbable.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- The card and its left hand side -->
<main id="display">
<div id="allContent">
<div id="seperator"></div>
<div id="nameAndPic">
<h1>Benjamin Brandtner</h1>
<a tabindex="-1" href="javascript:initFlip('landing')"><img id="profilepic" src="images\berndSymbol.png" alt="Bernd Symbol"></a>
<p id="quote">
beliebt, beleibt, begabt, bärtig<br>
billig, blumig, baufällig, blöd<br>
besoffen bombastisch. buchstäblich bleich.
</p>
</div>
<div id="middleseperator"></div>
<div id="content"><!-- Right hand side, added dynamically --></div>
<div id="seperator"></div>
</div>
<ul id="nav">
<li><a tabindex="-1" id="navLeft" href="javascript:initFlipH(-1)"><</a></li>
<li><a id="navHome" href="javascript:initFlipH(0)">⌂</a></li>
<li><a tabindex="-1" id="navRight" href="javascript:initFlipH(1)">></a></li>
</ul>
</main>
<div id="cardshadow"></div>
<!-- Content for right hand side -->
<div id="landing" class="content">
<h2>Hello World!</h2>
<p>
Diese Webseite ist wenig mehr als eine Sammlung verschiedener Projekte, die ich seit Beginn meiner Ausbildung erstellt habe.<br>
Wenn auch nicht alles immer die sinnvollsten Sachen sind, so kann man vielleicht trotzdem etwas aus ihnen lernen. Ich versuche immer, meinen Code so sauber wie möglich zu halten und gut zu dokumentieren.
</p>
<h3>Pick one:</h3>
<ul>
<li> <a href="javascript:initFlip('ubermich')">Über mich</a> </li>
<li> <a href="javascript:initFlip('nutzlich')">Nützliches</a> </li>
<li> <a href="javascript:initFlip('informativ')">Informatives</a> </li>
<li> <a href="javascript:initFlip('trash')">Trash</a> </li>
</ul>
<aside><p>Tipp: Man kann diese Seite auch mit Pfeiltasten und Enter navigieren.</p></aside>
</div>
<div id="ubermich" class="content">
<h2>Über mich</h2>
<p>
Ich bin angehender Fachinformatiker, dem, wie man erkennen kann, Programmierung mehr liegt als Webdesign.<br>
Auf folgenden Seiten kann man mich finden:
</p>
<a href="https://github.com/BenjaminBrandtner"><img src="https://image.flaticon.com/icons/svg/25/25231.svg" alt="Github" class="websitelogo"></a>
<a href="https://steamcommunity.com/id/hiandbye95/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Steam_icon_logo.svg/512px-Steam_icon_logo.svg.png" alt="Steam" class="websitelogo"></a>
<a href="https://www.youtube.com/channel/UC35ZxV8dz91YgXnhCU9s0Vw"><img src="https://vignette.wikia.nocookie.net/logopedia/images/6/61/Yt_icon_2017.svg" alt="Youtube" class="websitelogo"></a>
<a href="javascript:initFlip('kontakt')"><img src="https://openclipart.org/download/168601/letter.svg" alt="Email" class="websitelogo"></a>
</div>
<div id="nutzlich" class="content">
<h2>Nützliche Anwendungen</h2>
<p>
Anwendungen, deren Zweck zumindest erkennbar ist. Sie sind evtl. unhandlich oder besitzen nur wenige Features.
</p>
<ul>
<li><a href="abschnitte/webprojekte/buchungsspass/index.html">Buchungsspaß</a></li>
<li class="explanation">Erstelle Buchungssätze zu verschiedenen Geschäftsfällen im Einkauf und Verkauf</li>
<li><a href="abschnitte/webprojekte/telefonbuch/index.html">Telefonbuch</a></li>
<li class="explanation">Füge Nummern hinzu, lösche sie, speichere alle als JSON-Datei ab und lade diese wieder.</li>
</ul>
</div>
<div id="informativ" class="content">
<h2>Informatives</h2>
<ul>
<li><a href="abschnitte/webprojekte/html_erklaerung/index.html">Erklärung grundlegender HTML und CSS Techniken</a></li>
<li><a href="https://benjaminbrandtner.github.io/ScrumWiki/">ScrumWiki</a></li>
<li class="explanation">In Gruppenarbeit erstelltes Wikipedia zur agilen Entwicklungsmethode SCRUM</li>
<li><a href="https://github.com/BenjaminBrandtner/realtimeInputInC/blob/master/erkl%C3%A4rung.md">Methoden für Realtime-Input auf der Konsole in C</a></li>
<li><a href="https://github.com/BenjaminBrandtner/REPL-in-C">Read-Evaluate-Print-Loop in C mit Erklärung</a></li>
</ul>
</div>
<div id="trash" class="content">
<h2>Trash</h2>
<ul>
<li><a href="abschnitte/webprojekte/markierbare_kunst/index.html">Markierbare Kunst</a></li>
<li><a href="abschnitte/webprojekte/gandalf/index.html">Gandalf (Warnung! Popups!)</a></li>
</ul>
</div>
<!-- Content that is not accessible through the navigation arrows -->
<div id="easteregg" class="hiddenContent">
<h2>Easter Egg!</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Easter-Eggs.jpg/320px-Easter-Eggs.jpg" alt="">
</div>
<div id="kontakt" class="hiddenContent">
<h2>Kontaktformular</h2>
<p>Kommt bald!</p>
</div>
</body>
</html>