Skip to content

Commit

Permalink
update packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@leon-luna-ray
leon-luna-ray committed Feb 28, 2024
1 parent 8824367 commit 6415d35
Show file tree
Hide file tree
Showing 8 changed files with 401 additions and 415 deletions.
21 changes: 11 additions & 10 deletions src/components/FilterButtons.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
<template>
<div v-if="items.length" class="container flex flex-wrap justify-center">
<div v-for="item in items" :key="item.id"
class="rounded-lg border border-neutral-brown px-[0.75rem] py-[0.2rem] m-[0.2rem] hover:cursor-pointer hover:bg-neutral-brown hover:text-primary-yellow"
:class="isSelected(item.slug.current)" @click="handleItemClick(item)">
{{ item.title }}
</div>
</div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
Expand Down Expand Up @@ -66,4 +58,13 @@ onMounted(() => {
}
});
</script>


<template>
<div v-if="items.length" class="container flex flex-wrap justify-center">
<div v-for="item in items" :key="item.id"
class="rounded-lg border border-neutral-brown px-[0.75rem] py-[0.2rem] m-[0.2rem] hover:cursor-pointer hover:bg-neutral-brown hover:text-primary-yellow"
:class="isSelected(item.slug.current)" @click="handleItemClick(item)">
{{ item.title }}
</div>
</div>
</template>
18 changes: 9 additions & 9 deletions src/components/Footer.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
<template>
<footer class="flex flex-col justify-center items-center gap-y-[1.875rem]">
<SocialIcons :email="email" :github="github" :linkedin="linkedin" />
<div class='copyright'>
<p>漏 {{ year }} {{ name }}. All rights reserved.</p>
</div>
</footer>
</template>

