-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
225 lines (182 loc) · 11.6 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
---
layout: index
title: Startseite
article-previews:
- {
title: "Meine Facharbeit: Die Digitalisierung in der Arbeitswelt",
date: "2019-05-03 21:00:00 +0200",
date_string: "Freitag, 03.05.2019",
image: { src: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/digitalisierung.jpg", srcset: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/digitalisierung.jpg 1280w, https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1920/digitalisierung.jpg 1920w", alt: "Meine Facharbeit: Die Digitalisierung in der Arbeitswelt Vorschaubild" },
url: "blog/2019/05/03/facharbeit-digitalisierung-arbeitswelt-bge.html",
preview-text: "Anfang des Jahres 2019 habe ich meine Facharbeit in der Schule geschrieben. Dabei durfte ich mir frei ein (schriftlich gewähltes) Fach sowie ein Thema aussuchen. Relativ schnell war klar, dass mein Leistungskursfach Sozialwissenschaften gut zum Schreiben einer Facharbeit geeignet ist. Eine Facharbeit stellt im Grunde eine leicht abgespeckte wissenschaftliche Arbeit dar, welche in der Oberstufe in NRW i.d.R. eine Klausur ersetzt und die Schüler schon mal auf die Arbeit in Universitäten vorbereiten soll. Aufgrund der Tatsache, dass ich mich in meiner Freizeit bereits viel mit digitalpolitischen Themen auseinandersetze, fiel die Wahl letztendlich auf das Thema 'Die Digitalisierung in der Arbeitswelt: Das Bedingungslose Grundeinkommen als Lösung für wegfallende Arbeitsplätze?'. Ein Thema, das hochaktueller nicht sein konnte und gleichzeitig für mich persönlich sehr spannend war. Auch im Nachhinein definitiv eine gute Wahl."
}
- {
title: "PHP 7.3: Das ist neu",
date: "2018-12-23 12:00:00 +0100",
date_string: "Sonntag, 23.12.2018",
image: { src: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/php-7_3.png", srcset: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/php-7_3.png 1280w, https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1920/php-7_3.png 1920w", alt: "PHP 7.3: Das ist neu Vorschaubild" },
url: "blog/2018/12/23/php-7_3-das-ist-neu.html",
preview-text: "Am 6. Dezember 2018 wurde das dritte Feature-Update für PHP 7 vorgestellt. PHP 7.3 wurde somit, wie geplant, pünktlich zu Nikolaus veröffentlicht. Die serverseitige Skriptsprache PHP, welche hauptsächlich in der Webentwicklung zur Erstellung von dynamischen Websites bzw. Webanwendungen eingesetzt wird, erreicht damit ihre dritte große Iteration der PHP-7-Reihe. Heute schauen wir uns mal die Neuerungen an, die in der Version 7.3 der meistverbreiteten serverseitigen Skriptsprache umgesetzt wurden."
}
resources:
- {
title: "coding-board.de",
image: { src: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/coding-board-de.png", srcset: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/coding-board-de.png 1280w, https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1920/coding-board-de.png 1920w", alt: "coding-board.de Vorschaubild" },
url: "resources/coding-board-de.html",
text: "Du bist auf der Suche nach einem deutschen Forum mit netten Leuten, die dir gerne weiterhelfen, dein Wissen zu erweitern, und dich bei deinen Projekten unterstützen? Dann kann ich dir das Forum coding-board.de empfehlen, welches eine der besten Anlaufstellen für deutschsprachige Programmierer darstellt."
}
- {
title: "DB-Class",
image: { src: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/db-class.png", srcset: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/db-class.png 1280w, https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1920/db-class.png 1920w", alt: "DB-Class Vorschaubild" },
url: "resources/db-class.html",
text: "Eine einfache Datenbank-Klasse mit PHP, PDO und einem Query Builder. Die Klasse erweitert PDO für mehr Kontrolle sowie dem Erhalt von allen Features, die PDO mit sich bringt. Der Nutzung dieser Datenbank-Klasse sind also keine Grenzen gesetzt."
}
- {
image: { src: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/t3n.png", srcset: "https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1280/t3n.png 1280w, https://res.cloudinary.com/jr-cologne-de/image/upload/ar_1.5,c_scale,f_auto,fl_lossy,q_auto,w_1920/t3n.png 1920w", alt: "t3n Vorschaubild" },
url: "resources/t3n.html",
text: "t3n ist ein Magazin für Tech-News, das perfekt für die tägliche Dosis an Nachrichten aus der Tech-Welt geeignet ist. Somit geht es bei t3n also um Startups, Marketing, E-Commerce, Social-Media, Webentwicklung und noch einiges mehr."
}
---
<header class="header">
<a href="/" class="logo" title="jr-cologne.de Logo"></a>
<nav id="nav" class="nav nav--main">
<div class="navbar">
<a href="#" id="hamburger-button" title="Navigation">
<span class="hamburger-icon_top"></span>
<span class="hamburger-icon"></span>
<span class="hamburger-icon_bottom"></span>
</a>
</div>
<ul>
<li><a href="/" class="current">Startseite</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="resources.html">Ressourcen</a></li>
</ul>
</nav>
</header>
<main>
<section class="welcome-section">
<div class="welcome-section-overlay">
<div id="welcome-heading-container" class="welcome-heading-container">
<p><strong class="welcome-text">Willkommen auf</strong></p>
<h1>jr-cologne.de</h1>
<a href="#about" class="cta">Lerne mich kennen</a>
</div>
</div>
</section>
<section id="about" class="about-section">
<h2 class="section-heading">Über mich</h2>
<article class="about-text">
<img src="_app/assets/img/logo.svg" alt="Logo">
<p>
Hallo! Ich heiße <strong>Jasper</strong>, bin <strong>20 Jahre alt</strong> und komme aus dem schönen <strong>Köln</strong>.
Unter der Woche bin ich aktuell noch <strong>Schüler</strong> - mit dem Ziel 2020 das Abitur zu absolvieren.
An Wochenenden hingegen gehe ich meiner großen Leidenschaft, dem <strong>Entwickeln und Designen von Websites</strong>, nach.
</p>
<p>
Ich bin vielfältig interessiert, was aktuelle <strong>politische und digitale Themen</strong> angeht
und verfolge stets begeistert die aktuellen <strong>technologischen Entwicklungen</strong>.
</p>
<p>
Hier auf <a href="/">jr-cologne.de</a> versuche ich ab und zu meine Schreibkünste unter Beweis zu stellen
und vor allem anderen gleichgesinnten Menschen mit ausführlichen, informativen Artikeln weiterzuhelfen.
</p>
</article>
</section>
<section class="blog-section">
<h2 class="section-heading section-heading--small">Blog</h2>
<div class="article-previews">
{% for article-preview in page.article-previews %}
<article class="article-preview">
<header>
<noscript class="loaded"><img src="{{ article-preview.image.src }}" srcset="{{ article-preview.image.srcset }}" alt="{{ article-preview.image.alt }}"></noscript>
<img data-src="{{ article-preview.image.src }}" data-srcset="{{ article-preview.image.srcset }}" alt="{{ article-preview.image.alt }}">
<a href="{{ article-preview.url }}" class="article-preview-overlay">
<h3 class="article-preview-heading">{{ article-preview.title }}</h3>
</a>
</header>
<section class="article-preview-text">
<p>
{{ article-preview.preview-text }}
</p>
</section>
<footer>
<time datetime="{{ article-preview.date }}" class="date">{{ article-preview.date_string }}</time>
<a href="{{ article-preview.url }}" class="cta cta--read-more">Mehr lesen</a>
</footer>
</article>
{% endfor %}
</div>
<a href="blog.html" class="cta">Alle Artikel</a>
</section>
<section class="resources-section">
<h2 class="section-heading">Ressourcen</h2>
<section class="resources-container">
{% for resource in page.resources %}
<a href="{{ resource.url }}" class="resource">
<noscript class="loaded"><img src="{{ resource.image.src }}" srcset="{{ resource.image.srcset }}" alt="{{ resource.image.alt }}"></noscript>
<img data-src="{{ resource.image.src }}" data-srcset="{{ resource.image.srcset }}" alt="{{ resource.image.alt }}">
<div class="resource-overlay">
<h3 class="resource-heading">{{ resource.title }}</h3>
</div>
</a>
{% endfor %}
</section>
<section class="resources-info">
<article>
<p>
Du bist auf der Suche nach kleinen <strong>Code Snippets</strong>, <strong>Skripten</strong>, <strong>Tools</strong>,
<strong>Tutorials</strong> und vielem mehr?
Dann kann ich dir einen Blick in meine Sammlung von Ressourcen
empfehlen. Es lohnt sich!
</p>
<p>
Du fragst warum? Ganz einfach:<br>
Von <strong>Eigenkreationen</strong> bis hin zu <strong>externen Ressourcen</strong> findest du hier alles,
was dir <strong>dein Leben als Tech-Enthusiast vereinfachen</strong> kann.
Jedes gute Stück, was ich für hilfreich halte und da draußen im Netz
darauf wartet, gefunden zu werden, stelle ich in meiner Bibliothek von Ressourcen zusammen.
</p>
<p>
Ich wünsche dir viel Spaß beim Stöbern!
</p>
</article>
</section>
<a href="resources.html" class="cta cta--large">Alle Ressourcen</a>
</section>
<section class="contact-section">
<h2 class="section-heading">Kontakt</h2>
<p class="text">Folge mir auf ...</p>
<div class="social-container">
<a href="https://twitter.com/{{ site.twitter_username }}/" target="_blank" rel="noopener" title="Folge mir auf Twitter" class="social-item twitter">
<p><strong class="social-network"><span class="social-icon"></span>Twitter</strong></p>
</a>
<a href="https://github.com/{{ site.github_username }}/" target="_blank" rel="noopener" title="Folge mir auf GitHub" class="social-item github">
<p><strong class="social-network"><span class="social-icon"></span>GitHub</strong></p>
</a>
<a href="https://codepen.io/{{ site.codepen_username }}/" target="_blank" rel="noopener" title="Folge mir auf CodePen" class="social-item codepen">
<p><strong class="social-network"><span class="social-icon"></span>CodePen</strong></p>
</a>
</div>
<p class="text">oder schreibe mir eine E-Mail</p>
<a href="mailto:{{ site.email }}" class="email">{{ site.email }}</a>
</section>
</main>
<footer class="footer">
<div class="footer-logo-nav-container">
<a href="/" class="logo" title="jr-cologne.de Logo"></a>
<nav class="nav nav--footer">
<ul>
<li><a href="/" class="current">Startseite</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="resources.html">Ressourcen</a></li>
</ul>
</nav>
</div>
<nav class="nav nav--legal">
<ul>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
</ul>
</nav>
</footer>