Merge branch 'master' of i-am.nexus:nex/nexy7574.co.uk-b

src/assets/pgp-2024-05-13.txt

@@ -0,0 +1,89 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+5UGvAepPBA==
+=PAYz
+-----END PGP PUBLIC KEY BLOCK-----

src/assets/ssh-2024-05-13.txt

@@ -0,0 +1 @@
+ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQCqk+0tSp1dm8ALhcxRjkurj3y/3rN9SOHquNHVk+xXZIOUTXjWSgXclrlsHH2562VgeBx8ZxJFkX04jMb3wkPHNL794troX4LX17X0j5ixBK76vPGMuzG0/VU6oLwl3S2Zkuz6q3d3oGj6+qemLhQF6qRZ+ByTkhoQu22Jc6QYpk0o6lMF1kabkS496LxBD8JlAGBT4DsdHem3dDUwvAWseNEs3gJHOup9T43Iw3pKpZYrfISBxhkehojtsMNFziL+pX2rYZHxwoMAiaD9LKlhFsZgND2bMYFJ0WODycAwkrhEMwEVoEWNtlYeqadRZpCSA1ta1Rz9souovTkV2Kbov522eHuIVlu1uWNENiM+fEtP36QEMnZago0FgUBpfijh8LNjN/SR5aOeyn2Nw9pjQP3ZSjmFe2lFz88E092HwrAczc6gGb/tCH4DcTBwyna6AQFHFFw1QcW9rer5kjYnFpZGjmXBBnSFg8lDy3AhGdUSJfELS3ESA0pyAWk7Nr0=

src/faq.css

@@ -0,0 +1,35 @@
+.question {
+    margin: 1em;
+    padding: 1em;
+    box-shadow: 0 0 1em rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 5px;
+    text-align: left;
+}
+
+.question p {
+    font-size: large
+}
+
+code.block {
+    display: block;
+    padding: 1em;
+    margin: 1em 0;
+    background-color: #1f1f1f;
+    color: #dcdcdc;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    border-radius: 5px;
+    overflow-x: auto;
+}
+
+code.inline {
+    background-color: #1f1f1f;
+    color: #dcdcdc;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: initial;
+    line-height: 1.2;
+    border-radius: 3px;
+    padding: 0.4em 0.6em;
+}

