develop #177
4 changed files with 60 additions and 90 deletions
|
|
@ -24,6 +24,7 @@ module.exports = function (eleventyConfig) {
|
|||
|
||||
eleventyConfig.setUseGitIgnore(false);
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"src/js": "js",
|
||||
"src/img": "img",
|
||||
"src/font": "font",
|
||||
"src/favicon.*": "",
|
||||
|
|
|
|||
107
src/index.html
107
src/index.html
|
|
@ -38,53 +38,58 @@ title: {{site.title}}
|
|||
src="https://umami.sp-codes.de/umami.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="top" class="vh-100">
|
||||
<div class="overlay"></div>
|
||||
<div class="container">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-12 col-lg-8 text-center position-relative">
|
||||
<div class="d-flex flex-column vh-100">
|
||||
<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>
|
||||
<header id="top">
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-12 col-lg-8 text-center position-relative">
|
||||
<div class="d-flex flex-column vh-100">
|
||||
<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>
|
||||
{%- endfor %}
|
||||
</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>
|
||||
<h3>{{site.subtitle}}</h3>
|
||||
<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="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i
|
||||
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>
|
||||
<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">
|
||||
<span class="d-none">Scroll Down</span>
|
||||
</a>
|
||||
</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>
|
||||
<h3>{{site.subtitle}}</h3>
|
||||
<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="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"><i
|
||||
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>
|
||||
<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">
|
||||
<span class="d-none">Scroll Down</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -339,16 +344,6 @@ title: {{site.title}}
|
|||
</div>
|
||||
</footer>
|
||||
<a class="back-top" href="#top">^</a>
|
||||
<script>
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="{{ '/js/main.js' | rev }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
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';
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue