From 4571eb3e855f9372ce8c0b414d429269366f996e Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Mon, 31 Jul 2023 00:14:54 -0400 Subject: [PATCH] Replace font icons with SVG icons The new SVG icons are from the Tabler Icons set. --- _components/footer.tsx | 2 +- _components/icons/ChartAreaFilled.tsx | 9 +++++++++ _components/icons/ChartBar.tsx | 11 +++++++++++ _components/icons/Diamonds.tsx | 8 ++++++++ _components/icons/FileCV.tsx | 11 +++++++++++ _components/icons/GPS.tsx | 9 +++++++++ _components/icons/Heart.tsx | 8 ++++++++ _components/icons/HeartHandshake.tsx | 11 +++++++++++ _components/icons/Home.tsx | 10 ++++++++++ _components/icons/Key.tsx | 9 +++++++++ _components/icons/Mail.tsx | 9 +++++++++ _components/icons/README.org | 5 +++++ _components/icons/School.tsx | 9 +++++++++ _components/icons/User.tsx | 9 +++++++++ _components/navbar.tsx | 6 +++--- _components/separator.tsx | 4 ++-- _includes/styles/components/separator.scss | 11 ++++++----- index.tsx | 14 ++++++++------ resume.tsx | 8 ++++---- 19 files changed, 142 insertions(+), 21 deletions(-) create mode 100644 _components/icons/ChartAreaFilled.tsx create mode 100644 _components/icons/ChartBar.tsx create mode 100644 _components/icons/Diamonds.tsx create mode 100644 _components/icons/FileCV.tsx create mode 100644 _components/icons/GPS.tsx create mode 100644 _components/icons/Heart.tsx create mode 100644 _components/icons/HeartHandshake.tsx create mode 100644 _components/icons/Home.tsx create mode 100644 _components/icons/Key.tsx create mode 100644 _components/icons/Mail.tsx create mode 100644 _components/icons/README.org create mode 100644 _components/icons/School.tsx create mode 100644 _components/icons/User.tsx diff --git a/_components/footer.tsx b/_components/footer.tsx index 516c204..9a8341c 100644 --- a/_components/footer.tsx +++ b/_components/footer.tsx @@ -2,7 +2,7 @@ export default function({ comp }) { return ( ); } diff --git a/_components/icons/ChartAreaFilled.tsx b/_components/icons/ChartAreaFilled.tsx new file mode 100644 index 0000000..83c2744 --- /dev/null +++ b/_components/icons/ChartAreaFilled.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ); +} diff --git a/_components/icons/ChartBar.tsx b/_components/icons/ChartBar.tsx new file mode 100644 index 0000000..b0c1d91 --- /dev/null +++ b/_components/icons/ChartBar.tsx @@ -0,0 +1,11 @@ +export default function() { + return ( + + + + + + + + ); +} diff --git a/_components/icons/Diamonds.tsx b/_components/icons/Diamonds.tsx new file mode 100644 index 0000000..3cd2433 --- /dev/null +++ b/_components/icons/Diamonds.tsx @@ -0,0 +1,8 @@ +export default function() { + return ( + + + + + ); +} diff --git a/_components/icons/FileCV.tsx b/_components/icons/FileCV.tsx new file mode 100644 index 0000000..b347a91 --- /dev/null +++ b/_components/icons/FileCV.tsx @@ -0,0 +1,11 @@ +export default function() { + return ( + + + + + + + + ); +} diff --git a/_components/icons/GPS.tsx b/_components/icons/GPS.tsx new file mode 100644 index 0000000..b50ca7f --- /dev/null +++ b/_components/icons/GPS.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ); +} diff --git a/_components/icons/Heart.tsx b/_components/icons/Heart.tsx new file mode 100644 index 0000000..8a7d94a --- /dev/null +++ b/_components/icons/Heart.tsx @@ -0,0 +1,8 @@ +export default function() { + return ( + + + + + ); +} diff --git a/_components/icons/HeartHandshake.tsx b/_components/icons/HeartHandshake.tsx new file mode 100644 index 0000000..6b5fb08 --- /dev/null +++ b/_components/icons/HeartHandshake.tsx @@ -0,0 +1,11 @@ +export default function() { + return ( + + + + + + + + ); +} diff --git a/_components/icons/Home.tsx b/_components/icons/Home.tsx new file mode 100644 index 0000000..45de834 --- /dev/null +++ b/_components/icons/Home.tsx @@ -0,0 +1,10 @@ +export default function() { + return ( + + + + + + + ); +} diff --git a/_components/icons/Key.tsx b/_components/icons/Key.tsx new file mode 100644 index 0000000..91b0d38 --- /dev/null +++ b/_components/icons/Key.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ); +} diff --git a/_components/icons/Mail.tsx b/_components/icons/Mail.tsx new file mode 100644 index 0000000..59ea555 --- /dev/null +++ b/_components/icons/Mail.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ) +} diff --git a/_components/icons/README.org b/_components/icons/README.org new file mode 100644 index 0000000..de59497 --- /dev/null +++ b/_components/icons/README.org @@ -0,0 +1,5 @@ +#+title: Icons + +Icons as TSX components. + +All icons are from Tabler Icons. diff --git a/_components/icons/School.tsx b/_components/icons/School.tsx new file mode 100644 index 0000000..3837e33 --- /dev/null +++ b/_components/icons/School.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ); +} diff --git a/_components/icons/User.tsx b/_components/icons/User.tsx new file mode 100644 index 0000000..ea4ecdc --- /dev/null +++ b/_components/icons/User.tsx @@ -0,0 +1,9 @@ +export default function() { + return ( + + + + + + ) +} diff --git a/_components/navbar.tsx b/_components/navbar.tsx index fb7ef1f..beda19d 100644 --- a/_components/navbar.tsx +++ b/_components/navbar.tsx @@ -1,12 +1,12 @@ -export default function() { +export default function({ comp }) { return ( diff --git a/_components/separator.tsx b/_components/separator.tsx index 265f28a..8ae0d64 100644 --- a/_components/separator.tsx +++ b/_components/separator.tsx @@ -1,8 +1,8 @@ -export default function () { +export default function ({ comp }) { return (
- 󱀝 + { comp.icons.Diamonds() }
); diff --git a/_includes/styles/components/separator.scss b/_includes/styles/components/separator.scss index 4293224..b347b04 100644 --- a/_includes/styles/components/separator.scss +++ b/_includes/styles/components/separator.scss @@ -1,17 +1,18 @@ .separator { + display: flex; + align-items: center; + justify-content: center; margin: 1rem auto; - text-align: center; max-width: var(--page--max-width); - span { - display: inline-block; - vertical-align: middle; - } .outer-outline { width: 40%; border: 1px solid var(--color-black); } .icon { + display: flex; + align-items: center; font-size: 2rem; + margin: 0 0.2rem; color: var(--color-black); } } diff --git a/index.tsx b/index.tsx index 457b9cf..73a6211 100644 --- a/index.tsx +++ b/index.tsx @@ -9,11 +9,13 @@ pub ed25519/E48D7F49A852F112 2023-07-14 [SC] uid Foster Hangdaan `; -export default function() { +export default function({ comp }) { return ( <>
-

 About

+

+ {comp.icons.User()} About +

I am a software developer, open-source enthusiast, lover of pizza, renegade of funk and many more.

I spend most of my time tinkering with computer servers or the latest JavaScript frameworks. @@ -21,12 +23,12 @@ export default function() {

-

 Contact

+

{comp.icons.Mail()} Contact

The primary method of reaching me is through my email: 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 section of this page.

-

 Places

+

{comp.icons.GPS()} Places

Other places where you can find me:

  • @@ -38,7 +40,7 @@ export default function() {
-

󰌋 GPG Key

+

{comp.icons.Key()} GPG Key

I do not use keyservers. This is the only place where I officially provide my key. @@ -56,7 +58,7 @@ export default function() {

You can find more info about GPG on the GnuPG official website.

- +

Developing free and open-source software takes much of my time and energy. It's my way of giving back to the open-source community and to the general public. diff --git a/resume.tsx b/resume.tsx index fb6dca6..f496a98 100644 --- a/resume.tsx +++ b/resume.tsx @@ -5,11 +5,11 @@ export const header = { subheading: Download a copy of my resume here., }; -export default function() { +export default function({ comp }) { return ( <>

-

󱖶 Experience

+

{comp.icons.ChartAreaFilled()} Experience

Zetane Systems

Full-Stack Developer @@ -35,7 +35,7 @@ export default function() {
-

 Education

+

{comp.icons.School()} Education

Computer Engineering Technology

Emphasis in Computer Programming @@ -45,7 +45,7 @@ export default function() {
-

󰄨 Skills

+

{comp.icons.ChartBar()} Skills

Programming Languages

  • JavaScript