src/faq.html

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en" style="background-color: black;">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>About Me | nexy7574.co.uk</title>
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="faq.css">
+    <link rel="stylesheet" href="responsive.css">
+    <script defer>
+        document.addEventListener(
+            "DOMContentLoaded",
+            () => {
+                const __name = document.getElementById("__name");
+                __name.addEventListener(
+                    "mouseover",
+                    () => {
+                        __name.textContent = "she/it";
+                    }
+                )
+                __name.addEventListener(
+                    "mouseout",
+                    () => {
+                        __name.textContent = "Nexus";
+                    }
+                )
+                const email = document.querySelector("img[src='img/email.png']");
+                const emailImages = document.querySelectorAll("img[src='img/gmail-color.svg']");
+                if(email && emailImages.length > 0) {
+                    for (let emailImg of emailImages) {
+                        emailImg.addEventListener(
+                            "click",
+                            () => {
+                                email.hidden = !email.hidden;
+                            }
+                        )
+                        emailImg.style.cursor = "pointer";
+                    }
+                    email.addEventListener(
+                        "click",
+                        () => {
+                            email.hidden = !email.hidden;
+                        }
+                    )
+                    email.style.cursor = "pointer";
+                }
+            }
+        )
+    </script>
+</head>
+<body>
+    <div class="mainBody">
+        <header>
+            <nav>
+                <div>
+                    <span><img src="img/twemoji_trans.svg" width="32px" height="32px" alt="🏳️‍⚧️" class="icon"/></span>&nbsp;<i id="__name">Nexus</i>
+                </div>          
+                <div class="navbar">
+                    <div><a href="index.html">Home</a></div>
+                    <div><a href="faq.html">FAQ</a></div>
+                    <div><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></div>
+                    <div><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></div>
+                    <div>
+                        <a href="https://github.com/nexy7574" rel="noopener noreferrer" target="_blank" class="icon">
+                            <img src="img/github.svg" alt="GitHub" title="GitHub" width="32px" height="32px" class="icon">
+                        </a>
+                    </div>
+                    <div>
+                        <a href="https://git.i-am.nexus/nex/nexy7574.co.uk-b" rel="noopener" target="_blank" class="icon">
+                            <img src="img/forgejo-color.svg" alt="Forgejo" title="Forgejo (git) & source code" width="32px" height="32px" class="icon">
+                        </a>
+                    </div>
+                    <div>
+                        <a href="https://mastodon.nexy7574.co.uk" rel="noopener noreferrer" target="_blank" class="icon">
+                            <img src="img/mastodon-color.svg" alt="Mastodon" title="Mastodon" width="32px" height="32px" class="icon">
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        </header>
+        <main>
+            <div>
+                <h1>Frequently Asked Questions</h1>
+                <p>Note: I am dyslexic, so please excuse any spelling or grammar errors. Feel free to message me for corrections ^^</p>
+                <div id="toc" hidden>
+                    <h2>Table Of Contents:</div>
+                    <ol id="toc-li"></ol>
+                </div> <!-- Table of Contents -->
+                <noscript><p>There will be a table of contents here if you enable JavaScript. You don't have to though.</p></noscript>
+                <hr/>
+                <div class="question">
+                    <h2>Q: What are your keys???</h2>
+                    <div>
+                        <h3>A: PGP:</h3>
+                        <p>
+                            <code class="inline">0FA334385D0B689F</code> - available via WKD (<code class="inline">gpg --locate-keys me@nexy7574.co.uk</code>), or the full (armoured) key is available <a href="assets/pgp-2024-05-13.txt" download>here</a>.
+                            The key is also available on several keyservers, however
+                            <a href="https://keyserver.ubuntu.com/pks/lookup?search=0FA334385D0B689F&fingerprint=on&op=index" target="_blank" rel="noopener noreferrer">Ubuntu's keyserver</a>
+                            is the most reliable and kept up-to-date. Although, WKD should be preferred where possible.
+                        </p>
+                    </div>
+                    <div>
+                        <h3>A: SSH</h3>
+                        <p>Can be imported from <a href="assets/ssh-2024-05-13.txt" download>this text file</a>, however be aware I do not sign anything with my SSH key, only my PGP key.</p>
+                        <p>Feel free to give me SSH access to your servers though :^)</p>
+                    </div>
+                </div>
+                <div class="question">
+                    <h2 id="what-are-your-pc-specs">Q: What are your PC specs/how much did your PC cost?</h2>
+                    <p>
+                        A: You can find all the details on <a href="https://uk.pcpartpicker.com/b/Hfz7YJ" rel="noopener" target="_blank">PcPartPicker</a>.
+                        It cost me around £650 to build in December, 2023.
+                    </p>
+                </div>
+                <div class="question">
+                    <h2 id="can-you-hack">Q: Can you hack my friend's instagram?</h2>
+                    <p>A: <strong><em>No.</em></strong></p>
+                    <h2 id="fix-printer">Q: Can you fix my printer?</h2>
+                    <p>
+                        A: Yep!
+                        <ol>
+                            <li>Kick the printer.</li>
+                            <li>Kick it harder.</li>
+                            <li>Unplug it (bare with me)</li>
+                            <li>Bring your printer to the nearest window</li>
+                            <li>Open the window</li>
+                            <li>Throw the printer out the window</li>
+                            <li>Ask someone else to print it for you (its their problem then)</li>
+                        </ol>
+                    </p>
+                </div>
+                <div class="question">
+                    <h2 id="what-music-do-you-listen-to">Q: What music do you listen to?</h2>
+                    <p>A: Here's my main playlists. TL;DR, I listen to a lot of pop and rock, with a sprinkle of electronic</p>
+                    <p>My favourite artists aren't really a thing, I prefer music over artists and albums, but I consistently listen to K.Flay, Grandson, Mother Mother, Super Whatevr, Cavetown, The Front Bottoms, Hospital Bracelet, and Crawlers.</p>
+                    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/26wJTA2mXk3QNXhqBI95kM?utm_source=generator&theme=0" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+                    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/07GvdPCtDvWO2UFawBDlSA?utm_source=generator&theme=0" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+                    <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/1mTh1hj7rmzCYknLWfru4C?utm_source=generator&theme=0" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+                    <p>I am one of those people that will listen to any music genre, and I actually mean it. Just remember though "will listen" doesn't mean "will like".</p>
+                </div>
+                <div class="question">
+                    <h2 id="urandom-or-random">Q: Urandom or Random?</h2>
+                    <p>A: Urandom</p>
+                </div>
+            </div>
+
+            <script>
+                document.addEventListener(
+                    "DOMContentLoaded",
+                    () => {
+                        const questions = document.querySelectorAll(".question h2");
+                        for (let question of questions) {
+                            const id = question.id;
+                            const a = document.createElement("a");
+                            a.href = `#${id}`;
+                            a.textContent = "🔗";
+                            a.title = "Link to this question";
+                            a.style.textDecoration = "none";
+                            a.style.fontSize = "smaller";
+                            a.style.color = "black";
+                            a.style.marginLeft = "0.5em";
+                            question.appendChild(a);
+                            // copy URL to clipboard
+                            a.addEventListener(
+                                "click",
+                                () => {
+                                    navigator.clipboard.writeText(location.href + "#" + id);
+                                    a.textContent = "✅";
+                                    setTimeout(() => {
+                                        a.textContent = "🔗";
+                                    }, 1000);
+                                }
+                            )
+                            // add to table of contents
+                            const toc = document.getElementById("toc");
+                            toc.hidden = false;
+                            const tocLi = document.getElementById("toc-li");
+                            const li = document.createElement("li");
+                            const a2 = document.createElement("a");
+                            a2.href = `#${id}`;
+                            a2.textContent = question.textContent.replace(/^Q: /, "").replace("🔗", "");
+                            li.appendChild(a2);
+                            tocLi.appendChild(li);
+                        }
+                    }
+                )
+            </script>
+        </main>
+        <link rel="stylesheet" href="lazy-fonts.css">
+    </div>
+</body>
+</html>

