style: Added profile picture animation

2023-02-20 12:15:06 +11:00 · 2023-02-20 12:15:06 +11:00 · 0ac68a24a6
commit 0ac68a24a6
parent e4f72061a8
7 changed files with 33 additions and 2 deletions
--- a/about.html
+++ b/about.html
@ -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>
--- a/ascii.html
+++ b/ascii.html
@ -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>
--- a/assets/css/profile.css
+++ b/assets/css/profile.css
@ -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);
 }
--- a/gitpgp.html
+++ b/gitpgp.html
@ -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>
--- a/index.html
+++ b/index.html
@ -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>
--- a/pgp.html
+++ b/pgp.html
@ -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>
--- a/projects.html
+++ b/projects.html
@ -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>