Eine Navigation aus Buttons auf der Startseite erstellt

_config.yml

@@ -1,11 +1,9 @@
 ### Site Settings ###
-title               : portfolYOU
+title               : bmen
 description         : >-
-                      I turn coffee :coffee: into code,
-                      use tabs over spaces
-                      and never broke production.
+                      Zwischen neuesten Technologien und
+                      traditionellem Handwerk einzuordnen.
 baseurl             : "/"                     # Change to empty quotes if you are hosting your site at <your-username>.github.io directly
-repository          : YoussefRaafatNasry/portfolYOU     # Change to <your-username>/<your-username>.github.io (or remove it if you don't need remote projects)
 remote_theme        : YoussefRaafatNasry/portfolYOU
 
 
@@ -19,29 +17,31 @@ nav_exclude:                                            # The following paths ar
   - pages/tags.html
   - pages/404.html
   - pages/index.md
-  - documentation/partials/**                           # For Documentation Only
+  - pages/datenschutz.md
+  - pages/impressum.md
 
 
 ### Author Info ###
 author:
   name              : Bastian Menningen
-  image             : https://i.imgur.com/uyDNQnn.jpg
-  behance           : your_username
+  image             : assets/images/bmen-profil.jpg
+# behance           : your_username
 # dribbble          : your_username
-  email             : username@domain.com
-  facebook          : your_username
-  github            : your_username
-# gitlab            : your_username
+  email             : bastian@bmen.cc
+# facebook          : your_username
+  github            : bmen
+  gitlab            : bmen
+  gitea             : bmen
 # instagram         : your_username
 # kaggle            : your_username
-  linkedin          : your_username
-  medium            : your_username
+# linkedin          : your_username
+# medium            : your_username
 # soundcloud        : your_username
-# spotify           : your_username
+  spotify           : b-men
 # stackoverflow     : your_user_id
 # tumblr            : your_username.tumblr.com
 # twitch            : your_username
-  twitter           : your_username
+# twitter           : your_username
 # vimeo             : your_username
 # youtube           : your_channel_name
 
@@ -55,12 +55,10 @@ collections:
   projects:
     output: true
     permalink: /projects/:name
-  elements:                                             # For Documentation Only
-    output: true                                        # For Documentation Only
 
 
 ### Disqus ###
-disqus: your-short-name-disqus                          # Your website Shortname on disqus
+# disqus: your-short-name-disqus                          # Your website Shortname on disqus
 
 
 ### Analytics ###
@@ -77,11 +75,6 @@ defaults:
       type: "projects"
     values:
       layout: "page"
-  - scope:                                              # For Documentation Only
-      path: ""                                          # For Documentation Only
-      type: "elements"                                  # For Documentation Only
-    values:                                             # For Documentation Only
-      layout: "element"                                 # For Documentation Only
   - scope:
       path: ""
       type: "posts"
@@ -94,3 +87,8 @@ exclude:
   - CONTRIBUTING.md
   - LICENSE
   - "*.log"
+  - docker-compose-prod.yml
+  - docker-compose.yml
+  - .drone.yml
+  - .gitignore
+  - Gemfile

_data/other-skills.yml

@@ -1,7 +1,23 @@
-- name: Adobe Photoshop
-  percentage: 95
+- name: Gärtnern
+  percentage: 30
   color: info
 
-- name: Adobe Illustrator
+- name: Segeln
   percentage: 90
-  color: success
+  color: success
+
+- name: Holzarbeiten
+  percentage: 60
+  color: info
+
+- name: Fotografie
+  percentage: 60
+  color: success
+
+- name: Video
+  percentage: 50
+  color: info
+
+- name: Webdesign
+  percentage: 80
+  color: danger

_data/programming-skills.yml

@@ -2,10 +2,26 @@
   percentage: 90
   color: danger
 
-- name: Go
+- name: Docker
   percentage: 80
   color:
 
-- name: Python
+- name: CMS (spez. Wordpress & Jekyll)
+  percentage: 90
+  color: dark
+
+- name: Bash
   percentage: 70
-  color: dark
+  color: green
+
+- name: CI/CD Deployments
+  percentage: 60
+  color: green
+
+- name: IT Administration
+  percentage: 80
+  color: green
+
+- name: Onlineshop
+  percentage: 80
+  color: green

_data/social-media.yml

@@ -31,6 +31,11 @@ gitlab:
   icon  : fab fa-gitlab
   color : fca326
 
+gitea:
+  url   : https://git.bmen.cc/
+  icon  : fas fa-code-branch
+  color : fca326
+
 instagram:
   url   : https://www.instagram.com/
   icon  : fab fa-instagram

_data/timeline.yml

@@ -1,15 +1,58 @@
-- title: Student, Harvard CS
-  from: 2014
+- title: Segellehrer (Sail&Surf Pollensa - Spanien)
+  from: 2001
+  to: 2004
+  description: Nach dem Gymnasium machte ich mein Hobby zum Beruf. Ich wurde Segellehrer,
+               nachdem ich das Hobby seit meinem 5. Lebensjahr als Hochleistungssportler
+               betrieben habe. Als Jugendlicher betreute ich ehrenamtlich meine ersten Segelgruppen.
+               In Spanien erwarb ich die Lizenz zum Segellehrer und konnte dabei die spanische
+               Sprache intensiv lernen.
+               
+
+- title: Freiberuflicher Webdesigner (Berlin)
+  from: 2004
+  to: heute
+  description: In Berlin habe ich mir autodidaktisch das Programmieren von Webseiten in 
+               (HTML/CSS/DB) beigebracht und mich als Webdesigner selbstständig gemacht. Ich war
+               auch in einer Agentur "2erlei" beteiligt, wo wir auch komplexe Projekte (Entwicklung
+               eines eigenen CMS "basecontent" und Videoplattformen ähnlich wie Youtube)
+               realisiert haben. Diesen Beruf übe ich bis heute aus und finde es spannend mich
+               auf dem Stand der neuesten Entwicklungen zu halten.
+
+- title: Studium technische Informatik (TU-Berlin)
+  from: 2008
+  to: 2012
+  description: Bei dem Studium für technische Informatik hat mich die Schnittstelle zwischen Informatik und
+               Ingenieurwesen fasziniert, weil mich das Erfinden und Entwickeln von neuen Konzepten immer
+               gereizt haben. Dort konnte ich die Grundlagen der IT Technik (Elektro- und Nachrichtentechnik,
+               Kommunikationstechnologien, Netze und Verteilte Systeme) und die Softwareprogrammierung 
+               (Datenbankdesign, PHP, Python, Ruby und Javascript) erlernen. 
+
+- title: Freiberuflicher DevOp (International)
+  from: 2010
+  to: heute
+  description: Aufgrund des Studiums konnte ich mein Geschäftsfeld als Selbstständiger auf Adminstration von
+               Kommunikationstechnologien und Netzwerke erweitern und berate Firmen bei der Einrichtung von
+               performanten, skallierbaren und sicheren IT-Infrastrukturen. Der zu der Zeit entstandene
+               Begriff DevOp (software development and IT operations) und die sich dazu neu entwickelte Branche
+               war für mich als IT-Ingeneur wie zugeschnitten. Ich bin kein Spezialist, sondern jemand, der
+               den Überlick über die neuesten Technologien hat und darauf basierend Konzepte für den IT-Bedarf
+               einer kleinen bis mittelständischen Firma/Institution entwickeln kann.
+
+- title: Ehrenamtliche Arbeit (International)
+  from: 2011
+  to: heute
+  description: Acampada (Spanien)<br />
+               Bürgerinitiative Tempelhofer Feld (Berlin)<br />
+               Guerrilla Gardening (Berlin)<br />
+               Open Source Ecology Germany e.V. (Deutschland)<br />
+               Die Dezentrale (Deutschland)<br />
+               SoLaWi - Solidarische Landwirtschaft (Berlin/Brandenburg)<br />
+               ASKnet - Access Skills and Knowledge (Berlin/Süd Sudan))
+               
+
+- title: Teeladenbetreiber (Chasinho - Berlin)
+  from: 2013
   to: 2018
-  description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-               nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-               reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-
-- title: Software Engineer, Google, UK
-  from: 2018
-  to: present
   description: Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

_includes/footer.html

@@ -0,0 +1,18 @@
+<footer class="mt-auto py-3 text-center">
+
+    <small class="text-muted mb-2">
+      <i class="fas fa-code"></i> mit <i class="fas fa-heart"></i>
+      von <strong>{{ site.author.name }}</strong> |
+      <a class="text-secondary" href="/datenschutz">Datenschutz</a> |
+      <a class="text-secondary" href="/impressum">Impressum</a>
+    </small>
+
+    {% include social.html %}
+  
+    {%- assign theme_name = "CC-BY-SA 4.0" -%}
+    {%- assign theme_repo = "https://creativecommons.org/licenses/by-sa/4.0/deed.de" -%}
+    <small id="attribution">
+      Lizenz: <a href="{{ theme_repo }}" target="_blank">{{ theme_name }}</a>
+    </small>
+    
+  </footer>

_layouts/project.html

@@ -0,0 +1,32 @@
+---
+layout: default
+---
+
+<div class="container">
+  <div class="row">
+    <div class="col-lg-9">
+      <div class="post">
+        {{ content }}
+      </div>
+    </div>
+    <div class="col-lg-3 mt-lg-5">
+      <div class="project-meta mt-lg-5">
+        {% if page.client %}
+          <div><label>Auftraggeber:</label> {{ page.client }}</div>
+        {% endif %}
+        {% if page.project-launch %}
+          <div><label>Veröffentlichung:</label> {{ page.project-launch }}</div>
+        {% endif %}
+        {% if page.description %}
+          <div class="description"><label>Kurzbeschreibung:</label><br />{{ page.description }}</div>
+        {% endif %}
+        {% if page.tools %}
+          <div>{{ page.tools }}</div>
+        {% endif %}
+        {% if page.client-url %}
+          <div><a class="btn btn-outline-primary" href="{{ page.client-url }}" target="_blank">Website <i class="fas fa-external-link-alt"></i></a></div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>

_projects/(2) Awesome Project.md

@@ -1,11 +1,25 @@
 ---
+layout: project
 name: The Movies Project
 tools: [C#, XML, WPF]
 image: https://www.sketchappsources.com/resources/source-image/movie-badges-jurajjurik.png
 description: This project has an individual showcase page, not just a direct link to the project site or repo. Now you have more space to describe your awesome project!
+client: Max Mustermann
+project-launch: September 2020
+client-url: https://2032er.bmen.cc
 ---
 
-# The Movies Project
+## The Movies Project
+
+![preview](https://www.sketchappsources.com/resources/source-image/we-were-soldiers-landing-page-dbruggisser.jpg)
+
+The Movies Project is something like **Netflix**, the only difference is that **it's not real**! It doesn't exist! I just created it to demonstrate how the **showcase** page looks like and how you can write whatever you want with full markdown support.
+
+{% capture carousel_images %}
+https://bit.ly/2BBbVhc
+https://bit.ly/2DOtxXB
+{% endcapture %}
+{% include elements/carousel.html %}
 
 The Movies Project is something like **Netflix**, the only difference is that **it's not real**! It doesn't exist! I just created it to demonstrate how the **showcase** page looks like and how you can write whatever you want with full markdown support.
 

_projects/(3) Empty Project.md

@@ -1,7 +0,0 @@
----
-name: Empty Project
-tools: [Node JS, JavaScript, HTML, CSS]
-image:
-description: This project has no image or showcase page, but it is still a beautiful project inside out!
-external_url: https://github.com/YoussefRaafatNasry
----

_projects/(4) VVG on GitHub.md

@@ -1,7 +0,0 @@
----
-name: Coding Like Vincent Van Gogh
-tools: [Support, Author, VVG]
-image:
-description: Show some support by following me!
-external_url: https://github.com/YoussefRaafatNasry
----

_projects/(5) The Fabulous.md

@@ -1,7 +0,0 @@
----
-name: The Fabulous
-tools: [Android, Material Design]
-image: https://storage.googleapis.com/gd-wagtail-prod-assets/original_images/material_design_awards_inline_002.jpg
-description: Fabulous is a science-based app, incubated in Duke's Behavioral Economics Lab, that will help you build healthy rituals into your life, just like an elite athlete.
-external_url: https://thefabulous.co/
----

_projects/(6) Dummy Project.md

@@ -1,7 +0,0 @@
----
-name: Dummy Project
-tools: [Ignore me]
-image: https://www.sketchappsources.com/resources/source-image/coo-app-concept-subgaurav.jpg
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-external_url: https://www.google.com
----

assets/css/style.scss

@@ -0,0 +1,39 @@
+---
+---
+/* Add your custom style here */
+@import "portfolYOU";
+
+.home-navi {
+    max-width:610px;
+    margin:0 auto;
+    animation-delay: 2s;
+    text-align: center;
+}
+.project.card,
+.post.card {
+    border-radius: 5px;
+}
+.project-meta {
+    font-size:0.8em;
+}
+.project-meta label {
+    text-decoration: underline;
+}
+.project-meta .description label {
+    margin-bottom:0;
+}
+.project-meta .btn {
+    margin-top:20px;
+}
+.project-meta .btn i {
+    display: none;
+    opacity: 0;
+    transition: visibility 0s, opacity 0.6s linear;
+}
+.project-meta .btn:hover i {
+    display: inline;
+    opacity:1;
+}
+.project.card .card-img-top {
+    border-radius: 5px 5px 0 0;
+}

