Complete initial landing page
This commit is contained in:
parent
9a8ccd0745
commit
e19427f897
GPG key ID:
E48D7F49A852F112
|
|
@ -8,7 +8,9 @@ export default function({ title, children }) {
|
|||
<link rel="stylesheet" href="styles/main.css"/>
|
||||
</head>
|
||||
<body>
|
||||
{ children }
|
||||
<div className="main-content">
|
||||
{ children }
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
84
index.tsx
84
index.tsx
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// The foundation
|
||||
@import "styles/normalize";
|
||||
@import "styles/variables";
|
||||
@import "styles/color-palette";
|
||||
|
|
|
|||
Loading…
Reference in a new issue