--- 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>