samuel-p/samuel-philipp.de
samuel-p/samuel-philipp.de
1
0
Fork 0
Code Issues Pull requests 7 Releases Activity Actions

develop #149

Merged
samuel-p merged 118 commits from develop into main 2023-01-13 19:19:26 +00:00
Conversation 0 Commits 118 Files changed 36 +1223 -667
17 changed files with 1223 additions and 667 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 556de1c6fe - Show all commits

44
.drone.yml
View file

@ -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

47
.eleventy.js Normal file
View file

@ -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}/`
}
};
};

37
.woodpecker.yml
View file

@ -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

254
gulpfile.js
View file

@ -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
);

40
package.json
View file

@ -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"
}
}

251
src/_data/i18n/de.json Normal file
View file

@ -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"
}
}

102
src/_data/i18n/en.json Normal file
View file

@ -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"
}
]
}
}
}

8
src/_data/site.js Normal file
View file

@ -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;

20
src/_data/site.json Normal file
View file

@ -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"
}
]
}

BIN
src/img/op.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/img/samuel-1024.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 76 KiB

1
src/img/sp-codes.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

410
src/index.html
View file

@ -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>
<div><h3>{{site.strings.resume.work.title}}</h3>
</div>
</li>
<li class="timeline-inverted">
{%- 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">AV-TEST GmbH - Jan. 2018 - present</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, far from the countries Vokalia and
Consonantia, there live the blind texts.</p>
{%- for description in item.descriptions %}
<p>{{description | safe}}</p>
{%- endfor %}
</div>
</div>
</li>
<li class="timeline-unverted">
<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>
</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>
</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>
<div><h3>{{site.strings.resume.education.title}}</h3></div>
</li>
<li class="timeline-unverted">
{%- 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">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>
</li>
<li class="timeline-inverted">
<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>
</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>
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
</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="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>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="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>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);">
<a href="{{item.url}}" target="_blank" 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);">
<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>

532
src/index.html.old Normal file
View file

@ -0,0 +1,532 @@
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<title>Samuel Philipp</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">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="fragment" content="!">
<meta name="target" content="all">
<meta name="audience" content="all">
<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 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 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>
</head>
<body>
<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.png">
<h1>Samuel Philipp</h1>
<h3>Full-Stack Developer / SysAdmin / Magician</h3>
<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>
<li><a href="#"><i class="i-mastodon i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-gitea i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-github i-2x i-fw"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section id="about">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>About Me</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>
<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>
</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>
<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>
<li><a href="#"><i class="i-mastodon i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-stackoverflow i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-gitea i-2x i-fw"></i></a></li>
<li><a href="#"><i class="i-github 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>My Resume</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>
</li>
<li class="timeline-unverted">
<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>
</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>
</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>
<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>
</li>
<li class="timeline-inverted">
<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>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="services" class="bg-primary">
<div class="container">
<div class="services-padding">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>My Projects</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<div class="feature-left">
<span class="icon">
<i class="icon-paintbrush"></i>
</span>
<div class="feature-copy">
<h3>Web Design</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-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>
</div>
</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>Skills</h1>
</div>
</div>
<div class="row mb-4">
<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="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>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>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="progress-wrap">
<div><span class="name-left">Docker</span><span class="float-end">95%</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>
</div>
</div>
</div>
</div>
</section>
<section id="interests" class="bg-primary">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center heading">
<h1>Interests</h1>
</div>
</div>
<div class="row">
<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);">
<div class="desc">
<h3>Project Name</h3>
<span>Design</span>
</div>
</a>
</div>
</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">Contact</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>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>
<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>
<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>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>

0
src/scss/icons/style.scss → src/scss/icons/_style.scss
View file

0
src/scss/icons/variables.scss → src/scss/icons/_variables.scss
View file

140
src/scss/main.scss
View file

@ -1,5 +1,5 @@
$primary: #fea500;
@import "~bootstrap/scss/bootstrap";
@import "bootstrap/scss/bootstrap";
$icomoon-font-path: "../font";
@import "icons/style";
@ -30,8 +30,8 @@ header {
}
.profile-thumb {
height: 200px;
width: 200px;
height: 300px;
width: 300px;
margin: 0 auto;
border-radius: 50%;
background-color: #fff;
@ -88,7 +88,7 @@ section {
}
.first-block {
width: 40%;
width: 30%;
display: inline-block;
float: left;
color: #000;
@ -96,7 +96,7 @@ section {
}
.second-block {
width: 60%;
width: 70%;
display: inline-block;
color: rgba(0, 0, 0, 0.5);
}
@ -155,8 +155,22 @@ section {
position: relative;
border-radius: 4px;
.duration {
display: block;
font-size: 16px;
font-weight: normal;
color: #aaaaaa;
}
.timeline-title {
margin-top: 0;
.degree {
display: block;
font-size: 20px;
font-weight: bold;
color: $primary;
}
}
.company {
@ -194,12 +208,17 @@ section {
border-radius: 4px;
}
.feature-left {
color: #000 !important;
text-decoration: none !important;
}
.icon {
display: flex;
text-align: center;
width: 100px;
height: 100px;
background: #000;
background: #fff;
margin: 0 auto 20px;
border-radius: 50%;
}
@ -228,8 +247,6 @@ section {
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
//font-size: 18px;
//font-weight: 500;
color: #000;
display: flex;
flex-direction: column;
@ -255,31 +272,53 @@ section {
}
.circle .left .progress {
z-index: 1;
animation: left 200ms linear both;
}
@keyframes left {
100% {
transform: rotate(180deg);
}
z-index: 1;
}
.circle .right {
transform: rotate(180deg);
z-index: 3;
}
.circle .right .progress {
animation: right 160ms linear both;
animation-delay: 200ms;
.circle .right .progress-95 {
transform: rotate(162deg);
}
@keyframes right {
100% {
.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);
}
}
@ -301,6 +340,54 @@ section {
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%;
}
}
}
}
@ -346,14 +433,17 @@ section {
transform: translate3d(0, 15px, 0);
}
}
&:hover{
.desc{
&:hover {
.desc {
opacity: 1;
h3{
h3 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
span{
span {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}