Merge pull request 'develop' (#149) from develop into main

Reviewed-on: #149

.drone.yml

@@ -1,44 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: build
-    image: node:lts
-    commands:
-      - npm install
-      - npm run build
-  - name: deploy-dev
-    image: alpine
-    environment:
-      FTP_HOST:
-        from_secret: FTP_HOST
-      FTP_USERNAME:
-        from_secret: FTP_USERNAME
-      FTP_PASSWORD:
-        from_secret: FTP_PASSWORD
-    commands:
-      - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ dev.samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
-    when:
-      branch:
-        - develop
-      event:
-        - push
-  - name: deploy
-    image: alpine
-    environment:
-      FTP_HOST:
-        from_secret: FTP_HOST
-      FTP_USERNAME:
-        from_secret: FTP_USERNAME
-      FTP_PASSWORD:
-        from_secret: FTP_PASSWORD
-    commands:
-      - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
-    when:
-      branch:
-        - main
-      event:
-        - push

.eleventy.js

@@ -0,0 +1,47 @@
+const pluginRev = require("eleventy-plugin-rev");
+const eleventySass = require("eleventy-sass");
+const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
+const site = require('./src/_data/site.js');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(pluginRev);
+    eleventyConfig.addPlugin(tinyHTML);
+    eleventyConfig.addPlugin(eleventySass, {
+        sass: {
+            loadPaths: ["node_modules"],
+            style: "compressed",
+            sourceMap: false,
+        },
+        compileOptions: {
+            permalink: function (contents, inputPath) {
+                return (data) => {
+                    return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
+                };
+            }
+        },
+        rev: true
+    });
+
+    eleventyConfig.setUseGitIgnore(false);
+    eleventyConfig.addPassthroughCopy({
+        "src/img": "img",
+        "src/font": "font",
+        "src/favicon.*": "",
+        "node_modules/flag-icons/flags": "flags",
+    });
+
+    return {
+        // Pre-process *.html files with: (default: `liquid`)
+        htmlTemplateEngine: "njk",
+        // Opt-out of pre-processing global data JSON files: (default: `liquid`)
+        dataTemplateEngine: "njk",
+
+        dir: {
+            input: "src",
+            // includes: "_includes",
+            // layouts: "_includes/layouts",
+            data: "_data",
+            output: `dist/${site.lang}/`
+        }
+    };
+};

.woodpecker.yml

@@ -4,6 +4,11 @@ pipeline:
     commands:
       - npm install
       - npm run build
+  build-de:
+    image: node:lts
+    commands:
+      - npm install
+      - npm run build:de
   deploy-dev:
     image: alpine
     secrets:
@@ -12,7 +17,21 @@ pipeline:
       - FTP_PASSWORD
     commands:
       - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ dev.samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/en/ dev.samuel-philipp.com/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+    when:
+      branch:
+        - develop
+      event:
+        - push
+  deploy-dev-de:
+    image: alpine
+    secrets:
+      - FTP_HOST
+      - FTP_USERNAME
+      - FTP_PASSWORD
+    commands:
+      - which lftp || ( apk --update add lftp )
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/de/ dev.samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
     when:
       branch:
         - develop
@@ -26,7 +45,21 @@ pipeline:
       - FTP_PASSWORD
     commands:
       - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/en/ samuel-philipp.com/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+    when:
+      branch:
+        - main
+      event:
+        - push
+  deploy-de:
+    image: alpine
+    secrets:
+      - FTP_HOST
+      - FTP_USERNAME
+      - FTP_PASSWORD
+    commands:
+      - which lftp || ( apk --update add lftp )
+      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/de/ samuel-philipp.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
     when:
       branch:
         - main

README.md

@@ -2,10 +2,7 @@
 
 # samuel-philipp.de
 
