Compare commits
5 commits
3f0f14aa38
...
e0a72a9a2c
Author | SHA1 | Date | |
---|---|---|---|
|
e0a72a9a2c | ||
|
83c15f40cb | ||
|
6b4ea47476 | ||
|
a98ef75f5d | ||
|
42349b1e99 |
4 changed files with 50 additions and 23 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1 +1,3 @@
|
||||||
*~
|
*~
|
||||||
|
theme-compiled.css
|
||||||
|
font/*.ttf
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
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 .ttf files, and compile the tailwindCSS.
|
"Building" the site such that it can be deployed is simple. Clone the repository, add the relevant font(s), and compile the tailwindCSS.
|
||||||
## Fonts
|
## Fonts
|
||||||
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.
|
Obtain the file [ioseevka_ter_regular.ttf](https://typeof.net/Iosevka/)and put it 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 ./www/css/theme.css -o ./www/css/theme-compiled.css
|
npx tailwindcss -i ./css/theme.css -o ./css/theme-compiled.css
|
||||||
|
|
||||||
|
Open index.html and the site should look as it does at [carya.software](https://www.carya.software).
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'TitleFont';
|
font-family: 'TitleFont';
|
||||||
src: url('../font/OFLGoudyStMTT.ttf') format('truetype');
|
src: url('../font/ioseevka_term_regular.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -20,7 +20,6 @@ body {
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: TitleFont;
|
font-family: TitleFont;
|
||||||
font-feature-settings: "c2sc", "smcp";
|
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
60
index.html
60
index.html
|
@ -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-3xl min-w-2xl">
|
<div class="mx-4 self-center mt-16 max-w-xl min-w-xl">
|
||||||
<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,25 +19,28 @@
|
||||||
<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">
|
<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-1">
|
<p class="p-2">
|
||||||
This is my personal website.
|
This is my personal website.
|
||||||
</p>
|
</p>
|
||||||
<p class="p-1">
|
<p class="p-2">
|
||||||
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-1">
|
<p class="p-2">
|
||||||
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!
|
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.
|
||||||
|
</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-1">
|
<p class="p-2">
|
||||||
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-1">
|
<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 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>
|
||||||
|
@ -49,16 +52,40 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="projects" class="hidden">
|
<div id="projects" class="hidden">
|
||||||
<ul class="p-2">
|
<ul class="p-2 list-disc">
|
||||||
<li>TBD<li>
|
<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">
|
||||||
<ul class="p-2">
|
<div class="">
|
||||||
<li>Email: TBD</li>
|
<table class="table-auto mx-auto my-8 font-[#0a210f]">
|
||||||
<li>Matrix: TBD</li>
|
<tbody>
|
||||||
<!-- <li>Fediverse: <a class="underline" href="https://pleroma.carya.software/users/TeO3">@TeO3@pleroma.carya.software</a></li> -->
|
<tr>
|
||||||
</ul>
|
<td class="p-2">
|
||||||
|
<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>
|
||||||
|
@ -70,8 +97,6 @@
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
@ -84,7 +109,6 @@
|
||||||
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);
|
||||||
|
|
Loading…
Reference in a new issue