diff --git a/.eleventy.js b/.eleventy.js index 9a0dad8..35ff8d2 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -24,6 +24,7 @@ module.exports = function (eleventyConfig) { eleventyConfig.setUseGitIgnore(false); eleventyConfig.addPassthroughCopy({ + "src/js": "js", "src/img": "img", "src/font": "font", "src/favicon.*": "", diff --git a/package.json b/package.json index 4e7257b..f0b0c68 100644 --- a/package.json +++ b/package.json @@ -16,22 +16,22 @@ "url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de" }, "optionalDependencies": { - "browser-sync": "^2.27.12" + "browser-sync": "^2.29.3" }, "devDependencies": { - "@11ty/eleventy": "^2.0.0", + "@11ty/eleventy": "^2.0.1", "@11ty/eleventy-navigation": "^0.3.5", - "@node-minify/core": "^8.0.5", - "@node-minify/crass": "^8.0.5", - "@node-minify/html-minifier": "^8.0.5", + "@node-minify/core": "^8.0.6", + "@node-minify/crass": "^8.0.6", + "@node-minify/html-minifier": "^8.0.6", "@sardine/eleventy-plugin-tinyhtml": "^0.2.0", "cpx": "^1.5.0", "eleventy-plugin-rev": "^1.1.1", "eleventy-sass": "^2.2.1", - "glob": "^8.1.0", - "minify": "^9.2.0", - "postcss": "^8.4.21", - "sass": "^1.58.3", + "glob": "^10.2.5", + "minify": "^10.0.0", + "postcss": "^8.4.23", + "sass": "^1.62.1", "uncss": "^0.17.3" }, "dependencies": { diff --git a/src/_data/site.json b/src/_data/global.json similarity index 71% rename from src/_data/site.json rename to src/_data/global.json index 1ca5f23..efbd6eb 100644 --- a/src/_data/site.json +++ b/src/_data/global.json @@ -16,5 +16,18 @@ "icon": "de", "url": "https://samuel-philipp.de" } - ] + ], + "menu": { + "title": { + "de": "Menü", + "en": "Menu" + }, + "items": [ + "about", + "resume", + "projects", + "skills", + "interests" + ] + } } diff --git a/src/_data/i18n/de.json b/src/_data/i18n/de.json index f0ec888..1d54c52 100644 --- a/src/_data/i18n/de.json +++ b/src/_data/i18n/de.json @@ -16,6 +16,16 @@ "work": { "title": "Berufliche Laufbahn", "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 (Nebentätigkeit)", "company": "Ossrox UG (haftungsbeschränkt)", @@ -36,7 +46,7 @@ "company": "AV-TEST GmbH", "url": "https://www.av-test.org", "start": "Jan. 2018", - "end": "heute", + "end": "Apr. 2023", "descriptions": [ "Threat Intelligence Plattform av-atlas.org", "Automatisierte Datenschutzanalyse von Android Apps", diff --git a/src/_data/i18n/en.json b/src/_data/i18n/en.json index 4dde7a8..b211ab4 100644 --- a/src/_data/i18n/en.json +++ b/src/_data/i18n/en.json @@ -16,6 +16,16 @@ "work": { "title": "Work Experience", "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 (side job)", "company": "Ossrox UG (haftungsbeschränkt)", @@ -36,7 +46,7 @@ "company": "AV-TEST GmbH", "url": "https://www.av-test.org", "start": "Jan. 2018", - "end": "now", + "end": "Apr. 2023", "descriptions": [ "Threat Intelligence Platform av-atlas.org", "Automated privacy analysis of Android apps", diff --git a/src/_data/site.js b/src/_data/site.js index 6832504..b22ee0f 100644 --- a/src/_data/site.js +++ b/src/_data/site.js @@ -1,4 +1,4 @@ -const site = require("./site.json"); +const site = require("./global.json"); site.buildTime = new Date(); site.lang = process.env.LANGUAGE || 'en'; diff --git a/src/index.html b/src/index.html index d9e3f83..3cb73ab 100644 --- a/src/index.html +++ b/src/index.html @@ -38,34 +38,59 @@ title: {{site.title}} src="https://umami.sp-codes.de/umami.js"> -
-
-
-
-
-
- -

{{site.title}}

-

{{site.subtitle}}

- - +
+
+
+
+
+
+ +
+ Samuel Philipp +

{{site.title}}

+

{{site.subtitle}}

+ + +
+
+ +
+
@@ -178,7 +203,7 @@ title: {{site.title}}
-
+
@@ -318,5 +343,7 @@ title: {{site.title}}
+^ + diff --git a/src/js/main.js b/src/js/main.js index aa96b13..f495cbf 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,29 +1,9 @@ -const developer = document.getElementById('developer'); -const magician = document.getElementById('magician'); -const links = document.getElementById('links'); +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); -document.addEventListener('touchmove', function (event) { - event.preventDefault(); - 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'; -} \ No newline at end of file + document.querySelector(this.getAttribute('href')).scrollIntoView({ + behavior: 'smooth' + }); + }); +}); \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss index 883b271..94d8493 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -13,6 +13,10 @@ $icomoon-font-path: "../font"; $flag-icons-path: "../flags"; @import "flag-icons/sass/flag-icons"; +html, body { + height: 100%; +} + body { color: #000; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -22,21 +26,18 @@ body { header { position: relative; - height: 100vh; + height: 100%; width: 100%; background-image: url(../img/sp-codes.jpg); - background-color: transparent; + background-color: #fff; background-size: cover; background-attachment: fixed; background-position: 0 0; color: #fff; + z-index: 11; .overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; + height: 100%; background-color: rgba($secondary, 0.9); } @@ -52,6 +53,99 @@ header { a { 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 { @@ -404,7 +498,7 @@ section { } } -#services, #interests { +#projects, #interests { color: #fff; 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) { + header { + .profile-thumb { + width: 200px; + height: 200px; + } + + .scroll-down-outer { + margin-bottom: 2rem; + } + } + .timeline { &::before { 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; + } +} \ No newline at end of file