-Website for samuel-philipp.de
-
-[GitHub](https://github.com/samuel-p/samuel-philipp.de)
-[GitLab](https://gitlab.com/samuel-p/samuel-philipp.de)
+Website for [samuel-philipp.de](https://samuel-philipp.de) and [samuel-philipp.com](https://samuel-philipp.com)
 
 ## Additional Header Parameters
 

gulpfile.js

@@ -1,254 +0,0 @@
-/**
- * Settings
- * Turn on/off build features
- */
-var settings = {
-    clean: true,
-    scripts: true,
-    styles: true,
-    copy: true,
-    reload: true
-};
-
-
-/**
- * Paths to project folders
- */
-var paths = {
-    input: 'src/',
-    output: 'dist/',
-    scripts: {
-        input: 'src/js/*.js',
-        output: 'dist/js/'
-    },
-    styles: {
-        input: 'src/scss/*.scss',
-        output: 'dist/css/'
-    },
-    copy: {
-        input: [
-            'src/*.html',
-//            'src/.htaccess',
-            'src/{img,font}/**/*',
-            'node_modules/@fortawesome/fontawesome-free/*fonts/**/*'
-        ],
-        output: 'dist/'
-    },
-    reload: './dist/'
-};
-
-
-/**
- * Template for banner to add to file headers
- */
-
-var banner = {
-    main:
-        '/*!' +
-        ' <%= package.name %> v<%= package.version %>' +
-        ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
-        ' | <%= package.license %> License' +
-        ' | <%= package.repository.url %>' +
-        ' */\n'
-};
-
-
-/**
- * Gulp Packages
- */
-// General
-var {src, dest, watch, series, parallel} = require('gulp');
-var del = require('del');
-var flatmap = require('gulp-flatmap');
-var lazypipe = require('lazypipe');
-var rename = require('gulp-rename');
-var header = require('gulp-header');
-var package = require('./package.json');
-
-// Scripts
-var concat = require('gulp-concat');
-var uglify = require('gulp-terser');
-var optimizejs = require('gulp-optimize-js');
-
-// Styles
-var sass = require('gulp-sass');
-var postcss = require('gulp-postcss');
-var prefix = require('autoprefixer');
-var minify = require('cssnano');
-var tildeImporter = require('node-sass-tilde-importer');
-
-// BrowserSync
-var browserSync = require('browser-sync');
-
-
-/**
- * Gulp Tasks
- */
-// Remove pre-existing content from output folders
-var cleanDist = function (done) {
-
-    // Make sure this feature is activated before running
-    if (!settings.clean) return done();
-
-    // Clean the dist folder
-    del.sync([
-        paths.output
-    ]);
-
-    // Signal completion
-    return done();
-
-};
-
-// Repeated JavaScript tasks
-var jsTasks = lazypipe()
-    .pipe(header, banner.main, {package: package})
-    .pipe(optimizejs)
-    .pipe(dest, paths.scripts.output)
-    .pipe(rename, {suffix: '.min'})
-    .pipe(uglify)
-    .pipe(optimizejs)
-    .pipe(header, banner.main, {package: package})
-    .pipe(dest, paths.scripts.output);
-
-// minify, and concatenate scripts
-var buildScripts = function (done) {
-    // Make sure this feature is activated before running
-    if (!settings.scripts) return done();
-
-    // Run tasks on script files
-    return src(paths.scripts.input)
-        .pipe(flatmap(function(stream, file) {
-
-            // If the file is a directory
-            if (file.isDirectory()) {
-
-                // Setup a suffix variable
-                var suffix = '';
-
-                // If separate polyfill files enabled
-                if (settings.polyfills) {
-
-                    // Update the suffix
-                    suffix = '.polyfills';
-
-                    // Grab files that aren't polyfills, concatenate them, and process them
-                    src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
-                        .pipe(concat(file.relative + '.js'))
-                        .pipe(jsTasks());
-
-                }
-
-                // Grab all files and concatenate them
-                // If separate polyfills enabled, this will have .polyfills in the filename
-                src(file.path + '/*.js')
-                    .pipe(concat(file.relative + suffix + '.js'))
-                    .pipe(jsTasks());
-
-                return stream;
-
-            }
-
-            // Otherwise, process the file
-            return stream.pipe(jsTasks());
-
-        }));
-
-};
-
-// Process, and minify Sass files
-var buildStyles = function (done) {
-    // Make sure this feature is activated before running
-    if (!settings.styles) return done();
-
-    // Run tasks on all Sass files
-    return src(paths.styles.input)
-        .pipe(sass({
-            importer: tildeImporter,
-            outputStyle: 'expanded',
-            sourceComments: true
-        }))
-        .pipe(postcss([
-            prefix({
-                cascade: true,
-                remove: true
-            })
-        ]))
-        .pipe(header(banner.main, {package: package}))
-        .pipe(dest(paths.styles.output))
-        .pipe(rename({suffix: '.min'}))
-        .pipe(postcss([
-            minify({
-                discardComments: {
-                    removeAll: true
-                }
-            })
-        ]))
-        .pipe(dest(paths.styles.output));
-
-};
-
-// Copy static files into output folder
-var copyFiles = function (done) {
-
-    // Make sure this feature is activated before running
-    if (!settings.copy) return done();
-
-    // Copy static files
-    return src(paths.copy.input)
-        .pipe(dest(paths.copy.output));
-
-};
-
-// Watch for changes to the src directory
-var startServer = function (done) {
-    // Make sure this feature is activated before running
-    if (!settings.reload) return done();
-
-    // Initialize BrowserSync
-    browserSync.init({
-        server: {
-            baseDir: paths.reload
-        }
-    });
-
-    // Signal completion
-    done();
-
-};
-
-// Reload the browser when files change
-var reloadBrowser = function (done) {
-    if (!settings.reload) return done();
-    browserSync.reload();
-    done();
-};
-
-// Watch for changes
-var watchSource = function (done) {
-    watch(paths.input, series(exports.default, reloadBrowser));
-    done();
-};
-
-
-/**
- * Export Tasks
- */
-// Default task
-// gulp
-exports.default = series(
-    cleanDist,
-    parallel(
-        buildScripts,
-        buildStyles,
-        copyFiles
-    )
-);
-
-// Watch and reload
-// gulp watch
-exports.watch = series(
-    exports.default,
-    startServer,
-    watchSource
-);

package.json

@@ -1,10 +1,14 @@
 {
   "name": "samuel-philipp.de",
   "version": "1.0.0",
-  "description": "website for samuel-philipp.de",
+  "description": "Website for samuel-philipp.de",
   "scripts": {
-    "start": "gulp watch",
-    "build": "gulp"
+    "minify-css": "uncss -n -H dist/en/ -o dist/en/css/main-*.css dist/en/index.html",
+    "minify-css:de": "uncss -n -H dist/de/ -o dist/de/css/main-*.css dist/de/index.html",
+    "start": "eleventy --serve --watch",
+    "start:de": "LANGUAGE=de eleventy --serve --watch",
+    "build": "eleventy && npm run minify-css",
+    "build:de": "LANGUAGE=de eleventy && npm run minify-css"
   },
   "author": "samuel-p",
   "repository": {
@@ -12,28 +16,26 @@
     "url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.27.5"
+    "browser-sync": "^2.27.11"
   },
   "devDependencies": {
-    "autoprefixer": "10.3.7",
-    "cssnano": "5.0.8",
-    "del": "6.0.0",
-    "gulp": "4.0.2",
-    "gulp-concat": "2.6.1",
-    "gulp-flatmap": "1.0.2",
-    "gulp-header": "2.0.9",
-    "gulp-optimize-js": "1.1.0",
-    "gulp-postcss": "9.0.1",
-    "gulp-rename": "2.0.0",
-    "gulp-sass": "4.1.1",
-    "gulp-terser": "2.1.0",
-    "lazypipe": "1.0.2",
-    "node-sass-tilde-importer": "^1.0.2",
-    "postcss": "^8.3.11"
+    "@11ty/eleventy": "^1.0.2",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "@node-minify/core": "^7.1.0",
+    "@node-minify/crass": "^7.1.0",
+    "@node-minify/html-minifier": "^7.1.0",
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
+    "cpx": "^1.5.0",
+    "eleventy-plugin-rev": "^1.0.2",
+    "eleventy-sass": "^2.1.6",
+    "glob": "^8.0.3",
+    "minify": "^9.1.0",
+    "postcss": "^8.4.21",
+    "sass": "^1.57.1",
+    "uncss": "^0.17.3"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.4",
-    "bootstrap": "^4.6.0",
-    "jquery": "^3.6.0"
+    "bootstrap": "^5.2.3",
+    "flag-icons": "^6.6.6"
   }
 }

src/_data/i18n/de.json

@@ -0,0 +1,251 @@
+{
+  "about": {
+    "title": "Über mich",
+    "overview": {
+      "name": "Name",
+      "mail": "E-Mail",
+      "site": "Webseite",
+      "url": "samuel-philipp.de",
+      "address": "Adresse"
+    },
+    "hello": "Willkommen!",
+    "text": "Schön, dass du auf meine Webseite gefunden hast. Gerne stelle ich mich hier vor: Zunächst führe ich dich durch die wichtigsten Etappen meines Lebenslaufs. Anschließend präsentiere ich meine Projekte und Fähigkeiten, an und mit denen ich arbeite. Abschließend erhältst du einige Eindrücke meiner Hobbys und was ich sonst so tue. Schau dich gerne um. Bei Fragen, Anregungen oder Kritik freue ich mich auf deine Nachricht!"
+  },
+  "resume": {
+    "title": "Mein Lebenslauf",
+    "work": {
+      "title": "Berufliche Laufbahn",
+      "positions": [
+        {
+          "position": "Geschäftsführer <small>(Nebentätigkeit)</small>",
+          "company": "Ossrox UG (haftungsbeschränkt)",
+          "url": "https://ossrox.org",
+          "start": "März 2022",
+          "end": "heute",
+          "descriptions": [
+            "Hosting von Open-Source-Tools <a href=\"https://ossrox.org\">ossrox.org</a>",
+            "Strategische Gestaltung des Produktportfolios",
+            "Direkter Ansprechpartner im technischen Kundensupport",
+            "Planung und Realisierung individueller Kundenwünsche"
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software Engineer",
+          "company": "AV-TEST GmbH",
+          "url": "https://www.av-test.org",
+          "start": "Jan. 2018",
+          "end": "heute",
+          "descriptions": [
+            "Threat Intelligence Plattform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
+            "Automatisierte Datenschutzanalyse von Android Apps",
+            "Automatisierte Beschaffung von Malware für weitere Analysesysteme",
+            "Automatisierte Massenanalyse und Klassifizierung von Spam-Mails"
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software-Entwickler",
+          "company": "Fiducia & GAD IT AG",
+          "url": "https://www.fiduciagad.de",
+          "start": "Okt. 2017",
+          "end": "Dez. 2017",
+          "descriptions": [
+            "Auditverfahren & Zugriffsverwaltung von produktiven Bankdaten",
+            "Berufliche Umorientierung wegen Umzug nach Magdeburg"
+          ],
+          "city": "Karlsruhe",
+          "country": ""
+        },
+        {
+          "position": "Dualer Student Angewandte Informatik",
+          "company": "Fiducia & GAD IT AG",
+          "url": "https://www.fiduciagad.de",
+          "start": "Sept. 2014",
+          "end": "Sept. 2017",
+          "descriptions": [
+            "Auditschnittstelle für Hadoop-Komponenten eines Fraud-Detection-Systems",
+            "Entwicklung verschiedener Software-Testverfahren & CI/CD-Abläufe",
+            "Implementierung diverser Backends & Frontends"
+          ],
+          "city": "Karlsruhe",
+          "country": ""
+        }
+      ]
+    },
+    "education": {
+      "title": "Akademische Laufbahn",
+      "positions": [
+        {
+          "course": "IT-Sicherheit und Forensik",
+          "degree": "Master of Engineering",
+          "institution": "Hochschule Wismar",
+          "start": "Sept. 2018",
+          "end": "Juni 2021",
+          "descriptions": [
+            "Berufsbegleitendes Fernstudium"
+          ],
+          "city": "Wismar"
+        },
+        {
+          "course": "Angewandte Informatik",
+          "degree": "Bachelor of Science",
+          "institution": "Duale Hochschule Baden-Württemberg",
+          "start": "Okt. 2014",
+          "end": "Sept. 2017",
+          "descriptions": [],
+          "city": "Karlsruhe"
+        },
+        {
+          "course": "",
+          "degree": "Abitur",
+          "institution": "Albert-Einstein-Schule",
+          "start": "Sept. 2011",
+          "end": "Juni 2014",
+          "descriptions": [
+            "Technisches Gymnasium, Profil Informationstechnik"
+          ],
+          "city": "Ettlingen"
+        }
+      ]
+    }
+  },
+  "projects": {
+    "title": "Meine Projekte",
+    "list": [
+      {
+        "icon": "sp-codes.svg",
+        "name": "sp-codes",
+        "description": "In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit.",
+        "url": "https://sp-codes.de"
+      },
+      {
+        "icon": "samuel.png",
+        "name": "Open Source",
+        "description": "Wenn ich Zeit finde, beteilige ich mich an Open Source Projekten oder schreibe gelegentlich den ein oder anderen Artikel dazu.",
+        "url": ""
+      },
+      {
+        "icon": "op.png",
+        "name": "Ossrox",
+        "description": "Mit meiner Firma Ossrox biete ich Hosting von Open-Source-Tools an.",
+        "url": "https://ossrox.org"
+      }
+    ]
+  },
+  "skills": {
+    "title": "Skills",
+    "languages": [
+      {
+        "name": "Java",
+        "percent": 95
+      },
+      {
+        "name": "HTML",
+        "percent": 95
+      },
+      {
+        "name": "CSS",
+        "percent": 90
+      },
+      {
+        "name": "SQL",
+        "percent": 95
+      },
+      {
+        "name": "Bash",
+        "percent": 85
+      },
+      {
+        "name": "JavaScript",
+        "percent": 80
+      },
+      {
+        "name": "TypeScript",
+        "percent": 75
+      },
+      {
+        "name": "Python",
+        "percent": 50
+      }
+    ],
+    "technologies": [
+      {
+        "name": "Docker",
+        "percent": 95
+      },
+      {
+        "name": "Kubernetes",
+        "percent": 40
+      },
+      {
+        "name": "Git",
+        "percent": 90
+      },
+      {
+        "name": "Intellij IDEA",
+        "percent": 90
+      },
+      {
+        "name": "CI/CD",
+        "percent": 90
+      },
+      {
+        "name": "Spring Framework",
+        "percent": 85
+      },
+      {
+        "name": "Angular",
+        "percent": 80
+      },
+      {
+        "name": "Bootstrap",
+        "percent": 75
+      },
+      {
+        "name": "Elasticsearch",
+        "percent": 40
+      },
+      {
+        "name": "Node.js",
+        "percent": 80
+      }
+    ]
+  },
+  "interests": {
+    "title": "Interessen",
+    "list": [
+      {
+        "image": "softwerke",
+        "name": "Softwerke Magdeburg e.V.",
+        "url": "https://softwerke.md/"
+      },
+      {
+        "image": "magic",
+        "name": "Zauberkunst",
+        "url": "https://sp-magic.de"
+      },
+      {
+        "image": "sports",
+        "name": "Kraftsport & Bouldern",
+        "url": ""
+      },
+      {
+        "image": "photography",
+        "name": "Fotografie",
+        "url": ""
+      }
+    ]
+  },
+  "contact": {
+    "title": "Kontakt"
+  },
+  "footer": {
+    "imprint": "Impressum",
+    "privacy": "Datenschutz",
+    "code": "Code",
+    "stats": "Statistiken"
+  }
+}

src/_data/i18n/en.json

@@ -0,0 +1,251 @@
+{
+  "about": {
+    "title": "About Me",
+    "overview": {
+      "name": "Name",
+      "mail": "E-Mail",
+      "site": "Website",
+      "url": "samuel-philipp.com",
+      "address": "Address"
+    },
+    "hello": "Welcome!",
+    "text": "Nice that you found my website. I would like to introduce myself here: First, I'll take you through the most important stages of my resume. Then I will present my projects and skills I am working on and with. Finally, you will get some impressions of my hobbies and what else I like to do. Feel free to explore. If you have any questions, suggestions or criticism, do not hesitate to contact me!"
+  },
+  "resume": {
+    "title": "My Resume",
+    "work": {
+      "title": "Work Experience",
+      "positions": [
+        {
+          "position": "Managing Director <small>(side job)</small>",
+          "company": "Ossrox UG (haftungsbeschränkt)",
+          "url": "https://ossrox.org",
+          "start": "Mar. 2022",
+          "end": "now",
+          "descriptions": [
+            "Hosting open source tools <a href=\"https://ossrox.org\">ossrox.org</a>",
+            "Strategic design of product portfolio",
+            "Direct contact in technical customer support",
+            "Planning and realization of individual customer requirements"
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software Engineer",
+          "company": "AV-TEST GmbH",
+          "url": "https://www.av-test.org",
+          "start": "Jan. 2018",
+          "end": "now",
+          "descriptions": [
+            "Threat Intelligence Platform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
+            "Automated privacy analysis of Android apps",
+            "Automated collection of malware for further analysis systems",
+            "Automated mass analysis and classification of spam mails"
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software Engineer",
+          "company": "Fiducia & GAD IT AG",
+          "url": "https://www.fiduciagad.de",
+          "start": "Oct. 2017",
+          "end": "Dec. 2017",
+          "descriptions": [
+            "Audit workflows & access management of productive bank data",
+            "Professional reorientation due to move to Magdeburg"
+          ],
+          "city": "Karlsruhe",
+          "country": ""
+        },
+        {
+          "position": "Dual Student Applied Computer Science",
+          "company": "Fiducia & GAD IT AG",
+          "url": "https://www.fiduciagad.de",
+          "start": "Sept. 2014",
+          "end": "Sept. 2017",
+          "descriptions": [
+            "Audit interface for Hadoop components of a fraud detection system",
+            "Development of various software test procedures & CI/CD workflows",
+            "Implementation of various backends & frontends"
+          ],
+          "city": "Karlsruhe",
+          "country": ""
+        }
+      ]
+    },
+    "education": {
+      "title": "Education",
+      "positions": [
+        {
+          "course": "IT Security and Forensics",
+          "degree": "Master of Engineering",
+          "institution": "Wismar University",
+          "start": "Sept. 2018",
+          "end": "June 2021",
+          "descriptions": [
+            "Part-time distance studies"
+          ],
+          "city": "Wismar"
+        },
+        {
+          "course": "Applied Computer Science",
+          "degree": "Bachelor of Science",
+          "institution": "Baden-Württemberg Cooperative State University",
+          "start": "Oct. 2014",
+          "end": "Sept. 2017",
+          "descriptions": [],
+          "city": "Karlsruhe"
+        },
+        {
+          "course": "",
+          "degree": "Abitur (A-Level)",
+          "institution": "Albert-Einstein School",
+          "start": "Sept. 2011",
+          "end": "June 2014",
+          "descriptions": [
+            "Technical high school, profile information technology"
+          ],
+          "city": "Ettlingen"
+        }
+      ]
+    }
+  },
+  "projects": {
+    "title": "My Projects",
+    "list": [
+      {
+        "icon": "sp-codes.svg",
+        "name": "sp-codes",
+        "description": "In my spare time I provide various open source services for free.",
+        "url": "https://sp-codes.de"
+      },
+      {
+        "icon": "samuel.png",
+        "name": "Open Source",
+        "description": "When I have the time, I participate in open source projects or write an article or tutorial about it.",
+        "url": ""
+      },
+      {
+        "icon": "op.png",
+        "name": "Ossrox",
+        "description": "With my company Ossrox I offer hosting of open source tools.",
+        "url": "https://ossrox.org"
+      }
+    ]
+  },
+  "skills": {
+    "title": "Skills",
+    "languages": [
+      {
+        "name": "Java",
+        "percent": 95
+      },
+      {
+        "name": "HTML",
+        "percent": 95
+      },
+      {
+        "name": "CSS",
+        "percent": 90
+      },
+      {
+        "name": "SQL",
+        "percent": 95
+      },
+      {
+        "name": "Bash",
+        "percent": 85
+      },
+      {
+        "name": "JavaScript",
+        "percent": 80
+      },
+      {
+        "name": "TypeScript",
+        "percent": 75
+      },
+      {
+        "name": "Python",
+        "percent": 50
+      }
+    ],
+    "technologies": [
+      {
+        "name": "Docker",
+        "percent": 95
+      },
+      {
+        "name": "Kubernetes",
+        "percent": 40
+      },
+      {
+        "name": "Git",
+        "percent": 90
+      },
+      {
+        "name": "Intellij IDEA",
+        "percent": 90
+      },
+      {
+        "name": "CI/CD",
+        "percent": 90
+      },
+      {
+        "name": "Spring Framework",
+        "percent": 85
+      },
+      {
+        "name": "Angular",
+        "percent": 80
+      },
+      {
+        "name": "Bootstrap",
+        "percent": 75
+      },
+      {
+        "name": "Elasticsearch",
+        "percent": 40
+      },
+      {
+        "name": "Node.js",
+        "percent": 80
+      }
+    ]
+  },
+  "interests": {
+    "title": "Interests",
+    "list": [
+      {
+        "image": "softwerke",
+        "name": "Softwerke Magdeburg e.V.",
+        "url": "https://softwerke.md/"
+      },
+      {
+        "image": "magic",
+        "name": "Magic",
+        "url": "https://sp-magic.de"
+      },
+      {
+        "image": "sports",
+        "name": "Strength training & Bouldering",
+        "url": ""
+      },
+      {
+        "image": "photography",
+        "name": "Photography",
+        "url": ""
+      }
+    ]
+  },
+  "contact": {
+    "title": "Contact"
+  },
+  "footer": {
+    "imprint": "Imprint",
+    "privacy": "Privacy",
+    "code": "Code",
+    "stats": "Stats"
+  }
+}

src/_data/site.js

@@ -0,0 +1,8 @@
+const site = require("./site.json");
+
+site.buildTime = new Date();
+site.lang = process.env.LANGUAGE || 'en';
+site.language = site.languages.find(l => l.code === site.lang);
+site.strings = require(`./i18n/${site.lang}.json`);
+
+module.exports = site;

src/_data/site.json

@@ -0,0 +1,20 @@
+{
+  "title": "Samuel Philipp",
+  "subtitle": "Full-Stack Developer / SysAdmin / Magician",
+  "description": "Samuel Philipp - Full-Stack Developer / SysAdmin / Magician",
+  "author": "Samuel Philipp",
+  "languages": [
+    {
+      "label": "English",
+      "code": "en",
+      "icon": "us",
+      "url": "https://samuel-philipp.com"
+    },
+    {
+      "label": "Deutsch",
+      "code": "de",
+      "icon": "de",
+      "url": "https://samuel-philipp.de"
+    }
+  ]
+}

src/font/icomoon.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="matrix" d="M26.965 936.533v-977.067h70.315v-23.467h-97.28v1024h97.28v-23.467zM327.467 626.773v-49.365h1.408c13.184 18.901 29.141 33.451 47.659 43.691 18.475 10.453 39.936 15.573 64 15.573 23.040 0 44.075-4.565 63.189-13.397 19.115-8.875 33.493-24.832 43.52-47.275 10.837 15.957 25.6 30.123 44.117 42.325 18.517 12.245 40.533 18.347 65.963 18.347 19.328 0 37.205-2.389 53.76-7.125 16.555-4.693 30.549-12.203 42.368-22.613 11.776-10.453 20.864-23.851 27.563-40.576 6.485-16.725 9.813-36.821 9.813-60.459v-244.395h-100.224v206.976c0 12.203-0.427 23.851-1.365 34.645-0.749 10.384-3.503 19.965-7.876 28.587l0.196-0.427c-4.344 8.093-10.718 14.604-18.454 18.993l-0.234 0.122c-8.277 4.693-19.499 7.083-33.493 7.083-14.165 0-25.6-2.731-34.261-8.064-8.55-5.315-15.469-12.494-20.328-21.002l-0.152-0.289c-4.886-8.571-8.361-18.597-9.808-29.267l-0.048-0.429c-1.565-10.018-2.494-21.619-2.56-33.424v-203.505h-100.267v204.8c0 10.837-0.171 21.461-0.768 32.085-0.381 10.656-2.586 20.69-6.313 29.95l0.211-0.595c-3.602 8.998-9.741 16.347-17.529 21.354l-0.178 0.107c-8.277 5.333-20.309 8.107-36.437 8.107-4.736 0-11.051-1.024-18.731-3.157-7.68-2.176-15.36-6.101-22.613-12.032-7.296-5.888-13.611-14.379-18.731-25.387-5.12-11.051-7.68-25.6-7.68-43.52v-211.883h-100.224v365.44zM997.035-40.533v977.067h-70.315v23.467h97.28v-1024h-97.28v23.467z" />
+<glyph unicode="&#xe901;" glyph-name="server" d="M960 630.857h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 806.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 806.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM960 310.857h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 486.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 486.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM960-9.143h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 166.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 166.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48z" />
+<glyph unicode="&#xe902;" glyph-name="credit-card" horiz-adv-x="1152" d="M0 86.857c0-53 43-96 96-96h960c53 0 96 43 96 96v352h-1152v-352zM384 222.857c0 13.2 10.8 24 24 24h272c13.2 0 24-10.8 24-24v-80c0-13.2-10.8-24-24-24h-272c-13.2 0-24 10.8-24 24v80zM128 222.857c0 13.2 10.8 24 24 24h144c13.2 0 24-10.8 24-24v-80c0-13.2-10.8-24-24-24h-144c-13.2 0-24 10.8-24 24v80zM1152 790.857v-96h-1152v96c0 53 43 96 96 96h960c53 0 96-43 96-96z" />
+<glyph unicode="&#xe903;" glyph-name="network-wired" horiz-adv-x="1280" d="M1280 432v32c0 17.68-14.32 32-32 32h-560v80h144c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-384c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h144v-80h-560c-17.68 0-32-14.32-32-32v-32c0-17.68 14.32-32 32-32h208v-80h-112c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h320c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-112v80h608v-80h-112c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h320c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-112v80h208c17.68 0 32 14.32 32 32zM512 704v128h256v-128h-256zM384 64h-192v128h192v-128zM1088 64h-192v128h192v-128z" />
+<glyph unicode="&#xe904;" glyph-name="money-bill" horiz-adv-x="1280" d="M1216 832h-1152c-35.34 0-64-28.66-64-64v-640c0-35.34 28.66-64 64-64h1152c35.34 0 64 28.66 64 64v640c0 35.34-28.66 64-64 64zM96 160v128c70.7 0 128-57.3 128-128h-128zM96 608v128h128c0-70.7-57.3-128-128-128zM640 256c-88.38 0-160 85.98-160 192 0 106.040 71.64 192 160 192s160-85.96 160-192c0-106.060-71.66-192-160-192zM1184 160h-128c0 70.7 57.3 128 128 128v-128zM1184 608c-70.7 0-128 57.3-128 128h128v-128z" />
+<glyph unicode="&#xe905;" glyph-name="chart-line" d="M992 192h-864v608c0 17.68-14.32 32-32 32h-64c-17.68 0-32-14.32-32-32v-672c0-35.34 28.66-64 64-64h928c17.68 0 32 14.32 32 32v64c0 17.68-14.32 32-32 32zM928 768h-236.12c-42.76 0-64.18-51.7-33.94-81.94l64.8-64.8-146.74-146.76-146.74 146.74c-25 25-65.52 25-90.5 0l-137.38-137.38c-12.5-12.5-12.5-32.76 0-45.26l45.24-45.24c12.5-12.5 32.76-12.5 45.26 0l92.12 92.14 146.74-146.74c25-25 65.52-25 90.5 0l192 192 64.8-64.8c30.24-30.24 81.94-8.82 81.94 33.94v236.1c0.020 17.68-14.3 32-31.98 32z" />
+<glyph unicode="&#xe906;" glyph-name="info-circle" d="M512 944c-273.914 0-496-222.166-496-496 0-273.994 222.086-496 496-496s496 222.006 496 496c0 273.834-222.086 496-496 496zM512 724c46.392 0 84-37.608 84-84s-37.608-84-84-84-84 37.608-84 84 37.608 84 84 84zM624 216c0-13.254-10.746-24-24-24h-176c-13.254 0-24 10.746-24 24v48c0 13.254 10.746 24 24 24h24v128h-24c-13.254 0-24 10.746-24 24v48c0 13.254 10.746 24 24 24h128c13.254 0 24-10.746 24-24v-200h24c13.254 0 24-10.746 24-24v-48z" />
+<glyph unicode="&#xe907;" glyph-name="code" horiz-adv-x="1280" d="M557.8-63l-122 35.4c-12.8 3.6-20 17-16.4 29.8l273 940.4c3.6 12.8 17 20 29.8 16.4l122-35.4c12.8-3.6 20-17 16.4-29.8l-273-940.4c-3.8-12.8-17-20.2-29.8-16.4zM329.8 161.4l87 92.8c9.2 9.8 8.6 25.4-1.6 34.4l-181.2 159.4 181.2 159.4c10.2 9 11 24.6 1.6 34.4l-87 92.8c-9 9.6-24.2 10.2-34 1l-288.2-270c-10.2-9.4-10.2-25.6 0-35l288.2-270.2c9.8-9.2 25-8.8 34 1zM984.2 160.2l288.2 270.2c10.2 9.4 10.2 25.6 0 35l-288.2 270.4c-9.6 9-24.8 8.6-34-1l-87-92.8c-9.2-9.8-8.6-25.4 1.6-34.4l181.2-159.6-181.2-159.4c-10.2-9-11-24.6-1.6-34.4l87-92.8c9-9.8 24.2-10.2 34-1.2z" />
+<glyph unicode="&#xe908;" glyph-name="xmpp" d="M1023.829 824.405c-14.379-5.589-35.84-13.867-61.952-23.851-49.408-18.901-74.496-28.501-93.568-34.987-19.627-6.656-41.173-13.099-84.309-26.027-29.141-8.704-53.504-15.829-70.784-20.821-0.981-27.989 0-69.675-9.344-116.309-17.28-86.485-45.995-148.096-64.512-184.491-47.872-94.208-103.552-154.155-124.16-175.232-1.792 1.877-3.584 3.755-5.376 5.717-22.613 24.405-76.885 86.485-122.069 181.845-33.707 71.125-47.488 129.408-51.371 146.688-11.392 50.859-13.653 94.549-13.653 131.755 0 2.389-1.152 4.139-3.243 4.779-23.083 7.125-56.491 16.597-92.373 27.307-40.661 12.117-70.187 23.808-109.056 38.4-15.787 5.931-45.099 17.493-70.955 27.477-23.979 9.344-43.477 17.749-45.781 17.749-0.171 0-0.469 0-0.725-0.384-0.341-0.469-0.597-1.323-0.597-2.432 0.299-18.987 2.56-43.563 8.192-75.691 19.669-112.085 86.016-225.963 139.52-295.808 0 0 118.955-161.109 292.096-260.608 2.475-1.408 5.717-3.328 9.685-5.632-0.299-0.256-0.64-0.469-0.896-0.683-54.955-42.112-102.443-63.275-114.517-68.48-28.203-12.245-52.907-19.883-70.997-24.704v-13.013c35.285 4.352 64.811 10.325 87.040 15.573 21.931 5.205 84.864 21.12 162.133 57.216 0.043 0.043 0.171 0.085 0.256 0.128 4.352-2.133 8.832-4.352 13.44-6.528 48.853-23.211 114.261-52.053 194.347-65.536 19.627-3.285 36.352-5.291 48.213-6.229 1.792-0.128 3.371 1.109 3.669 2.901 0.427 2.517 0.64 4.907 0.128 6.955-0.256 1.067-1.024 1.92-2.005 2.347-16.171 6.699-38.443 12.8-63.445 22.997-29.909 12.203-71.723 34.133-116.736 68.096-2.048 1.536-6.101 4.651-11.733 9.173 148.48 84.992 255.659 210.816 255.659 210.816 55.509 65.152 142.123 179.925 173.781 313.429 11.179 47.147 17.237 87.723 16 116.096z" />
+<glyph unicode="&#xe909;" glyph-name="wifi" horiz-adv-x="1280" d="M1269.82 650.24c-354.34 327.74-905.44 327.62-1259.64 0-13.32-12.32-13.58-33.18-0.7-45.96l68.48-67.94c12.28-12.2 32.040-12.46 44.8-0.76 291.84 267.36 742.6 267.42 1034.5 0 12.76-11.7 32.52-11.42 44.8 0.76l68.48 67.94c12.86 12.78 12.6 33.64-0.72 45.96zM640 256c-70.7 0-128-57.3-128-128s57.3-128 128-128 128 57.3 128 128-57.3 128-128 128zM1045.34 423.18c-230.52 203.86-580.42 203.64-810.68 0-13.8-12.2-14.24-33.38-1.14-46.3l68.88-67.98c12-11.84 31.32-12.64 44.1-1.6 167.9 145.14 419.48 144.82 586.98 0 12.78-11.040 32.1-10.26 44.1 1.6l68.88 67.98c13.12 12.92 12.66 34.12-1.12 46.3z" />
+<glyph unicode="&#xe90a;" glyph-name="youtube" d="M1002.453 695.253c-12.365 43.307-45.781 76.722-88.183 88.866l-0.905 0.222c-79.787 21.376-400.896 21.376-400.896 21.376s-320.299 0.427-400.896-21.376c-43.307-12.365-76.722-45.781-88.866-88.183l-0.222-0.905c-14.173-72.978-22.281-156.904-22.281-242.723 0-1.743 0.003-3.484 0.010-5.225l-0.001 0.268c-0.004-1.198-0.006-2.617-0.006-4.035 0-85.813 8.107-169.732 23.598-251.033l-1.32 8.327c12.365-43.307 45.781-76.722 88.183-88.866l0.905-0.222c79.701-21.419 400.896-21.419 400.896-21.419s320.256 0 400.896 21.419c43.307 12.365 76.722 45.781 88.866 88.183l0.222 0.905c13.59 71.472 21.364 153.686 21.364 237.715 0 3.173-0.011 6.344-0.033 9.513l0.003-0.486c0.024 2.951 0.037 6.439 0.037 9.929 0 84.041-7.776 166.267-22.648 245.996l1.278-8.245zM409.984 294.357v306.901l267.264-153.685z" />
+<glyph unicode="&#xe90b;" glyph-name="twitter" d="M1022.037 765.056c-37.76-16.597-78.080-27.904-120.533-33.067 43.264 26.069 76.544 67.157 92.288 116.181-40.576-23.68-85.547-40.917-133.419-50.517-38.229 40.917-92.715 66.517-153.216 66.517-115.925 0-209.92-93.995-209.92-209.792 0-16.64 1.92-32.64 5.419-47.957-174.507 8.235-329.173 92.032-432.683 218.709-18.219-30.805-28.416-66.603-28.416-105.6 0-72.96 37.12-137.088 93.355-174.763-34.432 1.109-66.816 10.581-95.061 26.283v-2.603c0-101.76 72.235-186.624 168.363-205.952-17.621-4.736-36.224-7.296-55.296-7.296-13.397 0-26.24 1.28-39.083 3.669 26.923-83.328 104.32-144.085 196.437-145.792-71.68-56.277-162.517-89.813-260.352-89.813-16.64 0-33.237 0.981-49.92 2.859 93.397-59.477 203.435-94.251 322.432-94.251 386.304 0 597.291 319.829 597.291 596.736 0 8.917 0 17.92-0.64 26.88 41.003 29.397 76.8 66.56 104.96 108.715z" />
+<glyph unicode="&#xe90c;" glyph-name="threema" d="M511.915 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM241.621 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM782.251 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM512 960c243.2 0 440.405-173.483 440.405-387.499s-197.205-387.541-440.405-387.541c-0.419-0.001-0.915-0.002-1.411-0.002-69.213 0-135.064 14.393-194.724 40.35l3.154-1.222-220.629-55.168 47.147 188.587c-46.677 61.525-73.941 135.467-73.941 214.997 0 214.016 197.205 387.499 440.405 387.499zM511.957 779.307c-0.013 0-0.028 0-0.043 0-68.934 0-124.818-55.87-124.843-124.798v-49.922h-4.907c-11.075 0-20.053-8.978-20.053-20.053v0-176.043c0-11.093 8.96-20.096 20.053-20.096h259.669c11.093 0 20.053 8.96 20.053 20.053v176.171c0 11.075-8.978 20.053-20.053 20.053v0h-4.907v49.92c-0.073 68.917-55.958 124.757-124.885 124.757-0.045 0-0.090 0-0.135 0h0.007zM511.957 729.387c41.472 0 75.008-33.536 75.008-74.837v-49.92h-149.931v49.92c0 41.301 33.536 74.837 74.923 74.837z" />
+<glyph unicode="&#xe90d;" glyph-name="stackoverflow" d="M810.069 27.093v273.237h91.051v-364.331h-822.443v364.331h90.88v-273.237zM260.736 118.144h458.197v91.179h-458.197zM271.787 325.163l447.147-93.397 19.243 88.32-447.061 93.312zM329.771 540.885l414.080-193.28 38.528 83.2-414.123 193.28-38.485-82.603zM445.611 745.045l350.592-292.48 57.984 69.12-350.549 292.395-57.6-68.992zM672.043 960l-74.496-55.211 273.28-367.104 74.496 55.211-273.365 367.104z" />
+<glyph unicode="&#xe90e;" glyph-name="search" d="M1010 74.6l-199.4 199.4c-9 9-21.2 14-34 14h-32.6c55.2 70.6 88 159.4 88 256 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c96.6 0 185.4 32.8 256 88v-32.6c0-12.8 5-25 14-34l199.4-199.4c18.8-18.8 49.2-18.8 67.8 0l56.6 56.6c18.8 18.8 18.8 49.2 0.2 68zM416 288c-141.4 0-256 114.4-256 256 0 141.4 114.4 256 256 256 141.4 0 256-114.4 256-256 0-141.4-114.4-256-256-256z" />
+<glyph unicode="&#xe90f;" glyph-name="pixelfed" d="M512-73.143c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM471.354 327.077h93.924c88.48 0 160.208 69.827 160.208 155.963s-71.728 155.963-160.208 155.963h-135.561c-51.046 0-92.428-40.285-92.428-89.979v-350.208l134.064 128.261z" />
+<glyph unicode="&#xe910;" glyph-name="mastodon" d="M989.568 623.829c0 222.123-145.536 287.232-145.536 287.232-73.387 33.707-199.424 47.872-330.283 48.939h-3.243c-130.901-1.067-256.853-15.232-330.24-48.939 0 0-145.536-65.109-145.536-287.232 0-50.859-0.981-111.701 0.64-176.171 5.291-217.259 39.851-431.317 240.683-484.48 92.587-24.491 172.117-29.653 236.16-26.112 116.139 6.4 181.333 41.472 181.333 41.472l-3.84 84.267c0 0-82.987-26.155-176.171-22.997-92.373 3.157-189.824 9.941-204.757 123.349-1.305 9.295-2.050 20.032-2.050 30.944 0 0.296 0.001 0.592 0.002 0.889v-0.046c0 0 90.667-22.187 205.525-27.435 70.229-3.2 136.107 4.139 203.008 12.075 128.299 15.317 240 94.379 254.037 166.613 22.059 113.707 20.267 277.632 20.267 277.632zM817.877 337.579h-106.539v261.077c0 55.040-23.168 82.944-69.461 82.944-51.2 0-76.885-33.109-76.885-98.645v-142.891h-105.941v142.933c0 65.536-25.685 98.645-76.885 98.645-46.293 0-69.461-27.947-69.461-82.944v-261.077h-106.539v268.928c0 54.997 13.995 98.688 42.112 130.987 29.013 32.341 66.944 48.896 114.091 48.896 54.528 0 95.829-20.949 123.136-62.891l26.496-44.501 26.539 44.501c27.307 41.941 68.608 62.891 123.136 62.891 47.104 0 85.077-16.555 114.091-48.896 28.075-32.299 42.069-75.989 42.069-130.987z" />
+<glyph unicode="&#xe911;" glyph-name="hand-holding-heart" horiz-adv-x="1152" d="M550.6 459c14-14.8 36.8-14.8 51 0l217.8 228.4c63.2 66.4 59.6 176.4-11.2 237.6-61.6 53.4-153.4 43.8-209.8-15.4l-22.4-23.4-22.2 23.2c-56.4 59.4-148.2 69-209.8 15.6-70.6-61.2-74.4-171.2-11.2-237.6l217.8-228.4zM1130.6 303.8c-23.6 21.4-60.4 20-85.2 0l-184.8-147.8c-22.6-18.2-50.8-28-80-28h-236.6c-17.6 0-32 14.4-32 32s14.4 32 32 32h156.6c31.8 0 61.4 21.8 66.6 53.2 6.6 40-24.2 74.8-63.2 74.8h-320c-54 0-106.2-18.6-148.2-52.6l-93-75.4h-110.8c-17.6 0-32-14.4-32-32v-192c0-17.6 14.4-32 32-32h713.6c29 0 57.2 9.8 80 28l302.4 242c30.4 24.2 32.8 70.6 2.6 97.8z" />
+<glyph unicode="&#xe912;" glyph-name="github" d="M512 947.328c-282.88 0-512-229.248-512-512 0-226.261 146.688-418.133 350.080-485.76 25.6-4.821 34.987 11.008 34.987 24.619 0 12.16-0.427 44.373-0.64 87.040-142.421-30.891-172.459 68.693-172.459 68.693-23.296 59.093-56.96 74.88-56.96 74.88-46.379 31.744 3.584 31.104 3.584 31.104 51.413-3.584 78.421-52.736 78.421-52.736 45.653-78.293 119.851-55.68 149.12-42.581 4.608 33.109 17.792 55.68 32.427 68.48-113.707 12.8-233.216 56.832-233.216 253.013 0 55.893 19.84 101.547 52.693 137.387-5.76 12.928-23.040 64.981 4.48 135.509 0 0 42.88 13.739 140.8-52.48 40.96 11.392 84.48 17.024 128 17.28 43.52-0.256 87.040-5.888 128-17.28 97.28 66.219 140.16 52.48 140.16 52.48 27.52-70.528 10.24-122.581 5.12-135.509 32.64-35.84 52.48-81.493 52.48-137.387 0-196.693-119.68-240-233.6-252.587 17.92-15.36 34.56-46.763 34.56-94.72 0-68.523-0.64-123.563-0.64-140.203 0-13.44 8.96-29.44 35.2-24.32 204.843 67.157 351.403 259.157 351.403 485.077 0 282.752-229.248 512-512 512z" />
+<glyph unicode="&#xe913;" glyph-name="gitea" d="M178.603 728.704c-78.72 0.171-184.149-49.877-178.347-175.36 9.088-196.011 209.92-214.187 290.176-215.765 8.789-36.779 103.253-163.584 173.184-170.24h306.347c183.723 12.203 321.28 555.605 219.307 557.653-168.661-7.936-268.629-11.947-354.347-12.629v-169.6l-26.709 11.819-0.171 157.696c-98.389 0.043-185.003 4.608-349.397 12.715-20.565 0.128-49.237 3.627-80.043 3.712zM189.739 659.371h9.387c11.179-100.48 29.355-159.232 66.133-249.003-93.867 11.093-173.739 38.357-188.416 140.16-7.595 52.693 18.005 107.691 112.896 108.843zM554.837 560.597c6.4-0.085 12.928-1.28 19.072-4.096l31.957-13.781-22.912-41.771c-0.064 0-0.139 0.001-0.215 0.001-3.617 0-7.078-0.595-10.264-1.681l0.196 0.059c-11.157-3.637-18.974-12.993-18.974-23.971 0-3.094 0.621-6.060 1.758-8.803l-0.064 0.177c1.191-2.848 2.807-5.307 4.817-7.467l-0.039 0.043-39.509-71.936c-3.422-0.067-6.667-0.656-9.668-1.68l0.196 0.059c-11.157-3.637-18.974-12.993-18.974-23.971 0-3.094 0.621-6.060 1.758-8.803l-0.064 0.177c4.092-9.916 14.625-16.865 26.985-16.865 3.482 0 6.819 0.551 9.907 1.561l-0.199-0.057c11.146 3.643 18.952 12.993 18.952 23.964 0 3.113-0.629 6.095-1.779 8.853l0.064-0.176c-1.523 3.672-3.821 6.806-6.74 9.385l-0.001 0.001 38.485 70.059c0.914-0.092 1.974-0.144 3.048-0.144 3.387 0 6.637 0.522 9.654 1.48l-0.2-0.055c3.503 1.151 6.52 2.771 9.12 4.803l-0.032-0.024c14.848-6.229 27.008-11.307 35.755-15.616 13.141-6.485 17.792-10.795 19.2-15.573 1.408-4.693-0.128-13.739-7.552-29.611-5.547-11.819-14.72-28.587-25.557-48.341-0.186 0.004-0.405 0.006-0.625 0.006-3.623 0-7.089-0.597-10.28-1.686l0.196 0.059c-11.157-3.637-18.974-12.993-18.974-23.971 0-3.094 0.621-6.060 1.758-8.803l-0.064 0.177c4.092-9.916 14.625-16.865 26.985-16.865 3.482 0 6.819 0.551 9.907 1.561l-0.199-0.057c11.138 3.647 18.937 12.993 18.937 23.959 0 3.099-0.623 6.068-1.763 8.815l0.064-0.177c-1.366 3.338-3.352 6.205-5.864 8.637l0.019-0.019c10.709 19.541 19.925 36.352 25.856 48.981 8.021 17.152 12.203 29.909 8.533 42.24s-14.933 20.352-29.867 27.733c-9.813 4.821-22.059 9.941-36.693 16.085 0.037 0.481 0.057 1.043 0.057 1.61 0 3.080-0.615 6.032-1.742 8.765l0.064-0.177c-1.427 3.466-3.531 6.437-6.198 8.928l0.011-0.011 22.528 41.088 124.757-53.888c22.528-9.771 31.829-33.707 20.907-53.76l-85.76-157.013c-10.965-20.011-37.888-28.288-60.416-18.56l-176.512 76.288c-22.528 9.728-31.872 33.707-20.907 53.76l85.76 156.971c7.509 13.781 22.613 21.973 38.613 22.613z" />
+<glyph unicode="&#xe914;" glyph-name="firefox" d="M377.813 647.125c0.341 0 0.171 0 0 0zM259.499 706.261c0.299 0 0.171 0 0 0zM967.339 614.955c-21.333 51.328-64.597 106.795-98.56 124.331 27.648-54.187 43.648-108.544 49.749-149.12l0.085-0.853c-55.552 138.496-149.76 194.347-226.731 315.904-3.84 6.187-7.765 12.331-11.52 18.816-1.559 2.561-3.377 5.886-5.069 9.285l-0.392 0.869c-2.94 5.574-5.439 12.051-7.163 18.837l-0.133 0.619c0 0.002 0 0.004 0 0.006 0 0.662-0.502 1.206-1.147 1.273h-0.005c-0.134 0.040-0.288 0.063-0.448 0.063s-0.314-0.023-0.459-0.066l0.011 0.003-0.256-0.085c-0.147-0.057-0.273-0.129-0.388-0.216l0.004 0.003c0.063 0.113 0.134 0.211 0.215 0.3l-0.001-0.001c-109.227-64-154.539-176.043-166.144-247.339-35.745-2.082-68.93-11.020-98.929-25.513l1.564 0.681c-4.186-2.091-7.011-6.345-7.011-11.258 0-1.565 0.287-3.063 0.81-4.445l-0.029 0.086c1.739-4.867 6.31-8.287 11.679-8.287 1.828 0 3.563 0.396 5.124 1.107l-0.077-0.032c24.762 11.975 53.614 19.905 84.054 22.1l0.767 0.044 2.859 0.213c3.577 0.218 7.837 0.357 12.124 0.384h0.079c0.498 0.004 1.087 0.006 1.676 0.006 24.517 0 48.2-3.572 70.558-10.223l-1.748 0.446 4.011-1.28c5.537-1.658 9.295-2.937 13.011-4.303l-1.704 0.548c4.425-1.607 7.117-2.687 9.786-3.813l-1.637 0.613c2.219-0.853 4.395-1.749 6.571-2.688 4.855-2.129 8.149-3.715 11.4-5.371l-1.374 0.635 4.523-2.304c4.507-2.324 7.633-4.068 10.718-5.877l-1.16 0.629c2.993-1.741 4.956-2.955 6.899-4.198l-0.883 0.529c35.71-22.331 64.697-52.259 85.286-87.673l0.645-1.201c-26.24 18.432-73.216 36.651-118.443 28.757 176.725-88.32 129.28-392.576-115.627-381.099-23.184 0.988-45.019 5.441-65.432 12.855l1.518-0.482c-6.703 2.457-11.478 4.429-16.182 6.531l1.718-0.686c-3.916 1.74-6.634 3.067-9.314 4.457l1.037-0.489c-59.989 31.019-109.525 89.6-115.712 160.768 0 0 22.656 84.523 162.389 84.523 15.104 0 58.283 42.155 59.093 54.357-0.213 4.011-85.717 38.016-119.040 70.827-17.835 17.579-26.283 26.027-33.749 32.427-3.761 3.185-7.92 6.341-12.243 9.271l-0.515 0.329c-5.558 18.734-8.757 40.258-8.757 62.529 0 20.451 2.697 40.272 7.755 59.127l-0.363-1.592c-50.475-22.997-89.728-59.307-118.272-91.392h-0.256c-19.456 24.661-18.091 106.069-16.981 123.051-0.256 1.067-14.507-7.424-16.427-8.704-17.831-12.815-33.515-26.32-47.936-41.065l-0.064-0.066c-16.36-16.594-31.423-34.569-44.964-53.697l-0.902-1.343c-30.203-42.296-53.051-92.121-65.423-145.946l-0.54-2.79c-0.128-0.555-4.693-20.565-8.021-45.312-0.219-0.904-0.775-4.839-1.288-8.788l-0.29-2.732c-1.217-7.733-2.251-17.421-2.855-27.225l-0.046-0.935-0.085-1.451c-0.182-1.893-0.533-7.56-0.845-13.238l-0.136-3.103-0.043-2.56c0-271.275 219.989-491.221 491.349-491.221 242.987 0 444.757 176.427 484.267 408.149 0.853 6.272 1.493 12.587 2.219 18.944 9.813 84.224-1.067 172.8-31.829 246.827z" />
+<glyph unicode="&#xe915;" glyph-name="copyright" d="M512 944c-273.934 0-496-222.066-496-496s222.066-496 496-496 496 222.066 496 496-222.066 496-496 496zM512 48c-221.064 0-400 178.902-400 400 0 221.062 178.902 400 400 400 221.064 0 400-178.902 400-400 0-221.064-178.902-400-400-400zM726.702 250.128c-19.228-19.424-91.060-82.792-208.13-82.792-164.86 0-280.968 122.85-280.968 283.134 0 158.304 120.55 278.802 279.524 278.802 111.062 0 177.476-53.24 195.186-69.558 4.76-4.388 7.731-10.654 7.731-17.613 0-4.845-1.44-9.353-3.915-13.121l0.056 0.091-36.31-56.226c-7.682-11.9-23.932-14.564-34.998-5.842-17.19 13.552-63.628 45.076-123.416 45.076-96.606 0-155.832-70.66-155.832-160.164 0-83.178 53.776-167.384 156.554-167.384 65.314 0 113.686 38.078 131.452 54.45 10.54 9.714 27.192 8.078 35.64-3.476l39.73-54.34c2.91-3.913 4.659-8.84 4.659-14.176 0-6.581-2.66-12.54-6.964-16.861l0.001 0.001z" />
+<glyph unicode="&#xe916;" glyph-name="book" horiz-adv-x="896" d="M896 240v672c0 26.6-21.4 48-48 48h-656c-106 0-192-86-192-192v-640c0-106 86-192 192-192h656c26.6 0 48 21.4 48 48v32c0 15-7 28.6-17.8 37.4-8.4 30.8-8.4 118.6 0 149.4 10.8 8.6 17.8 22.2 17.8 37.2zM256 692c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-424c-6.6 0-12 5.4-12 12v40zM256 564c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-424c-6.6 0-12 5.4-12 12v40zM762.8 64h-570.8c-35.4 0-64 28.6-64 64 0 35.2 28.8 64 64 64h570.8c-3.8-34.2-3.8-93.8 0-128z" />
+<glyph unicode="&#xe917;" glyph-name="external-link" d="M864 310.857h-64c-17.673 0-32-14.327-32-32v0-224h-640v640h288c17.673 0 32 14.327 32 32v0 64c0 17.673-14.327 32-32 32v0h-320c-53.019 0-96-42.981-96-96v0-704c0-53.019 42.981-96 96-96v0h704c53.019 0 96 42.981 96 96v0 256c0 17.673-14.327 32-32 32v0zM976 950.857h-256c-42.74 0-64.1-51.82-34-82l71.46-71.46-487.46-487.28c-8.721-8.692-14.118-20.716-14.118-34s5.396-25.308 14.116-33.999l0.001-0.001 45.34-45.26c8.692-8.721 20.716-14.118 34-14.118s25.308 5.396 33.999 14.116l487.221 487.361 71.44-71.36c30-30 82-9 82 34v256c0 26.51-21.49 48-48 48v0z" />
+<glyph unicode="&#xe918;" glyph-name="peertube" d="M128 960v-512l384 256zM128 448v-512l384 256zM512 704v-512l384 256z" />
+<glyph unicode="&#xe919;" glyph-name="linkedin" d="M872.405 87.381h-151.637v237.611c0 56.661-1.152 129.579-79.019 129.579-79.061 0-91.136-61.653-91.136-125.397v-241.792h-151.637v488.619h145.664v-66.603h1.963c20.352 38.4 69.845 78.933 143.787 78.933 153.643 0 182.059-101.12 182.059-232.747v-268.203zM227.712 642.859c-48.811 0-88.021 39.509-88.021 88.107 0 48.555 39.253 88.021 88.021 88.021 48.64 0 88.064-39.467 88.064-88.021 0-48.597-39.467-88.107-88.064-88.107zM303.744 87.381h-152.064v488.619h152.064v-488.619zM948.267 960h-872.704c-41.771 0-75.563-33.024-75.563-73.771v-876.459c0-40.789 33.792-73.771 75.563-73.771h872.576c41.728 0 75.861 32.981 75.861 73.771v876.459c0 40.747-34.133 73.771-75.861 73.771h0.128z" />
+<glyph unicode="&#xe91a;" glyph-name="xing" d="M776.021 960c-22.059 0-31.616-13.867-39.552-28.16 0 0-318.080-564.224-328.619-582.699 0.64-1.024 209.877-384.981 209.877-384.981 7.253-13.141 18.603-28.16 41.259-28.16h147.371c9.003 0 16 3.328 19.755 9.387 3.797 6.443 3.797 14.763-0.384 22.869l-208.171 380.416c-0.171 0.256-0.171 0.683 0 0.939l327.040 578.133c4.053 8.149 4.139 16.512 0.256 22.827-3.797 6.101-10.709 9.429-19.584 9.429h-149.248zM155.648 757.76c-9.003 0-16.427-3.157-20.181-9.216-3.84-6.357-3.328-14.464 0.853-22.656l99.84-172.8c0.171-0.427 0.171-0.683 0-0.896l-156.8-277.035c-4.224-8.021-3.968-16.256 0-22.571 3.627-6.059 10.197-9.984 19.2-9.984h147.669c22.101 0 32.683 14.848 40.32 28.459l159.317 281.984-101.461 177.28c-7.339 13.44-18.517 28.117-41.045 28.117h-147.712v-0.683z" />
+<glyph unicode="&#xf004;" glyph-name="heart" d="M512 0c-9.143 0-18.286 3.429-25.143 10.286l-356.571 344c-4.571 4-130.286 118.857-130.286 256 0 167.429 102.286 267.429 273.143 267.429 100 0 193.714-78.857 238.857-123.429 45.143 44.571 138.857 123.429 238.857 123.429 170.857 0 273.143-100 273.143-267.429 0-137.143-125.714-252-130.857-257.143l-356-342.857c-6.857-6.857-16-10.286-25.143-10.286z" />
+<glyph unicode="&#xf015;" glyph-name="home" horiz-adv-x="951" d="M804.571 384v-274.286c0-20-16.571-36.571-36.571-36.571h-219.429v219.429h-146.286v-219.429h-219.429c-20 0-36.571 16.571-36.571 36.571v274.286c0 1.143 0.571 2.286 0.571 3.429l328.571 270.857 328.571-270.857c0.571-1.143 0.571-2.286 0.571-3.429zM932 423.428l-35.429-42.286c-2.857-3.429-7.429-5.714-12-6.286h-1.714c-4.571 0-8.571 1.143-12 4l-395.429 329.714-395.429-329.714c-4-2.857-8.571-4.571-13.714-4-4.571 0.571-9.143 2.857-12 6.286l-35.429 42.286c-6.286 7.429-5.143 19.429 2.286 25.714l410.857 342.286c24 20 62.857 20 86.857 0l139.429-116.571v111.429c0 10.286 8 18.286 18.286 18.286h109.714c10.286 0 18.286-8 18.286-18.286v-233.143l125.143-104c7.429-6.286 8.571-18.286 2.286-25.714z" />
+<glyph unicode="&#xf02c;" glyph-name="tags" horiz-adv-x="1280" d="M995.882 498.975l-423.764 423.764c-17.373 17.373-41.372 28.118-67.882 28.118h-408.236c-53.020 0-96-42.98-96-96v-408.236c0-26.51 10.745-50.509 28.118-67.882l423.764-423.764c37.488-37.49 98.272-37.492 135.764 0l408.236 408.236c37.49 37.49 37.49 98.274 0 135.764zM224 630.857c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM1251.882 363.211l-408.236-408.236c-37.49-37.49-98.274-37.49-135.764 0l-0.72 0.72 348.118 348.118c33.998 33.998 52.72 79.2 52.72 127.28s-18.724 93.282-52.72 127.28l-392.486 392.484h97.442c26.51 0 50.509-10.745 67.882-28.118l423.764-423.764c37.49-37.49 37.49-98.274 0-135.764z" />
+<glyph unicode="&#xf086;" glyph-name="comments" horiz-adv-x="1152" d="M832 566.857c0 176.8-186.2 320-416 320s-416-143.2-416-320c0-68.6 28.2-131.8 76-184-26.8-60.4-71-108.4-71.6-109-4.4-4.6-5.6-11.4-3-17.4s8.2-9.6 14.6-9.6c73.2 0 133.8 24.6 177.4 50 64.4-31.4 140.6-50 222.6-50 229.8 0 416 143.2 416 320zM1076 126.857c47.8 52 76 115.4 76 184 0 133.8-107 248.4-258.6 296.2 1.8-13.2 2.6-26.6 2.6-40.2 0-211.8-215.4-384-480-384-21.6 0-42.6 1.6-63.4 3.8 63-115 211-195.8 383.4-195.8 82 0 158.2 18.4 222.6 50 43.6-25.4 104.2-50 177.4-50 6.4 0 12.2 3.8 14.6 9.6 2.6 5.8 1.4 12.6-3 17.4-0.6 0.6-44.8 48.4-71.6 109z" />
+<glyph unicode="&#xf0c0;" glyph-name="users" horiz-adv-x="1280" d="M192 502.857c70.6 0 128 57.4 128 128s-57.4 128-128 128-128-57.4-128-128 57.4-128 128-128zM1088 502.857c70.6 0 128 57.4 128 128s-57.4 128-128 128-128-57.4-128-128 57.4-128 128-128zM1152 438.857h-128c-35.2 0-67-14.2-90.2-37.2 80.6-44.2 137.8-124 150.2-218.8h132c35.4 0 64 28.6 64 64v64c0 70.6-57.4 128-128 128zM640 438.857c123.8 0 224 100.2 224 224s-100.2 224-224 224-224-100.2-224-224 100.2-224 224-224zM793.6 374.857h-16.6c-41.6-20-87.8-32-137-32s-95.2 12-137 32h-16.6c-127.2 0-230.4-103.2-230.4-230.4v-57.6c0-53 43-96 96-96h576c53 0 96 43 96 96v57.6c0 127.2-103.2 230.4-230.4 230.4zM346.2 401.657c-23.2 23-55 37.2-90.2 37.2h-128c-70.6 0-128-57.4-128-128v-64c0-35.4 28.6-64 64-64h131.8c12.6 94.8 69.8 174.6 150.4 218.8z" />
+<glyph unicode="&#xf0c9;" glyph-name="bars" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />
+<glyph unicode="&#xf0e0;" glyph-name="envelope" d="M1004.6 569.257c7.8 6.2 19.4 0.4 19.4-9.4v-409c0-53-43-96-96-96h-832c-53 0-96 43-96 96v408.8c0 10 11.4 15.6 19.4 9.4 44.8-34.8 104.2-79 308.2-227.2 42.2-30.8 113.4-95.6 184.4-95.2 71.4-0.6 144 65.6 184.6 95.2 204 148.2 263.2 192.6 308 227.4zM512 310.857c46.4-0.8 113.2 58.4 146.8 82.8 265.4 192.6 285.6 209.4 346.8 257.4 11.6 9 18.4 23 18.4 37.8v38c0 53-43 96-96 96h-832c-53 0-96-43-96-96v-38c0-14.8 6.8-28.6 18.4-37.8 61.2-47.8 81.4-64.8 346.8-257.4 33.6-24.4 100.4-83.6 146.8-82.8z" />
+<glyph unicode="&#xf1ab;" glyph-name="language" horiz-adv-x="1280" d="M304.2 478.457c-7 24.2-15.6 66.4-15.6 66.4h-1s-8.6-42.2-15.6-66.4l-22.2-75h76.2zM1232 758.857h-560v-640h560c26.6 0 48 21.4 48 48v544c0 26.6-21.4 48-48 48zM1184 518.857c0-13.2-10.8-24-24-24h-22.8c-13.8-47.2-43.4-94.8-85.4-139.8 16.8-12.8 34.2-25 52.2-36 11-6.8 14.6-21 8.2-32.4l-15.8-27.8c-6.8-11.8-21.8-15.6-33.4-8.6-25.2 15.6-49 32.2-70.8 49.8-21.8-17.4-45.4-34.2-70.8-49.8-11.6-7-26.6-3.2-33.4 8.6l-15.8 27.8c-6.4 11.2-2.8 25.6 8.4 32.4 18.6 11.4 36 23.4 52.2 36-15.8 16.8-29.8 34-42 51.4-8 11.4-4.4 27.2 7.4 34.2l13 7.8 14.6 8.6c10.8 6.4 24.8 3.4 32-6.8 10-14 21.6-28 34.8-41.8 27 28.4 47.6 57.8 60 86.4h-228.6c-13.2 0-24 10.8-24 24v32c0 13.2 10.8 24 24 24h128v32c0 13.2 10.8 24 24 24h32c13.2 0 24-10.8 24-24v-32h128c13.2 0 24-10.8 24-24zM0 710.857v-544c0-26.6 21.4-48 48-48h560v640h-560c-26.6 0-48-21.4-48-48zM117.8 278.657l115 338.2c3.4 9.8 12.4 16.2 22.8 16.2h65c10.2 0 19.4-6.6 22.8-16.2l115-338.2c5.2-15.6-6.2-31.8-22.8-31.8h-45.8c-10.824 0.008-19.971 7.18-22.956 17.030l-0.044 0.17-18.8 63.8h-120.4l-18.2-63.6c-3-10.2-12.4-17.4-23-17.4h-45.8c-16.4 0-28 16.2-22.8 31.8z" />
+<glyph unicode="&#xf21b;" glyph-name="user-secret" horiz-adv-x="805" d="M329.143 73.143l54.857 256-54.857 73.143-73.143 36.571zM475.429 73.143l73.143 365.714-73.143-36.571-54.857-73.143zM566.857 650.286c-0.571 1.143-1.143 2.286-2.286 3.429-5.143 4-46.286 4.571-54.857 4.571-32.571 0-63.429-4.571-95.429-10.857-4-1.143-8-1.143-12-1.143s-8 0-12 1.143c-32 6.286-62.857 10.857-95.429 10.857-8.571 0-49.714-0.571-54.857-4.571-1.143-1.143-1.714-2.286-2.286-3.429 0.571-5.143 1.143-10.286 2.286-15.429 3.429-4.571 6.286-2.857 8.571-9.714 14.857-40.571 21.714-72 73.143-72 73.714 0 53.143 68 77.143 68h6.857c24 0 3.429-68 77.143-68 51.429 0 58.286 31.429 73.143 72 2.286 6.857 5.143 5.143 8.571 9.714 1.143 5.143 1.714 10.286 2.286 15.429zM804.571 148c0-93.143-61.143-148-152.571-148h-499.429c-91.429 0-152.571 54.857-152.571 148 0 103.429 18.286 260 124.571 311.429l-51.429 125.714h122.286c-8 23.429-12.571 48-12.571 73.143 0 6.286 0.571 12.571 1.143 18.286-22.286 4.571-110.857 22.857-110.857 54.857 0 33.714 97.143 52 120 56.571 12 42.857 40.571 108 69.714 141.714 11.429 13.143 25.714 21.143 43.429 21.143 34.286 0 61.714-35.429 96-35.429s61.714 35.429 96 35.429c17.714 0 32-8 43.429-21.143 29.143-33.714 57.714-98.857 69.714-141.714 22.857-4.571 120-22.857 120-56.571 0-32-88.571-50.286-110.857-54.857 2.857-30.857-1.143-61.714-11.429-91.429h122.286l-46.857-128.571c102.286-53.143 120-206.857 120-308.571z" />
+<glyph unicode="&#xf21e;" glyph-name="heartbeat" d="M731.429 365.714h174.286c-6.857-7.429-11.429-11.429-12.571-12.571l-356-342.857c-6.857-6.857-16-10.286-25.143-10.286s-18.286 3.429-25.143 10.286l-356.571 344c-1.143 0.571-5.714 4.571-12 11.429h210.857c16.571 0 31.429 11.429 35.429 27.429l40 160.571 108.571-381.143c4.571-15.429 18.857-26.286 35.429-26.286v0c16 0 30.286 10.857 34.857 26.286l83.429 277.143 32-64c6.286-12 18.857-20 32.571-20zM1024 610.286c0-65.714-28.571-125.714-58.857-171.429h-210.857l-63.429 126.286c-6.286 13.143-21.143 21.143-35.429 20-15.429-1.714-28-11.429-32-26.286l-73.714-245.714-112 392c-4.571 15.429-18.857 26.286-36 26.286-16.571 0-30.857-11.429-34.857-27.429l-66.286-265.143h-241.714c-30.286 45.714-58.857 105.714-58.857 171.429 0 167.429 102.286 267.429 273.143 267.429 100 0 193.714-78.857 238.857-123.429 45.143 44.571 138.857 123.429 238.857 123.429 170.857 0 273.143-100 273.143-267.429z" />
+<glyph unicode="&#xf27a;" glyph-name="commenting" d="M512 886.857c-282.8 0-512-186.2-512-416 0-99.2 42.8-190 114-261.4-25-100.8-108.6-190.6-109.6-191.6-4.4-4.6-5.6-11.4-3-17.4s8.2-9.6 14.6-9.6c132.6 0 232 63.6 281.2 102.8 65.4-24.6 138-38.8 214.8-38.8 282.8 0 512 186.2 512 416s-229.2 416-512 416zM256 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM512 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM768 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64z" />
+</font></defs></svg>

src/img/sp-codes.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"/><stop offset="1" stop-color="#fea500" stop-opacity="0"/></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round"/><g style="line-height:1.25"><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" fill="#fea500" stroke-width="0"/></g><g style="line-height:1.25"><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" fill="#fea500" stroke-width="4.366"/></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round"/><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round"/></svg>

src/index.html

@@ -1,7 +1,10 @@
+---
+title: {{site.title}}
+---
 <!doctype html>
 <html lang="en" prefix="og: http://ogp.me/ns#">
 <head>
-    <title>Samuel Philipp</title>
+    <title>{{site.title}}</title>
     <base href="/">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -13,94 +16,295 @@
     <meta name="coverage" content="Worldwide">
     <meta name="distribution" content="Global">
     <meta name="rating" content="general">
-    <meta name="url" content="https://samuel-philipp.de/">
-    <meta name="subject" content="Samuel Philipp">
-    <meta name="description" content="Samuel Philipp - Software Engineer & Magician">
-    <meta name="author" content="Samuel Philipp">
+    <meta name="url" content="{{site.language.url}}">
+    <meta name="subject" content="{{site.title}}">
+    <meta name="description" content="{{site.description}}">
+    <meta name="author" content="{{site.author}}">
     <meta property="og:type" content="website">
     <meta property="og:locale" content="de">
-    <meta property="og:url" content="https://samuel-philipp.de/">
-    <meta property="og:title" content="Samuel Philipp">
-    <meta property="og:description" content="Samuel Philipp - Software Engineer & Magician">
-    <meta property="og:site_name" content="Samuel Philipp">
-    <meta property="og:image" content="https://samuel-philipp.de/img/samuel-philipp.jpg">
-    <!--<meta property="og:updated_time" content="">-->
+    <meta property="og:url" content="{{site.language.url}}">
+    <meta property="og:title" content="{{site.title}}">
+    <meta property="og:description" content="{{site.description}}">
+    <meta property="og:site_name" content="{{site.title}}">
+    <meta property="og:image" content="{{site.language.url}}/img/samuel-1024.jpg">
+    <meta property="og:updated_time" content="{{site.buildTime}}">
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Samuel Philipp">
-    <meta name="twitter:description" content="Samuel Philipp - Software Engineer & Magician">
-    <meta name="twitter:image" content="https://samuel-philipp.de/img/samuel-philipp.jpg">
-    <link rel="shortcut icon" href="img/samuel.png">
-    <link rel="stylesheet" href="css/main.min.css">
-    <script async defer data-website-id="594e86a6-02bb-407d-98e0-73e31827a785" data-domains="samuel-philipp.de" src="https://umami.sp-codes.de/umami.js"></script>
+    <meta name="twitter:title" content="{{site.title}}">
+    <meta name="twitter:description" content="{{site.description}}">
+    <meta name="twitter:image" content="{{site.language.url}}/img/samuel-1024.jpg">
+    <link rel="shortcut icon" href="/img/samuel.png">
+    <link rel="stylesheet" href="{{ '/css/main.css' | rev }}" >
+    <script async defer data-website-id="594e86a6-02bb-407d-98e0-73e31827a785" data-domains="samuel-philipp.de"
+            src="https://umami.sp-codes.de/umami.js"></script>
 </head>
 <body>
-<div class="site-container">
-    <div class="content">
-        <div class="follow text-right">
-            <div class="mb-3">
-                <a rel="me" href="https://social.sp-codes.de/@samuel_p">
-                    <img alt="Mastodon Follow"
-                         src="https://shields.sp-codes.de/mastodon/follow/106249673823954342?domain=https%3A%2F%2Fsocial.sp-codes.de&logoColor=black&style=social">
-                </a>
-            </div>
-            <div>
-                <a rel="me" href="https://pixel.tchncs.de/samuel-p">
-                    <img alt="Pixelfed Follow"
-                         src="https://shields.sp-codes.de/mastodon/follow/233656854528528384?domain=https%3A%2F%2Fpixel.tchncs.de&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8%2BPHBhdGggZD0iTTEyIDJjNS41MjMgMCAxMCA0LjQ3NyAxMCAxMHMtNC40NzcgMTAtMTAgMTBTMiAxNy41MjMgMiAxMiA2LjQ3NyAyIDEyIDJ6bTEuMDMxIDYuMDk5aC0yLjYyNGMtLjk4OCAwLTEuNzg5Ljc3Ni0xLjc4OSAxLjczM3Y2Ljc0OGwyLjU5NS0yLjQ3MWgxLjgxOGMxLjcxMyAwIDMuMTAxLTEuMzQ1IDMuMTAxLTMuMDA1cy0xLjM4OC0zLjAwNS0zLjEtMy4wMDV6Ii8%2BPC9zdmc%2B&logoColor=black&style=social">
-                </a>
-            </div>
-        </div>
-        <div id="developer" class="image"></div>
-        <div id="magician" class="image"></div>
-        <div class="headers">
-            <div class="codes">
-                <h1 class="developer">Software Engineer</h1>
-            </div>
-            <div class="padding"></div>
-            <div class="magic">
-                <h1 class="magician">Magician</h1>
-            </div>
-        </div>
-        <code id="links" class="image">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-                 version="1.1" width="100%" height="100%" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid slice">
-                <a xlink:href="//sp-codes.de" class="full-size">
-                    <path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,0 L 0,0 Z" fill-opacity="0"></path>
-                </a>
-                <a xlink:href="//sp-magic.de" class="full-size">
-                    <path d="M 0,796 C 0,796 1330,480 2560,460 L 2560,1440 L 0,1440 Z" fill-opacity="0"></path>
-                </a>
-            </svg>
-        </code>
-        <div class="menu py-2 px-3">
-            <div><a href="https://sp-codes.de/de/imprint"><span
-                    class="fas fa-info-circle mr-2"></span>Imprint</a></div>
-            <div><a href="https://sp-codes.de/de/privacy"><span
-                    class="fas fa-user-secret mr-2"></span>Privacy</a></div>
-            <div><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
-                    class="fas fa-code mr-2"></span>Code</a></div>
-        </div>
-    </div>
-    <div class="footer">
-        <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
-            <div class="d-flex justify-content-start flex-wrap">
-                <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
-                <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
-            </div>
-            <div class="flex-sm-grow-1"></div>
-            <div class="d-flex justify-content-sm-start flex-wrap">
-                <div class="mr-3"><a href="//sp-codes.de/de/imprint"><span class="fas fa-info-circle mr-2"></span>Imprint</a>
+<header class="vh-100">
+    <div class="overlay"></div>
+    <div class="container">
+        <div class="row justify-content-md-center">
+            <div class="col-md-8 text-center position-relative">
+                <div class="d-flex flex-column vh-100 justify-content-center">
+                    <img class="profile-thumb mb-4" src="img/samuel-1024.jpg">
+                    <h1>{{site.title}}</h1>
+                    <h3>{{site.subtitle}}</h3>
+                    <ul class="social-icons my-4">
+                        <li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a></li>
+                        <li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i class="i-matrix i-2x i-fw"></i></a></li>
+                        <li><a href="https://social.sp-codes.de/@samuel_p"><i class="i-mastodon i-2x i-fw"></i></a></li>
+                        <li><a href="https://www.xing.com/profile/Samuel_Philipp"><i class="i-xing i-2x i-fw"></i></a></li>
+                        <li><a href="https://www.linkedin.com/in/samuel-philipp"><i class="i-linkedin i-2x i-fw"></i></a></li>
+                        <li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a></li>
+                        <li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
+                        <li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
+                    </ul>
+                    <ul class="social-icons">
+                        <li><a href="https://samuel-philipp.de"><span class="fi fi-de i-2x mx-2"></span></a></li>
+                        <li><a href="https://samuel-philipp.com"><span class="fi fi-us i-2x mx-2"></span></a></li>
+                    </ul>
                 </div>
-                <div class="mr-3"><a href="//sp-codes.de/de/privacy"><span class="fas fa-user-secret mr-2"></span>Privacy</a>
-                </div>
-                <div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
-                        class="fas fa-code mr-2"></span>Code</a></div>
-                <div><a target="_blank" href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de"><span
-                        class="fas fa-chart-line mr-2"></span>Stats</a></div>
             </div>
         </div>
     </div>
-</div>
-<script type="text/javascript" src="js/main.min.js"></script>
+</header>
+<section id="about">
+    <div class="container">
+        <div class="row justify-content-md-center">
+            <div class="col-md-8 text-center heading">
+                <h1>{{site.strings.about.title}}</h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-4">
+                <ul class="info">
+                    <li><span class="first-block">{{site.strings.about.overview.name}}:</span><span
+                            class="second-block">Samuel Philipp</span>
+                    </li>
+                    <li><span class="first-block">{{site.strings.about.overview.mail}}:</span><span
+                            class="second-block">info@samuel-philipp.de</span></li>
+                    <li><span class="first-block">{{site.strings.about.overview.site}}:</span><span
+                            class="second-block"><a href="{{site.language.url}}">{{site.strings.about.overview.url}}</a></span>
+                    </li>
+                    <li><span class="first-block">{{site.strings.about.overview.address}}:</span><span
+                            class="second-block">Otto-von-Guericke-Straße 40a<br>39104 Magdeburg</span>
+                    </li>
+                </ul>
+            </div>
+            <div class="col-lg-8">
+                <h2>{{site.strings.about.hello}}</h2>
+                <p>{{site.strings.about.text}}</p>
+                <ul class="social-icons my-4">
+                    <li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a></li>
+                    <li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i class="i-matrix i-2x i-fw"></i></a></li>
+                    <li><a href="https://social.sp-codes.de/@samuel_p"><i class="i-mastodon i-2x i-fw"></i></a></li>
+                    <li><a href="https://www.xing.com/profile/Samuel_Philipp"><i class="i-xing i-2x i-fw"></i></a></li>
+                    <li><a href="https://www.linkedin.com/in/samuel-philipp"><i class="i-linkedin i-2x i-fw"></i></a></li>
+                    <li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a></li>
+                    <li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
+                    <li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section id="resume">
+    <div class="container">
+        <div class="row justify-content-md-center">
+            <div class="col-md-8 text-center heading">
+                <h1>{{site.strings.resume.title}}</h1>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <ul class="timeline">
+                    <li class="timeline-heading text-center">
+                        <div><h3>{{site.strings.resume.work.title}}</h3>
+                        </div>
+                    </li>
+                    {%- for item in site.strings.resume.work.positions %}
+                    <li class="timeline-{% if loop.index0 % 2 === 0 %}inverted{% else %}unverted{% endif %}">
+                        <div class="timeline-badge"><i class="icon-suitcase"></i></div>
+                        <div class="timeline-panel">
+                            <div class="timeline-heading">
+                                <span class="duration">{{item.start}} - {{item.end}}</span>
+                                <h3 class="timeline-title">{{item.position | safe}}</h3>
+                                <span class="company"><a href="{{item.url}}" target="_blank">{{item.company}}</a> - {{item.city}}{% if item.country %}, {{item.country}}{% endif %}</span>
+                            </div>
+                            <div class="timeline-body">
+                                {%- for description in item.descriptions %}
+                                <p>{{description | safe}}</p>
+                                {%- endfor %}
+                            </div>
+                        </div>
+                    </li>
+                    {%- endfor %}
+                </ul>
+                <ul class="timeline">
+                    <li class="timeline-heading text-center">
+                        <div><h3>{{site.strings.resume.education.title}}</h3></div>
+                    </li>
+                    {%- for item in site.strings.resume.education.positions %}
+                    <li class="timeline-{% if (site.strings.resume.work.positions.length + loop.index0) % 2 === 0 %}inverted{% else %}unverted{% endif %}">
+                        <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
+                        <div class="timeline-panel">
+                            <div class="timeline-heading">
+                                <span class="duration">{{item.start}} - {{item.end}}</span>
+                                {% if item.course %}
+                                <h3 class="timeline-title">{{item.course}}<span class="degree">{{item.degree}}</span></h3>
+                                {% else %}
+                                <h3 class="timeline-title">{{item.degree}}</h3>
+                                {% endif %}
+                                <span class="company">{{item.institution}} - {{item.city}}</span>
+                            </div>
+                            <div class="timeline-body">
+                                {%- for description in item.descriptions %}
+                                <p>{{description | safe}}</p>
+                                {%- endfor %}
+                            </div>
+                        </div>
+                    </li>
+                    {%- endfor %}
+                </ul>
+            </div>
+        </div>
+    </div>
+</section>
+<section id="services" class="bg-secondary">
+    <div class="container">
+        <div class="services-padding">
+            <div class="row justify-content-md-center">
+                <div class="col-md-8 text-center heading">
+                    <h1>{{site.strings.projects.title}}</h1>
+                </div>
+            </div>
+            <div class="row">
+                {%- for item in site.strings.projects.list %}
+                <div class="col-md-4 text-center">
+                    <a class="feature-left" {% if item.url %}href="{{item.url}}"{% endif %} target="_blank">
+							<span class="icon">
+								<img src="/img/{{item.icon}}">
+							</span>
+                        <div class="feature-copy">
+                            <h3>{{item.name}}</h3>
+                            <p>{{item.description}}</p>
+                        </div>
+                    </a>
+                </div>
+                {%- endfor %}
+            </div>
+        </div>
+    </div>
+</section>
+<section id="skills">
+    <div class="container">
+        <div class="row justify-content-md-center">
+            <div class="col-md-8 text-center heading">
+                <h1>{{site.strings.skills.title}}</h1>
+            </div>
+        </div>
+        <div class="row mb-4 justify-content-center">
+            {%- for item in site.strings.skills.languages %}
+            <div class="col-lg-3 col-md-4 col-6 d-flex justify-content-center">
+                <div class="circular">
+                    <div class="inner"></div>
+                    <div class="number"><strong>{{item.name}}</strong><span>{{item.percent}}%</span></div>
+                    <div class="circle">
+                        <div class="bar left">
+                            <div class="progress progress-{{item.percent}}"></div>
+                        </div>
+                        <div class="bar right">
+                            <div class="progress progress-{{item.percent}}"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {%- endfor %}
+        </div>
+        <div class="row">
+            {%- for item in site.strings.skills.technologies %}
+            <div class="col-md-6 col-12">
+                <div class="progress-wrap">
+                    <div><span class="name-left">{{item.name}}</span><span class="float-end">{{item.percent}}%</span></div>
+                    <div class="progress">
+                        <div class="progress-bar progress-{{item.percent}}"></div>
+                    </div>
+                </div>
+            </div>
+            {%- endfor %}
+        </div>
+    </div>
+</section>
+<section id="interests" class="bg-secondary">
+    <div class="container">
+        <div class="row justify-content-md-center">
+            <div class="col-md-8 text-center heading">
+                <h1>{{site.strings.interests.title}}</h1>
+            </div>
+        </div>
+        <div class="row">
+            {%- for item in site.strings.interests.list %}
+            <div class="col-lg-3 col-md-6 col-12 text-center p-3">
+                <a {% if item.url %}href="{{item.url}}"{% endif %} target="_blank" class="interest interest-{{item.image}}">
+                    <div class="desc">
+                        <h3>{{item.name}}</h3>
+                    </div>
+                </a>
+            </div>
+            {%- endfor %}
+        </div>
+    </div>
+</section>
+<!--<section id="contact" class="p-0 d-flex">-->
+<!--    <div class="video" style="background-image: url(img/sp-magic.png);">-->
+<!--        <div class="overlay"></div>-->
+<!--    </div>-->
+<!--    <div class="choose">-->
+<!--        <h2 class="mb-5">{{site.strings.contact.title}}</h2>-->
+<!--        <form action="#">-->
+<!--            <div class="row mb-4">-->
+<!--                <div class="col-md-12">-->
+<!--                    <input type="text" id="name" class="form-control" placeholder="Your name">-->
+<!--                </div>-->
+<!--            </div>-->
+<!--            <div class="row mb-4">-->
+<!--                <div class="col-md-12">-->
+<!--                    <input type="text" id="email" class="form-control" placeholder="Your email address">-->
+<!--                </div>-->
+<!--            </div>-->
+<!--            <div class="row mb-4">-->
+<!--                <div class="col-md-12">-->
+<!--                    <textarea name="message" id="message" cols="30" rows="5" class="form-control h-auto"-->
+<!--                              placeholder="Say something about us"></textarea>-->
+<!--                </div>-->
+<!--            </div>-->
+<!--            <div class="row mb-4">-->
+<!--                <div class="col-md-12">-->
+<!--                    <input type="submit" value="Send Message" class="btn btn-primary">-->
+<!--                </div>-->
+<!--            </div>-->
+<!--        </form>-->
+<!--    </div>-->
+<!--</section>-->
+<footer id="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="d-flex justify-content-start flex-wrap">
+                    <div class="me-3">Made with <span class="i-heart highlight"></span> in Germany</div>
+                    <div class="me-3"><span class="i-copyright me-2"></span>Samuel Philipp</div>
+                </div>
+                <div class="d-flex justify-content-sm-start flex-wrap">
+                    <div class="me-3"><a href="//sp-codes.de/de/imprint"><span class="i-info-circle me-2"></span>{{site.strings.footer.imprint}}</a>
+                    </div>
+                    <div class="me-3"><a href="//sp-codes.de/de/privacy"><span class="i-user-secret me-2"></span>{{site.strings.footer.privacy}}</a>
+                    </div>
+                    <div class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/samuel-philipp.de"><span
+                            class="i-code me-2"></span>{{site.strings.footer.code}}</a></div>
+                    <div><a target="_blank" href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de"><span
+                            class="i-chart-line me-2"></span>{{site.strings.footer.stats}}</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
 </body>
 </html>

src/scss/icons/style.scss

@@ -0,0 +1,278 @@
+@import "variables";
+
+@font-face {
+  font-family: '#{$icomoon-font-family}';
+  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4egyec');
+  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?4egyec#iefix') format('embedded-opentype'),
+  url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff2?4egyec') format('woff2'),
+  url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?4egyec') format('truetype'),
+  url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?4egyec') format('woff'),
+  url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?4egyec##{$icomoon-font-family}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="i-"], [class*=" i-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: '#{$icomoon-font-family}' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* own changes */
+  display: inline-block;
+}
+
+.i-fw {
+  width: 1.25em;
+  text-align: center;
+}
+
+.i-2x {
+  font-size: 2em;
+}
+
+.i-3x {
+  font-size: 3em;
+}
+
+.i-4x {
+  font-size: 4em;
+}
+
+.i-linkedin {
+  &:before {
+    content: $i-linkedin;
+  }
+}
+
+.i-xing {
+  &:before {
+    content: $i-xing;
+  }
+}
+
+.i-peertube {
+  &:before {
+    content: $i-peertube;
+  }
+}
+
+.i-network-wired {
+  &:before {
+    content: $i-network-wired;
+  }
+}
+
+.i-money-bill {
+  &:before {
+    content: $i-money-bill;
+  }
+}
+
+.i-chart-line {
+  &:before {
+    content: $i-chart-line;
+  }
+}
+
+.i-info-circle {
+  &:before {
+    content: $i-info-circle;
+  }
+}
+
+.i-code {
+  &:before {
+    content: $i-code;
+  }
+}
+
+.i-xmpp {
+  &:before {
+    content: $i-xmpp;
+  }
+}
+
+.i-wifi {
+  &:before {
+    content: $i-wifi;
+  }
+}
+
+.i-youtube {
+  &:before {
+    content: $i-youtube;
+  }
+}
+
+.i-twitter {
+  &:before {
+    content: $i-twitter;
+  }
+}
+
+.i-threema {
+  &:before {
+    content: $i-threema;
+  }
+}
+
+.i-stackoverflow {
+  &:before {
+    content: $i-stackoverflow;
+  }
+}
+
+.i-search {
+  &:before {
+    content: $i-search;
+  }
+}
+
+.i-mastodon {
+  &:before {
+    content: $i-mastodon;
+  }
+}
+
+.i-hand-holding-heart {
+  &:before {
+    content: $i-hand-holding-heart;
+  }
+}
+
+.i-github {
+  &:before {
+    content: $i-github;
+  }
+}
+
+.i-gitea {
+  &:before {
+    content: $i-gitea;
+  }
+}
+
+.i-firefox {
+  &:before {
+    content: $i-firefox;
+  }
+}
+
+.i-copyright {
+  &:before {
+    content: $i-copyright;
+  }
+}
+
+.i-book {
+  &:before {
+    content: $i-book;
+  }
+}
+
+.i-matrix {
+  &:before {
+    content: $i-matrix;
+  }
+}
+
+.i-pixelfed {
+  &:before {
+    content: $i-pixelfed;
+  }
+}
+
+.i-server {
+  &:before {
+    content: $i-server;
+  }
+}
+
+.i-credit-card {
+  &:before {
+    content: $i-credit-card;
+  }
+}
+
+.i-external-link {
+  &:before {
+    content: $i-external-link;
+  }
+}
+
+.i-heart {
+  &:before {
+    content: $i-heart;
+  }
+}
+
+.i-home {
+  &:before {
+    content: $i-home;
+  }
+}
+
+.i-tags {
+  &:before {
+    content: $i-tags;
+  }
+}
+
+.i-comments {
+  &:before {
+    content: $i-comments;
+  }
+}
+
+.i-users {
+  &:before {
+    content: $i-users;
+  }
+}
+
+.i-bars {
+  &:before {
+    content: $i-bars;
+  }
+}
+
+.i-envelope {
+  &:before {
+    content: $i-envelope;
+  }
+}
+
+.i-language {
+  &:before {
+    content: $i-language;
+  }
+}
+
+.i-user-secret {
+  &:before {
+    content: $i-user-secret;
+  }
+}
+
+.i-heartbeat {
+  &:before {
+    content: $i-heartbeat;
+  }
+}
+
+.i-commenting {
+  &:before {
+    content: $i-commenting;
+  }
+}
+

src/scss/icons/variables.scss

@@ -0,0 +1,42 @@
+$icomoon-font-family: "icomoon" !default;
+$icomoon-font-path: "fonts" !default;
+
+$i-linkedin: "\e919";
+$i-xing: "\e91a";
+$i-peertube: "\e918";
+$i-network-wired: "\e903";
+$i-money-bill: "\e904";
+$i-chart-line: "\e905";
+$i-info-circle: "\e906";
+$i-code: "\e907";
+$i-xmpp: "\e908";
+$i-wifi: "\e909";
+$i-youtube: "\e90a";
+$i-twitter: "\e90b";
+$i-threema: "\e90c";
+$i-stackoverflow: "\e90d";
+$i-search: "\e90e";
+$i-mastodon: "\e910";
+$i-hand-holding-heart: "\e911";
+$i-github: "\e912";
+$i-gitea: "\e913";
+$i-firefox: "\e914";
+$i-copyright: "\e915";
+$i-book: "\e916";
+$i-matrix: "\e900";
+$i-pixelfed: "\e90f";
+$i-server: "\e901";
+$i-credit-card: "\e902";
+$i-external-link: "\e917";
+$i-heart: "\f004";
+$i-home: "\f015";
+$i-tags: "\f02c";
+$i-comments: "\f086";
+$i-users: "\f0c0";
+$i-bars: "\f0c9";
+$i-envelope: "\f0e0";
+$i-language: "\f1ab";
+$i-user-secret: "\f21b";
+$i-heartbeat: "\f21e";
+$i-commenting: "\f27a";
+

src/scss/main.scss

@@ -1,147 +1,561 @@
-@import "~bootstrap/scss/bootstrap-grid";
-@import "~bootstrap/scss/bootstrap-reboot";
-@import "~bootstrap/scss/utilities/align";
-@import "~bootstrap/scss/utilities/spacing";
-@import "~bootstrap/scss/utilities/display";
-@import "~bootstrap/scss/utilities/text";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/brands";
-@import "~@fortawesome/fontawesome-free/scss/regular";
+$primary: #006269;
+$secondary: #444;
+@import "bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-utilities";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins/_breakpoints";
 
-@font-face {
-  font-family: 'Minotaur';
-  src: local('Minotaur Phatte'), url(../font/minotaur.ttf) format('truetype');
-}
+$icomoon-font-path: "../font";
+@import "icons/style";
+
+$flag-icons-path: "../flags";
+@import "flag-icons/sass/flag-icons";
 
 body {
-  color: #fff;
+  color: #000;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   padding: 0;
   margin: 0;
 }
 
-.site-container {
-  width: 100%;
+header {
+  position: relative;
   height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
+  width: 100%;
+  background-image: url(../img/sp-codes.jpg);
+  background-color: transparent;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: 0 0;
+  color: #fff;
 
-  .content {
-    position: relative;
-    flex: 1 1 auto;
+  .overlay {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba($secondary, 0.9);
   }
 
-  .footer {
-    background-image: url("../img/bg.png");
-    color: #ffffff;
+  .profile-thumb {
+    height: 300px;
+    width: 300px;
+    margin: 0 auto;
+    border: 2px solid #fff;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+
+  a {
+    color: #fff !important;
+  }
+}
+
+ul.social-icons {
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: inline-block;
+
+    a {
+      color: #000;
+    }
+  }
+}
+
+.vh-100 {
+  height: 100vh;
+}
+
+section {
+  padding: 7em 0;
+  clear: both;
+}
+
+.heading {
+  margin-bottom: 5em;
+}
+
+.info {
+  margin: 0;
+  padding: 0;
+  width: 90%;
+  float: left;
+
+  li {
+    width: 100%;
+    float: left;
+    list-style: none;
+    padding: 10px 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    .first-block {
+      width: 30%;
+      display: inline-block;
+      float: left;
+      color: #000;
+      font-weight: bold;
+    }
+
+    .second-block {
+      width: 70%;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}
+
+.timeline {
+  list-style: none;
+  padding: 20px 0 20px;
+  position: relative;
+
+  &::before {
+    top: 20px;
+    bottom: 0;
+    position: absolute;
+    content: " ";
+    width: 2px;
+    background-color: #e6e6e6;
+    left: 50%;
+    margin-left: 0;
+  }
+
+  li {
+    margin-bottom: 20px;
+    position: relative;
+
+    &.timeline-heading > div h3 {
+      display: inline-block;
+      padding: 7px 15px;
+      font-size: 18px;
+      text-transform: uppercase;
+      letter-spacing: 5px;
+      font-weight: bold;
+      background: #e6e6e6;
+      border-radius: 4px;
+    }
+
+    &.timeline-unverted {
+      text-align: right;
+    }
+
+    &.timeline-inverted > .timeline-panel {
+      float: right;
+    }
+
+    .timeline-badge {
+      color: #fff;
+      width: 44px;
+      height: 44px;
+      line-height: 50px;
+      font-size: 1.4em;
+      text-align: center;
+      position: absolute;
+      top: 40px;
+      left: 50%;
+      margin-left: -21px;
+      background-color: $primary;
+      z-index: 100;
+      display: table;
+      border-radius: 50%;
+    }
+
+    .timeline-panel {
+      width: 45%;
+      float: left;
+      margin-bottom: 0;
+      position: relative;
+      border-radius: 4px;
+
+      .duration {
+        display: block;
+        font-size: 16px;
+        font-weight: normal;
+        color: #888;
+      }
+
+      .timeline-title {
+        margin-top: 0;
+
+        .degree {
+          display: block;
+          font-size: 20px;
+          font-weight: bold;
+          color: $primary;
+        }
+      }
+
+      .company {
+        display: block;
+        margin-bottom: 20px;
+        font-size: 16px;
+        font-weight: normal;
+        color: #888;
+      }
+
+      .timeline-body > p, .timeline-body > ul {
+        margin-bottom: 0;
+      }
+    }
+
+    &::before, &::after {
+      content: " ";
+      display: table;
+    }
+
+    &::after {
+      clear: both;
+    }
+  }
+}
+
+.feature-left {
+  color: #fff !important;
+  text-decoration: none !important;
+}
+
+.icon {
+  display: flex;
+  text-align: center;
+  width: 100px;
+  height: 100px;
+  background: #fff;
+  margin: 0 auto 20px;
+  border-radius: 50%;
+}
+
+.circular {
+  height: 160px;
+  width: 160px;
+  position: relative;
+  margin-bottom: 2rem;
+
+  .inner {
+    position: absolute;
+    z-index: 6;
+    top: 50%;
+    left: 50%;
+    height: 150px;
+    width: 150px;
+    margin: -75px 0 0 -75px;
+    background: #ffffff;
+    border-radius: 100%;
+  }
+
+  .number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    color: #000;
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .bar {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: #eeeeee;
+    -webkit-border-radius: 100%;
+    clip: rect(0px, 160px, 160px, 80px);
+  }
+
+  .circle .bar .progress {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    -webkit-border-radius: 100%;
+    clip: rect(0px, 80px, 160px, 0px);
+    background: $primary;
+  }
+
+  .circle .left .progress {
+    transform: rotate(180deg);
     z-index: 1;
   }
+
+  .circle .right {
+    transform: rotate(180deg);
+    z-index: 3;
+  }
+
+  .circle .right .progress-95 {
+    transform: rotate(162deg);
+  }
+
+  .circle .right .progress-90 {
+    transform: rotate(144deg);
+  }
+
+  .circle .right .progress-85 {
+    transform: rotate(126deg);
+  }
+
+  .circle .right .progress-80 {
+    transform: rotate(108deg);
+  }
+
+  .circle .right .progress-75 {
+    transform: rotate(90deg);
+  }
+
+  .circle .right .progress-70 {
+    transform: rotate(72deg);
+  }
+
+  .circle .right .progress-65 {
+    transform: rotate(54deg);
+  }
+
+  .circle .right .progress-60 {
+    transform: rotate(36deg);
+  }
+
+  .circle .right .progress-55 {
+    transform: rotate(18deg);
+  }
+
+  .circle .right .progress-50 {
+    transform: rotate(0deg);
+  }
 }
 
-.image {
-  display: block;
-  background-repeat: no-repeat;
-  background-position: center center;
-  background-size: cover;
-  position: absolute;
-  top: -25px;
-  left: -25px;
-  width: calc(100% + 50px);
-  height: calc(100% + 50px);
-  z-index: 0;
-}
-
-.follow {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 1rem;
-  z-index: 1;
-}
-
-#developer {
-  background-image: url('../img/sp-codes.png');
-}
-
-#magician {
-  background-image: url('../img/sp-magic_overlay.png');
-}
-
-.headers {
-  position: absolute;
-  top: 0;
-  left: 0;
+.progress-wrap {
   width: 100%;
-  height: 100%;
+  float: left;
+  margin-bottom: 10px;
+
+  .progress {
+    overflow: hidden;
+    margin-bottom: 20px;
+    background-color: #eeeeee;
+    //border-radius: 4px;
+    width: 100%;
+    height: 5px;
+
+    .progress-bar {
+      background-color: $primary !important;
+      height: 5px;
+      display: block;
+      box-shadow: none;
+
+      &.progress-95 {
+        width: 95%;
+      }
+
+      &.progress-90 {
+        width: 90%;
+      }
+
+      &.progress-85 {
+        width: 85%;
+      }
+
+      &.progress-80 {
+        width: 80%;
+      }
+
+      &.progress-75 {
+        width: 75%;
+      }
+
+      &.progress-70 {
+        width: 70%;
+      }
+
+      &.progress-65 {
+        width: 65%;
+      }
+
+      &.progress-60 {
+        width: 60%;
+      }
+
+      &.progress-55 {
+        width: 55%;
+      }
+
+      &.progress-50 {
+        width: 50%;
+      }
+
+      &.progress-45 {
+        width: 45%;
+      }
+
+      &.progress-40 {
+        width: 40%;
+      }
+    }
+  }
+}
+
+#services, #interests {
+  color: #fff;
+  background-image: url(../img/bg.jpg);
+}
+
+.interest {
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: #fff;
+  position: relative;
+  height: 270px;
+  width: 100%;
+  display: table;
+  overflow: hidden;
+  text-decoration: none !important;
+  color: #000;
+
+  &:hover {
+    color: #000;
+  }
+
+  .desc {
+    display: table-cell;
+    height: 270px;
+    padding: 15px;
+
+    h3 {
+      font-size: 20px;
+    }
+
+    span {
+      display: block;
+      color: lighten(#000, 60%);
+      font-size: 14px;
+    }
+  }
+
+  &.interest-softwerke {
+    background-image: url(../img/magdeburg.jpg);
+
+    .desc {
+      vertical-align: top;
+      color: #000;
+    }
+  }
+
+  &.interest-magic {
+    background-image: url(../img/sp-magic.jpg);
+
+    .desc {
+      vertical-align: bottom;
+      color: #000;
+    }
+  }
+
+  &.interest-sports {
+    background-image: url(../img/dumbbell.jpg);
+
+    .desc {
+      vertical-align: middle;
+      color: #fff;
+    }
+  }
+
+  &.interest-photography {
+    background-image: url(../img/photography.jpg);
+
+    .desc {
+      vertical-align: top;
+      color: #000;
+    }
+  }
+}
+
+.video {
+  display: table;
+  width: 50%;
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: relative;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
   display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  text-align: center;
+  flex-wrap: wrap;
 }
 
-.headers .magician {
-  color: #000000;
-  font-family: "Minotaur", cursive;
-  font-weight: normal;
-  font-size: 5rem;
-  text-shadow: 0 0 1rem #ffffff;
+.choose {
+  width: 50%;
+  padding: 4em;
 }
 
-.headers .developer {
-  color: #ffffff;
-  font-family: "Minotaur", monospace;
-  font-weight: bold;
-  font-size: 5rem;
-  text-shadow: 0 0 1rem #000000;
+.form-control {
+  box-shadow: none;
+  background: transparent;
+  border: 2px solid rgba(0, 0, 0, 0.1);
+  height: 54px;
+  font-size: 18px;
+  font-weight: 300;
+
+  &:active, &:focus {
+    outline: none;
+    box-shadow: none;
+    border-color: $primary;
+  }
+}
+
+.btn {
+  border-radius: 30px;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.btn-primary {
+  color: #fff !important;
+  background-color: $primary !important;
+  border-color: $primary !important;
+}
+
+footer {
+  padding: 50px 0;
+
+  a {
+    color: #000;
+  }
 }
 
 @include media-breakpoint-down(md) {
-  .headers .magician,
-  .headers .developer {
-    font-size: 4rem;
+  .timeline {
+    &::before {
+      left: 10%;
+    }
+
+    li {
+      &.timeline-heading > div h3 {
+        display: block;
+      }
+
+      .timeline-badge {
+        top: 30px;
+        left: 10%;
+      }
+
+      .timeline-panel {
+        width: auto;
+        float: none !important;
+        margin-left: 20%;
+        text-align: left;
+      }
+    }
   }
 }
-
-@include media-breakpoint-down(sm) {
-  .headers .magician,
-  .headers .developer {
-    font-size: 3rem;
-  }
-}
-
-.headers a {
-  text-decoration: none;
-}
-
-.headers .codes {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.headers .magic {
-  flex-grow: 0.6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.headers .padding {
-  flex-grow: 1.3;
-}
-
-.menu {
-  border-top: 1px solid #ffffff;
-
-  a {
-    color: #ffffff;
-  }
-}
-
-.full-size {
-  width: 100%;
-  height: 100%;
-}