nathanwoodburn/Nathanwoodburn.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Added profile picture animation

Browse Source
This commit is contained in:
Nathan Woodburn 2023-02-20 12:15:06 +11:00
parent e4f72061a8
commit 0ac68a24a6
Signed by: nathanwoodburn
GPG Key ID: 203B000478AD0EF1
7 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
about.html
View File

@ -33,12 +33,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=Anonymous+Pro&amp;display=swap">
<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/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
</head>
<body style="background: url(&quot;assets/img/intro-bg.jpg&quot;) no-repeat;text-align: center;color: rgb(255,255,255);background-size: cover;">
<header style="padding: 18px;padding-top: 160px;">
<picture><img class="rounded-circle" src="assets/img/profile.jpg" width="200px"></picture>
<div class="profile-container" style="margin-bottom: 2em;"><img class="profile background" src="assets/img/profile.jpg" style="border-radius: 50%;"><img class="profile foreground" src="assets/img/pfront.png"></div>
<h1>Nathan Woodburn</h1>
<p>Hi, I am Nathan Woodburn and I live in Canberra.<br>I started a 3D printing service in early 2021.<br>I create CAD models using Fusion 360.<br>I Program Windows 10 Application using C#.<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>
<div class="social-icons" style="padding-top: 0px;padding-bottom: 10px;padding-right: 0px;padding-left: 0px;background: rgba(255,255,255,0);color: rgb(255,255,255);"><a href="https://www.facebook.com/nathanjwoodburn" target="_blank"><i class="icon ion-social-facebook" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a><a target="_blank" href="https://twitter.com/woodburn_nathan"><i class="icon ion-social-twitter" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a><a href="https://www.linkedin.com/in/nathanwoodburn/" target="_blank"><i class="icon ion-social-linkedin" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a><a href="https://github.com/Nathanwoodburn" target="_blank"><i class="icon ion-social-github" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a><a href="mailto:contact@nathan.woodburn.au" target="_blank"><i class="icon ion-email" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a><a href="https://keybase.io/nathanwoodburn" target="_blank"><i class="fab fa-keybase" style="border-color: #ffffff;color: rgb(255,255,255);"></i></a></div>

1
ascii.html
View File

@ -31,6 +31,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;display=swap">
<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="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
</head>

24
assets/css/profile.css Normal file
View File

@ -0,0 +1,24 @@
.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
gitpgp.html
View File

@ -31,6 +31,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;display=swap">
<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="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
</head>

4
index.html
View File

@ -35,6 +35,7 @@ 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/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
<link rel="canonical" href="https://nathan.woodburn.au" />
</head>
@ -70,7 +71,8 @@ height="0" width="0" style="display: none;visibility: hidden;"></iframe></noscri
<div class="container">
<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;">
<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%;"><img class="profile foreground" src="assets/img/pfront.png"></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>. 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>

1
pgp.html
View File

@ -31,6 +31,7 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&amp;display=swap">
<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="assets/css/profile.css">
<link rel="stylesheet" href="assets/css/Social-Icons.css">
</head>

1
projects.html
View File

@ -32,6 +32,7 @@ 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="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="canonical" href="https://nathan.woodburn.au/projects" />
</head>