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

update?

Browse Source
This commit is contained in:
ngn
2023-11-12 17:43:23 +03:00
parent 8c1552d639
commit 498a54cd20
68 changed files with 1983 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/src/lib/card.svelte Normal file
View File

@ -0,0 +1,52 @@
<script>
export let title
let current = ""
let i = 0
while (title.length > i) {
let c = title[i]
setTimeout(()=>{
current += c
}, 100*(i+1))
i += 1
}
</script>
<div class="main">
<div class="title">
root@ngn13.fun:~# {current}
</div>
<div class="content">
<slot></slot>
</div>
</div>
<style>
.main {
display: flex;
flex-direction: column;
width: 100%;
background: var(--dark-three);
box-shadow: var(--box-shadow);
border-radius: 7px;
}
.title {
background: var(--dark-two);
padding: 30px;
border-radius: 7px 7px 0px 0px;
font-size: 20px;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
color: white;
}
.content {
background: var(--dark-three);
padding: 40px;
padding-top: 30px;
color: white;
border-radius: 5px;
font-size: 25px;
}
</style>

69
app/src/lib/card_link.svelte Normal file
View File

@ -0,0 +1,69 @@
<script>
export let title
export let url
let audio
let current = ""
let i = 0
while (title.length > i) {
let c = title[i]
setTimeout(()=>{
current += c
}, 100*(i+1))
i += 1
}
function epicSound() {
audio.play()
}
</script>
<a on:click={epicSound} data-sveltekit-preload-data href={url}>
<audio bind:this={audio} preload="auto">
<source src="/click.wav" type="audio/mpeg" />
</audio>
<div class="title">
{current}
</div>
<div class="content">
<slot></slot>
</div>
</a>
<style>
a {
display: flex;
flex-direction: column;
width: 100%;
background: var(--dark-three);
box-shadow: var(--box-shadow);
border-radius: 7px;
cursor: pointer;
transition: .4s;
text-decoration: none;
}
a:hover > .title {
text-shadow: var(--text-shadow);
}
.title {
border: solid 1px var(--dark-two);
background: var(--dark-two);
padding: 30px;
border-radius: 7px 7px 0px 0px;
font-size: 20px;
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
color: white;
}
.content {
background: var(--dark-three);
padding: 40px;
padding-top: 30px;
color: white;
border-radius: 5px;
font-size: 25px;
}
</style>

28
app/src/lib/header.svelte Normal file
View File

@ -0,0 +1,28 @@
<script></script>
<header>
<h1>
<slot></slot>
</h1>
</header>
<style>
header {
background:
linear-gradient(rgba(11, 11, 11, 0.808), rgba(1, 1, 1, 0.96)),
url("https://files.ngn.tf/banner.png");
background-size: 50%;
width: 100%;
height: 100%;
}
h1 {
font-weight: 900;
font-size: 5.5vw;
padding: 120px;
text-align: center;
color: white;
text-shadow: var(--text-shadow);
text-size-adjust: 80%;
}
</style>

50
app/src/lib/navbar.svelte Normal file
View File

@ -0,0 +1,50 @@
<script>
import NavbarLink from "./navbar_link.svelte";
</script>
<nav>
<div>
<h3>[ngn]</h3>
</div>
<div>
<NavbarLink link="/">home</NavbarLink>
<NavbarLink link="/services">services</NavbarLink>
<NavbarLink link="/blog">blog</NavbarLink>
<NavbarLink type="icon" link="https://github.com/ngn13/website"></NavbarLink>
</div>
</nav>
<style>
nav {
background: var(--dark-one);
padding: 25px 30px 27px 25px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: solid 1.5px black;
animation-name: borderAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
box-shadow: var(--def-shadow);
}
div {
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
gap: 1px;
}
h3 {
font-weight: 900;
font-size: 25px;
color: red;
animation-name: colorAnimation;
animation-iteration-count: infinite;
animation-duration: 10s;
}
</style>

48
app/src/lib/navbar_link.svelte Normal file
View File

@ -0,0 +1,48 @@
<script>
import { page } from "$app/stores"
export let link
export let type
let audio
function epicSound() {
audio.play()
}
</script>
<div>
<audio bind:this={audio} preload="auto">
<source src="/click.wav" type="audio/mpeg" />
</audio>
{#if type==="icon"}
<a class="icon" data-sveltekit-preload-data on:click={epicSound} href="{link}"><slot></slot></a>
{:else}
<a data-sveltekit-preload-data on:click={epicSound} href="{link}"><slot></slot></a>
{/if}
</div>
<style>
a {
margin-left: 20px;
font-weight: 700;
font-size: 22px;
text-decoration: none;
color: white;
cursor: pointer;
}
a:hover {
text-decoration: underline;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
animation-name: underlineAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.icon:hover {
text-decoration: none;
text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
animation-name: colorAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>

73
app/src/lib/service.svelte Normal file
View File

@ -0,0 +1,73 @@
<script>
export let desc
export let url
let icon = "󰅇"
let audio
function copy() {
audio.play()
navigator.clipboard.writeText(url)
icon = "󰅎"
setTimeout(()=>{
icon = "󰅇"
}, 500)
}
</script>
<main>
<audio bind:this={audio} preload="auto">
<source src="/click.wav" type="audio/mpeg" />
</audio>
<div>
<h1><slot></slot></h1>
<p>{desc}</p>
</div>
<div>
<a on:click={copy} href="#">{icon}</a>
<a href="{url}"></a>
</div>
</main>
<style>
main {
display: flex;
flex-direction: row;
padding: 30px 30px 30px 30px;
background: var(--dark-two);
border-radius: 7px 7px 0px 0px;
box-shadow: var(--box-shadow);
justify-content: space-between;
align-items: center;
border: none;
color: white;
gap: 100px;
transition: .4s;
}
div h1 {
animation-name: colorAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
font-size: 30px;
}
div p {
margin-top: 10px;
font-size: 20px;
}
a {
text-align: center;
font-size: 30px;
text-decoration: none;
color: white;
border: none;
}
a:hover {
animation-name: colorAnimation;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>