From 07fd1beebe7d524cc0d7a32f59925eb53bc64bbe Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Tue, 28 Feb 2023 05:01:00 +0000 Subject: [PATCH 01/10] Update dependency browser-sync to ^2.28.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4e7257b..e8b0737 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de" }, "optionalDependencies": { - "browser-sync": "^2.27.12" + "browser-sync": "^2.28.1" }, "devDependencies": { "@11ty/eleventy": "^2.0.0", From 1fa5eb5d9c3233139f86838d458784c6bcfc87a0 Mon Sep 17 00:00:00 2001 From: Renovate Bot Date: Wed, 1 Mar 2023 22:01:10 +0000 Subject: [PATCH 02/10] Update dependency glob to v9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e8b0737..a0475ed 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "cpx": "^1.5.0", "eleventy-plugin-rev": "^1.1.1", "eleventy-sass": "^2.2.1", - "glob": "^8.1.0", + "glob": "^9.1.2", "minify": "^9.2.0", "postcss": "^8.4.21", "sass": "^1.58.3", From b97eb4051780c0c856e981571a211be5f1182253 Mon Sep 17 00:00:00 2001 From: Samuel Philipp Date: Tue, 9 May 2023 00:16:46 +0200 Subject: [PATCH 03/10] added menu and caret --- package.json | 14 ++--- src/_data/{site.json => global.json} | 15 ++++- src/_data/i18n/de.json | 2 +- src/_data/i18n/en.json | 2 +- src/_data/site.js | 2 +- src/index.html | 74 ++++++++++++++++--------- src/scss/main.scss | 82 +++++++++++++++++++++++++++- 7 files changed, 154 insertions(+), 37 deletions(-) rename src/_data/{site.json => global.json} (71%) diff --git a/package.json b/package.json index a0475ed..86e8a59 100644 --- a/package.json +++ b/package.json @@ -19,19 +19,19 @@ "browser-sync": "^2.28.1" }, "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": "^9.1.2", + "glob": "^10.2.2", "minify": "^9.2.0", - "postcss": "^8.4.21", - "sass": "^1.58.3", + "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..30f5c84 100644 --- a/src/_data/i18n/de.json +++ b/src/_data/i18n/de.json @@ -36,7 +36,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..ce0b7fa 100644 --- a/src/_data/i18n/en.json +++ b/src/_data/i18n/en.json @@ -36,7 +36,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..6a4b787 100644 --- a/src/index.html +++ b/src/index.html @@ -42,30 +42,54 @@ title: {{site.title}}
-
-
- -

{{site.title}}

-

{{site.subtitle}}

- - +
+
+ +
+ Samuel Philipp +

{{site.title}}

+

{{site.subtitle}}

