Compare commits

..

4 commits

Author SHA1 Message Date
Author
960fac2c14 Added mushrooms page, ignored .jpg files 2023-09-23 17:28:48 -04:00
Author
5f4f9e1c30 Javascript changes 2023-09-23 17:27:21 -04:00
Author
2ad31d052e Altered about me blurb 2023-09-23 17:27:06 -04:00
Author
58051d2181 Fixed formatting 2023-09-23 17:26:55 -04:00
3 changed files with 42 additions and 9 deletions

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
*~ *~
theme-compiled.css theme-compiled.css
font/*.ttf font/*.ttf
*.jpg

View file

@ -15,11 +15,11 @@
<h1 class="title text-center">carya.software</h1> <h1 class="title text-center">carya.software</h1>
<div class="justify-center"> <div class="justify-center">
<div class="flex 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] px-6 mx-8 pt-2 mb-2">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] px-6 mx-8 pt-2 mb-2">projects</button>
<button onclick="toggleSections(this)" class="text-xl text-[#14591e] p-2 mx-14">contact</button> <button onclick="toggleSections(this)" class="text-xl text-[#14591e] px-6 mx-8 pt-2 mb-2">contact</button>
</div> </div>
<div id="about" class="hidden p-2"> <div id="about" class="hidden">
<h2 class="font-semibold text-[#0a210f] p-2">What is this site?</h2> <h2 class="font-semibold text-[#0a210f] p-2">What is this site?</h2>
<div class="text-left"> <div class="text-left">
<p class="p-2"> <p class="p-2">
@ -41,7 +41,7 @@
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>. 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>
<p class="p-2"> <p class="p-2">
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. Outside of spending time with family, church, and community I garden, work on personal projects, read, and attempt to identify the <a class="underline" href="mushrooms.html">various fungi</a> I find growing in my yard.
</p> </p>
</div> </div>
<h2 class="font-semibold text-[#0a210f] p-2">What does "carya" mean?</h2> <h2 class="font-semibold text-[#0a210f] p-2">What does "carya" mean?</h2>
@ -52,10 +52,10 @@
</div> </div>
</div> </div>
<div id="projects" class="hidden"> <div id="projects" class="hidden">
<ul class="p-2 list-disc"> <ul class="p-2 list-none list-inside">
<li> <li>
<a class="underline font-semibold" href="https://forge.carya.software/Public/carya.software">Carya.software</a> — the source code for this site. <a class="underline font-semibold" href="https://forge.carya.software/Public/carya.software">Carya.software</a> — the source code for this site.
<ul class="p-2 list-disc"> <ul class="p-2 list-disc list-inside">
<li>Built using basic HTML, TailwindCSS, and vanilla JavaScript. Hosted on a VPS with Nginx running on Debian.</li> <li>Built using basic HTML, TailwindCSS, and vanilla JavaScript. Hosted on a VPS with Nginx running on Debian.</li>
<li>I have additional services running on subdomains on the same server. For example, I host my public repositories at forge.carya.software, and I have a pleroma instance on pleroma.carya.software</li> <li>I have additional services running on subdomains on the same server. For example, I host my public repositories at forge.carya.software, and I have a pleroma instance on pleroma.carya.software</li>
<li>SSL certificates managed using Certbot</li> <li>SSL certificates managed using Certbot</li>
@ -94,23 +94,39 @@
<html> <html>
<script> <script>
function toggleSections(button){ function toggleSections(button){
// Constants
hiddenClass = "hidden"; hiddenClass = "hidden";
revealedClass = "visible"; revealedClass = "visible";
ids = ["about", "projects", "contact"];
selectedClasses = ["border-[#14591e]" , "border-b-2"]
// Helper functions
function switchClasses(element, toRemove, toInsert){ function switchClasses(element, toRemove, toInsert){
element.classList.remove(toRemove); element.classList.remove(toRemove);
element.classList.add(toInsert); element.classList.add(toInsert);
} }
function removeClasses(element, classes){
element.classList.forEach()
}
function hide(id) { function hide(id) {
switchClasses(document.getElementById(id), revealedClass, hiddenClass); switchClasses(document.getElementById(id), revealedClass, hiddenClass);
} }
function show(id) { function show(id) {
switchClasses(document.getElementById(id), hiddenClass, revealedClass); switchClasses(document.getElementById(id), hiddenClass, revealedClass);
} }
function hasClasses(element, classes){
return classes.map(c => element.classList.contains(c)).reduce((acc, b) => acc && b, true);
}
// Handle underline for tab buttons
parent = button.parentElement;
// Remove selection classes from other buttons
// If button clicked already selected, unselect
// Otherwise select
// Manage hiding/showing content
id = button.textContent; id = button.textContent;
ids = ["about", "projects", "contact"];
ids.filter(i => i !== id).forEach(hide); ids.filter(i => i !== id).forEach(hide);
element = document.getElementById(id); element = document.getElementById(id);
if(element.classList.contains(revealedClass)){ if(hasClasses(element, [revealedClass])){
switchClasses(element, revealedClass, hiddenClass); switchClasses(element, revealedClass, hiddenClass);
return; return;
} }

16
mushrooms.html Normal file
View file

@ -0,0 +1,16 @@
<!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] flex justify-center">
<div class="content-center text-center max-w-lg">
<h1 class="text-xl">Mushrooms I've found in and around my property.</h1>
<p>More pictures — and information — coming soon!</p>
<img height="512" width="512" src="mushrooms.jpg" alt="An unknown — for now — conical brown cap mushroom with white stem."></img>
</div
</body>
<html>