Compare commits

..

No commits in common. "e0a72a9a2c5e2aace242ba772fbabfba16a17ff4" and "3f0f14aa38cba4492c93012a6ac9989ff8055308" have entirely different histories.

4 changed files with 23 additions and 50 deletions

2
.gitignore vendored
View file

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

View file

@ -1,12 +1,10 @@
This repository contains the code for my personal site, hosted at [carya.software](https://www.carya.software). This repository contains the code for my personal site, hosted at [carya.software](https://www.carya.software).
# Building # Building
"Building" the site such that it can be deployed is simple. Clone the repository, add the relevant font(s), and compile the tailwindCSS. "Building" the site such that it can be deployed is simple. Clone the repository, add the relevant font .ttf files, and compile the tailwindCSS.
## Fonts ## Fonts
Obtain the file [ioseevka_ter_regular.ttf](https://typeof.net/Iosevka/)and put it in the fonts folder. Obtain the files [ioseevka_ter_regular.ttf](https://typeof.net/Iosevka/) and [OFLGoudyStMTT.ttf](https://www.1001fonts.com/ofl-sorts-mill-goudy-font.html) and put them in the fonts folder.
## Tailwind ## Tailwind
[Install TailwindCSS](https://tailwindcss.com/docs/installation) (site most recently built with v3.3.3) with npm if you haven't already. Compile the CSS with the following terminal command. [Install TailwindCSS](https://tailwindcss.com/docs/installation) (site most recently built with v3.3.3) with npm if you haven't already. Compile the CSS with the following terminal command.
npx tailwindcss -i ./css/theme.css -o ./css/theme-compiled.css npx tailwindcss -i ./www/css/theme.css -o ./www/css/theme-compiled.css
Open index.html and the site should look as it does at [carya.software](https://www.carya.software).

View file

@ -9,7 +9,7 @@
@font-face { @font-face {
font-family: 'TitleFont'; font-family: 'TitleFont';
src: url('../font/ioseevka_term_regular.ttf') format('truetype'); src: url('../font/OFLGoudyStMTT.ttf') format('truetype');
} }
body { body {
@ -20,6 +20,7 @@ body {
.title { .title {
font-family: TitleFont; font-family: TitleFont;
font-feature-settings: "c2sc", "smcp";
font-size: 72px; font-size: 72px;
} }

View file

@ -11,7 +11,7 @@
<!-- <div class="mx-4 order-last"> --> <!-- <div class="mx-4 order-last"> -->
<!-- <img class="logo" src="img/logo.svg" alt="carya.software logo"> --> <!-- <img class="logo" src="img/logo.svg" alt="carya.software logo"> -->
<!-- </div> --> <!-- </div> -->
<div class="mx-4 self-center mt-16 max-w-xl min-w-xl"> <div class="mx-4 self-center mt-16 max-w-3xl min-w-2xl">
<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">
@ -19,28 +19,25 @@
<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">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] p-2 mx-14">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-1">
This is my personal website. This is my personal website.
</p> </p>
<p class="p-2"> <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>. 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>
<p class="p-2"> <p class="p-1">
If you got here from my resume you may want to look at the projects tab or head to my <a class="underline" href="https://forge.carya.software/explore/repos">Forgejo instance</a> (a lightweight FOSS git software forge) directly. 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>
<p class="p-2">
If you need to contact me 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> </p>
</div> </div>
<h2 class="font-semibold text-[#0a210f] p-2">Who are you?</h2> <h2 class="font-semibold text-[#0a210f] p-2">Who are you?</h2>
<div class="text-left"> <div class="text-left">
<p class="p-2"> <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>. 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-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. 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>
@ -52,40 +49,16 @@
</div> </div>
</div> </div>
<div id="projects" class="hidden"> <div id="projects" class="hidden">
<ul class="p-2 list-disc"> <ul class="p-2">
<li> <li>TBD<li>
<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">
<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>SSL certificates managed using Certbot</li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div id="contact" class="hidden"> <div id="contact" class="hidden">
<div class=""> <ul class="p-2">
<table class="table-auto mx-auto my-8 font-[#0a210f]"> <li>Email: TBD</li>
<tbody> <li>Matrix: TBD</li>
<tr> <!-- <li>Fediverse: <a class="underline" href="https://pleroma.carya.software/users/TeO3">@TeO3@pleroma.carya.software</a></li> -->
<td class="p-2"> </ul>
<label class="font-semibold text-[#0a210f]">Email:</label>
</td>
<td class="p-2">
TBD, redacted due to spambots.
</td>
</tr>
<tr>
<td class="p-2">
<label class="font-semibold text-[#0a210f]">Matrix:</label>
</td>
<td class="p-2">
TBD
</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -97,6 +70,8 @@
hiddenClass = "hidden"; hiddenClass = "hidden";
revealedClass = "visible"; revealedClass = "visible";
function switchClasses(element, toRemove, toInsert){ function switchClasses(element, toRemove, toInsert){
console.log(toRemove);
console.log(element.classList);
element.classList.remove(toRemove); element.classList.remove(toRemove);
element.classList.add(toInsert); element.classList.add(toInsert);
} }
@ -109,6 +84,7 @@
id = button.textContent; id = button.textContent;
ids = ["about", "projects", "contact"]; ids = ["about", "projects", "contact"];
ids.filter(i => i !== id).forEach(hide); ids.filter(i => i !== id).forEach(hide);
console.log("All hidden!");
element = document.getElementById(id); element = document.getElementById(id);
if(element.classList.contains(revealedClass)){ if(element.classList.contains(revealedClass)){
switchClasses(element, revealedClass, hiddenClass); switchClasses(element, revealedClass, hiddenClass);