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

17
app.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup>
const nuxtApp = useNuxtApp();
const isRouteLoading = ref(false);
nuxtApp.hook("page:start", () => {
isRouteLoading.value = true;
});
nuxtApp.hook("page:finish", () => {
isRouteLoading.value = false;
});
</script>
<template>
<ProgressBar :isLoading="isRouteLoading" />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>

BIN
bun.lockb
View File

Binary file not shown.

0
components/IconTag.vue Executable file → Normal file
View File

0
components/Nav.vue Executable file → Normal file
View File

45
components/ProgressBar.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
let props = defineProps<{
isLoading: boolean,
}>()
let showLoading = ref(false);
let progress = ref(10);
watch(() => props.isLoading, () => {
if (props.isLoading) {
start();
} else {
finish();
}
})
let interval = null;
function start() {
progress.value = 10;
showLoading.value = true;
interval = setInterval(() => {
if (progress.value < 80) {
progress.value += Math.random() * 2;
}
}, 400);
}
function finish() {
progress.value = 100;
setTimeout(() => {
showLoading.value = false;
progress.value = 10;
}, 100);
clearInterval(interval);
}
</script>
<template>
<div class="fixed top-0 left-0 right-0 h-0.5 bg-sea-green z-50 transition-all ease-in-out"
:class="{ 'opacity-0': !showLoading }" :style="{ width: `${progress}%` }"></div>
</template>
<style></style>

48
components/ProjectCard.vue Executable file → Normal file
View File

@@ -1,31 +1,31 @@
<script>
export default {
props: ["name", "icons", "headerIcon", "githubLink", "externalLink"],
props: ["name", "icons", "headerIcon", "repo", "externalLink"],
}
</script>
<template>
<div
class="dark:bg-dark-slate bg-touched-lavender relative border p-6 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" v-if="headerIcon">
<Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex">
<a v-if="githubLink" :href="githubLink" :aria-label="`${name}'s Gtihub`"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:brand-github" />
</a>
<a v-if="externalLink" :href="externalLink"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:external-link" />
</a>
</div>
</div>
<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
<div id="body" class="mb-4">
<slot />
</div>
<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
</div>
</div>
<div
class="dark:bg-dark-slate bg-touched-lavender relative border p-6 h-[60vw] max-h-[425px] min-h-[375px] border-soft-lilac dark:border-midnight-slate/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" v-if="headerIcon">
<Icon size="64" class="text-sea-green" :name="headerIcon" />
<div class="ml-auto flex">
<a v-if="repo" :href="`/github/${repo}`" :aria-label="`${name}'s Gtihub`"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:brand-github" />
</a>
<a v-if="externalLink" :href="externalLink"
class="dark:!text-zinc-300/80 !text-deep-indigo/75 dark:hover:!text-zinc-200 hover:!text-deep-indigo/95 dark:focus:!text-zinc-200 focus:!text-deep-indigo/95 rounded transition-colors duration-300 focus:outline-3 focus:outline focus:outline-fuschia">
<Icon size="38" name="tabler:external-link" />
</a>
</div>
</div>
<h3 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h3>
<div id="body" class="mb-4">
<slot />
</div>
<div class="flex flex-wrap gap-2 absolute bottom-6" v-if="icons">
<IconTag v-for="icon in icons" size="16" :name="icon.name" :iconName="icon.icon"></IconTag>
</div>
</div>
</template>

35
components/blog/BlogSkeletonCard.vue
View File

@@ -1,35 +0,0 @@
<script lang="ts" setup>
const titleWidth = Math.max(Math.floor(Math.random() * 300), 175);
</script>
<template>
<div
class="flex flex-col dark:bg-dark-slate bg-touched-lavender max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-soft-lilac dark:border-midnight-slate/30 shadow-md">
<div class="w-full rounded-tl-lg rounded-tr-lg aspect-video dark:bg-zinc-400 bg-zinc-600 animate-pulse">
</div>
<div
class="flex-shrink p-3 overflow-hidden pt-2 text-fade dark:before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#0C0B0C_95%,#0C0B0C)] before:bg-[linear-gradient(180deg,transparent_0,hsla(0,0%,5%,0)_36%,#F5EDFE_95%,#F5EDFE)] mb-1 pb-1 relative">
<div class="h-5 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse"
:style="{ width: `${titleWidth}px` }"></div>
<div class="h-3 mb-1 rounded-lg dark:bg-zinc-400 bg-zinc-600 animate-pulse w-36"></div>
<div class="h-3 mb-1 rounded-lg bg-zinc-500 animate-pulse w-44"></div>
<div
class="flex flex-wrap w-full gap-2 justify-start my-1 dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
<!-- <IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" /> -->
<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>
<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>
</div>
</div>
</template>

