Major overhaul of images and some pages

This commit is contained in:
Damillora 2021-01-10 03:03:31 +07:00
parent 5917030b01
commit e3df7a6556
23 changed files with 165 additions and 78 deletions

View File

@ -89,3 +89,7 @@ blockquote {
.gallery .gallery-image {
@apply w-full px-4 py-4;
}
.card-list {
@apply flex flex-col;
}

View File

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

View File

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 123 KiB

View File

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 93 KiB

View File

Before

Width:  |  Height:  |  Size: 266 KiB

After

Width:  |  Height:  |  Size: 266 KiB

View File

Before

Width:  |  Height:  |  Size: 511 KiB

After

Width:  |  Height:  |  Size: 511 KiB

View File

Before

Width:  |  Height:  |  Size: 227 KiB

After

Width:  |  Height:  |  Size: 227 KiB

View File

Before

Width:  |  Height:  |  Size: 141 KiB

After

Width:  |  Height:  |  Size: 141 KiB

View File

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

View File

Before

Width:  |  Height:  |  Size: 320 KiB

After

Width:  |  Height:  |  Size: 320 KiB

View File

Before

Width:  |  Height:  |  Size: 587 KiB

After

Width:  |  Height:  |  Size: 587 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 587 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 688 KiB

View File

@ -34,10 +34,16 @@
/>
<NavItem
link="/links"
icon="contacts"
icon="share"
text="Links"
@click="menu_shown = !menu_shown"
/>
<NavItem
link="/contact"
icon="contacts"
text="Contact"
@click="menu_shown = !menu_shown"
/>
<NavItem
link="//blog.nanao.moe"
icon="rss_feed"
@ -96,7 +102,7 @@ export default {
width: 100vw;
height: 100vh;
position: absolute;
background-image: url('~assets/images/yuika/bg-sm.jpg');
background-image: url('~assets/images/bg/283-yuika/bg-sm.jpg');
background-size: cover;
background-position: right 25% top 20%;
@apply transition-all duration-300 ease-in-out;
@ -115,22 +121,22 @@ export default {
}
@screen sm {
.site-background {
background-image: url('~assets/images/yuika/bg-md.jpg');
background-image: url('~assets/images/bg/283-yuika/bg-md.jpg');
}
}
@screen md {
.site-background {
background-image: url('~assets/images/yuika/bg-lg.jpg');
background-image: url('~assets/images/bg/283-yuika/bg-lg.jpg');
}
}
@screen lg {
.site-background {
background-image: url('~assets/images/yuika/bg-xl.jpg');
background-image: url('~assets/images/bg/283-yuika/bg-xl.jpg');
}
}
@screen xl {
.site-background {
background-image: url('~assets/images/yuika/bg-xxl.jpg');
background-image: url('~assets/images/bg/283-yuika/bg-xxl.jpg');
}
}
.site-header-inner {

41
components/MediaItem.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="card game-card">
<div class="card-content">
<div class="card-title">
<p class="card-caption"><a :href="link">{{title}}</a></p>
</div>
<div class="card-content">
<p><slot></slot></p>
</div>
<div class="card-footer">
</div>
</div>
</div>
</template>
<script>
export default {
props : [ 'title', 'link' ],
}
</script>
<style>
.game-card {
padding: 0.25rem 1rem;
@apply w-full flex flex-row transition duration-300 ease-in-out;
}
.game-card:hover {
@apply bg-yuika-blue-200;
}
.card-caption {
@apply text-2xl my-1;
}
.card-content {
@apply my-2 w-full;
}
.card-content p {
@apply my-1;
}
</style>

View File

@ -2,12 +2,12 @@
<div class="relative group page-header">
<component is="style">
:root {
--bg: url('{{ require('@/assets/images/'+normalImageType+'/bg.jpg') }}');
--bg-sm: url('{{ require('@/assets/images/'+normalImageType+'/bg-sm.jpg') }}');
--bg-md: url('{{ require('@/assets/images/'+normalImageType+'/bg-md.jpg') }}');
--bg-lg: url('{{ require('@/assets/images/'+normalImageType+'/bg-lg.jpg') }}');
--bg-xl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xl.jpg') }}');
--bg-xxl: url('{{ require('@/assets/images/'+normalImageType+'/bg-xxl.jpg') }}');
--bg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg.jpg') }}');
--bg-sm: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-sm.jpg') }}');
--bg-md: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-md.jpg') }}');
--bg-lg: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-lg.jpg') }}');
--bg-xl: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-xl.jpg') }}');
--bg-xxl: url('{{ require('@/assets/images/bg/'+normalImageType+'/bg-xxl.jpg') }}');
}
</component>
<div class="h-full w-full page-header-background">
@ -29,7 +29,7 @@ export default {
props: [ 'imageType' ],
computed: {
normalImageType() {
return this.imageType ?? 'yuika';
return this.imageType ?? '283-yuika';
}
},

View File

@ -1,6 +1,6 @@
{
"name": "@damillora/miracle",
"version": "2.0.1",
"version": "3.0.0",
"description": "nanao.moe homepage, but in Vue",
"author": "Damillora",
"private": true,

86
pages/contact.vue Normal file
View File

@ -0,0 +1,86 @@
<template>
<div class="page">
<PageHeader>
<h1>Contact</h1>
</PageHeader>
<main class="container mx-auto main">
<p>You can contact me via various channels.</p>
<h2>Common channels</h2>
<p>Those are the ones I use for interacting with the wider community!</p>
<ul>
<li>
<p>Email</p>
<p>damillora(at)damillora.com</p>
</li>
<li>
<p>Twitter:</p>
<p><a href="/twitter">Damillora</a></p>
</li>
</ul>
<h2>Publishing media</h2>
<p>I publish content mainly in those sites</p>
<ul>
<li>
<p>YouTube:</p>
<p><a href="/channel">Damillora</a></p>
</li>
<li>
<p>Twitch:</p>
<p><a href="/twitch">Damillora</a></p>
</li>
<li>
<p>SoundCloud:</p>
<p><a href="/soundcloud">damillora</a></p>
</li>
<li>
<p>GitHub:</p>
<p><a href="/github">Damillora</a></p>
</li>
</ul>
<h2>Alternative technologies</h2>
<p>
Mainstream platforms control what you can post, and you can lose access to data rightfully yours.
<br>
I maintain presence in several altenative platforms and technologies to ensure I have control of data I post,
to contribute to a possible future, and as a backup when mainstream platforms go down.
<br>
If you have a presence in those platforms, I encourage you to use these instead, you will help
the adoption of those technologies!
</p>
<ul>
<li>
<p>Fediverse:</p>
<p><a href="/fediverse">Damillora@fed.nanao.moe</a></p>
</li>
<li>
<p>Video Channel:</p>
<p><a href="/fedichan">damillora@live.nanao.moe</a></p>
</li>
<li>
<p>Matrix</p>
<p>@damillora:matrix.nanao.moe</p>
</li>
<li>
<p>Gemini</p>
<p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
</li>
</ul>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
export default {
components: {
PageHeader
},
head: {
title: 'Contact',
}
}
</script>
<style>
</style>

View File

@ -156,7 +156,4 @@ export default {
</script>
<style>
.card-list {
@apply flex flex-col;
}
</style>

View File

@ -4,74 +4,27 @@
<h1>Links</h1>
</PageHeader>
<main class="container mx-auto main">
<p>I maintain a number of profiles on various sites, be sure to follow me there!</p>
<h2>Common social media</h2>
<p>
<ul>
<li>
<p>Twitter:</p>
<p><a href="/twitter">Damillora</a></p>
</li>
<li>
<p>YouTube:</p>
<p><a href="/channel">Damillora</a></p>
</li>
<li>
<p>Twitch:</p>
<p><a href="/twitch">Damillora</a></p>
</li>
<li>
<p>SoundCloud:</p>
<p><a href="/soundcloud">damillora</a></p>
</li>
<li>
<p>GitHub:</p>
<p><a href="/github">Damillora</a></p>
</li>
</ul>
</p>
<h2>For decentralized web users and the brave</h2>
<p>
<ul>
<li>
<p>Fediverse:</p>
<p><a href="/fediverse">Damillora@fed.nanao.moe</a></p>
</li>
<li>
<p>Video Channel:</p>
<p><a href="/fedichan">damillora@live.nanao.moe</a></p>
</li>
<li>
<p>Matrix</p>
<p>@damillora:matrix.nanao.moe</p>
</li>
<li>
<p>Gemini</p>
<p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
</li>
</ul>
</p>
<h2>Miscellanous things</h2>
<p>
<ul>
<li>
<p><a href="/favmusiclist">Damillora's Favorite Music Playlist</a></p>
</li>
</ul>
</p>
<p>Here, I post links that is of my interest, and might be for you too!</p>
<div class="card-list">
<MediaItem title="Damillora's Favorite Music Playlist" link="/favmusiclist">
This playlist contains some of the music I listen to frequently.
</MediaItem>
</div>
</main>
</div>
</template>
<script>
import PageHeader from '~/components/PageHeader';
import MediaItem from '~/components/MediaItem';
export default {
components: {
PageHeader
PageHeader,
MediaItem
},
head: {
title: 'Social Media',
title: 'Links',
}
}
</script>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader imageType="mei">
<PageHeader imageType="cue-mei">
<h1>Project Portfolio</h1>
</PageHeader>
<main class="container mx-auto main">

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader imageType="mei">
<PageHeader imageType="cue-mei">
<h1>nanao.moe</h1>
<p>
<a href="https://nanao.moe">live</a>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader imageType="mei">
<PageHeader imageType="cue-mei">
<h1>nanao.moe Blog</h1>
<p>
<a href="https://blog.nanao.moe">live</a>