Complete initial landing page

This commit is contained in:
Foster Hangdaan 2023-07-25 02:59:32 -04:00
parent 9a8ccd0745
commit e19427f897
Signed by: foster
GPG key ID: E48D7F49A852F112
4 changed files with 150 additions and 4 deletions

View file

@ -8,7 +8,9 @@ export default function({ title, children }) {
<link rel="stylesheet" href="styles/main.css"/>
</head>
<body>
<div className="main-content">
{ children }
</div>
</body>
</html>
);

View file

@ -26,5 +26,68 @@ img {
}
ol, ul {
list-style: none;
list-style: disc;
li {
margin-bottom: 0.4rem;
&:last-of-type {
margin-bottom: 0;
}
}
}
hr {
height: 1px;
background-color: var(--color-black);
border: none;
margin-top: 1rem;
margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, h6 {
color: var(--color-blue);
font-weight: bold;
}
section {
padding: 1rem 0;
& > * {
margin-bottom: 1rem;
}
& > *:last-child {
margin-bottom: 0;
}
}
.main-content {
padding: 1rem;
margin: 0 auto;
max-width: 48rem;
}
pre {
padding: 1rem;
border-radius: 5px;
display: block;
background-color: var(--color-bg--layer-01);
overflow: auto;
page-break-inside: avoid;
word-wrap: break-word;
font-family: CaskaydiaCove Nerd Font Mono, monospace;
code {
font-family: CaskaydiaCove Nerd Font Mono, monospace;
}
}
.page-header {
h1 {
background: -webkit-linear-gradient(45deg, var(--color-red), var(--color-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
@for $i from 1 to 3 {
.m-#{i} {
margin: #{i}/4;
}
}

View file

@ -1,8 +1,88 @@
const gpgFingerprint = `
pub ed25519 2023-07-14
Key fingerprint = DBD38E384B9E1F4F19F95BAEE48D7F49A852F112
uid Foster Hangdaan <foster@hangdaan.email>
`;
export default function() {
return (
<>
<h1>Foster Hangdaan</h1>
<p>Welcome!</p>
<header className="page-header">
<h1>Hi! My name is Foster</h1>
</header>
<hr/>
<section>
<p>
Congratulations, stranger.
You have found the personal website of Foster Hangdaan.
</p>
</section>
<section>
<h2 id="about"> 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.
Other times, I help in the battle for an open web by contributing in the development of free and open-source software.
</p>
</section>
<section>
<h2 id="contact-me"> 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>
<p>Other places where you can find me:</p>
<ul>
<li>
<a href="https://code.fosterhangdaan.com/foster" target="_blank">My Forgejo instance</a>
</li>
<li>
<a href="https://codeberg.org/foster-hangdaan" target="_blank">Codeberg</a>
</li>
</ul>
</section>
<section>
<h2 id="gpg">󰌋 GPG Key</h2>
<p>
I do not use keyservers.
This is the only place where I officially provide my key.
A key claiming to be mine somewhere else is most definitely a phony.
</p>
<p>
You can download my public key here.
Once you've downloaded and imported my key, check that it matches the fingerprint below.
</p>
<pre>
<code>
{gpgFingerprint.trim()}
</code>
</pre>
<p>You can find more info about GPG on the <a href="https://gnupg.org/">GnuPG official website</a>.</p>
</section>
<section>
<h2 id="donate">󱃱 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.
</p>
<p>
If my works are of any use to you, feel free to make a donation.
Donations go a long way in supporting my efforts.
Any amount would be greatly appreciated.
</p>
<p>
I currently accept donations through cryptocurrency. The following are my wallet addresses:
</p>
<p>Bitcoin</p>
<pre>
<code>bc1qan5musm6mpn7l5g4lcpd6vtke97lnpgaf7hcuj</code>
</pre>
<p>Monero</p>
<pre>
<code>47LkKwzbo4aKNAzecADmoHMaRWbwuigokjR1AuNikfKcaM9quPiy8CwDWGWXpfWtoo5fd4WfuTgJdFKfTPcFUWQZ3u7xrPD</code>
</pre>
</section>
</>
);
}

View file

@ -1,3 +1,4 @@
// The foundation
@import "styles/normalize";
@import "styles/variables";
@import "styles/color-palette";