mayor updates for cv

.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 eleventySass = require("eleventy-sass");
+const tinyCSS = require('@sardine/eleventy-plugin-tinycss');
+const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
+const site = require('./src/_data/site.js');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(tinyCSS, {
+        output: `dist/${site.lang}/`
+    });
+    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";
+                };
+            }
+        }
+    });
+
+    eleventyConfig.setUseGitIgnore(false);
+    eleventyConfig.addPassthroughCopy({
+        "src/img": "img",
+        "src/font": "font",
+        "src/favicon.*": "",
+    });
+
+    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

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')(require('node-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,12 @@
 {
   "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"
+    "start": "eleventy --serve --watch",
+    "start:de": "LANGUAGE=de eleventy --serve --watch",
+    "build": "npm run build:de && npm run build:en",
+    "build:de": "npm run compile-sass && eleventy && npm run minify-css && node .compress-all.js --lang de"
   },
   "author": "samuel-p",
   "repository": {
@@ -15,25 +17,23 @@
     "browser-sync": "^2.27.10"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.8",
-    "cssnano": "5.1.13",
-    "del": "6.1.1",
-    "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": "5.1.0",
-    "gulp-terser": "2.1.0",
-    "lazypipe": "1.0.2",
-    "node-sass": "^7.0.1",
+    "@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-tinycss": "^2.0.0",
+    "cpx": "^1.5.0",
+    "eleventy-sass": "^2.1.6",
+    "glob": "^8.0.3",
+    "minify": "^9.1.0",
+    "node-sass": "^8.0.0",
     "node-sass-tilde-importer": "^1.0.2",
-    "postcss": "^8.4.16",
-    "sass": "^1.54.5"
+    "postcss": "^8.4.21",
+    "sass": "^1.57.1"
   },
   "dependencies": {
-    "bootstrap": "^5.2.0"
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
+    "bootstrap": "^5.2.3"
   }
 }

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": "There live the blind texts far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in bookmarksgrove there live the blind texts far from the countries."
+  },
+  "resume": {
+    "title": "Mein Lebenslauf",
+    "work": {
+      "title": "Berufliche Laufbahn",
+      "positions": [
+        {
+          "position": "Geschäftsführer",
+          "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",
+          "description": "Berufsbegleitendes Fernstudium",
+          "city": "Wismar"
+        },
+        {
+          "course": "Angewandte Informatik",
+          "degree": "Bachelor of Science",
+          "institution": "Duale Hochschule Baden-Württemberg",
+          "start": "Okt. 2014",
+          "end": "Sept. 2017",
+          "description": "",
+          "city": "Karlsruhe"
+        },
+        {
+          "course": "",
+          "degree": "Abitur",
+          "institution": "Albert-Einstein-Schule",
+          "start": "Sept. 2011",
+          "end": "Juni 2014",
+          "description": "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": "sp-codes.svg",
+        "name": "Samuel's Blog",
+        "description": "Wenn ich Zeit finde schreibe ich gelegentlich den ein oder anderen Artikel für meinen Blog.",
+        "url": "https://samuels-blog.de"
+      },
+      {
+        "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": "Elasticsearch",
+        "percent": 40
+      },
+      {
+        "name": "Spring Framework",
+        "percent": 85
+      },
+      {
+        "name": "Git",
+        "percent": 90
+      },
+      {
+        "name": "Angular",
+        "percent": 80
+      },
+      {
+        "name": "Bootstrap",
+        "percent": 75
+      },
+      {
+        "name": "Intellij IDEA",
+        "percent": 90
+      },
+      {
+        "name": "CI/CD",
+        "percent": 90
+      },
+      {
+        "name": "Node.js",
+        "percent": 80
+      }
+    ]
+  },
+  "interests": {
+    "title": "Interessen",
+    "list": [
+      {
+        "image": "",
+        "name": "Softwerke Magdeburg e.V.",
+        "description": "Mitglied",
+        "url": ""
+      },
+      {
+        "image": "",
+        "name": "Zauberkunst",
+        "description": "",
+        "url": "https://sp-magic.de"
+      },
+      {
+        "image": "",
+        "name": "Kraftsport",
+        "description": "",
+        "url": ""
+      },
+      {
+        "image": "",
+        "name": "Bouldern",
+        "description": "",
+        "url": ""
+      }
+    ]
+  },
+  "contact": {
+    "title": "Kontakt"
+  },
+  "footer": {
+    "imprint": "Impressum",
+    "privacy": "Datenschutz",
+    "code": "Code",
+    "stats": "Statistiken"
+  }
+}

