develop #177
9 changed files with 274 additions and 78 deletions
|
|
@ -24,6 +24,7 @@ module.exports = function (eleventyConfig) {
|
||||||
|
|
||||||
eleventyConfig.setUseGitIgnore(false);
|
eleventyConfig.setUseGitIgnore(false);
|
||||||
eleventyConfig.addPassthroughCopy({
|
eleventyConfig.addPassthroughCopy({
|
||||||
|
"src/js": "js",
|
||||||
"src/img": "img",
|
"src/img": "img",
|
||||||
"src/font": "font",
|
"src/font": "font",
|
||||||
"src/favicon.*": "",
|
"src/favicon.*": "",
|
||||||
|
|
|
||||||
18
package.json
18
package.json
|
|
@ -16,22 +16,22 @@
|
||||||
"url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de"
|
"url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de"
|
||||||
},
|
},
|
||||||
"optionalDependencies": {
|
"optionalDependencies": {
|
||||||
"browser-sync": "^2.27.12"
|
"browser-sync": "^2.29.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^2.0.0",
|
"@11ty/eleventy": "^2.0.1",
|
||||||
"@11ty/eleventy-navigation": "^0.3.5",
|
"@11ty/eleventy-navigation": "^0.3.5",
|
||||||
"@node-minify/core": "^8.0.5",
|
"@node-minify/core": "^8.0.6",
|
||||||
"@node-minify/crass": "^8.0.5",
|
"@node-minify/crass": "^8.0.6",
|
||||||
"@node-minify/html-minifier": "^8.0.5",
|
"@node-minify/html-minifier": "^8.0.6",
|
||||||
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
"@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
|
||||||
"cpx": "^1.5.0",
|
"cpx": "^1.5.0",
|
||||||
"eleventy-plugin-rev": "^1.1.1",
|
"eleventy-plugin-rev": "^1.1.1",
|
||||||
"eleventy-sass": "^2.2.1",
|
"eleventy-sass": "^2.2.1",
|
||||||
"glob": "^8.1.0",
|
"glob": "^10.2.5",
|
||||||
"minify": "^9.2.0",
|
"minify": "^10.0.0",
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.23",
|
||||||
"sass": "^1.58.3",
|
"sass": "^1.62.1",
|
||||||
"uncss": "^0.17.3"
|
"uncss": "^0.17.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
||||||
|
|
@ -16,5 +16,18 @@
|
||||||
"icon": "de",
|
"icon": "de",
|
||||||
"url": "https://samuel-philipp.de"
|
"url": "https://samuel-philipp.de"
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
"menu": {
|
||||||
|
"title": {
|
||||||
|
"de": "Menü",
|
||||||
|
"en": "Menu"
|
||||||
|
},
|
||||||
|
"items": [
|
||||||
|
"about",
|
||||||
|
"resume",
|
||||||
|
"projects",
|
||||||
|
"skills",
|
||||||
|
"interests"
|
||||||
]
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -16,6 +16,16 @@
|
||||||
"work": {
|
"work": {
|
||||||
"title": "Berufliche Laufbahn",
|
"title": "Berufliche Laufbahn",
|
||||||
"positions": [
|
"positions": [
|
||||||
|
{
|
||||||
|
"position": "Full Stack Developer",
|
||||||
|
"company": "Hacking-Lab AG",
|
||||||
|
"url": "https://www.hacking-lab.com",
|
||||||
|
"start": "Mai 2023",
|
||||||
|
"end": "heute",
|
||||||
|
"descriptions": [],
|
||||||
|
"city": "Berlin",
|
||||||
|
"country": ""
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"position": "Geschäftsführer <small>(Nebentätigkeit)</small>",
|
"position": "Geschäftsführer <small>(Nebentätigkeit)</small>",
|
||||||
"company": "Ossrox UG (haftungsbeschränkt)",
|
"company": "Ossrox UG (haftungsbeschränkt)",
|
||||||
|
|
@ -36,7 +46,7 @@
|
||||||
"company": "AV-TEST GmbH",
|
"company": "AV-TEST GmbH",
|
||||||
"url": "https://www.av-test.org",
|
"url": "https://www.av-test.org",
|
||||||
"start": "Jan. 2018",
|
"start": "Jan. 2018",
|
||||||
"end": "heute",
|
"end": "Apr. 2023",
|
||||||
"descriptions": [
|
"descriptions": [
|
||||||
"Threat Intelligence Plattform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
|
"Threat Intelligence Plattform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
|
||||||
"Automatisierte Datenschutzanalyse von Android Apps",
|
"Automatisierte Datenschutzanalyse von Android Apps",
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,16 @@
|
||||||
"work": {
|
"work": {
|
||||||
"title": "Work Experience",
|
"title": "Work Experience",
|
||||||
"positions": [
|
"positions": [
|
||||||
|
{
|
||||||
|
"position": "Full Stack Developer",
|
||||||
|
"company": "Hacking-Lab AG",
|
||||||
|
"url": "https://www.hacking-lab.com",
|
||||||
|
"start": "May 2023",
|
||||||
|
"end": "now",
|
||||||
|
"descriptions": [],
|
||||||
|
"city": "Berlin",
|
||||||
|
"country": ""
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"position": "Managing Director <small>(side job)</small>",
|
"position": "Managing Director <small>(side job)</small>",
|
||||||
"company": "Ossrox UG (haftungsbeschränkt)",
|
"company": "Ossrox UG (haftungsbeschränkt)",
|
||||||
|
|
@ -36,7 +46,7 @@
|
||||||
"company": "AV-TEST GmbH",
|
"company": "AV-TEST GmbH",
|
||||||
"url": "https://www.av-test.org",
|
"url": "https://www.av-test.org",
|
||||||
"start": "Jan. 2018",
|
"start": "Jan. 2018",
|
||||||
"end": "now",
|
"end": "Apr. 2023",
|
||||||
"descriptions": [
|
"descriptions": [
|
||||||
"Threat Intelligence Platform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
|
"Threat Intelligence Platform <a href=\"https://av-atlas.org\">av-atlas.org</a>",
|
||||||
"Automated privacy analysis of Android apps",
|
"Automated privacy analysis of Android apps",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
const site = require("./site.json");
|
const site = require("./global.json");
|
||||||
|
|
||||||
site.buildTime = new Date();
|
site.buildTime = new Date();
|
||||||
site.lang = process.env.LANGUAGE || 'en';
|
site.lang = process.env.LANGUAGE || 'en';
|
||||||
|
|
|
||||||
|
|
@ -38,35 +38,60 @@ title: {{site.title}}
|
||||||
src="https://umami.sp-codes.de/umami.js"></script>
|
src="https://umami.sp-codes.de/umami.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="vh-100">
|
<header id="top">
|
||||||
<div class="overlay"></div>
|
<div class="overlay">
|
||||||
<div class="container">
|
<div class="container h-100">
|
||||||
<div class="row justify-content-md-center">
|
<div class="row justify-content-md-center h-100">
|
||||||
<div class="col-md-8 text-center position-relative">
|
<div class="col-md-12 col-lg-8 h-100 text-center position-relative">
|
||||||
<div class="d-flex flex-column vh-100 justify-content-center">
|
<div class="d-flex flex-column h-100">
|
||||||
<img class="profile-thumb mb-4" src="img/samuel-1024.jpg">
|
<nav class="nav menu d-none d-md-flex">
|
||||||
|
<div class="items">
|
||||||
|
{%- for key in site.menu.items %}
|
||||||
|
<div class="item">
|
||||||
|
<a href="#{{ key }}">
|
||||||
|
{{ site.strings[key].title }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{%- endfor %}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<div class="d-flex flex-column flex-grow-1 justify-content-center">
|
||||||
|
<img class="profile-thumb mb-4" src="img/samuel-1024.jpg" alt="Samuel Philipp">
|
||||||
<h1>{{site.title}}</h1>
|
<h1>{{site.title}}</h1>
|
||||||
<h3>{{site.subtitle}}</h3>
|
<h3>{{site.subtitle}}</h3>
|
||||||
<ul class="social-icons my-4">
|
<ul class="social-icons my-4">
|
||||||
<li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a></li>
|
<li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a>
|
||||||
|
</li>
|
||||||
<li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i
|
<li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i
|
||||||
class="i-matrix i-2x i-fw"></i></a></li>
|
class="i-matrix i-2x i-fw"></i></a></li>
|
||||||
<li><a href="https://social.sp-codes.de/@samuel_p" rel="me"><i class="i-mastodon i-2x i-fw"></i></a>
|
<li><a href="https://social.sp-codes.de/@samuel_p" rel="me"><i
|
||||||
|
class="i-mastodon i-2x i-fw"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="https://www.xing.com/profile/Samuel_Philipp"><i class="i-xing i-2x i-fw"></i></a>
|
<li><a href="https://www.xing.com/profile/Samuel_Philipp"><i
|
||||||
|
class="i-xing i-2x i-fw"></i></a>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="https://www.linkedin.com/in/samuel-philipp"><i
|
<li><a href="https://www.linkedin.com/in/samuel-philipp"><i
|
||||||
class="i-linkedin i-2x i-fw"></i></a></li>
|
class="i-linkedin i-2x i-fw"></i></a></li>
|
||||||
<li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a></li>
|
<li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a>
|
||||||
|
</li>
|
||||||
<li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
|
<li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
|
||||||
<li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i
|
<li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i
|
||||||
class="i-stackoverflow i-2x i-fw"></i></a></li>
|
class="i-stackoverflow i-2x i-fw"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="social-icons">
|
<ul class="social-icons">
|
||||||
<li><a href="https://samuel-philipp.de"><span class="fi fi-de i-2x mx-2"></span></a></li>
|
<li><a href="https://samuel-philipp.de"><span class="fi fi-de i-2x mx-2"></span></a>
|
||||||
<li><a href="https://samuel-philipp.com"><span class="fi fi-us i-2x mx-2"></span></a></li>
|
</li>
|
||||||
|
<li><a href="https://samuel-philipp.com"><span class="fi fi-us i-2x mx-2"></span></a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="scroll-down-outer">
|
||||||
|
<a class="scroll-down" href="#about">
|
||||||
|
<span class="d-none">Scroll Down</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -178,7 +203,7 @@ title: {{site.title}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="services" class="bg-secondary">
|
<section id="projects" class="bg-secondary">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="services-padding">
|
<div class="services-padding">
|
||||||
<div class="row justify-content-md-center">
|
<div class="row justify-content-md-center">
|
||||||
|
|
@ -318,5 +343,7 @@ title: {{site.title}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
<a class="back-top" href="#top">^</a>
|
||||||
|
<script type="text/javascript" src="{{ '/js/main.js' | rev }}"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,9 @@
|
||||||
const developer = document.getElementById('developer');
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
const magician = document.getElementById('magician');
|
anchor.addEventListener('click', function (e) {
|
||||||
const links = document.getElementById('links');
|
e.preventDefault();
|
||||||
|
|
||||||
document.addEventListener('touchmove', function (event) {
|
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||||
event.preventDefault();
|
behavior: 'smooth'
|
||||||
var e = event.touches[0];
|
});
|
||||||
move(e);
|
});
|
||||||
});
|
});
|
||||||
document.addEventListener('mousemove', function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
move(event);
|
|
||||||
});
|
|
||||||
|
|
||||||
function move(event) {
|
|
||||||
let body = document.getElementsByTagName('body')[0];
|
|
||||||
const width = window.innerWidth || document.documentElement.clientWidth || body.clientWidth;
|
|
||||||
const height= window.innerHeight|| document.documentElement.clientHeight|| body.clientHeight;
|
|
||||||
const traX = (((50 * event.pageX) / width)) - 50;
|
|
||||||
const traY = (((50 * event.pageY) / height)) - 50;
|
|
||||||
const traX2 = (50 + traX) * -1;
|
|
||||||
const traY2 = (50 + traY) * -1;
|
|
||||||
magician.style.left = traX + 'px';
|
|
||||||
magician.style.top = traY + 'px';
|
|
||||||
links.style.left = traX + 'px';
|
|
||||||
links.style.top = traY + 'px';
|
|
||||||
developer.style.left = traX2 + 'px';
|
|
||||||
developer.style.top = traY2 + 'px';
|
|
||||||
}
|
|
||||||
|
|
@ -13,6 +13,10 @@ $icomoon-font-path: "../font";
|
||||||
$flag-icons-path: "../flags";
|
$flag-icons-path: "../flags";
|
||||||
@import "flag-icons/sass/flag-icons";
|
@import "flag-icons/sass/flag-icons";
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #000;
|
color: #000;
|
||||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
@ -22,21 +26,18 @@ body {
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 100vh;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-image: url(../img/sp-codes.jpg);
|
background-image: url(../img/sp-codes.jpg);
|
||||||
background-color: transparent;
|
background-color: #fff;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-position: 0 0;
|
background-position: 0 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
z-index: 11;
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
position: absolute;
|
height: 100%;
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: rgba($secondary, 0.9);
|
background-color: rgba($secondary, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,6 +53,99 @@ header {
|
||||||
a {
|
a {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll-down-outer {
|
||||||
|
position: relative;
|
||||||
|
height: 64px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
|
||||||
|
.scroll-down {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -32px;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
-webkit-animation: bounce 4s 2s infinite;
|
||||||
|
animation: bounce 4s 2s infinite;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 30%;
|
||||||
|
transform: translateY(-10%) rotate(-45deg);
|
||||||
|
border-left: 5px solid #fff;
|
||||||
|
border-bottom: 5px solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes bounce {
|
||||||
|
0%, 100%, 20%, 50%, 80% {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translateY(-30px);
|
||||||
|
transform: translateY(-30px)
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
-webkit-transform: translateY(-15px);
|
||||||
|
transform: translateY(-15px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 100%, 20%, 50%, 80% {
|
||||||
|
-webkit-transform: translateY(0);
|
||||||
|
-ms-transform: translateY(0);
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
40% {
|
||||||
|
-webkit-transform: translateY(-30px);
|
||||||
|
-ms-transform: translateY(-30px);
|
||||||
|
transform: translateY(-30px)
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
-webkit-transform: translateY(-15px);
|
||||||
|
-ms-transform: translateY(-15px);
|
||||||
|
transform: translateY(-15px)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
display: flex;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item:last-child a {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.social-icons {
|
ul.social-icons {
|
||||||
|
|
@ -404,7 +498,7 @@ section {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#services, #interests {
|
#projects, #interests {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-image: url(../img/bg.jpg);
|
background-image: url(../img/bg.jpg);
|
||||||
}
|
}
|
||||||
|
|
@ -534,7 +628,52 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
--offset: 112px;
|
||||||
|
position: fixed;
|
||||||
|
right: var(--offset);
|
||||||
|
bottom: var(--offset);
|
||||||
|
width: 3rem;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: var(--bs-primary);
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 0 2px 1px rgba(255, 255, 255, .2);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 30%;
|
||||||
|
transform: translateY(20%) rotate(-45deg);
|
||||||
|
border-top: 5px solid #fff;
|
||||||
|
border-right: 5px solid #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
header {
|
||||||
|
.scroll-down-outer {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
--offset: 84px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
header {
|
||||||
|
.profile-thumb {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down-outer {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.timeline {
|
.timeline {
|
||||||
&::before {
|
&::before {
|
||||||
left: 10%;
|
left: 10%;
|
||||||
|
|
@ -558,4 +697,20 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
--offset: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
header {
|
||||||
|
.scroll-down-outer {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-top {
|
||||||
|
--offset: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue