develop #177

Merged
samuel-p merged 14 commits from develop into main 2023-05-20 20:03:31 +00:00
9 changed files with 274 additions and 78 deletions

View file

@ -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.*": "",

View file

@ -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": {

View file

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

View file

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

View file

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

View file

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

View file

@ -38,34 +38,59 @@ 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">
<h1>{{site.title}}</h1> <div class="items">
<h3>{{site.subtitle}}</h3> {%- for key in site.menu.items %}
<ul class="social-icons my-4"> <div class="item">
<li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a></li> <a href="#{{ key }}">
<li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i {{ site.strings[key].title }}
class="i-matrix i-2x i-fw"></i></a></li> </a>
<li><a href="https://social.sp-codes.de/@samuel_p" rel="me"><i class="i-mastodon i-2x i-fw"></i></a> </div>
</li> {%- endfor %}
<li><a href="https://www.xing.com/profile/Samuel_Philipp"><i class="i-xing i-2x i-fw"></i></a> </div>
</li> </nav>
<li><a href="https://www.linkedin.com/in/samuel-philipp"><i <div class="d-flex flex-column flex-grow-1 justify-content-center">
class="i-linkedin i-2x i-fw"></i></a></li> <img class="profile-thumb mb-4" src="img/samuel-1024.jpg" alt="Samuel Philipp">
<li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a></li> <h1>{{site.title}}</h1>
<li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li> <h3>{{site.subtitle}}</h3>
<li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i <ul class="social-icons my-4">
class="i-stackoverflow 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>
</ul> </li>
<ul class="social-icons"> <li><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i
<li><a href="https://samuel-philipp.de"><span class="fi fi-de i-2x mx-2"></span></a></li> class="i-matrix i-2x i-fw"></i></a></li>
<li><a href="https://samuel-philipp.com"><span class="fi fi-us i-2x mx-2"></span></a></li> <li><a href="https://social.sp-codes.de/@samuel_p" rel="me"><i
</ul> class="i-mastodon i-2x i-fw"></i></a>
</li>
<li><a href="https://www.xing.com/profile/Samuel_Philipp"><i
class="i-xing i-2x i-fw"></i></a>
</li>
<li><a href="https://www.linkedin.com/in/samuel-philipp"><i
class="i-linkedin i-2x i-fw"></i></a></li>
<li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea i-2x i-fw"></i></a>
</li>
<li><a href="https://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
<li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i
class="i-stackoverflow i-2x i-fw"></i></a></li>
</ul>
<ul class="social-icons">
<li><a href="https://samuel-philipp.de"><span class="fi fi-de i-2x mx-2"></span></a>
</li>
<li><a href="https://samuel-philipp.com"><span class="fi fi-us i-2x mx-2"></span></a>
</li>
</ul>
</div>
<div class="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>
@ -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>

View file

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

View file

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