Compare commits

...

4 Commits

59 changed files with 205 additions and 102 deletions

View File

@ -88,4 +88,8 @@ 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 383 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 217 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 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.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 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-ps: {{ positioning }};
--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,23 @@ export default {
props: [ 'imageType' ],
computed: {
normalImageType() {
return this.imageType ?? 'yuika';
return this.imageType ?? '283-yuika';
},
positioning() {
switch(this.normalImageType) {
case '283-yuika':
return 'right 25% top 20%';
case 'cue-mei':
return 'center top';
case 'cue-mei2':
return 'center top';
case '765-yuriko':
return 'right 15% top 10%';
case '765-yuriko2':
return 'right 35% top 30%';
default:
return 'center';
}
}
},
@ -56,7 +72,7 @@ export default {
.page-header-background {
background-image: var(--bg-sm);
background-size: cover;
background-position: right 25% top 20%;
background-position: var(--bg-ps);
}
@screen sm {
.page-header-background {
@ -78,4 +94,4 @@ export default {
background-image: var(--bg-xxl);
}
}
</style>
</style>

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 imageType="765-yuriko2">
<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

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Arcaea</h1>
<p><a href="https://arcaea.lowiro.com">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Arknights</h1>
<p><a href="https://www.arknights.global">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Azur Lane (EN)</h1>
<p><a href="">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: CUE!</h1>
<p><a href="https://www.cue-liber.jp/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Fate/Grand Order (JP)</h1>
<p><a href="https://www.fate-go.jp">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Genshin Impact</h1>
<p><a href="https://genshin.mihoyo.com">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Honkai Impact 3rd</h1>
<p><a href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile</h1>
</PageHeader>
<main class="container mx-auto main">
@ -156,7 +156,4 @@ export default {
</script>
<style>
.card-list {
@apply flex flex-col;
}
</style>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Love Live! School Idol Festival (JP)</h1>
<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Love Live! School idol festival ALL STARS</h1>
<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: maimai DX</h1>
<p><a href="https://maimai.sega.com/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: The IDOLM@STER Million Live: Theater Days</h1>
<p><a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Nogikoi</h1>
<p><a href="https://nogikoi.jp">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
<p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
<p><a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Shadowverse</h1>
<p><a href="https://shadowverse.com/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Revue Starlight Re LIVE (EN)</h1>
<p><a href="https://www.en.revuestarlight-relive.com/">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: Tokyo 7th Sisters</h1>
<p><a href="https://t7s.jp">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: </h1>
<p><a href="">Game Website</a></p>
</PageHeader>

View File

@ -1,6 +1,6 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="cue-mei2">
<h1 class="title">Game Profile: 欅坂46日向坂46 UNI'S ON AIR</h1>
<p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
</PageHeader>

View File

@ -1,77 +1,30 @@
<template>
<div class="page">
<PageHeader>
<PageHeader imageType="765-yuriko">
<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>