166 lines
3.7 KiB
Svelte
166 lines
3.7 KiB
Svelte
<script>
|
|
import Header from "../lib/header.svelte";
|
|
import Card from "../lib/card.svelte";
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>[ngn.tf] | homepage</title>
|
|
<meta content="[ngn] | homepage" property="og:title" />
|
|
<meta content="Homepage of my personal website" property="og:description" />
|
|
<meta content="https://ngn.tf" property="og:url" />
|
|
<meta content="#000000" data-react-helmet="true" name="theme-color" />
|
|
</svelte:head>
|
|
|
|
<Header>
|
|
<c>echo</c>
|
|
hello world!
|
|
</Header>
|
|
|
|
<main>
|
|
<div class="flexbox">
|
|
<Card title="whoami">
|
|
<div class="whoami-box">
|
|
<div class="whoami-pic">
|
|
<img alt="My profile pic" src="https://files.ngn.tf/pplow.png">
|
|
<a href="https://keyoxide.org/F9E70878C2FB389AEC2BA34CA3654DF5AD9F641D">
|
|
<c><i class="nf nf-oct-key"></i> Keyoxide</c>
|
|
</a>
|
|
</div>
|
|
<div class="whoami-text">
|
|
👋 Hello! I'm ngn!
|
|
<ul>
|
|
<li>🇹🇷 I'm a high school student from Turkey</li>
|
|
<li>🖥️ I'm interested in cyber security and programming.</li>
|
|
<li>❤️ I love and support Free/Libre and Open Source Software (FLOSS)</li>
|
|
<li>🐧 My GNU/Linux distribution of choice is Artix, however I am currently running Arch</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="flexbox">
|
|
<Card title="ps -eaf">
|
|
I usually spend my time...
|
|
<ul>
|
|
<li><c>⌨️</c> building random projects</li>
|
|
<li><c>👥</c> contributing stuff that I like</li>
|
|
<li><c>🚩</c> solving CTFs</li>
|
|
<li><c>🖥️</c> customizing my desktop</li>
|
|
<li><c>📑</c> posting random stuff on my blog, you should definitely check it out btw (it's very active)</li>
|
|
</ul>
|
|
</Card>
|
|
|
|
<Card title="wall">
|
|
Here are some links if you want to get in contact with me, please do not
|
|
use these if you want to contact about the services that I offer, I have a
|
|
seperate email for that: <a href="mailto:services@ngn.tf"><c>services@ngn.tf</c></a>
|
|
<ul>
|
|
<li>
|
|
<c><i class="nf nf-cod-github"></i></c>
|
|
<a href="https://github.com/ngn13">Github</a>
|
|
</li>
|
|
<li>
|
|
<c><i class="nf nf-md-mastodon"></i></c>
|
|
<a href="https://mastodon.social/@ngn">Mastodon</a>
|
|
</li>
|
|
<li>
|
|
<c><i class="nf nf-md-email"></i></c>
|
|
<a href="mailto:ngn@ngn.tf">Email (personal)</a>
|
|
</li>
|
|
<li>
|
|
<c><i class="nf nf-md-xmpp"></i></c>
|
|
<a href="xmpp:ngn@chat.ngn.tf">XMPP (my preferred way of communication)</a>
|
|
</li>
|
|
</ul>
|
|
</Card>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="version">
|
|
<p>v4.5</p>
|
|
</div>
|
|
|
|
<style>
|
|
main{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 35px;
|
|
padding: 50px;
|
|
}
|
|
|
|
.pgp {
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.flexbox {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.whoami-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 40px;
|
|
}
|
|
|
|
.whoami-pic {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.whoami-pic img {
|
|
width: 250px;
|
|
border-radius: 30px;
|
|
|
|
border: solid 1px white;
|
|
animation-name: fullBorderAnimation;
|
|
animation-duration: 10s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
|
|
ul {
|
|
list-style: inside;
|
|
}
|
|
|
|
li {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
font-weight: 900;
|
|
}
|
|
|
|
.version {
|
|
color: var(--dark-fife);
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
@media only screen and (max-width: 1200px) {
|
|
.flexbox {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
.whoami-box {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|