Skip to content

Commit

Permalink
Merge pull request #1 from karsonkalt/add-about
Browse files Browse the repository at this point in the history
Add about
  • Loading branch information
karsonkalt authored Jul 17, 2024
2 parents 60b9a44 + c4c88d2 commit fc63e2c
Show file tree
Hide file tree
Showing 18 changed files with 247 additions and 128 deletions.
94 changes: 77 additions & 17 deletions _layouts/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@ <h1>Karson Kalt</h1>
fill="none"
>
<rect x="1.5" y="4.36" width="21" height="15.27" fill="none"></rect>
<polyline
points="1.5 4.36 12 14.86 22.5 4.36"
fill="none"
></polyline></svg
>Email
<polyline points="1.5 4.36 12 14.86 22.5 4.36" fill="none"></polyline>
</svg>
Email
</a>
</nav>
</div>
Expand All @@ -44,6 +42,7 @@ <h1>Karson Kalt</h1>
{{ site.status_updated | date: "%B %-d" }}
</div>
<div class="gravatar-status-status">{{ site.status }}</div>
<div id="github-status"></div>
</div>
</div>

Expand All @@ -60,10 +59,31 @@ <h1>Karson Kalt</h1>
</div>
</div>

<!-- <div class="tab-container" hidden> -->
<div class="tab-container">
<div>
<div role="tablist">
<button
role="tab"
id="about"
aria-controls="tab-panel-4"
aria-selected="false"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
stroke-width="1.5"
width="12"
height="12"
fill="none"
>
<circle cx="12" cy="7.25" r="5.73" stroke="currentColor"></circle>
<path
stroke="currentColor"
d="M1.5,23.48l.37-2.05A10.3,10.3,0,0,1,12,13h0a10.3,10.3,0,0,1,10.13,8.45l.37,2.05"
></path>
</svg>
About
</button>
<button
role="tab"
id="blog"
Expand Down Expand Up @@ -124,9 +144,8 @@ <h1>Karson Kalt</h1>
<button
role="tab"
id="notes"
aria-controls="tab-panel-3"
aria-controls="tab-panel-1"
aria-selected="false"
tabindex="-1"
>
<svg
id="Layer_1"
Expand Down Expand Up @@ -167,9 +186,8 @@ <h1>Karson Kalt</h1>
<button
role="tab"
id="console"
aria-controls="tab-panel-1"
aria-controls="tab-panel-3"
aria-selected="false"
tabindex="-1"
>
<svg
width="12"
Expand Down Expand Up @@ -215,7 +233,7 @@ <h1>Karson Kalt</h1>
</ul>
</div>

<div id="tab-panel-3" role="tabpanel" aria-labelledby="notes" hidden>
<div id="tab-panel-1" role="tabpanel" aria-labelledby="notes" hidden>
<ul class="tab-panel-content">
{%- for note in notes -%} {% assign tags = note.tags %}
<li>
Expand Down Expand Up @@ -246,15 +264,57 @@ <h1>Karson Kalt</h1>
</ul>
</div>

<div id="tab-panel-1" role="tabpanel" aria-labelledby="stdout" hidden>
<div id="tab-panel-3" role="tabpanel" aria-labelledby="stdout" hidden>
<ul class="tab-panel-content stdout-log"></ul>
</div>

<div id="tab-panel-4" role="tabpanel" aria-labelledby="stdout" hidden>
<ul class="tab-panel-content">
<section>
<h2>About</h2>
<p>
I'm a software engineer with a passion for building things that
live on the internet. I develop exceptional websites and web apps
that provide intuitive, pixel-perfect user interfaces with
efficient and modern backends.
</p>
<p>
Growing up, I was always interested in design and technology. My
favorite book was <a>The Way Things Work by David Macaulay</a>. I
loved the illustrations and the way it explained how things worked
in a simple and fun way. I was also fascinated by the internet and
how it connected people from all over the world.
</p>
</section>
<section>
<h2>Work History</h2>
<p>
I began my professional career in 2014 working as a store manager
for <a>Target</a>. After a few very challenging, but very
rewarding roles, I re-evaluated my career path and gave myself
permission to pursue my passion of tech and building things.
</p>
<p>
I started my journey by attending a coding bootcamp at
<a>Flatiron School</a> in 2019. I learned the fundamentals of
software engineering and web development. I've been building
websites and web apps ever since.
</p>
<p>
In 2020 I joined <a>JupiterOne</a> as a Software Engineer. Since
then, I've been committed to advancing my technical capabilities,
learning new technologies, and building projects that I'm proud
of.
</p>
<p>
In 2024 I became a Senior Software Engineer at JupiterOne. I
continue to grow and learn every day.
</p>
</section>
</ul>
</div>
</div>
</div>
</div>

<script
src="{{ 'assets/js/terminal.js' | relative_url }}"
type="module"
></script>
<script src="{{ 'assets/js/tabs.js' | relative_url }}" type="module"></script>
<script src="{{ 'assets/js/home.js' | relative_url }}" type="module"></script>
6 changes: 6 additions & 0 deletions _sass/custom-styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -496,6 +496,12 @@ a .domain {
}
}

#github-status {
margin-top: 10px;
font-size: 11px;
color: var(--text--secondary);
}

