From 2ca9f3c80f22b7158beeeb173def4d19728ea67a Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Thu, 3 Aug 2023 19:31:43 -0400
Subject: [PATCH] Convert content from TSX to Markdown

---
 _components/footer.tsx                  |  1 +
 _includes/layouts/main.tsx              |  1 -
 _includes/styles/base.scss              | 39 +++++++-------
 _includes/styles/components/footer.scss |  2 +-
 gpg-key.md                              | 31 +++++++++++
 gpg-key.tsx                             | 51 ------------------
 index.md                                | 20 +++++++
 index.tsx                               | 33 ------------
 resume.md                               | 60 +++++++++++++++++++++
 resume.tsx                              | 71 -------------------------
 10 files changed, 132 insertions(+), 177 deletions(-)
 create mode 100644 gpg-key.md
 delete mode 100644 gpg-key.tsx
 create mode 100644 index.md
 delete mode 100644 index.tsx
 create mode 100644 resume.md
 delete mode 100644 resume.tsx

diff --git a/_components/footer.tsx b/_components/footer.tsx
index cb7bd06..b9d95f8 100644
--- a/_components/footer.tsx
+++ b/_components/footer.tsx
@@ -7,6 +7,7 @@ export default function({ comp }) {
 
   return (
     <footer className="page-footer">
+      {comp.separator()}
       <div className="social-links">
         <a href="https://code.fosterhangdaan.com/foster" title="Forgejo" target="_blank">
           <ForgejoIcon/>
diff --git a/_includes/layouts/main.tsx b/_includes/layouts/main.tsx
index 2c181ac..7b07d55 100644
--- a/_includes/layouts/main.tsx
+++ b/_includes/layouts/main.tsx
@@ -17,7 +17,6 @@ export default function({ title, description, children, comp }) {
         { comp.navbar() }
         { comp.header({title, description}) }
         <main>{children}</main>
-        { comp.separator() }
         { comp.footer() }
       </body>
     </html>
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 3080eab..becee92 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -17,11 +17,27 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+main {
+  padding: 0 1rem;
+  margin: 0 auto;
+  max-width: var(--page--max-width);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--color-blue);
+  font-weight: bold;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  border-bottom: 1px solid var(--color-black);
+  padding-bottom: 0.5rem;
+}
+
 p {
+  margin-top: 1rem;
   margin-bottom: 1rem;
-  &:only-child, &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 a {
@@ -53,23 +69,6 @@ hr {
   margin-bottom: 1rem;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  color: var(--color-blue);
-  font-weight: bold;
-}
-
-section {
-  padding: 1rem;
-  margin: 0 auto;
-  max-width: var(--page--max-width);
-  & > * {
-    margin-bottom: 1rem;
-  }
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
 code {
   padding: 0.1em 0.3em;
   border-radius: 3px;
diff --git a/_includes/styles/components/footer.scss b/_includes/styles/components/footer.scss
index 21d8c19..5a99c3d 100644
--- a/_includes/styles/components/footer.scss
+++ b/_includes/styles/components/footer.scss
@@ -2,7 +2,7 @@ .page-footer {
   text-align: center;
   max-width: var(--page--max-width);
   margin: 0 auto;
-  padding: 1rem;
+  padding: 2rem 1rem;
 
   .social-links {
     display: flex;
diff --git a/gpg-key.md b/gpg-key.md
new file mode 100644
index 0000000..e6f40a4
--- /dev/null
+++ b/gpg-key.md
@@ -0,0 +1,31 @@
+---
+title: GPG Key
+description: Information about my public GPG key and how to obtain it.
+---
+
+
+## Intro
+
+Before proceeding, I suggest reading up on GPG if you are unfamiliar with it.
+You can find more information about GPG on the [GnuPG official website](https://gnupg.org/){target="_blank"}.
+
+You can utilize the public key here to verify software and binaries released by me.
+
+You can also use the key to encrypt emails you send to me. In that case, I would also need your public key so I can encrypt the emails I send back to you.
+The excellent [Email Self-Defense Guide by the Free Software Foundation](https://emailselfdefense.fsf.org/){target="_blank"} describes how this process works.
+
+> I do not use keyservers. This is the only place where I provide my public key. A key claiming to be mine somewhere else is definitely a fake.
+
+## Obtaining my key
+
+Start by downloading my key: [Foster Hangdaan's Public Key](https://static.fosterhangdaan.com/foster-pubkey.asc){target="_blank"}{download}.
+
+Ensure that the key's fingerprint matches the one below:
+
+```
+pub   ed25519/E48D7F49A852F112 2023-07-14 [SC]
+      Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9  5BAE E48D 7F49 A852 F112
+uid                 Foster Hangdaan <foster@hangdaan.email>
+```
+
+If the fingerprints match, import the key so that it's ready for use.
diff --git a/gpg-key.tsx b/gpg-key.tsx
deleted file mode 100644
index b4a3af6..0000000
--- a/gpg-key.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-export const title = "GPG Key";
-
-export const description = "Information about my public GPG key and how to obtain it.";
-
-const gpgFingerprint = `
-pub   ed25519/E48D7F49A852F112 2023-07-14 [SC]
-      Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9  5BAE E48D 7F49 A852 F112
-uid                 Foster Hangdaan <foster@hangdaan.email>
-`;
-
-export default function() {
-  return (
-    <>
-      <section>
-        <h2>Intro</h2>
-        <p>
-          Before proceeding, I suggest reading up on GPG if you are unfamiliar with it.
-          You can find more information about GPG on the <a href="https://gnupg.org/" target="_blank">GnuPG official website</a>.
-        </p>
-        <p>You can utilize the public key here to verify software and binaries released by me.</p>
-        <p>
-          You can also use the key to encrypt emails you send to me. In that case, I would also need your public key so I can encrypt the emails I send back to you.
-          The excellent <a href="https://emailselfdefense.fsf.org/" target="_blank">Email Self-Defense Guide by the Free Software Foundation</a> describes how this process works.
-        </p>
-        <blockquote>
-          <p>
-            <strong className="highlight">NOTE: </strong>
-            I do not use keyservers.
-            This is the only place where I provide my public key.
-            A key claiming to be mine somewhere else is definitely a fake.
-          </p>
-        </blockquote>
-      </section>
-      <section>
-        <h2>Obtaining my key</h2>
-        <p>
-          Start by downloading my key: <a href="https://static.fosterhangdaan.com/foster-pubkey.asc" target="_blank" download>Foster Hangdaan's Public Key</a>.
-        </p>
-        <p>
-          Ensure that the key's fingerprint matches the one below:
-        </p>
-        <pre>
-          <code>
-            {gpgFingerprint.trim()}
-          </code>
-        </pre>
-        <p>If the fingerprints match, import the key so that it's ready for use.</p>
-      </section>
-    </>
-  );
-}
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..fe79eb3
--- /dev/null
+++ b/index.md
@@ -0,0 +1,20 @@
+---
+description: Software developer and open-source enthusiast.
+---
+
+## About Me
+
+I am a software developer, open-source enthusiast, lover of pizza, and renegade of funk.
+
+I speak fluent English and native Filipino. I also plan on learning German.
+
+You'll most likely find me within [my lab](https://code.fosterhangdaan.com/foster){target="_blank"} tinkering with my inventions and the latest JavaScript frameworks.
+An Android app and a Thunderbird extension are currently in the works.
+
+Other times, I help in the battle for an open web and for user privacy by contributing in the development of free and open-source software.
+
+## Contact Me
+
+The primary method of reaching me is through my email: [foster@hangdaan.email](mailto:foster@hangdaan.email).
+
+If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the [GPG Key](/gpg-key) page.
diff --git a/index.tsx b/index.tsx
deleted file mode 100644
index dc2e882..0000000
--- a/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-export const description = "Software developer and open-source enthusiast.";
-
-export default function() {
-  return (
-    <>
-      <section>
-        <h2 id="about">About Me</h2>
-        <p>
-          I am a software developer, open-source enthusiast, lover of pizza, and renegade of funk.
-        </p>
-        <p>
-          I speak fluent English and native Filipino. I also plan on learning German.
-        </p>
-        <p>
-          You'll most likely find me within <a href="https://code.fosterhangdaan.com/foster" target="_blank">my lab</a> tinkering with my inventions and the latest JavaScript frameworks.
-          An Android app and a Thunderbird extension are currently in the works.
-        </p>
-        <p>
-          Other times, I help in the battle for an open web and for user privacy by contributing in the development of free and open-source software.
-        </p>
-      </section>
-      <section>
-        <h2 id="contact-me">Contact Me</h2>
-        <p>
-          The primary method of reaching me is through my email: <a href="mailto:foster@hangdaan.email">foster@hangdaan.email</a>.
-        </p>
-        <p>
-          If you'd like an encrypted response, you can send me your GPG public key. You can find mine in the <a href="/gpg-key">GPG Key</a> page.
-        </p>
-      </section>
-    </>
-  );
-}
diff --git a/resume.md b/resume.md
new file mode 100644
index 0000000..66690ab
--- /dev/null
+++ b/resume.md
@@ -0,0 +1,60 @@
+---
+title: Resume
+description: My experience, skills, education, etc.
+---
+
+## Experience
+
+### Zetane Systems
+
+Position: Full-Stack Developer<br/>
+October 2021 - present
+
+- Develop pages and components in Next.js according to Figma designs.
+- Create CI/CD pipeline to containerize app and deploy to AWS.
+- Debug and fix software issues.
+- Ensure application quality and functionality by writing end-to-end tests using Cypress.
+
+### Startup Tech Pros
+
+Tech Lead<br/>
+June 2022 - present
+
+- Set standards and procedures for Engineering department.
+- Design, maintain and deploy cloud infrastructure.
+- Manage software development projects.
+- Determine software tools and services based on company budget and requirements.
+- Collaborate with clients to create websites and infrastructure based on business needs.
+
+## Education
+
+### Computer Engineering Technology
+
+Emphasis in Computer Programming<br/>
+Seneca College of Applied Arts and Technology<br/>
+Graduated August 2020<br/>
+Cumulative GPA 4.0/4.0<br/>
+
+## Skills
+
+### Programming Languages
+
+- JavaScript
+- TypeScript
+- HTML
+- CSS
+- BASH
+
+### Frameworks & Libraries
+
+- Deno
+- Fresh
+- Lume
+- Next.js
+- Node.js
+- Vue.js
+
+### Other Tools & Software
+
+- Docker
+- Linux
diff --git a/resume.tsx b/resume.tsx
deleted file mode 100644
index c0c82af..0000000
--- a/resume.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-export const title = "Resume";
-
-export const description = "My experience, skills, education, etc.";
-
-export default function() {
-  return (
-    <>
-      <section>
-        <h2>Experience</h2>
-        <div>
-          <h3 className="inline">Zetane Systems</h3>
-          <span className="resume--work-position">Full-Stack Developer</span>
-          <div>October 2021 - present</div>
-        </div>
-        <ul>
-          <li>Develop pages and components in Next.js according to Figma designs.</li>
-          <li>Create CI/CD pipeline to containerize app and deploy to AWS.</li>
-          <li>Debug and fix software issues.</li>
-          <li>Ensure application quality and functionality by writing end-to-end tests using Cypress.</li>
-        </ul>
-        <div>
-          <h3 className="inline">Startup Tech Pros</h3>
-          <span className="resume--work-position">Tech Lead</span>
-          <div>June 2022 - present</div>
-        </div>
-        <ul>
-          <li>Set standards and procedures for Engineering department.</li>
-          <li>Design, maintain and deploy cloud infrastructure.</li>
-          <li>Manage software development projects.</li>
-          <li>Determine software tools and services based on company budget and requirements.</li>
-          <li>Collaborate with clients to create websites and infrastructure based on business needs.</li>
-        </ul>
-      </section>
-      <section>
-        <h2>Education</h2>
-        <div>
-          <h3 className="inline">Computer Engineering Technology</h3>
-          <span className="resume--education-emphasis">Emphasis in Computer Programming</span>
-          <div>Seneca College of Applied Arts and Technology</div>
-          <div>Graduated August 2020</div>
-          <div>Cumulative GPA 4.0/4.0</div>
-        </div>
-      </section>
-      <section>
-        <h2>Skills</h2>
-        <h3>Programming Languages</h3>
-        <ul>
-          <li>JavaScript</li>
-          <li>TypeScript</li>
-          <li>HTML</li>
-          <li>CSS</li>
-          <li>BASH</li>
-        </ul>
-        <h3>Frameworks & Libraries</h3>
-        <ul>
-          <li>Deno</li>
-          <li>Fresh</li>
-          <li>Lume</li>
-          <li>Next.js</li>
-          <li>Node.js</li>
-          <li>Vue.js</li>
-        </ul>
-        <h3>Other Tools & Software</h3>
-        <ul>
-          <li>Docker</li>
-          <li>Linux</li>
-        </ul>
-      </section>
-    </>
-  );
-}