pages/about.md

@@ -1,18 +1,19 @@
 ---
 layout: page
-title: About
+title: Über mich
 permalink: /about/
 weight: 3
 ---
 
-# **About Me**
+# **Über mich**
+
+Hallo ich bin **{{ site.author.name }}** :wave:,<br>
+1982 wurde ich in Berlin geboren und außer drei Jahre im Ausland habe ich bisher vorwiegend in dieser Stadt gelebt. Hauptberuflich bin ich seit 2004 Freiberufler in den Bereichen **Webdesign** und **DevOp**. 
 
-Hi I am **{{ site.author.name }}** :wave:,<br>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
 <div class="row">
-{% include about/skills.html title="Programming Skills" source=site.data.programming-skills %}
-{% include about/skills.html title="Other Skills" source=site.data.other-skills %}
+{% include about/skills.html title="Computer Kenntnisse" source=site.data.programming-skills %}
+{% include about/skills.html title="Weitere Fähigkeiten" source=site.data.other-skills %}
 </div>
 
 <div class="row">

pages/datenschutz.md

@@ -0,0 +1,119 @@
+---
+layout: page
+title: Datenschutzerklärung
+permalink: /datenschutz/
+weight: 3
+---
+
+# Datenschutzerklärung
+Stand: 9. Oktober 2020
+
+### Verantwortlicher
+Bastian Menningen<br>Rossbachstr. 6<br />10829 Berlin
+
+**E-Mail-Adresse:** <a href="mailto:webmaster@bmen.cc">webmaster@bmen.cc</a>
+
+**Impressum:** <a href="https://www.example.com/impressum" target="_blank">https://www.bmen.cc/impressum</a>
+
+### Übersicht der Verarbeitungen
+
+Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.
+
+###### Arten der verarbeiteten Daten
+* Bestandsdaten (z.B. Namen, Adressen).
+* Inhaltsdaten (z.B. Eingaben in Onlineformularen).
+* Kontaktdaten (z.B. E-Mail, Telefonnummern).
+* Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).
+* Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten).
+
+###### Kategorien betroffener Personen
+* Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).
+
+###### Zwecke der Verarbeitung
+* Bereitstellung unseres Onlineangebotes und Nutzerfreundlichkeit.
+* Kontaktanfragen und Kommunikation.
+* Remarketing.
+* Sicherheitsmaßnahmen.
+* Tracking (z.B. interessens-/verhaltensbezogenes Profiling, Nutzung von Cookies).
+* Erbringung vertragliche Leistungen und Kundenservice.
+* Verwaltung und Beantwortung von Anfragen.
+
+###### Maßgebliche Rechtsgrundlagen
+Im Folgenden teilen wir die Rechtsgrundlagen der Datenschutzgrundverordnung (DSGVO), auf deren Basis wir die personenbezogenen Daten verarbeiten, mit. Bitte beachten Sie, dass zusätzlich zu den Regelungen der DSGVO die nationalen Datenschutzvorgaben in Ihrem bzw. unserem Wohn- und Sitzland gelten können. Sollten ferner im Einzelfall speziellere Rechtsgrundlagen maßgeblich sein, teilen wir Ihnen diese in der Datenschutzerklärung mit.
+ 
+* **Einwilligung (Art. 6 Abs. 1 S. 1 lit. a. DSGVO)** - Die betroffene Person hat ihre Einwilligung in die Verarbeitung der sie betreffenden personenbezogenen Daten für einen spezifischen Zweck oder mehrere bestimmte Zwecke gegeben.
+* **Vertragserfüllung und vorvertragliche Anfragen (Art. 6 Abs. 1 S. 1 lit. b. DSGVO)** - Die Verarbeitung ist für die Erfüllung eines Vertrags, dessen Vertragspartei die betroffene Person ist, oder zur Durchführung vorvertraglicher Maßnahmen erforderlich, die auf Anfrage der betroffenen Person erfolgen.
+* **Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO)** - Die Verarbeitung ist zur Wahrung der berechtigten Interessen des Verantwortlichen oder eines Dritten erforderlich, sofern nicht die Interessen oder Grundrechte und Grundfreiheiten der betroffenen Person, die den Schutz personenbezogener Daten erfordern, überwiegen.
+**Nationale Datenschutzregelungen in Deutschland**: Zusätzlich zu den Datenschutzregelungen der Datenschutz-Grundverordnung gelten nationale Regelungen zum Datenschutz in Deutschland. Hierzu gehört insbesondere das Gesetz zum Schutz vor Missbrauch personenbezogener Daten bei der Datenverarbeitung (Bundesdatenschutzgesetz – BDSG). Das BDSG enthält insbesondere Spezialregelungen zum Recht auf Auskunft, zum Recht auf Löschung, zum Widerspruchsrecht, zur Verarbeitung besonderer Kategorien personenbezogener Daten, zur Verarbeitung für andere Zwecke und zur Übermittlung sowie automatisierten Entscheidungsfindung im Einzelfall einschließlich Profiling. Des Weiteren regelt es die Datenverarbeitung für Zwecke des Beschäftigungsverhältnisses (§ 26 BDSG), insbesondere im Hinblick auf die Begründung, Durchführung oder Beendigung von Beschäftigungsverhältnissen sowie die Einwilligung von Beschäftigten. Ferner können Landesdatenschutzgesetze der einzelnen Bundesländer zur Anwendung gelangen.
+
+### Sicherheitsmaßnahmen
+Wir treffen nach Maßgabe der gesetzlichen Vorgaben unter Berücksichtigung des Stands der Technik, der Implementierungskosten und der Art, des Umfangs, der Umstände und der Zwecke der Verarbeitung sowie der unterschiedlichen Eintrittswahrscheinlichkeiten und des Ausmaßes der Bedrohung der Rechte und Freiheiten natürlicher Personen geeignete technische und organisatorische Maßnahmen, um ein dem Risiko angemessenes Schutzniveau zu gewährleisten.
+
+Zu den Maßnahmen gehören insbesondere die Sicherung der Vertraulichkeit, Integrität und Verfügbarkeit von Daten durch Kontrolle des physischen und elektronischen Zugangs zu den Daten als auch des sie betreffenden Zugriffs, der Eingabe, der Weitergabe, der Sicherung der Verfügbarkeit und ihrer Trennung. Des Weiteren haben wir Verfahren eingerichtet, die eine Wahrnehmung von Betroffenenrechten, die Löschung von Daten und Reaktionen auf die Gefährdung der Daten gewährleisten. Ferner berücksichtigen wir den Schutz personenbezogener Daten bereits bei der Entwicklung bzw. Auswahl von Hardware, Software sowie Verfahren entsprechend dem Prinzip des Datenschutzes, durch Technikgestaltung und durch datenschutzfreundliche Voreinstellungen.
+
+**Kürzung der IP-Adresse**: Sofern es uns möglich ist oder eine Speicherung der IP-Adresse nicht erforderlich ist, kürzen wir oder lassen Ihre IP-Adresse kürzen. Im Fall der Kürzung der IP-Adresse, auch als "IP-Masking" bezeichnet, wird das letzte Oktett, d.h., die letzten beiden Zahlen einer IP-Adresse, gelöscht (die IP-Adresse ist in diesem Kontext eine einem Internetanschluss durch den Online-Zugangs-Provider individuell zugeordnete Kennung). Mit der Kürzung der IP-Adresse soll die Identifizierung einer Person anhand ihrer IP-Adresse verhindert oder wesentlich erschwert werden.
+
+**SSL-Verschlüsselung (https)**: Um Ihre via unser Online-Angebot übermittelten Daten zu schützen, nutzen wir eine SSL-Verschlüsselung. Sie erkennen derart verschlüsselte Verbindungen an dem Präfix https:// in der Adresszeile Ihres Browsers.
+
+### Bereitstellung des Onlineangebotes und Webhosting
+Um unser Onlineangebot sicher und effizient bereitstellen zu können, nehmen wir die Leistungen von einem oder mehreren Webhosting-Anbietern in Anspruch, von deren Servern (bzw. von ihnen verwalteten Servern) das Onlineangebot abgerufen werden kann. Zu diesen Zwecken können wir Infrastruktur- und Plattformdienstleistungen, Rechenkapazität, Speicherplatz und Datenbankdienste sowie Sicherheitsleistungen und technische Wartungsleistungen in Anspruch nehmen.
+
+Zu den im Rahmen der Bereitstellung des Hostingangebotes verarbeiteten Daten können alle die Nutzer unseres Onlineangebotes betreffenden Angaben gehören, die im Rahmen der Nutzung und der Kommunikation anfallen. Hierzu gehören regelmäßig die IP-Adresse, die notwendig ist, um die Inhalte von Onlineangeboten an Browser ausliefern zu können, und alle innerhalb unseres Onlineangebotes oder von Webseiten getätigten Eingaben.
+
+**Erhebung von Zugriffsdaten und Logfiles**: Wir selbst (bzw. unser Webhostinganbieter) erheben Daten zu jedem Zugriff auf den Server (sogenannte Serverlogfiles). Zu den Serverlogfiles können die Adresse und Name der abgerufenen Webseiten und Dateien, Datum und Uhrzeit des Abrufs, übertragene Datenmengen, Meldung über erfolgreichen Abruf, Browsertyp nebst Version, das Betriebssystem des Nutzers, Referrer URL (die zuvor besuchte Seite) und im Regelfall IP-Adressen und der anfragende Provider gehören.
+
+Die Serverlogfiles können zum einen zu Zwecken der Sicherheit eingesetzt werden, z.B., um eine Überlastung der Server zu vermeiden (insbesondere im Fall von missbräuchlichen Angriffen, sogenannten DDoS-Attacken) und zum anderen, um die Auslastung der Server und ihre Stabilität sicherzustellen.
+
+* **Verarbeitete Datenarten:** Inhaltsdaten (z.B. Eingaben in Onlineformularen), Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).
+* **Betroffene Personen:** Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).
+* **Rechtsgrundlagen:** Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).
+
+### Präsenzen in sozialen Netzwerken (Social Media)
+Wir unterhalten Onlinepräsenzen innerhalb sozialer Netzwerke und verarbeiten in diesem Rahmen Daten der Nutzer, um mit den dort aktiven Nutzern zu kommunizieren oder um Informationen über uns anzubieten.
+
+Wir weisen darauf hin, dass dabei Daten der Nutzer außerhalb des Raumes der Europäischen Union verarbeitet werden können. Hierdurch können sich für die Nutzer Risiken ergeben, weil so z.B. die Durchsetzung der Rechte der Nutzer erschwert werden könnte.
+
+Ferner werden die Daten der Nutzer innerhalb sozialer Netzwerke im Regelfall für Marktforschungs- und Werbezwecke verarbeitet. So können z.B. anhand des Nutzungsverhaltens und sich daraus ergebender Interessen der Nutzer Nutzungsprofile erstellt werden. Die Nutzungsprofile können wiederum verwendet werden, um z.B. Werbeanzeigen innerhalb und außerhalb der Netzwerke zu schalten, die mutmaßlich den Interessen der Nutzer entsprechen. Zu diesen Zwecken werden im Regelfall Cookies auf den Rechnern der Nutzer gespeichert, in denen das Nutzungsverhalten und die Interessen der Nutzer gespeichert werden. Ferner können in den Nutzungsprofilen auch Daten unabhängig der von den Nutzern verwendeten Geräte gespeichert werden (insbesondere, wenn die Nutzer Mitglieder der jeweiligen Plattformen sind und bei diesen eingeloggt sind).
+
+Für eine detaillierte Darstellung der jeweiligen Verarbeitungsformen und der Widerspruchsmöglichkeiten (Opt-Out) verweisen wir auf die Datenschutzerklärungen und Angaben der Betreiber der jeweiligen Netzwerke.
+
+Auch im Fall von Auskunftsanfragen und der Geltendmachung von Betroffenenrechten weisen wir darauf hin, dass diese am effektivsten bei den Anbietern geltend gemacht werden können. Nur die Anbieter haben jeweils Zugriff auf die Daten der Nutzer und können direkt entsprechende Maßnahmen ergreifen und Auskünfte geben. Sollten Sie dennoch Hilfe benötigen, dann können Sie sich an uns wenden.
+
+* **Verarbeitete Datenarten:** Bestandsdaten (z.B. Namen, Adressen), Kontaktdaten (z.B. E-Mail, Telefonnummern), Inhaltsdaten (z.B. Eingaben in Onlineformularen), Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).
+* **Betroffene Personen:** Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).
+* **Zwecke der Verarbeitung:** Kontaktanfragen und Kommunikation, Tracking (z.B. interessens-/verhaltensbezogenes Profiling, Nutzung von Cookies), Remarketing.
+* **Rechtsgrundlagen:** Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).
+
+### Plugins und eingebettete Funktionen sowie Inhalte
+Wir binden in unser Onlineangebot Funktions- und Inhaltselemente ein, die von den Servern ihrer jeweiligen Anbieter (nachfolgend bezeichnet als "Drittanbieter”) bezogen werden. Dabei kann es sich zum Beispiel um Grafiken, Videos oder Social-Media-Schaltflächen sowie Beiträge handeln (nachfolgend einheitlich bezeichnet als "Inhalte”).
+
+Die Einbindung setzt immer voraus, dass die Drittanbieter dieser Inhalte die IP-Adresse der Nutzer verarbeiten, da sie ohne die IP-Adresse die Inhalte nicht an deren Browser senden könnten. Die IP-Adresse ist damit für die Darstellung dieser Inhalte oder Funktionen erforderlich. Wir bemühen uns, nur solche Inhalte zu verwenden, deren jeweilige Anbieter die IP-Adresse lediglich zur Auslieferung der Inhalte verwenden. Drittanbieter können ferner sogenannte Pixel-Tags (unsichtbare Grafiken, auch als "Web Beacons" bezeichnet) für statistische oder Marketingzwecke verwenden. Durch die "Pixel-Tags" können Informationen, wie der Besucherverkehr auf den Seiten dieser Webseite, ausgewertet werden. Die pseudonymen Informationen können ferner in Cookies auf dem Gerät der Nutzer gespeichert werden und unter anderem technische Informationen zum Browser und zum Betriebssystem, zu verweisenden Webseiten, zur Besuchszeit sowie weitere Angaben zur Nutzung unseres Onlineangebotes enthalten als auch mit solchen Informationen aus anderen Quellen verbunden werden.
+
+**Hinweise zu Rechtsgrundlagen:** Sofern wir die Nutzer um deren Einwilligung in den Einsatz der Drittanbieter bitten, ist die Rechtsgrundlage der Verarbeitung von Daten die Einwilligung. Ansonsten werden die Daten der Nutzer auf Grundlage unserer berechtigten Interessen (d.h. Interesse an effizienten, wirtschaftlichen und empfängerfreundlichen Leistungen) verarbeitet. In diesem Zusammenhang möchten wir Sie auch auf die Informationen zur Verwendung von Cookies in dieser Datenschutzerklärung hinweisen.
+
+* **Verarbeitete Datenarten:** Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen), Bestandsdaten (z.B. Namen, Adressen), Kontaktdaten (z.B. E-Mail, Telefonnummern), Inhaltsdaten (z.B. Eingaben in Onlineformularen).
+* **Betroffene Personen:** Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).
+* **Zwecke der Verarbeitung:** Bereitstellung unseres Onlineangebotes und Nutzerfreundlichkeit, Erbringung vertragliche Leistungen und Kundenservice, Sicherheitsmaßnahmen, Verwaltung und Beantwortung von Anfragen.
+* **Rechtsgrundlagen:** Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO), Einwilligung (Art. 6 Abs. 1 S. 1 lit. a. DSGVO), Vertragserfüllung und vorvertragliche Anfragen (Art. 6 Abs. 1 S. 1 lit. b. DSGVO).
+
+**Eingesetzte Dienste und Diensteanbieter:**
+
+* **Font Awesome:** Darstellung von Schriftarten und Symbolen; Dienstanbieter:  Fonticons, Inc. ,6 Porter Road Apartment 3R, Cambridge, MA 02140, USA; Website: <a href="https://fontawesome.com/" target="_blank">https://fontawesome.com/</a>; Datenschutzerklärung: <a href="https://fontawesome.com/privacy" target="_blank">https://fontawesome.com/privacy</a>.
+* **Google Fonts:** Wir binden die Schriftarten ("Google Fonts") des Anbieters Google ein, wobei die Daten der Nutzer allein zu Zwecken der Darstellung der Schriftarten im Browser der Nutzer verwendet werden. Die Einbindung erfolgt auf Grundlage unserer berechtigten Interessen an einer technisch sicheren, wartungsfreien und effizienten Nutzung von Schriftarten, deren einheitlicher Darstellung sowie unter Berücksichtigung möglicher lizenzrechtlicher Restriktionen für deren Einbindung. Dienstanbieter: Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland, Mutterunternehmen: Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA; Website: <a href="https://fonts.google.com/" target="_blank">https://fonts.google.com/</a>; Datenschutzerklärung: <a href="https://policies.google.com/privacy" target="_blank">https://policies.google.com/privacy</a>.
+* **YouTube-Videos:** Videoinhalte; Dienstanbieter: Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland, Mutterunternehmen: Google LLC, 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA; Website: <a href="https://www.youtube.com" target="_blank">https://www.youtube.com</a>; Datenschutzerklärung: <a href="https://policies.google.com/privacy" target="_blank">https://policies.google.com/privacy</a>; Widerspruchsmöglichkeit (Opt-Out): Opt-Out-Plugin: <a href="https://tools.google.com/dlpage/gaoptout?hl=de" target="_blank">https://tools.google.com/dlpage/gaoptout?hl=de</a>,  Einstellungen für die Darstellung von Werbeeinblendungen: <a href="https://adssettings.google.com/authenticated" target="_blank">https://adssettings.google.com/authenticated</a>.
+
+### Änderung und Aktualisierung der Datenschutzerklärung
+Wir bitten Sie, sich regelmäßig über den Inhalt unserer Datenschutzerklärung zu informieren. Wir passen die Datenschutzerklärung an, sobald die Änderungen der von uns durchgeführten Datenverarbeitungen dies erforderlich machen. Wir informieren Sie, sobald durch die Änderungen eine Mitwirkungshandlung Ihrerseits (z.B. Einwilligung) oder eine sonstige individuelle Benachrichtigung erforderlich wird.
+
+Sofern wir in dieser Datenschutzerklärung Adressen und Kontaktinformationen von Unternehmen und Organisationen angeben, bitten wir zu beachten, dass die Adressen sich über die Zeit ändern können und bitten die Angaben vor Kontaktaufnahme zu prüfen.
+
+### Begriffsdefinitionen
+In diesem Abschnitt erhalten Sie eine Übersicht über die in dieser Datenschutzerklärung verwendeten Begrifflichkeiten. Viele der Begriffe sind dem Gesetz entnommen und vor allem im Art. 4 DSGVO definiert. Die gesetzlichen Definitionen sind verbindlich. Die nachfolgenden Erläuterungen sollen dagegen vor allem dem Verständnis dienen. Die Begriffe sind alphabetisch sortiert.
+
+* **Personenbezogene Daten:** "Personenbezogene Daten“ sind alle Informationen, die sich auf eine identifizierte oder identifizierbare natürliche Person (im Folgenden "betroffene Person“) beziehen; als identifizierbar wird eine natürliche Person angesehen, die direkt oder indirekt, insbesondere mittels Zuordnung zu einer Kennung wie einem Namen, zu einer Kennnummer, zu Standortdaten, zu einer Online-Kennung (z.B. Cookie) oder zu einem oder mehreren besonderen Merkmalen identifiziert werden kann, die Ausdruck der physischen, physiologischen, genetischen, psychischen, wirtschaftlichen, kulturellen oder sozialen Identität dieser natürlichen Person sind. 
+* **Remarketing:** Vom "Remarketing“ bzw. "Retargeting“ spricht man, wenn z.B. zu Werbezwecken vermerkt wird, für welche Produkte sich ein Nutzer auf einer Webseite interessiert hat, um den Nutzer auf anderen Webseiten an diese Produkte, z.B. in Werbeanzeigen, zu erinnern. 
+* **Tracking:** Vom "Tracking“ spricht man, wenn das Verhalten von Nutzern über mehrere Onlineangebote hinweg nachvollzogen werden kann. Im Regelfall werden im Hinblick auf die genutzten Onlineangebote Verhaltens- und Interessensinformationen in Cookies oder auf Servern der Anbieter der Trackingtechnologien gespeichert (sogenanntes Profiling). Diese Informationen können anschließend z.B. eingesetzt werden, um den Nutzern Werbeanzeigen anzuzeigen, die voraussichtlich deren Interessen entsprechen. 
+* **Verantwortlicher:** Als "Verantwortlicher“ wird die natürliche oder juristische Person, Behörde, Einrichtung oder andere Stelle, die allein oder gemeinsam mit anderen über die Zwecke und Mittel der Verarbeitung von personenbezogenen Daten entscheidet, bezeichnet. 
+* **Verarbeitung:** "Verarbeitung" ist jeder mit oder ohne Hilfe automatisierter Verfahren ausgeführte Vorgang oder jede solche Vorgangsreihe im Zusammenhang mit personenbezogenen Daten. Der Begriff reicht weit und umfasst praktisch jeden Umgang mit Daten, sei es das Erheben, das Auswerten, das Speichern, das Übermitteln oder das Löschen.
+
+<p class="seal"><a href="https://datenschutz-generator.de/?l=de" title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank" rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>

