main: Added new parallax home background

This commit is contained in:
Nathan Woodburn 2023-05-12 15:18:05 +10:00
parent 150b96c98a
commit a739704fbb
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
57 changed files with 99 additions and 86 deletions

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en-au" style="background: url(&quot;assets/img/intro-bg.jpg&quot;) bottom / cover no-repeat, black;">
<html lang="en-au" style="background: url(&quot;assets/img/intro-bg.webp&quot;) bottom / cover no-repeat, black;">
<head>
<meta charset="utf-8">
@ -36,22 +36,21 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/css/fixes.css">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/fixes.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
</head>
<body class="about-body" style="text-align: center;color: rgb(255,255,255);background: transparent;"><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script>
<script src="https://nathan.woodburn/https.js"></script>
<div class="profile-container" style="margin-bottom: 2em;margin-top: 5em;"><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;"><img class="profile foreground" src="assets/img/pfront.png"></div>
<div class="profile-container" style="margin-bottom: 2em;margin-top: 5em;"><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;"><img class="profile foreground" src="assets/img/pfront.webp"></div>
<h1 class="nathanwoodburn" style="margin-bottom: 0.5em;">Nathan.Woodburn/</h1>
<div class="social-icons" style="background: rgba(255,255,255,0);color: rgb(255,255,255);padding: 0px;"><a href="https://www.facebook.com/nathanjwoodburn" target="_blank"><i class="icon ion-social-facebook facebook social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a><a target="_blank" href="https://twitter.com/woodburn_nathan"><i class="icon ion-social-twitter twitter social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a><a href="https://www.linkedin.com/in/nathanwoodburn/" target="_blank"><i class="icon ion-social-linkedin linkedin social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a><a href="https://github.com/Nathanwoodburn" target="_blank"><i class="icon ion-social-github github social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a><a href="mailto:contact@nathan.woodburn.au" target="_blank"><i class="icon ion-email email social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a><a href="https://keybase.io/nathanwoodburn" target="_blank"><i class="fab fa-keybase keybase social-icons-hidden" style="border-color: #ffffff;color: rgb(255,255,255);font-size: 35px;margin-top: 0.5em;margin-bottom: 0.5em;"></i></a></div>
<p style="margin-top: 1em;">Hi, I am Nathan Woodburn and I live in Canberra<br>I am currently studying at the Australian National University<br>I enjoy 3D printing and CAD<br>I code stuff with C#, Linux Bash<br>I can code in a ton of other languages with Google's help<br>I'm a co-founder of <a href="https://hns.au" target="_blank">Handshake Australia</a><br>I currently work for <a href="https://learn.namebase.io" target="_blank">Namebase</a><br><br></p><i class="fas fa-arrow-down" style="font-size: 50px;" onclick="slideout()"></i>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/about.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/about.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

View File

@ -34,8 +34,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
</head>
<body>
@ -44,9 +44,10 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script>
<script src="https://nathan.woodburn/https.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/app.min.js"></script>
<script src="assets/js/gsap.min.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

1
assets/css/Footer-Dark-icons.min.css vendored Normal file
View File

@ -0,0 +1 @@
.bs-icon{--bs-icon-size:.75rem;display:flex;flex-shrink:0;justify-content:center;align-items:center;font-size:var(--bs-icon-size);width:calc(var(--bs-icon-size) * 2);height:calc(var(--bs-icon-size) * 2);color:var(--bs-primary)}.bs-icon-xs{--bs-icon-size:1rem;width:calc(var(--bs-icon-size) * 1.5);height:calc(var(--bs-icon-size) * 1.5)}.bs-icon-sm{--bs-icon-size:1rem}.bs-icon-md{--bs-icon-size:1.5rem}.bs-icon-lg{--bs-icon-size:2rem}.bs-icon-xl{--bs-icon-size:2.5rem}.bs-icon.bs-icon-primary{color:var(--bs-white);background:var(--bs-primary)}.bs-icon.bs-icon-primary-light{color:var(--bs-primary);background:rgba(var(--bs-primary-rgb),.2)}.bs-icon.bs-icon-semi-white{color:var(--bs-primary);background:rgba(255,255,255,.5)}.bs-icon.bs-icon-rounded{border-radius:.5rem}.bs-icon.bs-icon-circle{border-radius:50%}

1
assets/css/GridSystem-1.min.css vendored Normal file
View File