src/index.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
-
 .emoji {
     font-family: 'Noto Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Android Emoji', 
     'EmojiSymbols', 'EmojiOne Color', 'EmojiOne', 'Apple Color Emoji', 'Twemoji Mozilla', 'Twemoji', 'Segoe UI Symbol', sans-serif; 
@@ -64,7 +62,7 @@ nav {
     margin: 0;
     padding: 0;
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(7, 1fr);
     align-items: center;
     align-self: center;
 }

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background-color: black;">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -23,7 +23,7 @@
                         __name.textContent = "Nexus";
                     }
                 )
-                const email = document.querySelector("img[src='img/email.png']");
+                const email = document.getElementById("email-modal");
                 const emailImages = document.querySelectorAll("img[src='img/gmail-color.svg']");
                 if(email && emailImages.length > 0) {
                     for (let emailImg of emailImages) {
@@ -48,7 +48,10 @@
     </script>
 </head>
 <body>
-    <img style="z-index: 100;width:auto;height: auto;margin:200px auto;background-color: rgba(0, 0, 0, 0.5);position:absolute" src="img/email.png" width="1366px" height="768px" alt="oh" hidden/>
+    <div id="email-modal" style="z-index: 100;width:100%;height: 100%;padding:200px auto;background-color: rgba(0, 0, 0, 0.5);position:absolute" hidden>
+        <p>If you're going to email me, please use PGP encryption. My key is available via WKD, or <a href="faq.html">the FAQ</a></p>
+        <img src="img/email.png" width="1366px" height="768px" alt="oh"/>
+    </div>
     <div class="mainBody">
         <header>
             <nav>
@@ -57,6 +60,7 @@
                 </div>          
                 <div class="navbar">
                     <div><a href="index.html">Home</a></div>
+                    <div><a href="faq.html">FAQ</a></div>
                     <div><a href="/chat/#/user/@nex:nexy7574.co.uk" class="icon"><img src="img/matrix-color.svg" width="32px" height="32px" alt="Chat" title="Chat" class="icon"/></a></div>
                     <div><a href="/status" class="icon"><img src="img/server.svg" alt="Service Status" title="Service Status" width="32px" height="32px" class="icon"/></a></div>
                     <div>
@@ -82,6 +86,7 @@
             <p><span id="__age">17</span> | she/it | "full"-stack</p>
             <h2>Quick - about me</h2>
             <div>
+                <p>You can hover over icons to get a tooltip, and some you can click to go places.</p>
                 <div id="array">
                     <div>
                         <h3>Languages</h3>
@@ -95,6 +100,7 @@
                         <h3>Operating Systems</h3>
                         <div>
                             <img src="img/fedora-color.svg" alt="Fedora" title="Fedora" width="32px" height="32px" class="icon">
+                            <img src="img/ubuntu-color.svg" alt="Ubuntu" title="Ubuntu (Server)" width="32px" height="32px" class="icon">
                             <img src="img/windows-color.svg" alt="Windows" title="Windows" width="32px" height="32px" class="icon">
                             <img src="img/apple-color.svg" alt="iOS" title="iOS" width="32px" height="32px" class="icon">
                         </div>
@@ -106,11 +112,13 @@
                             <a href="https://matrix.to/#/@nex:nexy7574.co.uk" rel="noopener noreferrer" target="_blank" class="icon">
                                 <img src="img/matrix-color.svg" alt="Matrix" title="Matrix" width="32px" height="32px" class="icon">
                             </a>
+                            <a href="https://signal.me/#eu/j24vT8zDzquI0us48k7eiNJcpJjEw4TYUz1gtvo_0HtEfq4C2MZG1YFs5POF98Sb" rel="noopener" target="_blank" class="icon">
+                                <img src="img/signal-color.svg" alt="Signal" title="Signal" width="32px" height="32px" class="icon">
+                            </a>
+                            <img src="img/imessage-color.svg" alt="iMessage" title="iMessage" width="32px" height="32px" class="icon">
                             <a href="https://discord.gg/TveBeG7" rel="noopener" target="_blank" class="icon">
                                 <img src="img/discord-color.svg" alt="Discord" title="Discord" width="32px" height="32px" class="icon">
                             </a>
-                            <img src="img/signal-color.svg" alt="Signal" title="Signal" width="32px" height="32px" class="icon">
-                            <img src="img/imessage-color.svg" alt="iMessage" title="iMessage" width="32px" height="32px" class="icon">
                             <a rel="noopener" target="_blank" class="icon">
                                 <img src="img/gmail-color.svg" alt="Email" title="Email (very slow)" width="32px" height="32px" class="icon">
                             </a>
@@ -258,6 +266,7 @@
         <footer>
             <p>🍉 Free Palestine, end the genocide.</p>
         </footer>
+        <link rel="stylesheet" href="lazy-fonts.css">
     </div>
 </body>
 </html>

src/lazy-fonts.css

@@ -0,0 +1,6 @@
+/* 
+This file should be imported at the end of <body> so that any fonts that're needed are loaded last.
+
+Sure this will make fonts look ugly on slow connections, but if you can't load the page because the font is taking too long to load, well that's even worse.
+*/
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');