pages/impressum.md

@@ -0,0 +1,28 @@
+---
+layout: page
+title: Impressum
+permalink: /impressum/
+weight: 3
+---
+
+# Impressum
+
+## Diensteanbieter
+Bastian Menningen<br />
+Rossbachstr. 6<br />
+10829 Berlin
+
+## Kontaktmöglichkeiten
+
+**E-Mail-Adresse:** <a href="mailto:webmaster@example.com">webmaster@example.com</a>
+
+**Telefon:** 1234455566
+
+## Angaben zum Unternehmen
+### Haftungs- und Schutzrechtshinweise
+
+**Links auf fremde Webseiten**: Inhalte fremder Webseiten, auf die wir direkt oder indirekt verweisen, liegen außerhalb unseres Verantwortungsbereiches und machen wir uns nicht zu Eigen. Für alle Inhalte und insbesondere für Schäden, die aus der Nutzung der in den verlinkten Webseiten aufrufbaren Informationen entstehen, haftet allein der Anbieter der verlinkten Webseiten.
+
+**Hinweise auf Rechtsverstöße**: Sollten Sie innerhalb unseres Internetauftritts Rechtsverstöße bemerken, bitten wir Sie uns auf diese hinzuweisen. Wir werden rechtswidrige Inhalte und Links nach Kenntnisnahme unverzüglich entfernen.
+
+<p class="seal"><a href="https://datenschutz-generator.de/?l=de" title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank" rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>

pages/index.md

@@ -3,4 +3,25 @@ layout: default
 permalink: /
 ---
 
-{% include landing.html %}
+{% include landing.html %}
+
+<div class="home-navi fadeIn animated" style="">
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="/projects">
+    Projekte
+    </a>
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="/blog">
+    Blog
+    </a>
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="/about">
+    Über mich
+    </a>
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="https://github.com/bmen">
+    <i class="fab fa-github"></i> Github
+    </a>
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="https://gitlab.com/bmen">
+    <i class="fab fa-gitlab"></i> Gitlab
+    </a>
+    <a class="m-1 btn btn-outline-secondary btn-2 " href="https://git.bmen.cc/bmen">
+    <i class="fas fa-code-branch"></i> Gitea
+    </a>
+</div>

pages/projects.html

@@ -1,11 +1,9 @@
 ---
 layout: default
-title: Projects
+title: Projekte
 permalink: /projects/
 weight: 1
-remote_projects: 
-  - git-for-wizards
-  - arduino-visitor-counter
+remote_projects:
 ---
 
 {% include projects/index.html %}