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).
|
||||
|
||||
# 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
|
||||
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
|
||||
[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-family: 'TitleFont';
|
||||
src: url('../font/OFLGoudyStMTT.ttf') format('truetype');
|
||||
src: url('../font/ioseevka_term_regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -20,7 +20,6 @@ body {
|
|||
|
||||
.title {
|
||||
font-family: TitleFont;
|
||||
font-feature-settings: "c2sc", "smcp";
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
|
|
|
|||
60
index.html
60
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<!-- <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">
|
||||
<div class="mx-4 self-center mt-16 max-w-xl min-w-xl">
|
||||
<h1 class="title text-center">carya.software</h1>
|
||||
<div class="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">contact</button>
|
||||
</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>
|
||||
<div class="text-left">
|
||||
<p class="p-1">
|
||||
<p class="p-2">
|
||||
This is my personal website.
|
||||
</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>.
|
||||
</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 class="p-2">
|
||||
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>
|
||||
</div>
|
||||
<h2 class="font-semibold text-[#0a210f] p-2">Who are you?</h2>
|
||||
<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>.
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -49,16 +52,40 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="projects" class="hidden">
|
||||
<ul class="p-2">
|
||||
<li>TBD<li>
|
||||
<ul class="p-2 list-disc">
|
||||
<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>
|
||||
</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 class="">
|
||||
<table class="table-auto mx-auto my-8 font-[#0a210f]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<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>
|
||||
|
|
@ -70,8 +97,6 @@
|
|||
hiddenClass = "hidden";
|
||||
revealedClass = "visible";
|
||||
function switchClasses(element, toRemove, toInsert){
|
||||
console.log(toRemove);
|
||||
console.log(element.classList);
|
||||
element.classList.remove(toRemove);
|
||||
element.classList.add(toInsert);
|
||||
}
|
||||
|
|
@ -84,7 +109,6 @@
|
|||
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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue