style: added text affects

This commit is contained in:
Nathan Woodburn 2023-02-19 15:55:24 +11:00
parent c90997003d
commit e1bb6b28ce
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
7 changed files with 93 additions and 6 deletions

View File

@ -47,6 +47,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<script src="https://nathan.woodburn/https.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>

View File

@ -41,6 +41,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<script src="https://nathan.woodburn/https.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>

81
assets/js/hacker.js Normal file
View File

@ -0,0 +1,81 @@
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";
let interval = null;
let interval2 = null;
let interval3 = null;
document.querySelector(".hacker").onmouseover = event => {
let iteration = 0;
let old = event.target.innerText;
console.log(old);
clearInterval(interval);
interval = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index) => {
if(index < iteration) {
return old[index];
}
return letters[Math.floor(Math.random() * 41)]
})
.join("");
if(iteration >= old.length){
clearInterval(interval);
}
iteration += 1 / 3;
}, 10);
}
document.querySelector(".hacker2").onmouseover = event => {
let iteration2 = 0;
let old2 = event.target.innerText;
console.log(old2);
clearInterval(interval2);
interval2 = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index2) => {
if(index2 < iteration2) {
return old2[index2];
}
return letters[Math.floor(Math.random() * 41)]
})
.join("");
if(iteration2 >= old2.length){
clearInterval(interval2);
}
iteration2 += 1/3;
}, 10);
}
document.querySelector(".hacker3").onmouseover = event => {
let iteration3 = 0;
let old3 = event.target.innerText;
console.log(old3);
clearInterval(interval3);
interval3 = setInterval(() => {
event.target.innerText = event.target.innerText
.split("")
.map((letter, index3) => {
if(index3 < iteration3) {
return old3[index3];
}
return letters[Math.floor(Math.random() * 41)]
})
.join("");
if(iteration3 >= old3.length){
clearInterval(interval3);
}
iteration3 += 1 / 3;
}, 10);
}

View File

@ -38,6 +38,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<p style="margin-top: 3em;">This key's fingerprint is&nbsp;FBA777D17CAD88B5<br>All commits changing this page have been signed with my PGP key as shown on Keybase&nbsp;<a href="https://keybase.io/nathanwoodburn" target="_blank">https://keybase.io/nathanwoodburn</a></p>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>

View File

@ -42,10 +42,9 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77"><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NNXTCKW"
height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script>
<script src="https://nathan.woodburn/https.js"></script>
<!-- End Google Tag Manager (noscript) -->
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="/#">Nathan.Woodburn/</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="container"><a class="navbar-brand hacker" href="/#">Nathan.Woodburn/</a><button data-bs-toggle="collapse" class="navbar-toggler navbar-toggler-right" data-bs-target="#navbarResponsive" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item nav-link"><a class="nav-link" href="/">Home</a></li>
@ -71,7 +70,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About ME</h2><img src="assets/img/profile.png" width="200px" style="border-radius: 50%;margin-bottom: 35px;">
<p>Hi, I'm Nathan Woodburn and I live in Canberra, Australia.<br>I've been home schooled all the way to Yr 12.<br>I'm currently studying a&nbsp;Bachelor of Engineering.<br>I started a 3D printing service in early 2021.<br>I'm one of the founders of <a href="https://hns.au" target="_blank">Handshake AU</a>. We work to help Handshake adoption in Australia<br>I work for <a href="https://www.namebase.io" target="_blank">Namebase</a>&nbsp;as tech and general support. Namebase is owned by <a href="https://namecheap.com" target="_blank">Namecheap</a>&nbsp;and is an easy way to get a domain on Handshake.<br></p>
<p>Hi, I'm Nathan Woodburn and I live in Canberra, Australia.<br>I've been home schooled all the way to Yr 12.<br>I'm currently studying a&nbsp;Bachelor of Engineering.<br>I started a 3D printing service in early 2021.<br>I'm one of the founders of <a href="https://hns.au" target="_blank">Handshake AU</a>. We work to help Handshake adoption in Australia<br>I work for <a href="https://www.namebase.io" target="_blank">Namebase</a>&nbsp;as tech and general support. Namebase is owned by <a href="https://namecheap.com" target="_blank">Namecheap</a>&nbsp;and is an easy way to get a domain on Handshake.</p>
</div>
</div>
<div class="row">
@ -136,7 +135,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<ul class="list-inline banner-social-buttons">
<li class="list-inline-item">&nbsp;<a class="btn btn-primary btn-lg btn-default" role="button" href="https://paypal.me/nathanwoodburn" style="width: 170px;" target="_blank"><i class="fab fa-paypal fa-fw"></i><span class="network-name">&nbsp; Paypal</span></a></li>
</ul>
<p>HNS:<br><code>hs1qk4sq6mk3kcshp02xgchukv09m38czdnq5qv76w<br></code>BTC:<br><code>bc1qhs94zzcw64qnwq4hvk056rwxwvgrkd7tq7d4xw</code><br>ETH:<br><code>0x6cB4B39bEc23a921C9a20D061Bf17d4640B0d39e</code><br></p>
<p>HNS:<br><code class="hns">hs1qk4sq6mk3kcshp02xgchukv09m38czdnq5qv76w</code><br>BTC:<br><code class="btc">bc1qhs94zzcw64qnwq4hvk056rwxwvgrkd7tq7d4xw</code><br>ETH:<br><code class="eth">0x6cB4B39bEc23a921C9a20D061Bf17d4640B0d39e</code></p>
</div>
</div>
</div>
@ -150,13 +149,15 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
</div>
<div class="row">
<div class="col">
<p>This site is also available on <a href="https://learn.namebase.io/" target="_blank">Handshake</a>&nbsp;at <a href="https://nathan.woodburn" target="_blank">https://nathan.woodburn/</a><br>Copyright ©&nbsp;Nathan Woodburn 2023</p>
<p>This site is also available on <a href="https://learn.namebase.io/" target="_blank">Handshake</a>&nbsp;at <a href="https://nathan.woodburn" target="_blank">https://nathan.woodburn/</a></p>
<p class="hacker2">Copyright ©&nbsp;Nathan Woodburn 2023</p>
</div>
</div>
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>

View File

@ -38,6 +38,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<p style="margin-top: 3em;">This key's fingerprint is&nbsp;203B000478AD0EF1 (or&nbsp;1C7AAF75F5333B3E484940B7203B000478AD0EF1)<br>All commits changing pgp pages have been signed with my PGP key as shown on Keybase&nbsp;<a href="https://keybase.io/nathanwoodburn" target="_blank">https://keybase.io/nathanwoodburn</a></p>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>

View File

@ -101,6 +101,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<script src="https://nathan.woodburn/https.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
</body>
</html>