<script setup lang="ts">
import SocialIcons from './SocialIcons.vue';
Expand All @@ -28,3 +19,12 @@ const props = defineProps({
const year = new Date().getFullYear();
</script>

<template>
<footer class="flex flex-col justify-center items-center gap-y-[1.875rem]">
<SocialIcons :email="email" :github="github" :linkedin="linkedin" />
<div class='copyright'>
<p>漏 {{ year }} {{ name }}. All rights reserved.</p>
</div>
</footer>
</template>
76 changes: 38 additions & 38 deletions src/components/Header.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,3 @@
<template>
<header id="header" :class="['sticky top-0 md:top-[1rem] bg-theme z-[2]', bottomPadding]">
<div class='top-label container flex items-center justify-center border-t border-b border-black dark:border-light-yellow/80 md:border-none relative'>
<div class='divider'></div>
<div class="px-4 py-[1rem] md:py-0 flex justify-center gap-x-[0.5rem]">
<a v-if="isMobile && path.length" href="/" class="mobile">
<div class="site">
<div v-if="path.length > 1" class="inner">
<span>{{ name }}</span>
<span aria-hidden="true">-</span>
<span>{{ title }}</span>
</div>
<div v-else class="inner home">
<span>{{ name }}</span>
<span>{{ title }}</span>
</div>
</div>
<span v-if="!isHome && path.length > 1" class="page-title">
{{ getTitle(path[path.length - 1]) }}
</span>
</a>
<div v-else-if="path.length" v-for="(item, index) in path" class="path flex">
<a v-if="index < path.length - 1" :href="path[index]" class="text-item">{{ getTitle(item) }}</a>
<a v-else-if="path.length === 1" href="/" class="text-item">{{ getTitle(item) }}</a>
<span v-else class="text-item">{{ getTitle(item) }}</span>
<span v-if="index < path.length - 1" class="pl-2 hidden md:block" aria-hidden="true"> - </span>
</div>
</div>
<div class='divider'></div>
<!-- Menu Btn -->
<div class="absolute z-10 right-0 md:right-[1.5rem] lg:right-[3rem] bg-theme p-[1rem]">
<IconHamburger class="hover:cursor-pointer" @click="isMenuOpen.set(!$isMenuOpen)"/>
</div>
</div>
</header>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useWindowScroll, useMediaQuery } from '@vueuse/core'
Expand Down Expand Up @@ -94,4 +57,41 @@ const getTitle = (path: string): string => {
// Watchers
watch(y, handleScroll)
</script>
</script>

<template>
<header id="header" :class="['sticky top-0 md:top-[1rem] bg-theme z-[2]', bottomPadding]">
<div class='top-label container flex items-center justify-center border-t border-b border-black dark:border-light-yellow/80 md:border-none relative'>
<div class='divider'></div>
<div class="px-4 py-[1rem] md:py-0 flex justify-center gap-x-[0.5rem]">
<a v-if="isMobile && path.length" href="/" class="mobile">
<div class="site">
<div v-if="path.length > 1" class="inner">
<span>{{ name }}</span>
<span aria-hidden="true">-</span>
<span>{{ title }}</span>
</div>
<div v-else class="inner home">
<span>{{ name }}</span>
<span>{{ title }}</span>
</div>
</div>
<span v-if="!isHome && path.length > 1" class="page-title">
{{ getTitle(path[path.length - 1]) }}
</span>
</a>
<div v-else-if="path.length" v-for="(item, index) in path" class="path flex">
<a v-if="index < path.length - 1" :href="path[index]" class="text-item">{{ getTitle(item) }}</a>
<a v-else-if="path.length === 1" href="/" class="text-item">{{ getTitle(item) }}</a>
<span v-else class="text-item">{{ getTitle(item) }}</span>
<span v-if="index < path.length - 1" class="pl-2 hidden md:block" aria-hidden="true"> - </span>
</div>
</div>
<div class='divider'></div>
<!-- Menu Btn -->
<div class="absolute z-10 right-0 md:right-[1.5rem] lg:right-[3rem] bg-theme p-[1rem]">
<IconHamburger class="hover:cursor-pointer" @click="isMenuOpen.set(!$isMenuOpen)"/>
</div>
</div>
</header>
</template>
27 changes: 14 additions & 13 deletions src/components/ImageTextTout.vue
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
<script setup lang="ts">
const props = defineProps({
label: {
type: String,
required: false,
},
text: {
type: String,
required: true,
},
});
</script>

<template>
<div class="grid md:grid-cols-5 gap-x-[4rem] gap-y-[2rem] items-center">
<div class='md:col-span-2 relative flex justify-center items-center aspect-square'>
Expand All @@ -10,16 +23,4 @@
<h2 class="font-monoton text-[2rem] md:text-[3.125rem] pt-[1rem] md:pt-[2.5rem] dark:text-light-yellow/80 leading-[120%]">{{ text }}</h2>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
label: {
type: String,
required: false,
},
text: {
type: String,
required: true,
},
});
</script>
</template>
56 changes: 28 additions & 28 deletions src/components/Menu.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,3 @@
<template>
<aside ref="asisdeRef" id="main-menu" :class="isVisible">
<div class="p-[2rem] relative">
<div class="absolute top-6 left-5">
<slot name="dark-mode-btn"></slot>
</div>
<button @click="closeMenu" class="absolute top-5 right-5">
<IconClose />
</button>
<nav class="text-center">
<span class="uppercase text-chocolate dark:text-light-yellow/60 tracking-[2px]">rayluna.dev</span>
<h1>Menu</h1>
<ul class="menu-links flex flex-col gap-y-4 mt-10">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/projects">Projects</a>
</li>
</ul>
</nav>
</div>
<div class="flex-col-1 justify-center items-center p-[2rem]">
<SocialIcons :email="email" :github="github" :linkedin="linkedin" />
</div>
</aside>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { onClickOutside } from '@vueuse/core'
Expand Down Expand Up @@ -64,3 +36,31 @@ const closeMenu = () => {
// Watchers
onClickOutside(asisdeRef, closeMenu)
</script>

<template>
<aside ref="asisdeRef" id="main-menu" :class="isVisible">
<div class="p-[2rem] relative">
<div class="absolute top-6 left-5">
<slot name="dark-mode-btn"></slot>
</div>
<button @click="closeMenu" class="absolute top-5 right-5">
<IconClose />
</button>
<nav class="text-center">
<span class="uppercase text-chocolate dark:text-light-yellow/60 tracking-[2px]">rayluna.dev</span>
<h1>Menu</h1>
<ul class="menu-links flex flex-col gap-y-4 mt-10">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/projects">Projects</a>
</li>
</ul>
</nav>
</div>
<div class="flex-col-1 justify-center items-center p-[2rem]">
<SocialIcons :email="email" :github="github" :linkedin="linkedin" />
</div>
</aside>
</template>
1 change: 1 addition & 0 deletions src/components/ProjectInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const timeSinceUpdate = computed(() => {
return null;
})
</script>

<template>
<div class="info">
<ul class="info-list">
Expand Down
30 changes: 14 additions & 16 deletions src/components/SocialIcons.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,3 @@
<template>
<div class='social-icons flex gap-x-[1.25rem]'>
<a v-if="email" :href="`mailto:${email}`" aria-label="Email">
<IconEmail />
</a>
<a v-if="github" :href="github" target="_blank" aria-label="GitHub">
<IconGithub />
</a>
<a v-if="linkedin" :href="linkedin" target="_blank" aria-label="LinkedIn">
<IconLinkedin />
</a>
</div>
</template>

<script setup lang="ts">
import IconEmail from './icons/IconEmail.vue';
import IconGithub from './icons/IconGithub.vue';
Expand All @@ -28,6 +14,18 @@ const props = defineProps({
type: String,
},
});
const year = new Date().getFullYear();
</script>

<template>
<div class='social-icons flex gap-x-[1.25rem]'>
<a v-if="email" :href="`mailto:${email}`" aria-label="Email">
<IconEmail />
</a>
<a v-if="github" :href="github" target="_blank" aria-label="GitHub">
<IconGithub />
</a>
<a v-if="linkedin" :href="linkedin" target="_blank" aria-label="LinkedIn">
<IconLinkedin />
</a>
</div>
</template>

0 comments on commit 6415d35

Please sign in to comment.