You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

346 lines
19 KiB
HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>ADB</title>
<meta charset="utf-8"/>
<meta content="Alban David Becker" name="author">
<meta content="Alban David Becker" name="publisher">
<meta content="Alban David Becker" name="copyright">
<meta content="Alban David Becker - Media / Programming" name="description">
<meta content="Alban, David, Becker, Media, Photography, Programming, Engineering, Development" name="keywords">
<meta content="Private Homepage" name="page-type">
<meta content="en" http-equiv="content-language">
<meta content="index, follow" name="robots">
<meta content="width=device-width,initial-scale=0.8,maximum-scale=0.8,user-scalable=0" name="viewport">
<style>
@import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
html, body {
font-family: Roboto Mono, monospace;
height: 100%;
width: auto;
margin: 0;
background-color: #1f262b;
}
h1, h2, h3 {
color: #fff;
text-align: center;
}
table {
position: relative;
margin: auto;
width: calc(100% - 2rem);
max-width: 40rem;
background-color: #1f262b;
box-shadow: 3px 3px 10px #333;
border: 2px solid #fff;
border-collapse: separate;
border-spacing: 2px;
border-radius: 0.75rem;
color: #fff;
font-size: 1.2rem;
font-family: "Roboto", regular, sans-serif;
}
tr {
margin: auto;
border: 1px solid #fff;
}
th {
margin: auto;
background-color: #546E7A;
padding: 20px;
border-radius: 8px;
}
td {
margin: auto;
background-color: #37474F;
padding: 10px;
border-radius: 8px;
}
td.left, th.left {
border-radius: 0.5rem 0 0 0.5rem;
}
td.right, th.right {
border-radius: 0 0.5rem 0.5rem 0;
}
td.mid, th.mid {
border-radius: 0 0 0 0;
}
.footer {
margin: 5rem 0 1rem 1rem;
bottom: 5px;
word-break: break-word;
font-size: 1em;
color: #fafafa;
}
.logo-img {
fill: #fafafa;
}
.matrix {
font-family: Helvetica, monospace;
display: inline-block;
height: 50px;
padding-bottom: 10px;
}
.social_icons {
position: absolute;
top: 10rem;
user-select: none;
width: 90%;
left: 5%;
}
.social_icons > div {
position: relative;
display: inline-block;
height: min-content;
cursor: pointer;
}
a {
color: inherit;
text-decoration: none;
}
.top {
height: 100%;
}
.social {
position: sticky;
font-size: 3em;
color: #fafafa;
height: 20rem;
width: 100%;
top: calc(50% - 10rem);
text-align: center;
}
.logo-img {
fill: #fafafa;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="top">
<div class="social">
<div class="text">
<noscript>Please activate JavaScript to see the text animation. There are no trackers on this site! :)
</noscript>
</div>
<div class="social_icons">
<div onclick="location.href='https://github.com/adb-sh/'">
<svg class="logo-img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m256 0c-140.699219 0-256 116.300781-256 257 0 139.882812 114.25 255 256 255 141.574219 0 256-114.945312 256-255 0-140.699219-115.300781-257-256-257zm45 477.5c-14.398438 3-29.699219 4.5-45 4.5s-30.601562-1.5-45-4.5v-70.199219c0-16.800781 4.5-22.800781 10.5-30.902343 3.054688-3.492188 4.898438-6.625 18.597656-27.296876l-23.097656-3.601562c-59.402344-8.699219-82.800781-39.601562-92.101562-63.601562-12-32.097657-5.699219-72.300782 15.902343-97.796876 3.300781-3.902343 6-10.503906 3.601563-17.402343-4.503906-13.800781-3.902344-35.699219-.902344-44.101563 15.90625 2.273438 32.261719 13.667969 45.902344 21.902344 6.285156 3.667969 9.582031 2.699219 12.597656 3 10.960938-2.28125 28.058594-7.800781 54.300781-7.800781 16.199219 0 33.300781 2.398437 50.101563 7.199219 3.003906-.070313 7.832031 2.484374 16.199218-2.398438 14.257813-8.6875 30.058594-19.691406 45.898438-21.902344 3 8.402344 3.601562 30.300782-.898438 44.101563-2.402343 6.898437.296876 13.5 3.601563 17.402343 21.597656 25.5 27.898437 65.699219 15.898437 97.796876-9.300781 24-32.699218 54.902343-92.101562 63.601562l-23.097656 3.601562c14.160156 21.367188 15.652344 23.929688 18.601562 27.296876 5.996094 8.101562 10.496094 14.101562 10.496094 30.902343zm30-8.699219v-61.5c0-17.101562-3.601562-28.5-8.402344-36.902343 45.601563-12.296876 78.003906-39.300782 92.402344-78 15.300781-40.796876 8.402344-89.398438-17.101562-123 4.503906-20.097657 4.503906-52.199219-6.296876-67.199219-4.800781-6.597657-11.402343-10.199219-19.800781-10.199219-.300781 0-.300781 0-.300781 0-23.261719 1.257812-41.570312 12.972656-61.199219 24.898438-18-4.800782-36.300781-7.199219-54.601562-7.199219-18.597657 0-37.199219 2.699219-53.695313 7.199219-20.664062-12.460938-38.796875-23.671876-62.703125-24.898438-7.5 0-14.101562 3.601562-18.902343 10.199219-10.796876 15-10.796876 47.101562-6.296876 67.199219-25.503906 33.601562-32.402343 82.5-17.101562 123 14.398438 38.699218 46.800781 65.703124 92.402344 78-3.722656 6.511718-6.667969 14.914062-7.828125 26.285156-9.210938 3.175781-17.199219 4.210937-24.628907 2.027344-7.835937-2.316407-13.941406-7.546876-19.246093-16.46875-11.914063-20.015626-32.207031-36.355469-55.3125-34.230469l2.636719 29.882812c10.699218-.980469 21.347656 10.339844 26.878906 19.671875 9.125 15.367188 21.417968 25.445313 36.546875 29.914063 11.230469 3.308593 21.496093 3.230469 32.550781.871093v40.449219c-87.300781-30.601562-151-114-151-211.800781 0-124.199219 101.800781-227 226-227s226 102.800781 226 227c0 97.800781-63.699219 181.199219-151 211.800781zm0 0"/>
</svg>
</div>
<div onclick="location.href='https://git.adb.sh/adb/'">
<svg class="logo-img" viewBox="0 0 919 919" xmlns="http://www.w3.org/2000/svg">
<path d="M 901.543,500.352 500.352,901.527 c -23.094,23.11 -60.567,23.11 -83.692,0 L 333.359,818.211 439.031,712.535 c 24.563,8.293 52.727,2.727 72.297,-16.847 19.688,-19.696 25.203,-48.102 16.699,-72.75 L 629.883,521.094 c 24.648,8.496 53.066,3.004 72.754,-16.711 27.5,-27.492 27.5,-72.059 0,-99.574 -27.52,-27.516 -72.078,-27.516 -99.61,0 -20.683,20.703 -25.8,51.097 -15.312,76.582 l -95,94.992 V 326.414 c 6.699,-3.32 13.027,-7.742 18.613,-13.312 27.5,-27.497 27.5,-72.059 0,-99.598 -27.5,-27.488 -72.09,-27.488 -99.57,0 -27.5,27.539 -27.5,72.101 0,99.598 6.797,6.789 14.668,11.925 23.066,15.363 v 252.281 c -8.398,3.438 -16.25,8.531 -23.066,15.367 -20.828,20.821 -25.84,51.395 -15.156,76.977 L 292.422,777.285 17.3242,502.211 c -23.10545,-23.129 -23.10545,-60.602 0,-83.711 L 418.535,17.3242 c 23.098,-23.10545 60.559,-23.10545 83.692,0 L 901.543,416.641 c 23.113,23.113 23.113,60.605 0,83.711"
transform="scale(1,-1) translate(0, -919)"/>
</svg>
</div>
<div onclick="location.href='https://social.adb.sh/@adb'">
<svg class="logo-img" viewBox="0 0 256 256">
<path d="M 115.05664 0 C 83.417974 0.25866667 52.984047 3.6847447 35.248047 11.830078 C 35.248047 11.830078 0.072265625 27.564666 0.072265625 81.25 C 0.072265625 93.543333 -0.16667709 108.24208 0.22265625 123.83008 C 1.4999896 176.33141 9.8473382 228.07387 58.388672 240.92188 C 80.770005 246.84588 99.986891 248.08699 115.46289 247.23633 C 143.52822 245.68033 159.2832 237.2207 159.2832 237.2207 L 158.35742 216.85742 C 158.35742 216.85742 138.30134 223.18082 115.77734 222.41016 C 93.461344 221.64482 69.902302 220.00414 66.292969 192.60547 C 65.959635 190.1988 65.792969 187.62454 65.792969 184.92188 C 65.792969 184.92187 87.700224 190.27683 115.46289 191.54883 C 132.43889 192.32749 148.35801 190.55433 164.52734 188.625 C 195.53534 184.92233 222.5344 165.81671 225.92773 148.35938 C 231.2744 120.85937 230.83398 81.25 230.83398 81.25 C 230.83398 27.564666 195.66016 11.830078 195.66016 11.830078 C 177.92549 3.6847447 147.47265 0.25866667 115.83398 0 L 115.05664 0 z M 79.25 41.947266 C 92.428667 41.947266 102.40719 47.012531 109.00586 57.144531 L 115.42188 67.898438 L 121.83789 57.144531 C 128.43522 47.012531 138.41375 41.947266 151.59375 41.947266 C 162.98308 41.947266 172.15997 45.951052 179.16797 53.761719 C 185.9613 61.572385 189.34375 72.130682 189.34375 85.416016 L 189.34375 150.41992 L 163.58984 150.41992 L 163.58984 87.326172 C 163.58984 74.026172 157.99411 67.275391 146.80078 67.275391 C 134.42478 67.275391 128.22266 75.282521 128.22266 91.117188 L 128.22266 125.65234 L 102.62109 125.65234 L 102.62109 91.117188 C 102.62109 75.282521 96.417016 67.275391 84.041016 67.275391 C 72.847682 67.275391 67.251953 74.026172 67.251953 87.326172 L 67.251953 150.41992 L 41.498047 150.41992 L 41.498047 85.416016 C 41.498047 72.130682 44.881115 61.572385 51.675781 53.761719 C 58.682448 45.951052 67.859333 41.947266 79.25 41.947266"/>
</svg>
</div>
<div onclick="location.href='https://matrix.to/#/@adb:adb.sh'">
<svg class="logo-img" style="width: 60px" viewBox="0 0 210 190">
<path d="M 8.1424685,29.681081 H 41.347757 v 13.758366 h -15.34587 v 96.903883 h 15.34587 v 13.82451 H 8.1424685 Z"/>
<path d="m 134.15059,54.419682 q 4.76251,0 9.39273,1.852088 4.63022,1.852088 8.40054,6.482307 3.04272,3.770322 4.10105,9.26044 0.66146,3.638029 0.66146,10.649505 l -0.13229,45.442298 H 137.25945 V 82.201 q 0,-4.101052 -1.32292,-6.746892 -2.51355,-5.027095 -9.26044,-5.027095 -7.80523,0 -10.7818,6.482307 -1.52135,3.439592 -1.52135,8.268249 V 128.10632 H 95.389035 V 85.177569 q 0,-6.416161 -1.32292,-9.326585 -2.381256,-5.225533 -9.326585,-5.225533 -8.069811,0 -10.847943,5.225533 -1.521358,2.97657 -1.521358,8.863563 V 128.10632 H 53.254037 V 56.139478 h 18.32244 v 10.517213 q 3.505738,-5.622409 6.6146,-8.003665 5.490117,-4.233344 14.221388,-4.233344 8.268245,0 13.361495,3.63803 4.10105,3.373446 6.21772,8.665125 3.70418,-6.350015 9.19429,-9.326585 5.82085,-2.97657 12.96462,-2.97657 z"/>
<path d="m 168.34806,140.34333 h 15.34587 V 43.174863 H 168.34806 V 29.681081 h 33.20529 V 154.16784 h -33.20529 z"/>
</svg>
</div>
<div onclick="location.href='https://www.instagram.com/alban.da'">
<svg class="logo-img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m75 512h362c41.355469 0 75-33.644531 75-75v-362c0-41.355469-33.644531-75-75-75h-362c-41.355469 0-75 33.644531-75 75v362c0 41.355469 33.644531 75 75 75zm-45-437c0-24.8125 20.1875-45 45-45h362c24.8125 0 45 20.1875 45 45v362c0 24.8125-20.1875 45-45 45h-362c-24.8125 0-45-20.1875-45-45zm0 0"/>
<path d="m256 391c74.4375 0 135-60.5625 135-135s-60.5625-135-135-135-135 60.5625-135 135 60.5625 135 135 135zm0-240c57.898438 0 105 47.101562 105 105s-47.101562 105-105 105-105-47.101562-105-105 47.101562-105 105-105zm0 0"/>
<path d="m406 151c24.8125 0 45-20.1875 45-45s-20.1875-45-45-45-45 20.1875-45 45 20.1875 45 45 45zm0-60c8.269531 0 15 6.730469 15 15s-6.730469 15-15 15-15-6.730469-15-15 6.730469-15 15-15zm0 0"/>
</svg>
</div>
<div onclick="location.href='https://open.spotify.com/user/op3q884heqao7laioz05ebaoz'">
<svg class="logo-img" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m256 0c-140.960938 0-256 115.050781-256 256 0 140.960938 115.050781 256 256 256 140.960938 0 256-115.050781 256-256 0-140.960938-115.050781-256-256-256zm0 482c-124.617188 0-226-101.382812-226-226s101.382812-226 226-226 226 101.382812 226 226-101.382812 226-226 226zm0 0"/>
<path d="m99.066406 148.667969 5.195313 29.546875c109.394531-19.234375 220.378906-4.640625 317.398437 37.136718l11.863282-27.550781c-102.253907-44.035156-219.179688-59.402343-334.457032-39.132812zm0 0"/>
<path d="m103.832031 239.34375-.765625.152344 5.890625 29.417968.757813-.152343c95.839844-19.128907 197.550781-7.15625 286.394531 33.710937l12.535156-27.253906c-94.550781-43.496094-202.796875-56.238281-304.8125-35.875zm0 0"/>
<path d="m129.703125 326.050781 5.277344 29.53125c73.082031-13.058593 147.707031-4.347656 215.808593 25.203125l11.941407-27.523437c-73.539063-31.902344-154.121094-41.3125-233.027344-27.210938zm0 0"/>
</svg>
</div>
<div onclick="location.href='https://soundcloud.com/alban-david-becker'">
<svg class="logo-img" viewBox="0 -121 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="m180 0h30v270h-30zm0 0"/>
<path d="m120 90h30v180h-30zm0 0"/>
<path d="m60 60h30v210h-30zm0 0"/>
<path d="m0 150h30v120h-30zm0 0"/>
<path d="m512 180c0-49.625-40.375-90-90-90-2.542969 0-5.082031.105469-7.605469.320312-18.867187-53.082031-71.167969-90.320312-129.394531-90.320312-11.421875 0-22.773438 1.429688-33.738281 4.253906l-11.261719 2.898438v262.847656h182c49.625 0 90-40.375 90-90zm-242-148.9375c4.949219-.707031 9.964844-1.0625 15-1.0625 49.285156 0 93.097656 33.933594 104.175781 80.6875l3.5 14.773438c11.894531-2.664063 18.164063-5.460938 29.324219-5.460938 33.085938 0 60 26.914062 60 60s-26.914062 60-60 60h-152zm0 0"/>
</svg>
</div>
<div onclick="location.href='https://t.me/ADBac'">
<svg class="logo-img" viewBox="1 -35 511.99993 511" xmlns="http://www.w3.org/2000/svg">
<path d="m121.453125 253.171875 63.554687 158.886719 82.75-82.753906 141.535157 112.503906 102.707031-441.308594-512 205.480469zm-39.933594-47.640625 244.046875-97.945312-194.074218 117.363281zm287.535157-89.25-161.980469 148.1875-19.484375 73.425781-36.035156-90.085937zm-149.851563 219.230469 9.816406-36.996094 15.144531 12.035156zm171.65625 53.394531-147.386719-117.152344 221.902344-203.007812zm0 0"/>
</svg>
</div>
</div>
</div>
</div>
<h1>services I'm hosting:</h1>
<table>
<tr>
<th class="left">service</th>
<th class="right">url</th>
</tr>
<tr>
<td class="left">git</td>
<td class="right"><a href="https://git.adb.sh">git.adb.sh</a></td>
</tr>
<tr>
<td class="left">Nextcloud</td>
<td class="right"><a href="https://cloud.adb.sh">cloud.adb.sh</a></td>
</tr>
<tr>
<td class="left">Matrix</td>
<td class="right"><a href="https://chat.adb.sh">chat.adb.sh</a></td>
</tr>
<tr>
<td class="left">Element</td>
<td class="right"><a href="https://element.adb.sh">element.adb.sh</a></td>
</tr>
<tr>
<td class="left">Mastodon</td>
<td class="right"><a href="https://social.adb.sh">social.adb.sh</a></td>
</tr>
<tr>
<td class="left">email</td>
<td class="right"><a href="https://mail.adb.sh">mail.adb.sh</a></td>
</tr>
<tr>
<td class="left">Jitsi</td>
<td class="right"><a href="https://meet.adb.sh">meet.adb.sh</a></td>
</tr>
<tr>
<td class="left">Etherpad</td>
<td class="right"><a href="https://ether.adb.sh">ether.adb.sh</a></td>
</tr>
<tr>
<td class="left">short url</td>
<td class="right"><a href="https://s.adb.sh">s.adb.sh</a></td>
</tr>
<tr>
<td class="left">searx</td>
<td class="right"><a href="https://searx.adb.sh">searx.adb.sh</a></td>
</tr>
</table>
<div class="footer">
<div>&copy; 2020 Alban David Becker</div>
<div>some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by
<a href="http://creativecommons.org/licenses/by/3.0/" target="_blank" title="Creative Commons BY 3.0">CC 3.0
BY</a>
</div>
<a href="http://bpzvci77gdvrn4grh2slh5dmz5lxrzmg7nkij7ltxht4gv4weamc4dad.onion">
more privacy?: http://bpzvci77gdvrn4grh2slh5dmz5lxrzmg7nkij7ltxht4gv4weamc4dad.onion
</a>
</div>
<script>
// TextScramble
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!<>-_\\/[]{}—=+*^?#________'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({from, to, start, end})
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let {from, to, start, end, char} = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
const phrases = [
"Hey!",
"That's my page!",
"if you like", "check out", "my social media", "below :D"
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 600)
})
counter = (counter + 1) % phrases.length
}
next()
</script>
</body>
</html>