Compare commits
No commits in common. "960fac2c14fbce5805d55869c4538365c210aa33" and "e0a72a9a2c5e2aace242ba772fbabfba16a17ff4" have entirely different histories.
960fac2c14
...
e0a72a9a2c
3 changed files with 9 additions and 42 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,4 +1,3 @@
|
||||||
*~
|
*~
|
||||||
theme-compiled.css
|
theme-compiled.css
|
||||||
font/*.ttf
|
font/*.ttf
|
||||||
*.jpg
|
|
||||||
|
|
|
||||||
34
index.html
34
index.html
|
|
@ -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] px-6 mx-8 pt-2 mb-2">about</button>
|
<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">projects</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">contact</button>
|
<button onclick="toggleSections(this)" class="text-xl text-[#14591e] p-2 mx-14">contact</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="about" class="hidden">
|
<div id="about" class="hidden p-2">
|
||||||
<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, 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.
|
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>
|
</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-none list-inside">
|
<ul class="p-2 list-disc">
|
||||||
<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 list-inside">
|
<ul class="p-2 list-disc">
|
||||||
<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,39 +94,23 @@
|
||||||
<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(hasClasses(element, [revealedClass])){
|
if(element.classList.contains(revealedClass)){
|
||||||
switchClasses(element, revealedClass, hiddenClass);
|
switchClasses(element, revealedClass, hiddenClass);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!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>
|
|
||||||
Loading…
Reference in a new issue