src/_data/i18n/en.json

@@ -0,0 +1,102 @@
+{
+  "about": {
+    "title": "About Me",
+    "overview": {
+      "name": "Name",
+      "mail": "E-Mail",
+      "site": "Website",
+      "url": "samuel-philipp.com",
+      "address": "Address"
+    },
+    "hello": "Hello There!",
+    "text": "There live the blind texts far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in bookmarksgrove there live the blind texts far from the countries."
+  },
+  "resume": {
+    "title": "My Resume",
+    "work": {
+      "title": "Work Experience",
+      "positions": [
+        {
+          "position": "Managing Director",
+          "company": "Ossrox UG (haftungsbeschränkt)",
+          "url": "https://ossrox.org",
+          "start": "März 2022",
+          "end": "now",
+          "descriptions": [
+            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software Engineer",
+          "company": "AV-TEST GmbH",
+          "url": "https://www.av-test.org",
+          "start": "Jan. 2018",
+          "end": "heute",
+          "descriptions": [
+            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
+          ],
+          "city": "Magdeburg",
+          "country": ""
+        },
+        {
+          "position": "Software Engineer",
+          "company": "Fiducia & GAD IT AG",
+          "url": "https://www.fiduciagad.de",
+          "start": "Oct. 2017",
+          "end": "Dec. 2017",
+          "descriptions": [
+            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
+          ],
+          "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": [
+            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
+          ],
+          "city": "Karlsruhe",
+          "country": ""
+        }
+      ]
+    },
+    "education": {
+      "title": "Education",
+      "positions": [
+        {
+          "course": "IT-Sicherheit und Forensik",
+          "degree": "Master of Engineering",
+          "institution": "Wismar University",
+          "start": "Sept. 2018",
+          "end": "June 2021",
+          "description": "Berufsbegleitendes Fernstudium",
+          "city": "Wismar"
+        },
+        {
+          "course": "Angewandte Informatik",
+          "degree": "Bachelor of Science",
+          "institution": "Baden-Württemberg Cooperative State University",
+          "start": "Oct. 2014",
+          "end": "Sept. 2017",
+          "description": "",
+          "city": "Karlsruhe"
+        },
+        {
+          "course": "",
+          "degree": "Abitur (A-Level)",
+          "institution": "Albert-Einstein School",
+          "start": "Sept. 2011",
+          "end": "June 2014",
+          "description": "Technisches Gymnasium, Profil Informationstechnik",
+          "city": "Ettlingen"
+        }
+      ]
+    }
+  }
+}

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/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,24 +16,24 @@
     <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-philipp.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">
+    <meta name="twitter:title" content="{{site.title}}">
+    <meta name="twitter:description" content="{{site.description}}">
+    <meta name="twitter:image" content="{{site.language.url}}/img/samuel-philipp.jpg">
+    <link rel="shortcut icon" href="{{site.language.url}}/img/samuel.png">
+    <link rel="stylesheet" href="css/main.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>
 </head>
@@ -41,10 +44,10 @@
         <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.png">
-                    <h1>Samuel Philipp</h1>
-                    <h3>Full-Stack Developer / SysAdmin / Magician</h3>
-                    <ul class="social-icons mt-4">
+                    <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="#"><i class="i-envelope i-2x i-fw"></i></a></li>
                         <li><a href="#"><i class="i-matrix i-2x i-fw"></i></a></li>
                         <li><a href="#"><i class="i-mastodon i-2x i-fw"></i></a></li>
@@ -61,30 +64,28 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col-md-8 text-center heading">
-                <h1>About Me</h1>
+                <h1>{{site.strings.about.title}}</h1>
             </div>
         </div>
         <div class="row">
             <div class="col-md-4">
                 <ul class="info">
-                    <li><span class="first-block">Full Name:</span><span class="second-block">Louie Jie Mahusay</span>
+                    <li><span class="first-block">{{site.strings.about.overview.name}}:</span><span
+                            class="second-block">Samuel Philipp</span>
                     </li>
-                    <li><span class="first-block">Phone:</span><span class="second-block">+ 1235 2355 98</span></li>
-                    <li><span class="first-block">Email:</span><span class="second-block">info@yoursite.com</span></li>
-                    <li><span class="first-block">Website:</span><span class="second-block">www.yoursite.com</span></li>
-                    <li><span class="first-block">Address:</span><span class="second-block">198 West 21th Street, Suite 721 New York NY 10016</span>
+                    <li><span class="first-block">{{site.strings.about.overview.mail}}:</span><span
+                            class="second-block">mail@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-md-8">
-                <h2>Hello There!</h2>
-                <p>There live the blind texts far from the countries Vokalia and Consonantia, there live the blind
-                    texts. Separated they live in bookmarksgrove there live the blind texts far from the countries.</p>
-                <p>Far far away, behind the word mountains, Quos quia provident consequuntur culpa facere ratione maxime
-                    commodi voluptates id repellat velit eaque aspernatur expedita. Possimus itaque adipisci there live
-                    the blind texts from the countries Vokalia and Consonantia, there live the blind texts. Quos quia
-                    provident consequuntur culpa facere ratione maxime commodi voluptates id repellat velit eaque
-                    aspernatur expedita. Possimus itaque adipisci.</p>
+                <h2>{{site.strings.about.hello}}</h2>
+                <p>{{site.strings.about.text}}</p>
                 <ul class="social-icons mt-4">
                     <li><a href="#"><i class="i-envelope i-2x i-fw"></i></a></li>
                     <li><a href="#"><i class="i-matrix i-2x i-fw"></i></a></li>
@@ -101,97 +102,55 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col-md-8 text-center heading">
-                <h1>My Resume</h1>
+                <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>Work Experience</h3></div>
-                    </li>
-                    <li class="timeline-inverted">
-                        <div class="timeline-badge"><i class="icon-suitcase"></i></div>
-                        <div class="timeline-panel">
-                            <div class="timeline-heading">
-                                <h3 class="timeline-title">Software Engineer</h3>
-                                <span class="company">AV-TEST GmbH - Jan. 2018 - present</span>
-                            </div>
-                            <div class="timeline-body">
-                                <p>Far far away, behind the word mountains, far from the countries Vokalia and
-                                    Consonantia, there live the blind texts.</p>
-                            </div>
+                        <div><h3>{{site.strings.resume.work.title}}</h3>
                         </div>
                     </li>
-                    <li class="timeline-unverted">
+                    {%- 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">
-                                <h3 class="timeline-title">Software Engineer</h3>
-                                <span class="company">Fiducia & GAD IT AG - Oct. 2017 - Dec. 2018</span>
+                                <span class="duration">{{item.start}} - {{item.end}}</span>
+                                <h3 class="timeline-title">{{item.position}}</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">
-                                <p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
-                                    coast of the Semantics, a large language ocean.</p>
+                                {%- for description in item.descriptions %}
+                                <p>{{description | safe}}</p>
+                                {%- endfor %}
                             </div>
                         </div>
                     </li>
-                    <li class="timeline-inverted">
-                        <div class="timeline-badge"><i class="icon-suitcase"></i></div>
-                        <div class="timeline-panel">
-                            <div class="timeline-heading">
-                                <h3 class="timeline-title">Dual Student Applied Computer Science</h3>
-                                <span class="company">Fiducia & GAD IT AG - Sept. 2014 - Sept. 2017</span>
-                            </div>
-                            <div class="timeline-body">
-                                <p>Far far away, behind the word mountains, far from the countries Vokalia and
-                                    Consonantia, there live the blind texts.</p>
-                            </div>
-                        </div>
-                    </li>
-                    <br>
+                    {%- endfor %}
+                </ul>
+                <ul class="timeline">
                     <li class="timeline-heading text-center">
-                        <div><h3>Education</h3></div>
-                    </li>
-                    <li class="timeline-unverted">
-                        <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
-                        <div class="timeline-panel">
-                            <div class="timeline-heading">
-                                <h3 class="timeline-title">Master of Engineering</h3>
-                                <span class="company">Wismar University - Sept. 2018 - June 2021</span>
-                            </div>
-                            <div class="timeline-body">
-                                <p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
-                                    coast of the Semantics, a large language ocean.</p>
-                            </div>
-                        </div>
+                        <div><h3>{{site.strings.resume.education.title}}</h3></div>
                     </li>
-                    <li class="timeline-inverted">
+                    {%- 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">
-                                <h3 class="timeline-title">Bachelor of Science</h3>
-                                <span class="company">Baden-Württemberg Cooperative State University - Oct. 2014 - Sept. 2017</span>
-                            </div>
-                            <div class="timeline-body">
-                                <p>Far far away, behind the word mountains, far from the countries Vokalia and
-                                    Consonantia, there live the blind texts.</p>
-                            </div>
-                        </div>
-                    </li>
-                    <li class="timeline-unverted">
-                        <div class="timeline-badge"><i class="icon-graduation-cap"></i></div>
-                        <div class="timeline-panel">
-                            <div class="timeline-heading">
-                                <h3 class="timeline-title">Abitur (A-Level)</h3>
-                                <span class="company">Albert-Einstein School - Sept. 2011 - June 2014</span>
-                            </div>
-                            <div class="timeline-body">
-                                <p>Far far away, behind the word mountains, they live in Bookmarksgrove right at the
-                                    coast of the Semantics, a large language ocean.</p>
+                                <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>
+                                <p>{{item.description}}</p>
                             </div>
                         </div>
                     </li>
+                    {%- endfor %}
                 </ul>
             </div>
         </div>
@@ -202,43 +161,23 @@
         <div class="services-padding">
             <div class="row justify-content-md-center">
                 <div class="col-md-8 text-center heading">
-                    <h1>My Projects</h1>
+                    <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">
-                    <div class="feature-left">
+                    <a class="feature-left" href="{{item.url}}" target="_blank">
 							<span class="icon">
-								<i class="icon-paintbrush"></i>
+								<img src="/img/{{item.icon}}">
 							</span>
                         <div class="feature-copy">
-                            <h3>Web Design</h3>
-                            <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
+                            <h3>{{item.name}}</h3>
+                            <p>{{item.description}}</p>
                         </div>
-                    </div>
-                </div>
-                <div class="col-md-4 text-center">
-                    <div class="feature-left">
-							<span class="icon">
-								<i class="icon-briefcase"></i>
-							</span>
-                        <div class="feature-copy">
-                            <h3>Branding</h3>
-                            <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-4 text-center">
-                    <div class="feature-left">
-							<span class="icon">
-								<i class="icon-search"></i>
-							</span>
-                        <div class="feature-copy">
-                            <h3>Analytics</h3>
-                            <p>Facilis ipsum reprehenderit nemo molestias. Aut cum mollitia reprehenderit.</p>
-                        </div>
-                    </div>
+                    </a>
                 </div>
+                {%- endfor %}
             </div>
         </div>
     </div>
@@ -247,185 +186,38 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col-md-8 text-center heading">
-                <h1>Skills</h1>
+                <h1>{{site.strings.skills.title}}</h1>
             </div>
         </div>
         <div class="row mb-4">
+            {%- for item in site.strings.skills.languages %}
             <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
                 <div class="circular">
                     <div class="inner"></div>
-                    <div class="number"><strong>Java</strong><span>95%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>JavaScript</strong><span>93%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>TypeScript</strong><span>90%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>Python</strong><span>90%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>HTML</strong><span>89%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>CSS</strong><span>85%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>SQL</strong><span>90%</span></div>
+                    <div class="number"><strong>{{item.name}}</strong><span>{{item.percent}}%</span></div>
                     <div class="circle">
                         <div class="bar left">
-                            <div class="progress"></div>
+                            <div class="progress progress-{{item.percent}}"></div>
                         </div>
                         <div class="bar right">
-                            <div class="progress"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-3 col-sm-6 col-xs-12 d-flex justify-content-center">
-                <div class="circular">
-                    <div class="inner"></div>
-                    <div class="number"><strong>Bash</strong><span>85%</span></div>
-                    <div class="circle">
-                        <div class="bar left">
-                            <div class="progress"></div>
-                        </div>
-                        <div class="bar right">
-                            <div class="progress"></div>
+                            <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">
                 <div class="progress-wrap">
-                    <div><span class="name-left">Docker</span><span class="float-end">95%</span></div>
+                    <div><span class="name-left">{{item.name}}</span><span class="float-end">{{item.percent}}%</span></div>
                     <div class="progress">
-                        <div class="progress-bar" style="width:95%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">Git</span><span class="float-end">90%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:90%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">Intellij IDEA</span><span class="float-end">80%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:80%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">Node.js</span><span class="float-end">85%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:85%">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-md-6">
-                <div class="progress-wrap">
-                    <div><span class="name-left">Spring Framework</span><span class="float-end">100%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:100%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">Angular</span><span class="float-end">70%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:70%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">CI/CD</span><span class="float-end">85%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:85%">
-                        </div>
-                    </div>
-                </div>
-                <div class="progress-wrap">
-                    <div><span class="name-left">tba</span><span class="float-end">75%</span></div>
-                    <div class="progress">
-                        <div class="progress-bar" style="width:75%">
-                        </div>
+                        <div class="progress-bar progress-{{item.percent}}"></div>
                     </div>
                 </div>
             </div>
+            {%- endfor %}
         </div>
     </div>
 </section>
@@ -433,42 +225,20 @@
     <div class="container">
         <div class="row justify-content-md-center">
             <div class="col-md-8 text-center heading">
-                <h1>Interests</h1>
+                <h1>{{site.strings.interests.title}}</h1>
             </div>
         </div>
         <div class="row">
+            {%- for item in site.strings.interests.list %}
             <div class="col-md-3 text-center p-3">
-                <a href="#" class="work" style="background-image: url(images/portfolio-1.jpg);">
-                    <div class="desc">
-                        <h3>Project Name</h3>
-                        <span>Illustration</span>
-                    </div>
-                </a>
-            </div>
-            <div class="col-md-3 text-center p-3">
-                <a href="#" class="work" style="background-image: url(images/portfolio-2.jpg);">
-                    <div class="desc">
-                        <h3>Project Name</h3>
-                        <span>Brading</span>
-                    </div>
-                </a>
-            </div>
-            <div class="col-md-3 text-center p-3">
-                <a href="#" class="work" style="background-image: url(images/portfolio-3.jpg);">
-                    <div class="desc">
-                        <h3>Project Name</h3>
-                        <span>Illustration</span>
-                    </div>
-                </a>
-            </div>
-            <div class="col-md-3 text-center p-3">
-                <a href="#" class="work" style="background-image: url(images/portfolio-4.jpg);">
+                <a href="{{item.url}}" target="_blank" class="work" style="background-image: url(images/portfolio-1.jpg);">
                     <div class="desc">
-                        <h3>Project Name</h3>
-                        <span>Design</span>
+                        <h3>{{item.name}}</h3>
+                        <span>{{item.description}}</span>
                     </div>
                 </a>
             </div>
+            {%- endfor %}
         </div>
     </div>
 </section>
@@ -477,7 +247,7 @@
         <div class="overlay"></div>
     </div>
     <div class="choose">
-        <h2 class="mb-5">Contact</h2>
+        <h2 class="mb-5">{{site.strings.contact.title}}</h2>
         <form action="#">
             <div class="row mb-4">
                 <div class="col-md-12">
@@ -515,14 +285,14 @@
                     <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>Imprint</a>
+                    <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>Privacy</a>
+                    <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>Code</a></div>
+                            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>Stats</a></div>
+                            class="i-chart-line me-2"></span>{{site.strings.footer.stats}}</a></div>
                 </div>
             </div>
         </div>

src/index.html.old

@@ -0,0 +1,532 @@
+<!doctype html>
+<html lang="en" prefix="og: http://ogp.me/ns#">
+<head>