zoeissleeping/juls07.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

loading indicator I like better and github redirect

Browse Source
This commit is contained in:
Zoe
2024-10-25 01:30:51 -05:00
parent d0fb293c76
commit b3768887b7
19 changed files with 122 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
pages/blog/[...slug].vue Executable file → Normal file
View File

@@ -1,47 +1,12 @@
<script setup>
let year = new Date().getFullYear();
</script>
<template>
<div class="min-h-screen">
<Nav />
<div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
<Suspense>
<Blog />
<template #fallback>
<div
class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-1">
<div
class="mb-2 rounded-md drop-shadow w-full dark:bg-zinc-400 bg-zinc-600 animate-pulse aspect-video">
</div>
<div class="h-9 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 100), 55)}%` }"></div>
<div class="h-4 mb-2 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 65), 15)}%` }"></div>
<div class="h-3 mb-2 rounded-lg bg-zinc-500 animate-pulse"
:style="{ width: `${Math.max(Math.ceil(Math.random() * 50), 10)}%` }"></div>
<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
<div v-for="i in Math.ceil(Math.random() * 4)"
class="font-inter md:text-lg w-fit max-h-9 min-w-fit dark:bg-obsidian-night bg-[hsl(270,68%,95.47%)] border border-soft-lilac dark:border-midnight-slate/30 py-1 px-2 rounded shadow flex items-center">
<div class="mb-1 rounded bg-zinc-500 animate-pulse w-[20px] h-[20px] mr-2"></div>
<div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse"
:style="{ width: `${(i * 10) + 67}px` }">
</div>
</div>
</div>
<hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
<div
class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10 order-3">
<main id="main" class="leading-relaxed">
<div class="max-h-full leading-relaxed">
<div v-for="i in 100"
class="h-3 my-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${80 + Math.ceil(Math.random() * 20)}%` }" :class="{
'mb-4':
Math.random() > 0.8
}"></div>
</div>
</main>
</div>
</div>
</template>
</Suspense>
<Blog />
</div>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div

23
pages/blog/index.vue Executable file → Normal file
View File

@@ -11,23 +11,16 @@ useHead({
<Nav />
<main>
<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<Suspense>
<ContentQuery path="blog"
:only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
date: 1
}" :where="{
<ContentQuery path="blog"
:only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt', 'readTime']" :sort="{
date: 1
}" :where="{
_draft: false
}" v-slot="{ data }">
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
<BlogCard :article="article" />
</div>
</ContentQuery>
<template #fallback>
<div v-for="i in 15">
<BlogSkeletonCard />
</div>
</template>
</Suspense>
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
<BlogCard :article="article" />
</div>
</ContentQuery>
</div>
</main>
</div>

21
pages/index.vue Executable file → Normal file
View File

@@ -60,7 +60,7 @@ type ProjectIcon = {
type Project = {
headerIcon: string | string[],
name: string,
githubLink?: string,
repo?: string,
externalLink?: string,
body: string,
icons: ProjectIcon[],
@@ -70,42 +70,42 @@ let projects: Project[] = [
{
headerIcon: "mdi:language-rust",
name: "CappuccinOS",
githubLink: "https://github.com/juls0730/CappuccinOS",
repo: "CappuccinOS",
body: "CappuccinOS is a Rust operating system built from scratch targeting x86_64. This project has oppened my eyes to low level development and let me learn a lot about Rust.",
icons: [{ icon: 'skill-icons:rust', name: 'Rust' }]
},
{
headerIcon: "tabler:brand-nuxt",
name: "Juls07.dev",
githubLink: "https://github.com/juls0730/juls07.dev",
repo: "juls07.dev",
body: "This is the site you're currently on, a simple but decent enough portfolio and blog site.",
icons: [{ icon: 'logos:nuxt-icon', name: 'nuxtjs v3' }]
},
{
headerIcon: "mdi:language-php",
name: "PHP Forum",
githubLink: "https://github.com/juls0730/php-forum",
repo: "php-forum",
body: "This was my first fullstack project and one of my first projects I ever released the source code of.",
icons: [{ icon: 'logos:laravel', name: 'php' }, { icon: 'logos:mysql-icon', name: 'MySQL' }]
},
{
headerIcon: "tabler:brand-vue",
name: "vuefullstack",
githubLink: "https://github.com/juls0730/vuefullstack",
repo: "vuefullstack",
body: "I used this project to learn more about fullstack web development using vue.js. It's just a simple forum, similar to reddit, but much simpler.",
icons: [{ icon: 'logos:vue', name: 'vue v3' }, { icon: 'logos:nodejs-icon-alt', name: 'node.js' }, { icon: 'logos:mongodb-icon', name: 'Mongodb' }]
},
{
headerIcon: "tabler:brand-nuxt",
name: "Discord Clone",
githubLink: "https://github.com/juls0730/discord-clone",
repo: "discord-clone",
body: "Excited by Nuxt 3's recent stable release at the time, I jumped on the opportunity to build a fullstack application with it. This project was an amazing learning experience and I had a blast making it!",
icons: [{ icon: 'logos:nuxt-icon', name: 'nuxtjs v3' }, { icon: 'logos:docker-icon', name: 'Docker' }, { icon: 'logos:postgresql', name: 'Postgres' }]
},
{
headerIcon: "tabler:code-dots",
name: "100DaysOfCode",
githubLink: "https://github.com/juls0730/100DaysOfCode",
repo: "100DaysOfCode",
body: "In the middle of september 2022, I started a 100 days of code challenge, and I wanted to make a UI framework similar to Vue or Svelte. I learned a ton and had a bunch of fun!",
icons: [{ icon: 'logos:nodejs-icon-alt', name: 'node.js' }, { icon: 'logos:typescript-icon', name: 'Typescript' }]
}
@@ -144,8 +144,7 @@ let projects: Project[] = [
development. I first dabbled in web development when I was ten, and here we are today! I mainly use
<a href="https://nuxt.com">NuxtJs</a> to build my websites since I absolutely adore Vuejs. For me, I
love being able to imagine anything and it to come to life. Finally, go checkout my <a
href="https://github.com/juls0730">Github</a> and also my <a
href="https://twitter.com/julie4055_">Twitter</a>.
href="/github">Github</a> and also my <a href="https://twitter.com/julie4055_">Twitter</a>.
</p>
<h3 class="text-2xl md:text-3xl mb-1.5 ml-0.5">Skills</h3>
<section class="flex flex-wrap w-full gap-2 justify-start ml-1">
@@ -171,11 +170,11 @@ let projects: Project[] = [
<h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
</div>
<!-- <section
class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full"> -->
class="pb-6 grid mb-4 col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 grid-cols-12 gap-y-6 sm:gap-x-6 max-w-full"> -->
<section
class="max-w-full col-start-2 xs:!col-start-3 col-span-10 xs:col-span-8 pb-6 mb-4 gap-4 justify-evenly grid grid-cols-1 smyes :grid-cols-[repeat(auto-fit,_minmax(50px,_340px))] lg:grid-cols-[repeat(auto-fit,_minmax(50px,_300px))]">
<ProjectCard v-for="project in projects" :name="project.name" :headerIcon="project.headerIcon"
:icons="project.icons" :githubLink="project.githubLink" :externalLink="project.externalLink">
:icons="project.icons" :githubLink="project.repo" :externalLink="project.externalLink">
<slot>
<p v-html="project.body" />
</slot>