feat: add back to top, services, about
This commit is contained in:
33
components/ButtonToTop.vue
Normal file
33
components/ButtonToTop.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<a href="#" class="go-top"></a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.go-top {
|
||||
--offset: 20rem;
|
||||
position: sticky;
|
||||
bottom: 1rem;
|
||||
margin-right: 1rem;
|
||||
place-self: end;
|
||||
margin-top: calc(100vh + var(--offset));
|
||||
|
||||
width: 2rem;
|
||||
aspect-ratio: 1;
|
||||
background: #ff8b24;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0.1rem 0.5rem 0 gray;
|
||||
}
|
||||
|
||||
html.dark .go-top {
|
||||
box-shadow: 0 0.1rem 0.5rem 0 black;
|
||||
}
|
||||
|
||||
.go-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 30%;
|
||||
transform: translateY(20%) rotate(-45deg);
|
||||
border-top: 0.35rem solid #fff;
|
||||
border-right: 0.35rem solid #fff;
|
||||
}
|
||||
</style>
|
||||
54
components/ProjectCard.vue
Normal file
54
components/ProjectCard.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
name: string;
|
||||
href: string;
|
||||
img: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="href" class="no-underline">
|
||||
<div class="card flex flex-col items-center justify-around">
|
||||
<img class="m-0" :src="img" />
|
||||
<h3 class="m-0">{{ props.name }}</h3>
|
||||
<p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border: 0.2rem solid pink;
|
||||
background: rgb(255, 237, 241);
|
||||
border-radius: 0.5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
line-height: 1.25;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
border: 0.2rem solid rgb(126, 93, 98);
|
||||
background: rgb(110, 90, 92);
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.unclickable {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
55
components/ServiceCard.vue
Normal file
55
components/ServiceCard.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
name: string;
|
||||
href: string;
|
||||
img: string;
|
||||
unclickable?: boolean;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a :href="unclickable ? '' : href" :class="['no-underline', { unclickable }]">
|
||||
<div class="card flex flex-col items-center justify-around">
|
||||
<img class="m-0" :src="img" />
|
||||
<h3 class="m-0">{{ props.name }}</h3>
|
||||
<p class="desc-text text-gray-600 dark:text-gray-200"><slot /></p>
|
||||
</div>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
img {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border: 0.2rem solid pink;
|
||||
background: rgb(255, 237, 241);
|
||||
border-radius: 0.5rem;
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
line-height: 1.25;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
html.dark .card {
|
||||
border: 0.2rem solid rgb(126, 93, 98);
|
||||
background: rgb(110, 90, 92);
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:active {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.desc-text {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a.unclickable {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { projects } from "@/data/projects";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="prose dark:prose-invert">
|
||||
<h1>About</h1>
|
||||
<p>incl. projects</p>
|
||||
<div class="prose dark:prose-invert w-full flex flex-col mt-9">
|
||||
<h1 id="about" class="text-center mb-4">About</h1>
|
||||
|
||||
<!-- this could be in markdown but eh -->
|
||||
<p>
|
||||
Hello! It's very nice to meet you — I'm a student and Linux enthusiast who
|
||||
is quite passionate about some subjects but is quite lazy in every other.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
I've dabbled extensively and non-extensively in a variety of topics to
|
||||
play with, including:
|
||||
</p>
|
||||
<ul>
|
||||
<li>competitive programming on DMOJ</li>
|
||||
<li>GUI toolkits very very briefly in GTK, Qt, and Swing</li>
|
||||
<li>Linux and server administration</li>
|
||||
<li>web development in the form of a Chrome extension and my sites</li>
|
||||
<li>Godot Engine Cat Simulator DX</li>
|
||||
<li>ski instruction</li>
|
||||
<li>writing of literature</li>
|
||||
<li>emulation</li>
|
||||
</ul>
|
||||
<p>…and other things that I'm forgetting right now.</p>
|
||||
<p>
|
||||
I have two server machines at home — a Dell OptiPlex 780 and a Dell
|
||||
Latitude E5520. Yes, one of them is a laptop.
|
||||
</p>
|
||||
<h3>OptiPlex 780 ("asvyn")</h3>
|
||||
<ul>
|
||||
<li><strong>CPU:</strong> Intel Core 2 Duo E8400 (2c/2t)</li>
|
||||
<li><strong>GPU:</strong> AMD ATI Radeon HD 3450</li>
|
||||
<li><strong>RAM:</strong> 2× 1 GB DDR + 1× 2 GB DDR2</li>
|
||||
<li><strong>Storage:</strong> Western Digital 150 GB hard drive</li>
|
||||
<li><strong>OS:</strong> Arch Linux</li>
|
||||
</ul>
|
||||
<h3>Latitude E5520 ("panquia")</h3>
|
||||
<ul>
|
||||
<li><strong>CPU:</strong> Intel Core i5-3320M (2c/4t)</li>
|
||||
<li><strong>GPU:</strong> Integrated</li>
|
||||
<li><strong>RAM:</strong> 10 GB</li>
|
||||
<li><strong>Storage:</strong> 300 GB hard drive</li>
|
||||
<li><strong>OS:</strong> Arch Linux</li>
|
||||
</ul>
|
||||
|
||||
<h1 class="text-center mb-0 mt-8">Fun things</h1>
|
||||
<p class="text-center mb-4">(aka my programming projects)</p>
|
||||
<div class="flex flex-col items-center justify-around gap-5">
|
||||
<ProjectCard
|
||||
v-for="(proj, index) in projects"
|
||||
:name="proj.name"
|
||||
:href="proj.href"
|
||||
img=""
|
||||
:key="index"
|
||||
>
|
||||
{{ proj.description }}
|
||||
</ProjectCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
line-height: 1.35;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,77 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="prose dark:prose-invert">
|
||||
<h1>Services</h1>
|
||||
<p>Gitea</p>
|
||||
<p>Eifueo</p>
|
||||
<p>Primoprod</p>
|
||||
<p>Calibre</p>
|
||||
<p>Plex</p>
|
||||
<p>Jellyfin</p>
|
||||
<p>Minecraft</p>
|
||||
<div
|
||||
class="container prose dark:prose-invert w-full flex flex-col items-center mt-9"
|
||||
>
|
||||
<h1 class="m-0">Services</h1>
|
||||
<p class="prose dark:prose-invert">
|
||||
This site is statically generated using
|
||||
<a href="https://v3.nuxtjs.org">Nuxt.js</a> with the help of templates and
|
||||
Markdown — because really, writing HTML by hand is tedious and I don't
|
||||
know why I ever tried — and its source is available
|
||||
<a href="https://github.com/potatoeggy/public">here</a>.
|
||||
</p>
|
||||
<!-- i could make this a list but god i'm so tired with nuxt -->
|
||||
<div class="flex justify-around flex-wrap gap-8 items-center">
|
||||
<ServiceCard
|
||||
name="Gitea"
|
||||
href="https://git.eggworld.tk"
|
||||
img="/assets/images/services/gitea.png"
|
||||
>
|
||||
Self-hosted GitHub
|
||||
</ServiceCard>
|
||||
<ServiceCard
|
||||
name="Eifueo"
|
||||
href="https://eifueo.eggworld.tk"
|
||||
img="/assets/images/services/eifueo.svg"
|
||||
>
|
||||
Note collection
|
||||
</ServiceCard>
|
||||
<ServiceCard
|
||||
name="Primoprod"
|
||||
href="https://primoprod.eggworld.tk"
|
||||
img="/assets/images/services/primogem.png"
|
||||
>
|
||||
Wish simulator
|
||||
</ServiceCard>
|
||||
<ServiceCard
|
||||
name="Calibre"
|
||||
href="https://calibre.eggworld.tk"
|
||||
img="/assets/images/services/calibre-web.png"
|
||||
>
|
||||
Kobo Cloud
|
||||
</ServiceCard>
|
||||
<ServiceCard
|
||||
name="Plex"
|
||||
href="https://plex.eggworld.tk"
|
||||
img="/assets/images/services/plex.png"
|
||||
>
|
||||
Ad-filled media server
|
||||
</ServiceCard>
|
||||
|
||||
<ServiceCard
|
||||
name="Jellyfin"
|
||||
href="https://jellyfin.eggworld.tk"
|
||||
img="/assets/images/services/jellyfin.png"
|
||||
>
|
||||
FOSS media server
|
||||
</ServiceCard>
|
||||
|
||||
<ServiceCard
|
||||
name="Minecraft"
|
||||
href="minecraft.eggworld.tk"
|
||||
img="/assets/images/services/minecraft.png"
|
||||
:unclickable="true"
|
||||
>
|
||||
Whitelisted
|
||||
</ServiceCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user