[role="tab"] {
all: unset;
bottom: -1px;
Expand Down
4 changes: 2 additions & 2 deletions assets/js/terminal.js → assets/js/home.js

Large diffs are not rendered by default.

File renamed without changes.
1 change: 0 additions & 1 deletion assets/js/tabs.js

This file was deleted.

57 changes: 57 additions & 0 deletions assets/ts/home/githubStatus.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const GITHUB_USERNAME = "karsonkalt";

type GitHubEvent = {
actor: {
id: number;
login: string;
display_login: string;
gravatar_id: string;
url: string;
};
created_at: string;
id: string;
payload: {
repository_id: number;
push_id: number;
size: number;
distinct_size: number;
ref: string;
};
public: boolean;
repo: {
id: number;
name: string;
url: string;
};
type: string;
};

export const addGithubStatus = () => {
const url = `https://api.github.com/users/${GITHUB_USERNAME}/events/public`;
fetch(url)
.then((response) => response.json())
.then((data) => {
if (data.length === 0) {
return;
}
const latestEvent = data[0] as GitHubEvent;
const latestGithubInteractionDate = new Date(latestEvent.created_at);
const githubStatusElement = document.getElementById("github-status");
if (githubStatusElement) {
const formattedDate = latestGithubInteractionDate.toLocaleString(
"default",
{
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
hour12: true,
}
);
githubStatusElement.innerHTML = `Last GitHub Activity: ${formattedDate}`;
}
})
.catch((error) => {
console.error("Error fetching activity", error.message);
});
};
9 changes: 9 additions & 0 deletions assets/ts/home/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { addGithubStatus } from "./githubStatus";
import { addTabs } from "./tabs";
import { addTerminal } from "./terminal/index";

document.addEventListener("DOMContentLoaded", () => {
addTabs();
addTerminal();
addGithubStatus();
});
69 changes: 69 additions & 0 deletions assets/ts/home/tabs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
export const addTabs = () => {
const TAB_QUERY_SELECTOR = "[role='tab']";

const tabNodes = Array.from(document.querySelectorAll(TAB_QUERY_SELECTOR));
const bottomDrawerNode = document.querySelector(".bottom-drawer");

const promptElement = document.querySelector(".prompt") as HTMLInputElement;

tabNodes.forEach((tab) => {
tab.addEventListener("click", () => {
history.replaceState(null, "", "#" + tab.id);
applyChanges(tab);
});
});

window.onhashchange = function () {
const tab = document.querySelector(location.hash);
if (tab) {
applyChanges(tab);
}
};

function applyChanges(clickedTab: Element) {
updateBadge(clickedTab.getAttribute("id") === "console");

tabNodes.forEach((tab) => {
const isSelected = tab === clickedTab;
tab.setAttribute("aria-selected", isSelected.toString());

const tabPanelId = tab.getAttribute("aria-controls");
const tabPanel = document.getElementById(tabPanelId || "");

if (!tabPanel) {
return;
}

if (isSelected) {
tabPanel.removeAttribute("hidden");
} else {
tabPanel.setAttribute("hidden", "");
}
});

if (clickedTab.getAttribute("id") === "console") {
bottomDrawerNode?.setAttribute("open", "");
promptElement.focus();
} else {
bottomDrawerNode?.removeAttribute("open");
promptElement.blur();
}
}

// duplicated from other
function updateBadge(hasUnreadStdout: boolean) {
const consoleTab = document.querySelector("#console");
const badge = consoleTab?.querySelector(".unread-badge");

if (hasUnreadStdout) {
badge?.classList.remove("show");
}
}

if (location.hash) {
const tab = document.querySelector(location.hash);
if (tab) {
applyChanges(tab);
}
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -63,28 +63,11 @@ class UserInputManager {
`;

ul.insertBefore(li, ul.firstChild);

const currentTab = document.querySelector(
'button[role="tab"][aria-selected="true"]'
)?.id;
if (currentTab) this.updateBadge(currentTab !== "console");
}

private updateBadge(hasUnreadStdout: boolean) {
const stdoutTab = document.querySelector("#stdout") as Element;
const badge = stdoutTab.querySelector(".unread-badge") as Element;

if (hasUnreadStdout) {
badge.classList.add("show");
}
}

private switchTab(tabName: string) {
if (tabName === "stdout") {
const currentTab = document.querySelector(
'button[role="tab"][aria-selected="true"]'
)?.id;
if (currentTab) this.updateBadge(currentTab !== "stdout");
document.querySelector('button[role="tab"][aria-selected="true"]')?.id;
}
}

Expand Down
File renamed without changes.
18 changes: 18 additions & 0 deletions assets/ts/home/terminal/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { UserInputManager } from "./UserInputManager";

export const addTerminal = () => {
const prompt = document.querySelector(".prompt") as HTMLInputElement;
const mirrorElement = document.querySelector(
".input-mirror"
) as HTMLDivElement;
const terminal = document.querySelector(".terminal") as HTMLDivElement;

const userInputManager = new UserInputManager(
prompt,
terminal,
mirrorElement
);

userInputManager.handleBashCommand("restore", false); // TODO I dont like this
userInputManager.handleBashCommand("help", true);
};
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion assets/ts/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { insertThemeButton } from "./terminal/themeButton";
import { insertThemeButton } from "./home/terminal/themeButton";

console.log(`
▄▄▄ ▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ ▄▄ ▄
Expand Down
Loading

0 comments on commit fc63e2c

Please sign in to comment.