+ + +
+
+ +
@@ -178,7 +202,7 @@ title: {{site.title}}
-
+
diff --git a/src/scss/main.scss b/src/scss/main.scss index 883b271..f20931b 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -18,6 +18,7 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; + //overflow-anchor: none; } header { @@ -52,6 +53,85 @@ header { a { color: #fff !important; } + + .scroll-down { + display: block; + position: absolute; + z-index: 100; + bottom: 45px; + left: 50%; + margin-left: -24px; + width: 48px; + height: 48px; + -webkit-animation: bounce 4s 2s infinite; + animation: bounce 4s 2s infinite; + } + + @-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; + //border: 1px solid #fff; + //border-top: none; + } +} + +.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 +484,7 @@ section { } } -#services, #interests { +#projects, #interests { color: #fff; background-image: url(../img/bg.jpg); } From d2d7910d52552496f49a16f851498df837962f7f Mon Sep 17 00:00:00 2001 From: Samuel Philipp Date: Wed, 10 May 2023 19:40:01 +0200 Subject: [PATCH 04/10] improved scroll --- src/index.html | 22 +++++++++++++------ src/scss/main.scss | 55 +++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 64 insertions(+), 13 deletions(-) diff --git a/src/index.html b/src/index.html index 6a4b787..6b311cd 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@ title: {{site.title}} src="https://umami.sp-codes.de/umami.js"> -
+
@@ -49,8 +49,7 @@ title: {{site.title}} {%- for key in site.menu.items %}
- {% if entry.icon %}{% endif %}{{ - site.strings[key].title }} + {{ site.strings[key].title }}
{%- endfor %} @@ -83,10 +82,7 @@ title: {{site.title}}
-
@@ -342,5 +338,17 @@ title: {{site.title}}
+^ + diff --git a/src/scss/main.scss b/src/scss/main.scss index f20931b..cdb4c42 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -26,11 +26,12 @@ header { height: 100vh; 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: 1; .overlay { position: absolute; @@ -60,11 +61,20 @@ header { z-index: 100; bottom: 45px; left: 50%; - margin-left: -24px; - width: 48px; - height: 48px; + 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 { @@ -109,8 +119,6 @@ header { .items { display: flex; padding: 1rem; - //border: 1px solid #fff; - //border-top: none; } } @@ -639,3 +647,38 @@ footer { } } } + +//.back-top { +// position: fixed; +// right: 8rem; +// bottom: 8rem; +// width: 40px; +// height: 40px; +// border-radius: 7px; +// background: var(--bs-primary); +// z-index: 0; +// border: 1px solid #fff; +//} + +.back-top { + --offset: 7rem; + position: fixed; + right: var(--offset); + bottom: var(--offset); + width: 3rem; + aspect-ratio: 1; + border-radius: 7px; + background: var(--bs-primary); + z-index: 0; + //border: 1px solid #fff; + 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; + } +} \ No newline at end of file From 051deb6f276ba32b00c4ab4e92b1c4c909c4ca63 Mon Sep 17 00:00:00 2001 From: Samuel Philipp Date: Wed, 10 May 2023 20:46:28 +0200 Subject: [PATCH 05/10] more improvements and cleanup --- .eleventy.js | 1 + src/index.html | 107 +++++++++++++++++++++------------------------ src/js/main.js | 36 ++++----------- src/scss/main.scss | 6 --- 4 files changed, 60 insertions(+), 90 deletions(-) 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/src/index.html b/src/index.html index 6b311cd..28d57e8 100644 --- a/src/index.html +++ b/src/index.html @@ -38,53 +38,58 @@ title: {{site.title}} src="https://umami.sp-codes.de/umami.js"> -
-
-
-
-
-
- -
- Samuel Philipp -

{{site.title}}

-

{{site.subtitle}}

- - -
-
-
@@ -339,16 +344,6 @@ 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 cdb4c42..0e435d9 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -18,7 +18,6 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; margin: 0; - //overflow-anchor: none; } header { @@ -34,11 +33,6 @@ header { z-index: 1; .overlay { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; background-color: rgba($secondary, 0.9); } From 4deeea962f5a581a42b2595fa7da57a39e168605 Mon Sep 17 00:00:00 2001 From: Samuel Philipp Date: Thu, 11 May 2023 00:24:07 +0200 Subject: [PATCH 06/10] more improvements for mobile --- src/index.html | 6 +- src/scss/main.scss | 138 ++++++++++++++++++++++++++++----------------- 2 files changed, 90 insertions(+), 54 deletions(-) diff --git a/src/index.html b/src/index.html index 28d57e8..f531395 100644 --- a/src/index.html +++ b/src/index.html @@ -40,8 +40,8 @@ title: {{site.title}}
-
-
+
+
-
+
diff --git a/src/scss/main.scss b/src/scss/main.scss index 0e435d9..ad78da2 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,7 +26,7 @@ body { header { position: relative; - height: 100vh; + height: 100%; width: 100%; background-image: url(../img/sp-codes.jpg); background-color: #fff; @@ -30,9 +34,10 @@ header { background-attachment: fixed; background-position: 0 0; color: #fff; - z-index: 1; + z-index: 11; .overlay { + height: 100%; background-color: rgba($secondary, 0.9); } @@ -49,25 +54,31 @@ header { color: #fff !important; } - .scroll-down { - display: block; - position: absolute; - z-index: 100; - bottom: 45px; - left: 50%; - margin-left: -32px; - width: 64px; - height: 64px; - -webkit-animation: bounce 4s 2s infinite; - animation: bounce 4s 2s infinite; + .scroll-down-outer { + position: relative; + margin-top: 30px; + margin-bottom: 4rem; - &::before { - content: ""; + .scroll-down { + display: block; position: absolute; - inset: 30%; - transform: translateY(-10%) rotate(-45deg); - border-left: 5px solid #fff; - border-bottom: 5px solid #fff; + 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; + } } } @@ -616,7 +627,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%; @@ -640,39 +696,19 @@ footer { } } } + + .back-top { + --offset: 56px; + } } -//.back-top { -// position: fixed; -// right: 8rem; -// bottom: 8rem; -// width: 40px; -// height: 40px; -// border-radius: 7px; -// background: var(--bs-primary); -// z-index: 0; -// border: 1px solid #fff; -//} - -.back-top { - --offset: 7rem; - position: fixed; - right: var(--offset); - bottom: var(--offset); - width: 3rem; - aspect-ratio: 1; - border-radius: 7px; - background: var(--bs-primary); - z-index: 0; - //border: 1px solid #fff; - 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(sm) { + header { + .scroll-down-outer { + margin-bottom: 1rem; + } + } + .back-top { + --offset: 28px; } } \ No newline at end of file From 088b17b5ab36a85fbaa6a71fcc33564e1a2fae4c Mon Sep 17 00:00:00 2001 From: Samuel Philipp Date: Fri, 12 May 2023 00:20:25 +0200 Subject: [PATCH 07/10] more improvements for mobile --- package.json | 6 +++--- src/index.html | 4 ++-- src/scss/main.scss | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 86e8a59..8c97851 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "url": "https://git.sp-codes.de/samuel-p/samuel-philipp.de" }, "optionalDependencies": { - "browser-sync": "^2.28.1" + "browser-sync": "^2.29.1" }, "devDependencies": { "@11ty/eleventy": "^2.0.1", @@ -28,8 +28,8 @@ "cpx": "^1.5.0", "eleventy-plugin-rev": "^1.1.1", "eleventy-sass": "^2.2.1", - "glob": "^10.2.2", - "minify": "^9.2.0", + "glob": "^10.2.3", + "minify": "^10.0.0", "postcss": "^8.4.23", "sass": "^1.62.1", "uncss": "^0.17.3" diff --git a/src/index.html b/src/index.html index f531395..3cb73ab 100644 --- a/src/index.html +++ b/src/index.html @@ -42,8 +42,8 @@ title: {{site.title}}
-
-
+
+