now with 100% more rust

.domains

@@ -1 +0,0 @@
-futile.eu

.gitignore

@@ -0,0 +1,2 @@
+/target
+/dist

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "editor.formatOnSave": false
-}

Caddyfile

@@ -0,0 +1,10 @@
+www.futile.eu {
+    redir https://futile.eu{uri}
+}
+
+futile.eu {
+    root * /var/www/futile.eu/dist
+    file_server
+    try_files {path} /index.html
+    encode gzip zstd
+}

Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "site"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+fastrand = { version = "2.2.0", features = ["js"] }
+gloo = { version = "0.11.0", features = ["timers"] }
+web-sys = { version = "0.3.74", features = ["Window"] }
+yew = { version = "0.21.0", features = ["csr"] }

index.html

@@ -10,217 +10,9 @@
     <link rel="preload" href="https://incr.easrng.net/bg.gif" as="image">
 </head>
 
-<style>
+<link data-trunk rel="rust" />
-    @import url(https://fonts.bunny.net/css?family=bokor:400|ibm-plex-mono:400);
+<link data-trunk rel="icon" href="favicon.ico" />
-
+<link data-trunk rel="css" href="style.css" />
-    body {
+<link data-trunk rel="copy-dir" data-target-path="static/" href="static/" />
-        background-color: black;
-        color: white;
-        font-family: 'IBM Plex Mono', monospace;
-    }
-
-    p {
-        letter-spacing: -0.07em;
-    }
-
-    .box {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        max-width: 480px;
-        margin: 0 auto;
-        padding: 0 20px;
-        box-sizing: border-box;
-    }
-
-    .main-title {
-        font-family: 'Bokor', serif;
-        font-size: 5em;
-        line-height: 1em;
-        margin-top: 0.2em;
-        margin-bottom: 0em;
-        user-select: none;
-        font-weight: normal;
-    }
-
-    /* hacky way of making my font look nicer on firefox 
-    while having chrome's rendering of it not be bloated 
-    */
-    @supports (-moz-appearance: none) {
-        .main-title {
-            font-weight: bold;
-        }
-    }
-
-    .separator {
-        color: white;
-        margin-top: 0.5em;
-        margin-bottom: 0em;
-        width: 50px;
-    }
-
-    .content {
-        line-height: 1.3em;
-    }
-
-    .click {
-        color: white;
-        text-decoration: underline dotted;
-    }
-
-    .click:hover {
-        text-decoration: underline solid;
-    }
-
-    .button {
-        display: inline-block;
-        padding: 3px 6px;
-        font-size: 16px;
-        text-align: center;
-        color: white;
-        background-color: black;
-        border: 1px solid white;
-        cursor: pointer;
-        text-decoration: none;
-        border-radius: 0;
-    }
-
-    .shiny {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .shiny::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -110%;
-        width: 110%;
-        height: 100%;
-        background: rgba(255, 255, 255, 0.5);
-        transform: skewX(-30deg);
-        animation: shine 5s infinite;
-        animation-delay: 5s;
-        visibility: hidden;
-    }
-
-    @keyframes shine {
-        0% {
-            left: -110%;
-            visibility: hidden;
-        }
-
-        10% {
-            visibility: visible;
-            left: 110%;
-        }
-
-        100% {
-            left: 110%;
-        }
-    }
-
-    div.buttons {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        max-width: 480px;
-        margin: 0 auto;
-        padding: 0 20px;
-        position: relative;
-        bottom: 4px;
-        left: 0;
-        right: 0;
-    }
-
-    ul.buttons {
-        list-style-type: none;
-        margin: -8px;
-        padding: 0;
-        display: flex;
-        flex-wrap: wrap;
-        padding: 0 20px;
-        justify-content: center;
-    }
-
-    ul.buttons li {
-        /* margin-right: 3px; */
-        line-height: 0;
-    }
-
-    a {
-        color: white;
-    }
-
-    div.footer {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0 auto;
-        height: 3em;
-        font-size: 0.95em;
-    }
-</style>
-
-<!-- WARNING! this website contains javascript. proceed with caution. -->
-<script>
-    const texts = [
-        'who are you',
-        'lorem ipsum dolor sit amet',
-        'hot garfields in your area',
-        'remember to drink water',
-    ];
-    function setRandomText() {
-        document.querySelector('#quote').textContent = texts[Math.floor(Math.random() * texts.length)];
-    }
-    document.addEventListener('DOMContentLoaded', setRandomText);
-</script>
-<script>
-    const characters = ['◇', '◆'];
-    let currentIndex = 0;
-    function cycleText() {
-        document.querySelector('#bullet').textContent = characters[currentIndex];
-        currentIndex = currentIndex === 0 ? 1 : 0;
-    }
-    document.addEventListener('DOMContentLoaded', () => {
-        cycleText();
-        setInterval(cycleText, 1000);
-    });
-</script>
-
-<body>
-    <div class="box">
-        <h1 class="main-title">futile</h1>
-    </div>
-    <hr class="separator">
-    <div class="box">
-        <script>let hire_me_message = "hey!\ncould use a second pair of hands with something? programming, sys administration, or otherwise technical?\n\ni would love to work with/for you! reach out to me via email [me@futile.eu] (even just to exchange info for another platform)! paying me is optional, just be upfront with what you wish to do."</script>
-        <p class="content">
-            hello, my name is futile. i am a weird concept from the internet (or a person from europe, depending on who you ask).<br><br>i like programming (mostly rust), computers, linux, malicious software like game hacks and malware, and any vehicle whether it drives or flies.<br><br>everything i know about the aforementioned things is self-taught. i also speak both english and russian fluently.<br><br>if you want to contact me, email <a class="click" href="mailto:me@futile.eu">me@futile.eu</a><br><br><a class="button shiny" onclick="alert(hire_me_message)">hire me!</a>
-        </p>
-    </div>
-    <div style="position: absolute; bottom: 0; left: 0; right: 0;">
-        <div class="buttons">
-            <ul class="buttons">
-                <li><a href="https://futile.eu"><img src="buttons/futile.png" width="88px" height="31px" alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile"></a></li>
-                <li><a href="https://xenia.blahaj.land/"><img src="buttons/rose_88x31.png" width="88px" height="31px" alt="button that says 'rose' with a rose growing out of the 'o', with milk-chan to the right of the text | by rose"></a></li>
-                <li><iframe src="https://incr.easrng.net/badge?key=futile" style="background: url(https://incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe></li>
-                <li><a href="https://fedoraproject.org/spins/kde"><img src="buttons/fedora.png" width="88px" height="31px" alt="button that says 'powered by fedora' in white and blue, with the fedora logo to the left | by unknown; retouched by futile"></a></li>
-                <li><a href="https://mozilla.org/firef&nbsp;x"><img src="buttons/firefox4.gif" width="88px" height="31px" alt="button that flashes between the texts 'tested on' and 'firefox' in firefox's orange, yellow, and purple scheme, with the firefox logo to the left | by unknown"></a></li>
-                <li><a href="https://vscodium.com"><img src="buttons/vscodium.com.png" width="88px" height="31px" alt="button that says 'made with vscodium' in light blue, with the vscodium logo to the right | by unknown"></a></li>
-                <li><img src="buttons/FirtniteButton.png" onclick="alert('firt night')" width="88px" height="31px" alt="button that says 'firtnite' (a misspelling of 'fortnite'), otherwise looks very similar to an old fortnite title screen | by unknown"></li>
-                <li><a href="https://ublockorigin.com"><img src="buttons/ublock.png" width="88px" height="31px" alt="button (grey) that says 'ublock origin now!', with the ublock origin red logo to the left | by unknown"></a></li>
-                <li><a href="https://rust-lang.org"><img src="buttons/rustNOW.png" width="88px" height="31px" alt="button (grey) that says 'rust now!', with the rust gear logo to the left and a yellow banner that says '1.82.0' on the to the bottom right | by futile"></a></li>
-                <li><a href="https://1337x.to"><img src="buttons/piracy.png" width="88px" height="31px" alt="button (grey) that says 'piracy now!', with a jolly roger flag to the left and a black banner that says 'free' on the to the bottom right | by unknown; retouched by futile"></a></li>
-            </ul>
-        </div>
-        <div class="footer">
-            <p id="quote">who are you</p>&nbsp;
-            <p id="bullet" style="user-select: none;">◇</p>&nbsp;
-            <p><a class="click" target="_blank" href="https://codeberg.org/futile">git</a></p>&nbsp;
-            <p><a class="click" target="_blank" href="https://steamcommunity.com/id/elituf">steam</a></p>
-        </div>
-    </div>
-</body>
 
 </html>

justfile

@@ -0,0 +1,13 @@
+server := "futile@futile.eu"
+
+deploy-wasm:
+    trunk build --release
+    ssh {{server}} 'rm -rf /var/www/futile.eu/dist/'
+    scp -pr dist/ {{server}}:/var/www/futile.eu/dist/
+
+deploy-caddy:
+    scp -pr Caddyfile {{server}}:/home/futile/Caddyfile
+    ssh {{server}} 'sudo mv /home/futile/Caddyfile /etc/caddy/Caddyfile'
+    ssh {{server}} 'sudo systemctl reload caddy'
+
+deploy: deploy-wasm deploy-caddy

src/main.rs

@@ -0,0 +1,80 @@
+use gloo::timers::callback::Interval;
+use yew::prelude::*;
+
+const HIRE_MESSAGE: &str = "hey!\ncould use a second pair of hands with something? programming, sys administration, or otherwise technical?\n\ni would love to work with/for you! reach out to me via email [me@futile.eu] (even just to exchange info for another platform)! paying me is optional, just be upfront with what you wish to do.";
+const QUOTES: [&str; 6] = [
+    "who are you",
+    "lorem ipsum dolor sit amet",
+    "hot garfields in your area",
+    "remember to drink water",
+    "i am not a web developer",
+    "it's nice, isn't it?",
+];
+
+fn hire() -> Callback<MouseEvent> {
+    Callback::from(|_| {
+        web_sys::window()
+            .unwrap()
+            .alert_with_message(HIRE_MESSAGE)
+            .unwrap();
+    })
+}
+
+#[function_component(Page)]
+fn page() -> Html {
+    let hire = hire();
+    let quote = use_state(|| fastrand::choice(QUOTES).unwrap());
+    let bullet = use_state(|| '◇');
+    {
+        let bullet = bullet.clone();
+        use_effect(move || {
+            let interval = Interval::new(1000, move || {
+                bullet.set(if *bullet == '◇' { '◆' } else { '◇' });
+            });
+            || drop(interval)
+        });
+    }
+    html! {
+    <>
+        <div class="box">
+        <h1 class="main-title"> { "futile" } </h1>
+        </div>
+        <hr class="separator" />
+        <div class="box">
+            <p class="content">
+                { "hello, my name is futile. i am a weird concept from the internet (or a person from europe, depending on who you ask)." }<br /><br />
+                { "i like programming (mostly rust), computers, linux, malicious software like game hacks and malware, and any vehicle whether it drives or flies." }<br /><br />
+                { "everything i know about the aforementioned things is self-taught. i also speak both english and russian fluently." }<br /><br />
+                { "if you want to contact me, email " }<a class="click" href="mailto:me@futile.eu"> { "me@futile.eu" } </a><br /><br />
+                <a class="button shiny" onclick={hire}> { "hire me!" } </a>
+            </p>
+        </div>
+        <div class="button_container">
+            <div class="buttons">
+                <ul class="buttons">
+                    <li><a href="https://futile.eu"><img src="static/buttons/futile.png" width="88px" height="31px" alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile" /></a></li>
+                    <li><a href="https://xenia.blahaj.land/"><img src="static/buttons/rose_88x31.png" width="88px" height="31px" alt="button that says 'rose' with a rose growing out of the 'o', with milk-chan to the right of the text | by rose" /></a></li>
+                    <li><iframe src="https://incr.easrng.net/badge?key=futile" style="background: url(https://incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe></li>
+                    <li><a href="https://fedoraproject.org/spins/kde"><img src="static/buttons/fedora.png" width="88px" height="31px" alt="button that says 'powered by fedora' in white and blue, with the fedora logo to the left | by unknown; retouched by futile" /></a></li>
+                    <li><a href="https://mozilla.org/firef&nbsp;x"><img src="static/buttons/firefox4.gif" width="88px" height="31px" alt="button that flashes between the texts 'tested on' and 'firefox' in firefox's orange, yellow, and purple scheme, with the firefox logo to the left | by unknown" /></a></li>
+                    <li><a href="https://vscodium.com"><img src="static/buttons/vscodium.com.png" width="88px" height="31px" alt="button that says 'made with vscodium' in light blue, with the vscodium logo to the right | by unknown" /></a></li>
+                    <li><img src="static/buttons/FirtniteButton.png" width="88px" height="31px" alt="button that says 'firtnite' (a misspelling of 'fortnite'), otherwise looks very similar to an old fortnite title screen | by unknown" /></li>
+                    <li><a href="https://ublockorigin.com"><img src="static/buttons/ublock.png" width="88px" height="31px" alt="button (grey) that says 'ublock origin now!', with the ublock origin red logo to the left | by unknown" /></a></li>
+                    <li><a href="https://rust-lang.org"><img src="static/buttons/rustNOW.png" width="88px" height="31px" alt="button (grey) that says 'rust now!', with the rust gear logo to the left and a yellow banner that says '1.82.0' on the to the bottom right | by futile" /></a></li>
+                    <li><a href="https://1337x.to"><img src="static/buttons/piracy.png" width="88px" height="31px" alt="button (grey) that says 'piracy now!', with a jolly roger flag to the left and a black banner that says 'free' on the to the bottom right | by unknown; retouched by futile" /></a></li>
+                </ul>
+            </div>
+            <div class="footer">
+                <p> { *quote } </p>
+                <p style="user-select: none;"> { *bullet } </p>
+                <p><a class="click" target="_blank" href="https://codeberg.org/futile"> { "git" } </a></p>
+                <p><a class="click" target="_blank" href="https://steamcommunity.com/id/elituf"> { "steam" } </a></p>
+            </div>
+        </div>
+    </>
+    }
+}
+
+fn main() {
+    yew::Renderer::<Page>::new().render();
+}

style.css

@@ -0,0 +1,155 @@
+@import url(https://fonts.bunny.net/css?family=bokor:400|ibm-plex-mono:400);
+
+body {
+    background-color: black;
+    color: white;
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+p {
+    letter-spacing: -0.07em;
+}
+
+.box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+
+.main-title {
+    font-family: 'Bokor', serif;
+    font-size: 5em;
+    line-height: 1em;
+    margin-top: 0.2em;
+    margin-bottom: 0em;
+    user-select: none;
+    font-weight: normal;
+}
+
+/* hacky way of making my font look nicer on firefox 
+while having chrome's rendering of it not be bloated 
+*/
+@supports (-moz-appearance: none) {
+    .main-title {
+        font-weight: bold;
+    }
+}
+
+.separator {
+    color: white;
+    margin-top: 0.5em;
+    margin-bottom: 0em;
+    width: 50px;
+}
+
+.content {
+    line-height: 1.3em;
+}
+
+.click {
+    color: white;
+    text-decoration: underline dotted;
+}
+
+.click:hover {
+    text-decoration: underline solid;
+}
+
+.button {
+    display: inline-block;
+    padding: 3px 6px;
+    font-size: 16px;
+    text-align: center;
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    cursor: pointer;
+    text-decoration: none;
+    border-radius: 0;
+}
+
+.shiny {
+    position: relative;
+    overflow: hidden;
+}
+
+.shiny::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -110%;
+    width: 110%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.5);
+    transform: skewX(-30deg);
+    animation: shine 5s infinite;
+    animation-delay: 5s;
+    visibility: hidden;
+}
+
+@keyframes shine {
+    0% {
+        left: -110%;
+        visibility: hidden;
+    }
+
+    10% {
+        visibility: visible;
+        left: 110%;
+    }
+
+    100% {
+        left: 110%;
+    }
+}
+
+.button_container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+div.buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 480px;
+    margin: 0 auto;
+    padding: 0 20px;
+    position: relative;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+}
+
+ul.buttons {
+    list-style-type: none;
+    margin: -8px;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 20px;
+    justify-content: center;
+}
+
+ul.buttons li {
+    line-height: 0;
+}
+
+a {
+    color: white;
+}
+
+div.footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 3em;
+    font-size: 0.95em;
+    gap: 5px;
+}