Replace font icons with SVG icons
The new SVG icons are from the Tabler Icons set.
This commit is contained in:
parent
4cb3231602
commit
4571eb3e85
GPG key ID:
E48D7F49A852F112
19 changed files with 142 additions and 21 deletions
|
|
@ -2,7 +2,7 @@ export default function({ comp }) {
|
|||
return (
|
||||
<footer className="page-footer">
|
||||
<p>Copyright © 2023 Foster Hangdaan</p>
|
||||
<p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <span className="heart"></span>.</p>
|
||||
<p>Made with <a href="https://deno.land/" target="_blank">Deno</a>, <a href="https://lume.land/" target="_blank">Lume</a>, <a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a> and lots of <span className="heart">{ comp.icons.Heart() }</span>.</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
9
_components/icons/ChartAreaFilled.tsx
Normal file
9
_components/icons/ChartAreaFilled.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-area-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M20 18a1 1 0 0 1 .117 1.993l-.117 .007h-16a1 1 0 0 1 -.117 -1.993l.117 -.007h16z" stroke-width="0" fill="currentColor" />
|
||||
<path d="M15.22 5.375a1 1 0 0 1 1.393 -.165l.094 .083l4 4a1 1 0 0 1 .284 .576l.009 .131v5a1 1 0 0 1 -.883 .993l-.117 .007h-16.022l-.11 -.009l-.11 -.02l-.107 -.034l-.105 -.046l-.1 -.059l-.094 -.07l-.06 -.055l-.072 -.082l-.064 -.089l-.054 -.096l-.016 -.035l-.04 -.103l-.027 -.106l-.015 -.108l-.004 -.11l.009 -.11l.019 -.105c.01 -.04 .022 -.077 .035 -.112l.046 -.105l.059 -.1l4 -6a1 1 0 0 1 1.165 -.39l.114 .05l3.277 1.638l3.495 -4.369z" stroke-width="0" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
_components/icons/ChartBar.tsx
Normal file
11
_components/icons/ChartBar.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chart-bar" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M3 12m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
|
||||
<path d="M9 8m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
|
||||
<path d="M15 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z" />
|
||||
<path d="M4 20l14 0" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
8
_components/icons/Diamonds.tsx
Normal file
8
_components/icons/Diamonds.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-diamonds" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M10.831 20.413l-5.375 -6.91c-.608 -.783 -.608 -2.223 0 -3l5.375 -6.911a1.457 1.457 0 0 1 2.338 0l5.375 6.91c.608 .783 .608 2.223 0 3l-5.375 6.911a1.457 1.457 0 0 1 -2.338 0z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
_components/icons/FileCV.tsx
Normal file
11
_components/icons/FileCV.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-cv" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
|
||||
<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
|
||||
<path d="M11 12.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0" />
|
||||
<path d="M13 11l1.5 6l1.5 -6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
9
_components/icons/GPS.tsx
Normal file
9
_components/icons/GPS.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-gps" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
|
||||
<path d="M12 17l-1 -4l-4 -1l9 -4z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
8
_components/icons/Heart.tsx
Normal file
8
_components/icons/Heart.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
11
_components/icons/HeartHandshake.tsx
Normal file
11
_components/icons/HeartHandshake.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-handshake" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
|
||||
<path d="M12 6l-3.293 3.293a1 1 0 0 0 0 1.414l.543 .543c.69 .69 1.81 .69 2.5 0l1 -1a3.182 3.182 0 0 1 4.5 0l2.25 2.25" />
|
||||
<path d="M12.5 15.5l2 2" />
|
||||
<path d="M15 13l2 2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
10
_components/icons/Home.tsx
Normal file
10
_components/icons/Home.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M5 12l-2 0l9 -9l9 9l-2 0" />
|
||||
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||||
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
9
_components/icons/Key.tsx
Normal file
9
_components/icons/Key.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z" />
|
||||
<path d="M15 9h.01" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
9
_components/icons/Mail.tsx
Normal file
9
_components/icons/Mail.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176 .005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878 0l.116 -.066l9.445 -6.297z" stroke-width="0" fill="currentColor" />
|
||||
<path d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555 6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z" stroke-width="0" fill="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
5
_components/icons/README.org
Normal file
5
_components/icons/README.org
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
#+title: Icons
|
||||
|
||||
Icons as TSX components.
|
||||
|
||||
All icons are from Tabler Icons.
|
||||
9
_components/icons/School.tsx
Normal file
9
_components/icons/School.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-school" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M22 9l-10 -4l-10 4l10 4l10 -4v6" />
|
||||
<path d="M6 10.6v5.4a6 3 0 0 0 12 0v-5.4" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
9
_components/icons/User.tsx
Normal file
9
_components/icons/User.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="1em" height="1em" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
||||
<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
|
||||
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
export default function() {
|
||||
export default function({ comp }) {
|
||||
return (
|
||||
<nav className="navbar">
|
||||
<ul className="navbar-list">
|
||||
<li className="navbar-list-item home">
|
||||
<a href="/"></a>
|
||||
<a href="/">{ comp.icons.Home() }</a>
|
||||
</li>
|
||||
<li className="navbar-list-item">
|
||||
<a href="/resume" title="Resume"></a>
|
||||
<a href="/resume" title="Resume">{ comp.icons.FileCV() }</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export default function () {
|
||||
export default function ({ comp }) {
|
||||
return (
|
||||
<div className="separator">
|
||||
<span className="outer-outline"/>
|
||||
<span className="icon"></span>
|
||||
<span>{ comp.icons.Diamonds() }</span>
|
||||
<span className="outer-outline"/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
index.tsx
14
index.tsx
|
|
@ -9,11 +9,13 @@ pub ed25519/E48D7F49A852F112 2023-07-14 [SC]
|
|||
uid Foster Hangdaan <foster@hangdaan.email>
|
||||
`;
|
||||
|
||||
export default function() {
|
||||
export default function({ comp }) {
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<h2 id="about"> About</h2>
|
||||
<h2 id="about">
|
||||
{comp.icons.User()} About
|
||||
</h2>
|
||||
<p>I am a software developer, open-source enthusiast, lover of pizza, renegade of funk and many more.</p>
|
||||
<p>
|
||||
I spend most of my time tinkering with computer servers or the latest JavaScript frameworks.
|
||||
|
|
@ -21,12 +23,12 @@ export default function() {
|
|||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="contact-me"> Contact</h2>
|
||||
<h2 id="contact-me">{comp.icons.Mail()} Contact</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">GPG Key</a> section of this page.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="places"> Places</h2>
|
||||
<h2 id="places">{comp.icons.GPS()} Places</h2>
|
||||
<p>Other places where you can find me:</p>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -38,7 +40,7 @@ export default function() {
|
|||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="gpg"> GPG Key</h2>
|
||||
<h2 id="gpg">{comp.icons.Key()} GPG Key</h2>
|
||||
<p>
|
||||
I do not use keyservers.
|
||||
This is the only place where I officially provide my key.
|
||||
|
|
@ -56,7 +58,7 @@ export default function() {
|
|||
<p>You can find more info about GPG on the <a href="https://gnupg.org/" target="_blank">GnuPG official website</a>.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2 id="donate"> Donating</h2>
|
||||
<h2 id="donate">{comp.icons.HeartHandshake()} Donating</h2>
|
||||
<p>
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ export const header = {
|
|||
subheading: <span>Download a copy of my resume <a href="">here</a>.</span>,
|
||||
};
|
||||
|
||||
export default function() {
|
||||
export default function({ comp }) {
|
||||
return (
|
||||
<>
|
||||
<section>
|
||||
<h2> Experience</h2>
|
||||
<h2>{comp.icons.ChartAreaFilled()} Experience</h2>
|
||||
<div>
|
||||
<h3 className="inline">Zetane Systems</h3>
|
||||
<span className="resume--work-position">Full-Stack Developer</span>
|
||||
|
|
@ -35,7 +35,7 @@ export default function() {
|
|||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2> Education</h2>
|
||||
<h2>{comp.icons.School()} Education</h2>
|
||||
<div>
|
||||
<h3 className="inline">Computer Engineering Technology</h3>
|
||||
<span className="resume--education-emphasis">Emphasis in Computer Programming</span>
|
||||
|
|
@ -45,7 +45,7 @@ export default function() {
|
|||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2> Skills</h2>
|
||||
<h2>{comp.icons.ChartBar()} Skills</h2>
|
||||
<h3>Programming Languages</h3>
|
||||
<ul>
|
||||
<li>JavaScript</li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue