<!DOCTYPE html> <html> <head> <title>Carya Software</title> <meta charset="utf-8"> <!-- <link rel="stylesheet" type="text/css" href="css/theme.css"> --> <link rel="stylesheet" href="./css/theme-compiled.css" </head> <body class="bg-[#efe9f4]"> <div class="flex justify-center"> <!-- <div class="mx-4 order-last"> --> <!-- <img class="logo" src="img/logo.svg" alt="carya.software logo"> --> <!-- </div> --> <div class="mx-4 self-center mt-16 max-w-3xl min-w-2xl"> <h1 class="title text-center">carya.software</h1> <div class="justify-center"> <div class="flex justify-center"> <button onclick="toggleSections(this)" class="text-xl text-[#14591e] p-2 mx-14">about</button> <button onclick="toggleSections(this)" class="text-xl text-[#14591e] p-2 mx-14">projects</button> <button onclick="toggleSections(this)" class="text-xl text-[#14591e] p-2 mx-14">contact</button> </div> <div id="about" class="hidden"> <h2 class="font-semibold text-[#0a210f] p-2">What is this site?</h2> <div class="text-left"> <p class="p-1"> This is my personal website. </p> <p class="p-1"> I do not use my real name here for privacy reasons — <br> and because I like <span class="italic">carya.software</span> a lot more than <span class="italic">first-last.tld</span>. </p> <p class="p-1"> If you got here from my resume you may want to look at the projects tab <span class="line-through">(or head straight to my <a class="underline" href="https://forge.carya.software">Forgejo instance</a> (a fork of Gitea, a lightweight DevOps platform) to see open-source projects I've worked on</span>[coming soon™]. If you need to contact me for any reason you can find my various account addresses in the contact tab. I would be happy to chat once I know you aren't a web scraper! </p> </div> <h2 class="font-semibold text-[#0a210f] p-2">Who are you?</h2> <div class="text-left"> <p class="p-1"> I am a software engineer based on the East Coast of the USA. Professionally I have mostly worked with microsoft technology (.NET, SQL Server, et al) but for personal use I prefer <a class="underline text-[#4e2a8e]" href="https://elixir-lang.org/">Elixir</a>. </p> <p class="p-1"> Outside of spending time with family and community I garden, work on personal projects, read, and attempt to catalogue the various fungi I find growing in my yard. </p> </div> <h2 class="font-semibold text-[#0a210f] p-2">What does "carya" mean?</h2> <div class="text-left"> <p class="p-1"> It is the genus name for <a class="underline" href="https://en.wikipedia.org/wiki/Hickory">Hickory trees</a>, which I am fond of. </p> </div> </div> <div id="projects" class="hidden"> <ul class="p-2"> <li>TBD<li> </ul> </div> <div id="contact" class="hidden"> <ul class="p-2"> <li>Email: TBD</li> <li>Matrix: TBD</li> <!-- <li>Fediverse: <a class="underline" href="https://pleroma.carya.software/users/TeO3">@TeO3@pleroma.carya.software</a></li> --> </ul> </div> </div> </div> </div> </body> <html> <script> function toggleSections(button){ hiddenClass = "hidden"; revealedClass = "visible"; function switchClasses(element, toRemove, toInsert){ console.log(toRemove); console.log(element.classList); element.classList.remove(toRemove); element.classList.add(toInsert); } function hide(id) { switchClasses(document.getElementById(id), revealedClass, hiddenClass); } function show(id) { switchClasses(document.getElementById(id), hiddenClass, revealedClass); } id = button.textContent; ids = ["about", "projects", "contact"]; ids.filter(i => i !== id).forEach(hide); console.log("All hidden!"); element = document.getElementById(id); if(element.classList.contains(revealedClass)){ switchClasses(element, revealedClass, hiddenClass); return; } ids.filter(i => i === id).forEach(show); }; </script>