@ -0,0 +1 @@
.text2-center{text-align:center;margin:1.25rem 0;border-top:1px solid #dadada;padding:1.25rem 0}.text-center1{text-align:center;margin:1.25rem 0;border-bottom:1px solid #dadada;padding:1.25rem 0}.col-md-3{margin:1.25rem 0}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.rounded{border-radius:.25rem!important}.border{border:0!important}h1,h2{color:#2c3134}.btn:hover{color:#000!important;background-color:#fff!important}

1
assets/css/animate.min.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
assets/css/fixes.min.css vendored Normal file
View File

@ -0,0 +1 @@
body.about-body{position:absolute;top:0;transition:2s;height:101%}::-webkit-scrollbar{display:none}

1
assets/css/index.min.css vendored Normal file
View File

@ -0,0 +1 @@
img.no-drag{pointer-events:none}

1
assets/css/parallax.min.css vendored Normal file
View File

@ -0,0 +1 @@
.main{position:relative;height:100vh;width:99vw;overflow:hidden}.parallax{pointer-events:none;transition:none}.bg-img{position:absolute;width:194.44%;top:1.86%;left:50.69%;z-index:1}.fog-7{position:absolute;z-index:2;top:37.7%;left:70.8%;width:132%}.mountain-10{position:absolute;z-index:3;top:63.58%;width:71.52%;left:67.84%}.fog-6{position:absolute;z-index:4;top:62.09%;left:50.4%;width:129.3%}.mountain-9{position:absolute;z-index:5;top:63.95%;width:32.63%;left:18.3%}.mountain-8{position:absolute;z-index:6;top:60.6%;width:56.25%;left:36%}.fog-5{position:absolute;z-index:7;top:69.7%;left:51.3%;width:31.25%}.mountain-7{position:absolute;z-index:8;width:37.36%;top:65.18%;left:71.18%}.text{position:absolute;z-index:9;top:34%;left:50%;text-align:center;text-transform:uppercase;color:#fff;pointer-events:auto}.text .para1{font-weight:100;line-height:.88}.text .para2{font-weight:800}.mountain-6{position:absolute;z-index:10;top:57.4%;width:28.33%;left:90.97%}.fog-4{position:absolute;z-index:11;top:77.7%;left:45.84%;width:40.27%}.mountain-5{position:absolute;z-index:12;top:80.86%;width:43.4%;left:59%}.fog-3{position:absolute;z-index:13;top:63.58%;left:48.27%;width:107.63%}.mountain-4{position:absolute;z-index:14;top:74.19%;width:54.16%;left:23.55%}.mountain-3{position:absolute;z-index:15;top:61.35%;left:101.11%;width:32.22%}.fog-2{position:absolute;z-index:16;top:68.14%;left:48%;width:108.33%}.mountain-2{position:absolute;z-index:17;top:69.01%;left:78.61%;width:47.91%}.mountain-1{position:absolute;z-index:18;top:52%;left:8.27%;width:37.15%}.sun-rays{position:absolute;z-index:19;top:0;right:0;width:41.31%;pointer-events:none}.black-shadow{position:absolute;z-index:20;bottom:0;right:0;pointer-events:none;width:100%}.fog-1{position:absolute;z-index:21;top:59.26%;left:50.69%;width:111.8%}.vignette{position:absolute;z-index:100;width:100%;height:100%;top:0;left:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 65%,rgba(0,0,0,.7));pointer-events:none}@media (max-width:1100px){.text h1{font-size:5.8rem}.text h2{font-size:4.7rem}}@media (max-width:725px){.text h1{font-size:5rem;line-height:1.1}.text h2{font-size:4.1rem;line-height:1.1}header nav{padding:0 1rem}.logo{width:75px}header ul a{font-size:.73rem;padding:0 .9rem}.search a{font-size:.85rem;padding:0 1.8rem}.hamburger{padding-left:.9rem}.hamburger a{height:30px;width:30px}.bg-img{width:initial;height:208.1%}.fog-7{width:initial;height:146.17%}.mountain-10{width:initial;height:77.59%}.fog-6{width:initial;height:73.11%}.mountain-9{height:87.64%;width:initial}.mountain-8{height:84.33%;width:initial}.fog-5{width:initial;height:54.16%}.mountain-7{width:initial;height:72.26%}.mountain-6{width:initial;height:56.78%}.fog-4{width:initial;height:104.5%}.mountain-5{width:initial;height:60.64%}.fog-3{width:initial;height:90.78%}.mountain-4{width:initial;height:71.42%}.mountain-3{width:initial;height:96.86%}.fog-2{width:initial;height:84.73%}.mountain-2{display:none}.mountain-1{width:initial;height:100.03%}.fog-1{width:initial;height:89.86%}}@media (max-width:520px){.text h1{font-size:3.3rem}.text h2{font-size:2.6rem}}

1
assets/css/podcast.min.css vendored Normal file
View File

@ -0,0 +1 @@
.hide_underline{text-decoration:none}.invert{filter:invert(1)}@media screen and (max-width:800px){.masthead{padding-top:0!important}}@media screen and (max-width:450px){img.navicon{width:100%}#navbar{padding-left:0!important}}

1
assets/css/profile.min.css vendored Normal file
View File

@ -0,0 +1 @@
.profile-container{height:300px}img.profile{width:300px;position:absolute;left:50%;margin-left:-150px;aspect-ratio:1;padding-top:calc(var(--s)/5);transform:scale(1);transition:.5s}img.foreground{border-radius:50%;pointer-events:none}img.background:hover{filter:blur(5px)}

1
assets/css/resume.min.css vendored Normal file
View File

@ -0,0 +1 @@
.profile-container{height:170px;width:170px;z-index:2;left:10%}.title{position:absolute;margin-left:calc(100px);width:calc(100% - 100px);padding:1em;margin-top:-225px;z-index:0}.title>*{width:100%;margin-bottom:0}img.profile{left:10px;width:150px;position:absolute;aspect-ratio:1;transform:scale(1);transition:.5s;z-index:2}img.background2{left:0;width:170px!important;margin-top:-10px;pointer-events:none;z-index:1}img.foreground{border-radius:50%;pointer-events:none;z-index:3}img.background:hover,img.backgroundsml:hover{filter:blur(5px)}.spacer{height:100px}img.profilesml{width:150px;position:absolute;left:50%;margin-left:-75px;aspect-ratio:1;padding-top:calc(var(--s)/5);transform:scale(1);transition:.5s}img.foregroundsml{border-radius:50%;pointer-events:none}img.background2sml{width:170px!important;left:calc(50% - 10px);margin-top:-10px;pointer-events:none;z-index:0}@media print{div{color:#000!important}.noprintbreak{page-break-inside:avoid}.edu-main{page-break-before:always}}

1
assets/css/styles.min.css vendored Normal file
View File

@ -0,0 +1 @@
.social-icons{color:#313437;background-color:#fff;padding:70px 0}@media (max-width:767px){.social-icons{padding:50px 0}}@media (max-width:500px){img.profile{width:200px;margin-left:-100px}.profile-container{height:200px;margin-top:2em!important}}.social-icons i{color:#757980;margin:0 10px;width:60px;height:60px;border:1px solid #c8ced7;text-align:center;border-radius:50%;line-height:60px;display:inline-block}

BIN
assets/img/HNSAU_white.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 264 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 521 KiB

BIN
assets/img/bg/fog_1.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 822 KiB

BIN
assets/img/bg/fog_2.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 554 KiB

BIN
assets/img/bg/fog_3.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 KiB

BIN
assets/img/bg/fog_4.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

BIN
assets/img/bg/fog_5.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

BIN
assets/img/bg/fog_6.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 847 KiB

BIN
assets/img/bg/fog_7.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 396 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 406 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 192 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 298 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

BIN
assets/img/bg/sun_rays.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
assets/img/intro-bg.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/img/links-bg.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

BIN
assets/img/orange.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 B

BIN
assets/img/pfront.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/img/woodburn.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

1
assets/js/about.min.js vendored Normal file
View File

@ -0,0 +1 @@
function slideout(){bodydiv=document.querySelector("body"),bodydiv.style.top="-100%",setTimeout((function(){window.location.href="/#about",bodydiv.style.top="0px"}),1e3)}function scroll(){(window.innerWidth>0?window.innerWidth:document.documentElement.clientWidth)>1024&&slideout()}document.addEventListener("scroll",scroll);

1
assets/js/app.min.js vendored Normal file
View File

@ -0,0 +1 @@
const parallax_el=document.querySelectorAll(".parallax"),main=document.querySelector(".main");let xValue=0,yValue=0,rotateDegree=0;function update(e){parallax_el.forEach((t=>{let a=t.dataset.speedx,i=t.dataset.speedy,n=t.dataset.speedz,r=t.dataset.rotation,l=parseFloat(getComputedStyle(t).left)<window.innerWidth/2?1:-1,o=(e-parseFloat(getComputedStyle(t).left))*l*.1;t.style.transform=`perspective(2300px) translateZ(${o*n}px) rotateY(${rotateDegree*r}deg) translateX(calc(-50% + ${-xValue*a}px)) translateY(calc(-50% + ${yValue*i}px))`}))}update(0),window.addEventListener("mousemove",(e=>{timeline.isActive()||(xValue=e.clientX-window.innerWidth/2,yValue=e.clientY-window.innerHeight/2,rotateDegree=xValue/(window.innerWidth/2)*20,update(e.clientX))})),window.innerWidth>=725?main.style.maxHeight=.6*window.innerWidth+"px":main.style.maxHeight=1.6*window.innerWidth+"px";let timeline=gsap.timeline();setTimeout((()=>{parallax_el.forEach((e=>{e.style.transition="0.45s cubic-bezier(0.2, 0.49, 0.32, 0.99)"}))}),1e3*timeline.endTime()),Array.from(parallax_el).filter((e=>!e.classList.contains("text"))).forEach((e=>{timeline.from(e,{top:e.offsetHeight/2+ +e.dataset.distance+"px",duration:3.5,ease:"power3.out"},"1")})),timeline.from(".text .para2",{y:window.innerHeight-document.querySelector(".text .para1").getBoundingClientRect().top+200,duration:2},"2.5").from(".text .para1",{y:-150,opacity:0,duration:1.5},"3").from(".hide",{opacity:0,duration:1.5},"3");

9
assets/js/gsap.min.min.js vendored Normal file

File diff suppressed because one or more lines are too long

1
assets/js/hacker-podcast.min.js vendored Normal file
View File

@ -0,0 +1 @@
const letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";let interval=null,interval2=null,interval3=null;document.querySelector(".copyright").onmouseover=t=>{let e=0,l="Copyright © Nathan Woodburn 2023";clearInterval(interval2),interval2=setInterval((()=>{t.target.innerText=t.target.innerText.split("").map(((t,r)=>r<e?l[r]:letters[Math.floor(41*Math.random())])).join(""),e>=l.length&&clearInterval(interval2),e+=1/3}),10)};

1
assets/js/hacker.min.js vendored Normal file
View File

@ -0,0 +1 @@
const letters="ABCDEFGHIJKLMNOPQRSTUVWXYZ/.?!@#$%^&*()_+";let interval=null,interval2=null,interval3=null;window.onload=t=>{target=document.querySelector(".nathanwoodburn");let e=0,n="NATHAN.WOODBURN/";clearInterval(interval),interval=setInterval((()=>{target.innerText=target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval),e+=1/3}),30)},document.querySelector(".copyright").onmouseover=t=>{let e=0,n="Copyright © Nathan Woodburn 2023";console.log(n),clearInterval(interval2),interval2=setInterval((()=>{t.target.innerText=t.target.innerText.split("").map(((t,r)=>r<e?n[r]:letters[Math.floor(41*Math.random())])).join(""),e>=n.length&&clearInterval(interval2),e+=1/3}),10)};

1
assets/js/script.min.js vendored Normal file
View File

@ -0,0 +1 @@
window.innerWidth<768&&[].slice.call(document.querySelectorAll("[data-bss-disabled-mobile]")).forEach((function(e){e.classList.remove("animated"),e.removeAttribute("data-bss-hover-animate"),e.removeAttribute("data-aos"),e.removeAttribute("data-bss-parallax-bg"),e.removeAttribute("data-bss-scroll-zoom")})),document.addEventListener("DOMContentLoaded",(function(){[].slice.call(document.querySelectorAll("[data-bss-hover-animate]")).forEach((function(e){e.addEventListener("mouseenter",(function(e){e.target.classList.add("animated",e.target.dataset.bssHoverAnimate)})),e.addEventListener("mouseleave",(function(e){e.target.classList.remove("animated",e.target.dataset.bssHoverAnimate)}))}))}),!1),function(){"use strict";var e=document.querySelector("#mainNav");if(e){var t=e.querySelector(".navbar-collapse");if(t){var a=new bootstrap.Collapse(t,{toggle:!1}),o=t.querySelectorAll("a");for(var n of o)n.addEventListener("click",(function(e){a.hide()}))}var r=function(){(void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop)>100?e.classList.add("navbar-shrink"):e.classList.remove("navbar-shrink")};r(),document.addEventListener("scroll",r)}}();

View File

@ -34,8 +34,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
</head>
<body style="text-align: center;">
@ -47,9 +47,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div>
<p style="margin-top: 3em;">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/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

View File

@ -38,45 +38,41 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/index.css">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/index.min.css">
<link rel="stylesheet" href="assets/css/parallax.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
<link rel="canonical" href="https://nathan.woodburn.au" />
</head>
<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) --> <script src="assets/js/gsap.min.js"></script>
<script src="assets/js/app.js" defer></script>
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand nathanwoodburn" 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 nathanwoodburn" href="/#" style="color: rgb(0,0,0);">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>
<li class="nav-item nav-link"><a class="nav-link" href="projects">Projects</a></li>
<li class="nav-item nav-link"><a class="nav-link" href="/" style="color: rgb(0,0,0);">Home</a></li>
<li class="nav-item nav-link"><a class="nav-link" href="projects" style="color: rgb(0,0,0);">Projects</a></li>
</ul>
</div>
</div>
</nav>
<header class="masthead" style="background: url(&quot;assets/img/intro-bg.jpg&quot;) bottom / cover no-repeat;">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h1 class="brand-heading">Nathan<br>Woodburn</h1>
<p class="intro-text">About Me</p><a class="btn btn-link btn-circle" role="button" href="#about" aria-label="Go to about"><i class="fa fa-angle-double-down animated"></i></a>
</div>
</div>
</div>
<header class="masthead main">
<div class="intro-body text parallax" data-speedx="0.07" data-speedy="0.07" data-speedz="0" data-rotation="0.11">
<h1 class="brand-heading para1">Nathan<br>Woodburn</h1>
<h3 class="para2">G'DAY, WELCOME TO MY Personal WEBSITE</h3>
</div>
<div class="vignette hide"></div><img class="parallax bg-img" src="assets/img/bg/background.webp" data-speedx="0.3" data-speedy="0.38" data-speedz="0" data-rotation="0" data-distance="-200"><img class="parallax fog-7" src="assets/img/bg/fog_7.webp" data-speedx="0.27" data-speedy="0.32" data-speedz="0" data-rotation="0" data-distance="850"><img class="parallax mountain-10" src="assets/img/bg/mountain_10.webp" data-speedx="0.195" data-speedy="0.305" data-speedz="0" data-rotation="0" data-distance="1100"><img class="parallax fog-6" src="assets/img/bg/fog_6.webp" data-speedx="0.25" data-speedy="0.28" data-speedz="0" data-rotation="0" data-distance="1400"><img class="parallax mountain-9" src="assets/img/bg/mountain_9.webp" data-speedx="0.125" data-speedy="0.155" data-speedz="0.15" data-rotation="0.02" data-distance="1700"><img class="parallax mountain-8" src="assets/img/bg/mountain_8.webp" data-speedx="0.1" data-speedy="0.11" data-speedz="0" data-rotation="0.02" data-distance="1800"><img class="parallax fog-5" src="assets/img/bg/fog_5.webp" data-speedx="0.16" data-speedy="0.105" data-speedz="0" data-rotation="0" data-distance="1900"><img class="parallax mountain-7" src="assets/img/bg/mountain_7.webp" data-speedx="0.1" data-speedy="0.1" data-speedz="0" data-rotation="0.09" data-distance="2000"><img class="parallax mountain-6" src="assets/img/bg/mountain_6.webp" data-speedx="0.065" data-speedy="0.05" data-speedz="0.05" data-rotation="0.12" data-distance="2300"><img class="parallax fog-4" src="assets/img/bg/fog_4.webp" data-speedx="0.135" data-speedy="0.04" data-speedz="0" data-rotation="0" data-distance="2400"><img class="parallax mountain-5" src="assets/img/bg/mountain_5.webp" data-speedx="0.08" data-speedy="0.03" data-speedz="0.13" data-rotation="0.1" data-distance="2550"><img class="parallax fog-3" src="assets/img/bg/fog_3.webp" data-speedx="0.11" data-speedy="0.018" data-speedz="0" data-rotation="0" data-distance="2800"><img class="parallax mountain-4" src="assets/img/bg/mountain_4.webp" data-speedx="0.059" data-speedy="0.024" data-speedz="0.35" data-rotation="0.14" data-distance="3200"><img class="parallax mountain-3" src="assets/img/bg/mountain_3.webp" data-speedx="0.04" data-speedy="0.018" data-speedz="0.32" data-rotation="0.05" data-distance="3400"><img class="parallax fog-2" src="assets/img/bg/fog_2.webp" data-speedx="0.15" data-speedy="0.0115" data-speedz="0" data-rotation="0" data-distance="3600"><img class="parallax mountain-2" src="assets/img/bg/mountain_2.webp" data-speedx="0.0235" data-speedy="0.013" data-speedz="0.42" data-rotation="0.15" data-distance="3800"><img class="parallax mountain-1" src="assets/img/bg/mountain_1.webp" data-speedx="0.027" data-speedy="0.018" data-speedz="0.53" data-rotation="0.2" data-distance="4000"><img class="sun-rays hide" src="assets/img/bg/sun_rays.webp"><img class="black-shadow hide" src="assets/img/bg/black_shadow.webp"><img class="parallax fog-1" src="assets/img/bg/fog_1.webp" data-speedx="0.12" data-speedy="0.01" data-speedz="0" data-rotation="0" data-distance="4200">
</header>
<section class="text-center content-section" id="about" style="padding-bottom: 0px;">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About ME</h2>
<div class="profile-container" style="margin-bottom: 2em;"><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;" alt="My Profile"><img class="profile foreground" src="assets/img/pfront.png" alt=""></div>
<div class="profile-container" style="margin-bottom: 2em;"><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;" alt="My Profile"><img class="profile foreground" src="assets/img/pfront.webp" alt=""></div>
<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>&nbsp;working to increase 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 a US based company owned by <a href="https://namecheap.com" target="_blank">Namecheap</a>.</p>
</div>
</div>
@ -104,20 +100,20 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
</div>
</div>
<div class="row row-cols-1 d-print-none d-lg-none d-xl-none d-xxl-none">
<div class="col" style="padding-bottom: 50px;"><a href="https://nathan3dprinting.au" target="_blank"><img src="assets/img/favicon_trans.png" style="width: 200px;" alt="Nathan 3D Printing Logo"></a>
<div class="col" style="padding-bottom: 50px;"><a href="https://nathan3dprinting.au" target="_blank"><img src="assets/img/favicon_trans.webp" style="width: 200px;" alt="Nathan 3D Printing Logo"></a>
<p>Nathan 3D Printing Service<br>Cheap 3D printing and CAD modeling</p><a class="btn btn-primary" role="button" href="https://nathan3dprinting.au" target="_blank">Visit Nathan 3D Printing Service</a>
</div>
<div class="col" style="padding-bottom: 50px;"><a href="https://hns.au" target="_blank"><img src="assets/img/HNSAU_white.png" style="width: 192px;" alt="HNSAU Logo"></a>
<div class="col" style="padding-bottom: 50px;"><a href="https://hns.au" target="_blank"><img src="assets/img/HNSAU_white.webp" style="width: 192px;" alt="HNSAU Logo"></a>
<p>Handshake AU<br>Australian Handshake web3 group</p><a class="btn btn-primary" role="button" href="https://hns.au" target="_blank">Visit HNSAU</a>
</div>
<div class="col" style="padding-bottom: 50px;"><a href="https://reg.woodburn.au/" target="_blank"><img src="assets/img/woodburn.png" style="width: 221px;" alt="Woodburn Logo"></a>
<div class="col" style="padding-bottom: 50px;"><a href="https://reg.woodburn.au/" target="_blank"><img src="assets/img/woodburn.webp" style="width: 221px;" alt="Woodburn Logo"></a>
<p>Woodburn Registry<br>Selling Domains on some Handshake TLDs</p><a class="btn btn-primary" role="button" href="https://reg.woodburn.au/" target="_blank">Visit Woodburn Registry</a>
</div>
</div>
<div class="row d-none d-print-flex d-lg-flex d-xl-flex d-xxl-flex">
<div class="col"><a href="https://nathan3dprinting.au" target="_blank"><img src="assets/img/favicon_trans.png" style="width: 200px;" alt="Nathan 3D Printing Logo"></a></div>
<div class="col"><a href="https://hns.au" target="_blank"><img src="assets/img/HNSAU_white.png" style="width: 192px;" alt="HNSAU Logo"></a></div>
<div class="col"><a href="https://reg.woodburn.au/" target="_blank"><img src="assets/img/woodburn.png" style="width: 221px;" alt="Woodburn Logo"></a></div>
<div class="col"><a href="https://nathan3dprinting.au" target="_blank"><img src="assets/img/favicon_trans.webp" style="width: 200px;" alt="Nathan 3D Printing Logo"></a></div>
<div class="col"><a href="https://hns.au" target="_blank"><img src="assets/img/HNSAU_white.webp" style="width: 192px;" alt="HNSAU Logo"></a></div>
<div class="col"><a href="https://reg.woodburn.au/" target="_blank"><img src="assets/img/woodburn.webp" style="width: 221px;" alt="Woodburn Logo"></a></div>
</div>
<div class="row d-none d-print-flex d-lg-flex d-xl-flex d-xxl-flex">
<div class="col">
@ -195,9 +191,8 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

View File

@ -36,13 +36,13 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/line-awesome.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/GridSystem-1.css">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/animate.min.min.css">
<link rel="stylesheet" href="assets/css/GridSystem-1.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
</head>
<body style="background: url(&quot;assets/img/links-bg.png&quot;) center / cover no-repeat, #000000;">
<body style="background: url(&quot;assets/img/links-bg.webp&quot;) center / cover no-repeat, #000000;">
<nav class="navbar navbar-light navbar-expand-md fixed-top" id="mainNav" style="background: #000000b0;">
<div class="container"><a class="navbar-brand nathanwoodburn" href="/#">Nathan.Woodburn/</a><button class="navbar-toggler navbar-toggler-right" data-bs-toggle="collapse" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" value="Menu"><i class="fa fa-bars"></i></button></div>
</nav>
@ -89,9 +89,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -17,9 +17,9 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<meta property="og:url" content="https://nathan.woodburn.au/podcast.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Alliance Church Woden Valley Podcast">
<meta name="twitter:image" content="https://nathan.woodburn.au/assets/img/podcast/wvac.png">
<meta name="twitter:image" content="https://nathan.woodburn.au/assets/img/podcast/wvac.webp">
<meta name="description" content="Listen to the Alliance Church Woden Valley from your favourite podcast app">
<meta property="og:image" content="https://nathan.woodburn.au/assets/img/podcast/wvac.png">
<meta property="og:image" content="https://nathan.woodburn.au/assets/img/podcast/wvac.webp">
<meta name="twitter:description" content="Listen to the Alliance Church Woden Valley from your favourite podcast app">
<meta name="twitter:title" content="Alliance Church Woden Valley Podcast">
<meta name="twitter:card" content="summary">
@ -35,15 +35,15 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/css/podcast.css">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/podcast.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
<link rel="canonical" href="https://nathan.woodburn.au/podcast" />
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="77">
<header class="masthead" style="background: url(&quot;assets/img/intro-bg.jpg&quot;) bottom / cover no-repeat;">
<div id="navbar" style="text-align: left;padding-left: 10%;padding-top: 20px;"><a class="navbar-brand" href="https://alliancechurch.com.au/"><img class="navicon" src="assets/img/podcast/Alliance_Logo.png" alt="Alliance Church Woden Valley"></a></div>
<header class="masthead" style="background: url(&quot;assets/img/intro-bg.webp&quot;) bottom / cover no-repeat;">
<div id="navbar" style="text-align: left;padding-left: 10%;padding-top: 20px;"><a class="navbar-brand" href="https://alliancechurch.com.au/"><img class="navicon" src="assets/img/podcast/Alliance_Logo.webp" alt="Alliance Church Woden Valley"></a></div>
<div class="intro-body" style="display: inline-block;width: 85%;margin-top: 5em;">
<div class="container">
<div class="row">
@ -53,11 +53,11 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div>
</div>
<div class="row">
<div class="col"><a class="d-inline-block hide_underline" href="https://open.spotify.com/show/1af4WMVbcyu7Ri3vnQJG5n" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" target="_blank"><img class="invert" src="assets/img/podcast/spotify.png" width="60px" alt="Spotify Icon">
<div class="col"><a class="d-inline-block hide_underline" href="https://open.spotify.com/show/1af4WMVbcyu7Ri3vnQJG5n" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" target="_blank"><img class="invert" src="assets/img/podcast/spotify.webp" width="60px" alt="Spotify Icon">
<p style="text-align: center;">Spotify</p>
</a><a class="d-inline-block hide_underline" href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lndvb2RidXJuLmF1L0lEMS54bWw" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" target="_blank"><img src="assets/img/podcast/google.png" width="60px" alt="Google Podcasts Logo">
</a><a class="d-inline-block hide_underline" href="https://podcasts.google.com/feed/aHR0cHM6Ly9wb2RjYXN0Lndvb2RidXJuLmF1L0lEMS54bWw" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" target="_blank"><img src="assets/img/podcast/google.webp" width="60px" alt="Google Podcasts Logo">
<p style="text-align: center;">Google</p>
</a><a class="d-inline-block hide_underline" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" href="https://podcasts.apple.com/us/podcast/alliance-church-woden-valley/id1670829017" target="_blank"><img class="invert" src="assets/img/podcast/apple.png" width="60px" alt="Apple Podcasts Logo">
</a><a class="d-inline-block hide_underline" style="color: white;font-size: 60px;padding: 0.5em;filter: saturate(77%) sepia(0%);" href="https://podcasts.apple.com/us/podcast/alliance-church-woden-valley/id1670829017" target="_blank"><img class="invert" src="assets/img/podcast/apple.webp" width="60px" alt="Apple Podcasts Logo">
<p style="text-align: center;">Apple</p>
</a></div>
</div>
@ -89,9 +89,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker-podcast.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/hacker-podcast.min.js"></script>
</body>
</html>

View File

@ -35,8 +35,8 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/profile.min.css">
<link rel="canonical" href="https://nathan.woodburn.au/projects" />
</head>
@ -54,7 +54,7 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
</div>
</div>
</nav>
<header class="masthead" style="background-image: url('assets/img/intro-bg.jpg');">
<header class="masthead" style="background-image: url('assets/img/intro-bg.webp');">
<div class="intro-body">
<div class="container">
<div class="row">
@ -114,9 +114,8 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
</footer><script src="https://nathan.woodburn/handshake.js" domain="nathan.woodburn"></script>
<script src="https://nathan.woodburn/https.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/hacker.js"></script>
<script src="assets/js/script.min.js"></script>
<script src="assets/js/hacker.min.js"></script>
</body>
</html>

View File

@ -34,21 +34,21 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cabin:700&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro&amp;display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="assets/css/Footer-Dark-icons.css">
<link rel="stylesheet" href="assets/css/resume.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="stylesheet" href="assets/css/styles.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark-icons.min.css">
<link rel="stylesheet" href="assets/css/resume.min.css">
</head>
<body style="width: 90%;margin-left: 5%;margin-right: 5%;">
<div class="d-none d-lg-inline d-xl-inline d-xxl-inline">
<div class="profile-container" style="margin-top: 5em;margin-bottom: 5em;"><img class="profile background2" src="assets/img/orange.png" style="border-radius: 50%;" alt=""><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;" alt="Profile Photo"><img class="profile foreground" src="assets/img/pfront.png" alt=""></div>
<div class="profile-container" style="margin-top: 5em;margin-bottom: 5em;"><img class="profile background2" src="assets/img/orange.webp" style="border-radius: 50%;" alt=""><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;" alt="Profile Photo"><img class="profile foreground" src="assets/img/pfront.webp" alt=""></div>
<div class="title" style="text-align: right;background: #b54c00;">
<h1>Nathan Woodburn</h1>
<p>IT enthusiast &amp; Student | <a href="https://nathan.woodburn.au"><span style="color: rgb(195, 247, 227);">https://nathan.woodburn.au</span></a>&nbsp;| <a href="mailto:contact@nathan.woodburn.au"><span style="color: rgb(195, 247, 227);">contact@nathan.woodburn.au</span></a></p>
</div>
</div>
<div class="d-lg-none d-xl-none d-xxl-none">
<div class="profile-container" style="margin-top: 5em;"><img class="profilesml background2sml" src="assets/img/orange.png" style="border-radius: 50%;width: 150px;" alt=""><img class="profilesml backgroundsml" src="assets/img/profile.jpg" style="border-radius: 50%;width: 150px;" alt="Profile Photo"><img class="profilesml foregroundsml" src="assets/img/pfront.png" style="width: 150px;" alt=""></div>
<div class="profile-container" style="margin-top: 5em;"><img class="profilesml background2sml" src="assets/img/orange.webp" style="border-radius: 50%;width: 150px;" alt=""><img class="profilesml backgroundsml" src="assets/img/profile.jpg" style="border-radius: 50%;width: 150px;" alt="Profile Photo"><img class="profilesml foregroundsml" src="assets/img/pfront.webp" style="width: 150px;" alt=""></div>
<div style="text-align: center;">
<h1 style="margin-bottom: 0px;">Nathan Woodburn</h1>
<p>IT enthusiast &amp; Student | <a href="https://nathan.woodburn.au" target="_blank">https://nathan.woodburn.au</a></p>
@ -131,8 +131,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
</div>
</footer>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="assets/js/grayscale.js"></script>
<script src="assets/js/script.min.js"></script>
</body>
</html>