ngn/website
1
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Activity

Cleaner services page, cleaner index page with profile pic

Browse Source
This commit is contained in:
ngn 2024-03-03 02:26:31 +03:00
parent 8359fd2880
commit a29ebb7cb3
11 changed files with 166 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/package.json
View File

@ -1,6 +1,6 @@
{
"name": "website",
"version": "4.4.0",
"version": "4.5.0",
"private": true,
"scripts": {
"dev": "vite dev",

2
app/src/lib/card.svelte
View File

@ -29,7 +29,7 @@
width: 100%;
background: var(--dark-three);
box-shadow: var(--box-shadow);
border-radius: 7px;
border-radius: var(--radius);
}
.title {

2
app/src/lib/card_link.svelte
View File

@ -38,7 +38,7 @@ a {
width: 100%;
background: var(--dark-three);
box-shadow: var(--box-shadow);
border-radius: 7px;
border-radius: var(--radius);
cursor: pointer;
transition: .4s;
text-decoration: none;

3
app/src/lib/service.svelte
View File

@ -35,7 +35,7 @@ main {
flex-direction: row;
padding: 30px 30px 30px 30px;
background: var(--dark-two);
border-radius: 7px 7px 0px 0px;
border-radius: var(--radius);
box-shadow: var(--box-shadow);
justify-content: space-between;
align-items: center;
@ -43,6 +43,7 @@ main {
color: white;
gap: 100px;
transition: .4s;
width: 100%;
}
div h1 {

90
app/src/routes/+page.svelte
View File

@ -19,38 +19,23 @@
<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, programming and electronics</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>
<li>🎸 I enjoy listening random stuff (mostly modern rock), so <a href="https://hp.ngn.tf/watch?v=lYBUbBu4W08"><c>here</c></a> is a random song that I like!</li>
</ul>
</Card>
<Card title="pwd">
You are currently on my personal website, for all you nerds, here is some
techinal details you may want to know:
<ul>
<li>
<c><i class="nf nf-md-license"></i></c>
I built this website from scratch and its licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html"><c>AGPLv3</c></a>.
All the source is avaliable over on my github.
</li>
<li>
<c><i class="nf nf-md-file_image"></i></c>
All assets (images etc.) are hosted on my server
</li>
<li>
<c><i class="nf nf-md-eye_off"></i></c>
No cloudflare, no CAPTCHAs, no CDNs, this website is %100 privacy friendly
</li>
<li>
<c><i class="nf nf-md-server"></i></c>
You can discover other services and pages I host over on the <a href="/services"><c>services page</c></a>
</li>
</ul>
</div>
</div>
</Card>
</div>
@ -67,7 +52,9 @@
</Card>
<Card title="wall">
Here are some links if you want to get in contact with me:
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>
@ -79,21 +66,19 @@
</li>
<li>
<c><i class="nf nf-md-email"></i></c>
<a href="mailto:ngn@ngn.tf">Email</a>
<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>
Or you can add me on XMPP: <c>ngn@chat.ngn.tf</c>
<br>
And lastly my PGP key is:
<ul>
<li class="pgp"><a href="https://keyoxide.org/F9E70878C2FB389AEC2BA34CA3654DF5AD9F641D"><c>F9E70878C2FB389AEC2BA34CA3654DF5AD9F641D</c></a></li>
</ul>
</Card>
</div>
</main>
<div class="version">
<p>v4.4</p>
<p>v4.5</p>
</div>
<style>
@ -115,9 +100,34 @@ main{
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 {
padding-left: 30px;
margin-bottom: 20px;
list-style: inside;
}
li {
@ -146,4 +156,10 @@ a:hover {
flex-direction: column;
}
}
@media only screen and (max-width: 900px) {
.whoami-box {
flex-direction: column;
}
}
</style>

9
app/src/routes/blog/+page.svelte
View File

@ -37,15 +37,6 @@ main{
padding-top: 50px;
}
input {
text-align: center;
background: var(--dark-two);
background: none;
border: none;
outline: none;
font-size: 40px;
}
p {
font-size: 20px;
}

6
app/src/routes/blog/[id]/+page.svelte
View File

@ -139,7 +139,7 @@ main {
.content {
padding: 50px;
background: var(--dark-four);
border-radius: 0 0 7px 7px;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--box-shadow);
}
@ -152,7 +152,7 @@ main {
.content {
padding: 30px;
background: var(--dark-four);
border-radius: 0 0 7px 7px;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--box-shadow);
}
}
@ -160,7 +160,7 @@ main {
.header {
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
background: var(--dark-two);
border-radius: 7px 7px 0 0;
border-radius: var(--radius) var(--radius) 0 0;
padding: 30px;
box-shadow: var(--box-shadow);
display: flex;

46
app/src/routes/donate/+page.svelte
View File

@ -18,13 +18,23 @@
<main>
<Card title="bash donate.sh">
If you want more services or if you want to support my work, feel free to donate. I pay around 300 Turkish Liras per month
for all the hosting stuff, so even a small amount will be appreciated! You can send donations to the following XMR address:
<br>
<br>
I work on free (as in freedom) software and offer free services. General hosting and
stuff costs around 550₺ (~$17), so feel free to donate in order to help me keep
everything up and running!
<table>
<tr>
<th>Platform</th>
<th>Address/Link</th>
</tr>
<tr>
<td>Monero (XMR)</td>
<td>
<code>
46q7G7u7cmASvJm7AmrhmNg6ctS77mYMmDAy1QxpDn5w57xV3GUY5za4ZPZHAjqaXdfS5YRWm4AVj5UArLDA1retRkJp47F
</code>
</td>
</tr>
</table>
</Card>
</main>
@ -36,6 +46,34 @@ main{
padding: 50px;
}
table {
border-collapse: collapse;
border: none;
color: white;
font-size: 20px;
width: 100%;
margin: 30px 0 0 0;
box-shadow: var(--box-shadow);
}
tr,th,td{
color: white;
background: var(--dark-two);
}
td,th{
border: solid 1px white;
padding: 10px;
}
th {
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
background: var(--dark-two);
}
code {
background: var(--dark-two);
color: white;

8
app/src/routes/services/+page.js
View File

@ -11,8 +11,10 @@ export async function load({ fetch }) {
// Some really bad code to convert
// [service1, service2, service3...]
// to
// [[service1, service2, service3], [service4, service5...]...]
// [[service1, service2], [service4, service5], [service4...]...]
// so i can render it in the UI easily
let all = data["result"]
@ -24,11 +26,11 @@ export async function load({ fetch }) {
currentlist.push(all[i])
counter += 1
if(i == all.length-1 && counter != 3){
if(i == all.length-1 && counter != 2){
services.push(currentlist)
}
if (counter == 3) {
if (counter == 2) {
services.push(currentlist)
currentlist = []
counter = 0

49
app/src/routes/services/+page.svelte
View File

@ -1,6 +1,7 @@
<script>
import Header from "../../lib/header.svelte";
import Service from "../../lib/service.svelte";
import Card from "../../lib/card.svelte";
export let data
</script>
@ -14,6 +15,7 @@
</svelte:head>
<Header><c>ls</c> services</Header>
<main>
<Card title="cat services/*/info.txt">
{#each data.services as services_list}
<div class="flexrow">
{#each services_list as service}
@ -21,6 +23,36 @@
{/each}
</div>
{/each}
</Card>
<Card title="cat services/details.txt">
Here some details for all the services I offer:
<ul>
<li>
<c><i class="nf nf-cod-account"></i> Registration:</c> All the services are offered for free, and all of them
are accessiable to public. If you want to use a service that requires
registration, you can email <a href="mailto:services@ngn.tf"><c>services@ngn.tf</c></a>
for an account.
</li>
<li>
<c><i class="nf nf-fa-eye_slash"></i> Privacy:</c> To protect user privacy, all the web proxy logs are cleared regularly.
I also do not use any kind of CDN, and provide SSL encrypted connection for all the services. You can also connect all the
services over TOR, as I do not block any traffic from TOR.
</li>
<li>
<c><i class="nf nf-oct-graph"></i> Uptime:</c> Some services get restarted regularly, also sometimes I have
issues with the hosting, so I cannot provide or guarantee %100 uptime for any of the services. I also cannot guarantee
the that there won't be any data loss. I do take any regular backups, but your data may be lost in case of something
like a SSD failure.
</li>
<li>
<c><i class="nf nf-md-speedometer"></i> Speed:</c> All the services are located in Turkey, and avaliable
over an 233.68 Mbit/s interface. If you are close to Turkey you should have a fairly good experience.
If you are not, then you should probably use another provider for the service.
</li>
</ul>
</Card>
</main>
<style>
@ -30,7 +62,7 @@ main {
align-content: center;
justify-content: center;
padding: 50px;
gap: 25px;
gap: 30px;
}
.flexrow {
@ -38,9 +70,24 @@ main {
flex-direction: row;
align-content: center;
justify-content: center;
width: 100%;
gap: 25px;
}
a {
text-decoration: none;
}
ul {
list-style: inside;
margin-bottom: 20px;
}
li {
padding-top: 30px;
line-height: 35px;
}
@media only screen and (max-width: 1316px) {
.flexrow {
flex-direction: column;

2
app/static/global.css
View File

@ -7,7 +7,7 @@
--dark-three: #121212;
--dark-four: #101010;
--dark-fife: #3a3b3c;
--border-rad: 30px;
--radius: 8px;
/*
old shadow animation
--def-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,