mirror of
https://github.com/TomHodson/tomhodson.github.com.git
synced 2025-06-26 10:01:18 +02:00
208 lines
4.0 KiB
HTML
208 lines
4.0 KiB
HTML
---
|
|
title: Badge
|
|
permalink: /badge/
|
|
|
|
img:
|
|
src: /assets/images/avatar.jpeg
|
|
alt: A picture of me.
|
|
---
|
|
|
|
<!DOCTYPE html>
|
|
<html class="" lang="en">
|
|
<head>
|
|
{% include default_head_tags.html %}
|
|
<style>
|
|
|
|
header {
|
|
display: flex;
|
|
height: 100vh;
|
|
justify-content: unset;
|
|
font-size: min(3vw, 3vh);
|
|
}
|
|
|
|
.pic-name-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 60vh;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pic-name {
|
|
display: flex;
|
|
gap: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.card-container {
|
|
height: 30vh;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.pic {
|
|
border-radius: 50%;
|
|
padding: 5px;
|
|
border: 1px solid var(--theme-text-color);
|
|
transition: border-color var(--night-mode-fade-time) ease-in-out;
|
|
width: 40vw;
|
|
height: 40vw;
|
|
}
|
|
|
|
img.qr {
|
|
--dimension: calc(0.6 * min(50vw, 100vh));
|
|
width: var(--dimension);
|
|
height: var(--dimension);
|
|
z-index: 1;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 3rem;
|
|
margin:0;
|
|
}
|
|
|
|
.professional-links {
|
|
margin-bottom: 10vh;
|
|
}
|
|
|
|
.light-dark-toggle {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 100%;
|
|
padding-top: 0px;
|
|
transform: translate(calc(-100% - 0.5em), 0.5em);
|
|
}
|
|
|
|
.card {
|
|
padding: 20px;
|
|
position: relative;
|
|
display: inline-flex;
|
|
place-content: center;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 30%;
|
|
background: var(--theme-highlight-color);
|
|
height: 150%;
|
|
animation: rotBGimg 7s linear infinite;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
@keyframes rotBGimg {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.card::after {
|
|
content: '';
|
|
position: absolute;
|
|
background: var(--theme-bg-color);
|
|
;
|
|
inset: 10px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
#mastospan {
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
svg#svg1826 {
|
|
display: inline;
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
header {
|
|
flex-direction: row;
|
|
}
|
|
.card-container {
|
|
width: 50vw;
|
|
}
|
|
|
|
.pic-name-text {
|
|
width: 50vw;
|
|
height: 100vh;
|
|
}
|
|
|
|
.pic-name {
|
|
align-items: center;
|
|
}
|
|
.pic {
|
|
--dimension: calc(0.6 * min(50vw, 100vh));
|
|
width: var(--dimension);
|
|
height: var(--dimension);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body class = "">
|
|
<header class="h-card">
|
|
<div class="pic-name-text">
|
|
<div class="pic-name">
|
|
<img
|
|
src="/assets/images/avatar.jpeg"
|
|
class="u-photo pic"
|
|
alt="A picture of me."
|
|
height="175"
|
|
width="175"
|
|
/>
|
|
<a class="p-name u-url u-uid" href="{{ site.url }}"
|
|
><h1>Tom Hodson</h1></a
|
|
>
|
|
</div>
|
|
<p class="p-note bio">
|
|
<span>Maker, Baker</span>
|
|
<span>Programmer</span>
|
|
<span><a href="/thesis">Reformed Physicist</a></span>
|
|
<span><a href="https://ecmwf.int">RSE@ECMWF</a> </span>
|
|
</p>
|
|
<!-- <h2>Links</h2> -->
|
|
<p class="professional-links">
|
|
<a href="https://github.com/TomHodson" rel="me authn" class="u-url"
|
|
>@TomHodson {% include icons/github.svg %}</a
|
|
>
|
|
<a href="https://tech.lgbt/@Tomhodson" rel="me" class="u-url"
|
|
><span id="mastospan">tech.lgbt/@Tomhodson</span> {% include icons/mastodon.svg %}</a
|
|
>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-container">
|
|
<a href = "/">
|
|
<div class = "card">
|
|
<img
|
|
src="/assets/badge/qr.svg"
|
|
class="qr invertable"
|
|
alt="A QR code pointing to this page"
|
|
height="175"
|
|
width="175"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="light-dark-toggle">
|
|
<div role="status" class="visually-hidden js-mode-status"></div>
|
|
<button class="toggle-button js-mode-toggle" aria-label="Night Mode Toggle">
|
|
<span class="toggle-button__icon" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
</body>
|
|
</html>
|