2
components/blog/index.vue
View File

@@ -55,8 +55,6 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
.findSurround(withoutTrailingSlash(route.path))
)
console.log("SURROUND", surround.value)
useSeoMeta({
title: doc.value?.title,
description: doc.value?.description,

0
components/content/ProseCode.vue Executable file → Normal file
View File

18
components/content/ProseCodeInline.vue Executable file → Normal file
View File

@@ -1,16 +1,16 @@
<template>
<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
<slot />
</code>
<code class="dark:bg-[#1d1b1d] bg-[hsl(270,26.89%,94.47%)]">
<slot />
</code>
</template>
<style scoped>
code {
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
overflow: hidden;
padding: 3px 6px;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.25rem;
overflow: hidden;
padding: 3px 6px;
}
</style>

0
components/content/ProseH2.vue Executable file → Normal file
View File

0
components/content/ProseH3.vue Executable file → Normal file
View File

2
content/blog/magic-of-docker-compose.md
View File

@@ -446,6 +446,6 @@ You will see that the counter ticks up exactly 10000 requests, and it will compl
In summary, Docker Compose is an amazing tool for managing full-stack projects efficiently. It abstracts away many of the complexities involved in the various services and dependencies, allowing you to focus on what really matters: building great projects. Once you get the hang of using Docker Compose, you will find yourself incorporating it into many of your projects, both new and old.
If you want to dive deeper into the example project I described in this post, feel free to check out the [Github repo](https://github.com/juls0730/docker-compose-vue-example) for the full source code. Experimenting with Docker Compose in your own projects will help you appreciate its power and simplicity.
If you want to dive deeper into the example project I described in this post, feel free to check out the [Github repo](/github/docker-compose-vue-example) for the full source code. Experimenting with Docker Compose in your own projects will help you appreciate its power and simplicity.
Thanks for reading, and I hope this article has sparked interest in Docker Compose. Whether you’re an experienced dev, or just starting out, give Docker Compose a try, and you may find it becomes an essential part of your development workflow!

2
content/blog/portfolio-site-rebuild.md
View File

@@ -16,4 +16,4 @@ For the past month I've been quietly rebuilding my portfolio site, designing and
After a couple days of making a design in figma I setup a new nuxt3 project and went to work, after just a few weeks I had almost everything completed, but the last few things I had to do were to make the blogs page and finish the project cards. After a few weeks of designing and getting feedback from the [web dev and design](https://discord.gg/web) discord server, mainly feedback from aqil#7927 an absolute machine in the visual design help channel. However, rebuilding the site still wasn't done, so about halfway through december I decided to change a few things, the typing animation on the home page was added that day and a few accessibility things here and there.
<br />
Once 2023 hit I started working on this much more, with my [100DaysOfCode Challenge](/blog/100daysofcode-challenge) completed I had much more time to work on this site. Mostly I just had to finish writing a few blog posts, and I would be able to finally publish the new site. So I got to writing this blog post and here we are right now. This post is just an update with the new site, here's the sites [github](https://github.com/juls0730/juls07.dev-v2) and that's all, checkout my [twitter](https://twitter.com/julie4055_) if you want to hear more about what I do, have a great 2023!
Once 2023 hit I started working on this much more, with my [100DaysOfCode Challenge](/blog/100daysofcode-challenge) completed I had much more time to work on this site. Mostly I just had to finish writing a few blog posts, and I would be able to finally publish the new site. So I got to writing this blog post and here we are right now. This post is just an update with the new site, here's the sites [github](/github/juls07.dev-v2) and that's all, checkout my [twitter](https://twitter.com/julie4055_) if you want to hear more about what I do, have a great 2023!

2
content/blog/what-ive-been-doing.md
View File

@@ -17,7 +17,7 @@ So I have been working on a social media site I am currently calling snowballsoc
<!--more-->
This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
This project I again used mongoDB, I fist used mongodb in my [vuefullstack](/github/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
<br />
I've gotten a VPS from [linode](https://linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames

1
nuxt.config.ts
View File

@@ -65,6 +65,7 @@ export default defineNuxtConfig({
minify: true,
prerender: {
crawlLinks: true,
ignore: ['/github'],
routes: ['/sitemap.xml', '/rss.xml']
},
},

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>