website

website/src/components/home/Contact.astro (2386B)

---

---
// Contact, as an *unsent mail* buffer: the address, the GPG key, links
// elsewhere and the CTF.
import Buffer from "../frame/Buffer.astro";
import "../../styles/home/contact.css";
---
<Buffer id="contact" file="*unsent mail*" mode="Message" meta="draft">
    <h2 class="h2">Say hello</h2>
    <p class="lede">Email works best. For anything private, encrypt it with my GPG key below.</p>

    <div class="contact">
      {/* The address is only ever put together in JavaScript (src/scripts/home/contact.js), so scrapers
           reading this HTML don't see it. The link and the copy button read data-user and data-host. */}
      <a class="mail" href="#contact" data-user="michael" data-host="michaelneuper.com">michael<span class="at"> [at] </span>michaelneuper.com</a>
      <button type="button" class="btn" data-email="copy">copy address</button>
    </div>

    <div class="contact-grid">
      <div class="gpg">
        <h3 class="ds-h">Encrypt it</h3>
        <p class="gpg-fp"><span class="dim">fingerprint</span><code>4E7B F800 0D86 182D F484 5C37 508B CF84 373C 8930</code></p>
        <div class="gpg-cmd">
          <pre><code>curl -sL https://michaelneuper.com/<wbr>michaelneuper.gpg | gpg --import</code></pre>
          <button type="button" class="btn" data-copy=".gpg-cmd code">copy</button>
        </div>
      </div>
      <div>
        <h3 class="ds-h">Elsewhere</h3>
        <ul class="elsewhere">
          <li><a href="https://github.com/michaelneuper">GitHub</a></li>
          <li><a href="https://git.michaelneuper.com">Git mirror</a></li>
          <li><a href="https://www.linkedin.com/in/michaelneuper/">LinkedIn</a></li>
          <li><a href="https://buymeacoffee.com/michaelneuper" target="_blank" rel="noopener">Buy me a coffee</a></li>
        </ul>
      </div>
    </div>

    <div class="ctf">
      <h3 class="ds-h">Capture the flag</h3>
      <p>Three flags are hidden on this site, the kind you would find in a beginner CTF. They look like <code>{"flag{…}"}</code>. Found one? Run <kbd>M-x</kbd> <code>submit-flag</code>, or use the button.</p>
      <p class="ctf-row"><button type="button" class="btn" data-ctf="submit">submit a flag</button><span class="ctf-progress" aria-live="polite">0 of 3 found</span></p>
    </div>
</Buffer>

<script>
  import { initContact } from "../../scripts/home/contact.js";

  initContact();
</script>