added menu and caret

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/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",
     "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",
+    "postcss": "^8.4.23",
-    "sass": "^1.58.3",
+    "sass": "^1.62.1",
     "uncss": "^0.17.3"
   },
   "dependencies": {

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

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 <a href=\"https://av-atlas.org\">av-atlas.org</a>",
             "Automatisierte Datenschutzanalyse von Android Apps",

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 <a href=\"https://av-atlas.org\">av-atlas.org</a>",
             "Automated privacy analysis of Android apps",

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

src/index.html

@@ -42,30 +42,54 @@ title: {{site.title}}
     <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="col-md-12 col-lg-8 text-center position-relative">
-                <div class="d-flex flex-column vh-100 justify-content-center">
+                <div class="d-flex flex-column vh-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
+                                    {% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{
-                                class="i-matrix i-2x i-fw"></i></a></li>
+                                    site.strings[key].title }}
-                        <li><a href="https://social.sp-codes.de/@samuel_p" rel="me"><i class="i-mastodon i-2x i-fw"></i></a>
+                                </a>
-                        </li>
+                            </div>
-                        <li><a href="https://www.xing.com/profile/Samuel_Philipp"><i class="i-xing i-2x i-fw"></i></a>
+                            {%- endfor %}
-                        </li>
+                        </div>
-                        <li><a href="https://www.linkedin.com/in/samuel-philipp"><i
+                    </nav>
-                                class="i-linkedin i-2x i-fw"></i></a></li>
+                    <div class="d-flex flex-column flex-grow-1 justify-content-center">
-                        <li><a href="https://git.sp-codes.de/samuel-p"><i class="i-gitea 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://github.com/samuel-p"><i class="i-github i-2x i-fw"></i></a></li>
+                        <h1>{{site.title}}</h1>
-                        <li><a href="https://stackoverflow.com/users/9662601/samuel-philipp"><i
+                        <h3>{{site.subtitle}}</h3>
-                                class="i-stackoverflow i-2x i-fw"></i></a></li>
+                        <ul class="social-icons my-4">
-                    </ul>
+                            <li><a href="mailto:info@samuel-philipp.de"><i class="i-envelope i-2x i-fw"></i></a></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="d-flex justify-content-center">
+                        <a class="scroll-down" href="#about" onclick="window.location.hash=''">
+                            <svg fill="#fff" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M128,188a11.96187,11.96187,0,0,1-8.48535-3.51465l-80-80a12.0001,12.0001,0,0,1,16.9707-16.9707L128,159.0293l71.51465-71.51465a12.0001,12.0001,0,0,1,16.9707,16.9707l-80,80A11.96187,11.96187,0,0,1,128,188Z"></path>
+                            </svg>
+                            <span class="d-none">Scroll Down</span>
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
@@ -178,7 +202,7 @@ title: {{site.title}}
         </div>
     </div>
 </section>
-<section id="services" class="bg-secondary">
+<section id="projects" class="bg-secondary">
     <div class="container">
         <div class="services-padding">
             <div class="row justify-content-md-center">

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