diff options
Diffstat (limited to 'users/wpcarro/website/fragments')
| -rw-r--r-- | users/wpcarro/website/fragments/.skip-subtree | 0 | ||||
| -rw-r--r-- | users/wpcarro/website/fragments/homepage.html | 20 | ||||
| -rw-r--r-- | users/wpcarro/website/fragments/template.html | 101 |
3 files changed, 121 insertions, 0 deletions
diff --git a/users/wpcarro/website/fragments/.skip-subtree b/users/wpcarro/website/fragments/.skip-subtree new file mode 100644 index 000000000000..e69de29bb2d1 --- /dev/null +++ b/users/wpcarro/website/fragments/.skip-subtree diff --git a/users/wpcarro/website/fragments/homepage.html b/users/wpcarro/website/fragments/homepage.html new file mode 100644 index 000000000000..f515d974001e --- /dev/null +++ b/users/wpcarro/website/fragments/homepage.html @@ -0,0 +1,20 @@ +<section class="leading-7"> + <p class="relative text-3xl text-center font-bold pt-6 md:pt-14 pb-10"> + Hey! I'm Bill.<span class="pl-10 relative"><span class="block absolute right-0 top-0 transition-transform hover:rotate-90">๐</span></span> + </p> + <p class="pb-4"> + I write software. Currently I work as a <b>Site Reliability Engineer</b> for + <a class="text-blue-600 font-bold hover:underline" href="https://drive.google.com">Google Drive</a>. + </p> + <p class="pb-4"> + I'm <b>wpcarro</b> on + <a class="font-bold text-blue-600 hover:underline" href="@github@">GitHub</a> + (and elsewhere), but if you're looking for code samples, the majority of + my open-source work resides in a magical place called the + <a class="font-bold text-blue-600 hover:underline" href="@depotWork@">depot</a>. + </p> + <p class="pb-4"> + If I'm not coding, I'm likely meditating, training Jiu Jitsu, or + fumbling around on the piano or drums. + </p> +</section> diff --git a/users/wpcarro/website/fragments/template.html b/users/wpcarro/website/fragments/template.html new file mode 100644 index 000000000000..241e11a12f9b --- /dev/null +++ b/users/wpcarro/website/fragments/template.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>@domain@</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono"> + <script src="https://cdn.tailwindcss.com"></script> + <script> + tailwind.config = { + theme: { + extend: { + fontFamily: { + mono: ["JetBrains Mono", "normal"] + }, + }, + }, + }; + </script> + </head> + <body class="font-mono bg-gray-100"> + <header class="sticky z-10 transition duration-300 bg-gray-100 top-0 py-6"> + <div class="flex max-w-sm md:max-w-3xl mx-auto"> + <div class="flex-1 text-center md:text-left text-xl md:text-base"> + <a href="@depotWork@/website"> + <h1 class="font-bold"> + <span class="text-black">(</span><a class="text-purple-600 hover:underline" href="@depotWork@/website">def</a> <a class="text-green-600 hover:underline text-bold" href="@homepage@">"@domain@"</a><span class="text-black">)</span> + </h1> + </a> + </div> + <nav class="flex-1 hidden md:block"> + <ul class="list-reset flex justify-end space-x-8"> + <li> + <a class="hover:underline" href="@habits@"> + Habits + </a> + </li> + <li> + <a class="hover:underline" href="@blog@"> + Blog + </a> + </li> + <li> + <a class="hover:underline" href="@github@"> + GitHub + </a> + </li> + <li> + <a class="hover:underline" href="@linkedin@"> + LinkedIn + </a> + </li> + </ul> + </nav> + </div> + </header> + <div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto"> + @contentHtml@ + <footer class="md:hidden pb-6"> + <h2 class="text-xl font-bold py-4">More Bill?</h2> + <ul> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="@homepage@"> + Home <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="@blog@"> + Blog <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="@github@"> + GitHub <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="@linkedin@"> + LinkedIn <span class="text-blue-300">-></span> + </a> + </li> + <li class="pb-6"> + <a class="text-blue-600 font-bold" href="https://www.buymeacoffee.com/billandhisjoe"> + Caffeinate Bill? <span class="text-blue-300">-></span> + </a> + </li> + </ul> + </footer> + </div> + <script> + const $header = document.querySelector("header"); + const dropShadow = "drop-shadow-md"; + const update = () => window.scrollY !== 0 ? + $header.classList.add(dropShadow) : + $header.classList.remove(dropShadow); + + update(); + document.addEventListener("scroll", update); + </script> + </body> +</html> |