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

iamge cmopression and a few small tweaks

Browse Source
This commit is contained in:
Zoe
2022-12-17 23:49:54 -06:00
parent e785c2c36c
commit 7adb93b872
19 changed files with 863 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
pages/blog/[...slug].vue
View File

@@ -1,6 +1,6 @@
<template>
<Nav />
<main class="grid grid-cols-12 gap-5 justify-center">
<div class="grid grid-cols-12 gap-5 justify-center">
<div class="pt-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<ContentDoc v-slot="{ doc }">
<img :src="doc.image.src"
@@ -18,14 +18,18 @@
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer class="text-gray-200" :value="doc" />
<main id="main">
<ContentRenderer
class="text-gray-200"
:value="doc" />
</main>
</ContentDoc>
</div>
</div>
</main>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
<!-- <NewsletterSignup class="mb-2" /> -->
© 2022 Juls07 - GPL v3.0 License
</div>
</footer>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div class="py-2 mb-4 !col-start-3 md:!col-start-4 xl:!col-start-5 xl:col-span-4 md:col-span-6 col-span-8">
<!-- <NewsletterSignup class="mb-2" /> -->
© 2022 Juls07 - GPL v3.0 License
</div>
</footer>
</template>

81
pages/blog/index.vue
View File

@@ -1,47 +1,52 @@
<template>
<div>
<div class="h-screen text-white">
<Nav />
<div class="gap-4 justify-evenly grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<div
class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<main>
<div id="main"
class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
<div v-for="article in articles"
:key="article._path"
class="mb-5 px-1.5">
<div
class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
<h3>
<nuxt-link class="text-lg"
:to="article._path">
{{ article.title }}
</nuxt-link>
</h3>
<p class="text-zinc-400">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-56">
<ContentDoc :head="false" :value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc"
:excerpt="true" />
</ContentDoc>
</p>
class="text-white bg-[#201F20] max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-zinc-700/30 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" />
<div
class="p-3 overflow-hidden pt-2 before:w-full before:h-2/6 before:absolute before:left-0 before:bottom-0 before:bg-gradient-to-b before:from-transparent before:to-[#201F20] mb-1 pb-1 relative">
<h3>
<nuxt-link tabindex="0"
class="text-lg"
:to="article._path">
{{ article.title }}
</nuxt-link>
</h3>
<p class="text-zinc-400">
{{ article.description }}
</p>
<p class="text-zinc-500">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-200 max-h-56">
<ContentDoc :head="false"
:value="article"
:path="article._path"
v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconTag v-for="tag in doc.tags"
:name="tag"
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc"
:excerpt="true" />
</ContentDoc>
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</template>

63
pages/index.vue
View File

@@ -7,16 +7,18 @@
<div
class="sm:h-32 sm:!col-start-2 sm:col-span-8 md:col-span-6 lg:col-span-5 w-32 sm:w-fit max-h-full md:h-40 items-center grid grid-rows-1 grid-cols-1 sm:grid-cols-2 drop-shadow-md">
<img alt="juls07 profile picture"
src="~/assets/pictues/juls07.png"
src="~/assets/images/juls07.png"
class="h-32 md:h-40 max-h-full rounded-full mb-3 sm:mb-0 sm:mr-2" />
<div class="grid grid-rows-5 grid-cols-1 h-fit">
<h1 class="text-4xl md:text-5xl row-span-3 font-jetbrains">Juls07</h1>
<p class="text-zinc-200 row-span-2 md:text-lg h-fit">Fullstack dev</p>
<p class="text-[#00FFC2] row-span-2 md:text-lg h-fit">
<span class="after:border after:h-[1.0em] after:border-current after:inline-block after:ml-0.5 after:animate-blink">{{ tagLine }}</span>
</p>
</div>
</div>
</div>
</header>
<main class="grid grid-cols-12 gap-5 justify-center">
<main id="main" class="grid grid-cols-12 gap-5 justify-center">
<section
class="py-6 mb-4 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
@@ -70,7 +72,8 @@
<div class="!col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<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">
<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">
<ProjectCard name="Juls07.dev V2"
headerIcon="mdi:nuxt"
githubLink="https://github.com/juls0730/vuefullstack"
@@ -95,7 +98,8 @@
headerIcon="mdi:robot-excited-outline"
githubLink="https://github.com/juls0730/Echo"
:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]">
This is one of the first projects that wasn't just a dinky website, this project brought me to where I am today.
This is one of the first projects that wasn't just a dinky website, this project brought me to where
I am today.
</ProjectCard>
<ProjectCard name="juls07.dev V1"
headerIcon="mdi:nuxt"
@@ -120,4 +124,53 @@
useHead({
title: 'Juls07',
})
</script>
<script lang="ts">
export default {
data: () => {
return {
tagLine: "",
typeStatus: false,
displayTextArray: ["Fullstack dev", "Designer", "Blogger", "Freelancer"],
displayTextArrayIndex: 0,
charIndex: 0,
};
},
methods: {
typeText() {
if (this.charIndex < this.displayTextArray[this.displayTextArrayIndex].length) {
if (!this.typeStatus) this.typeStatus = true;
this.tagLine += this.displayTextArray[this.displayTextArrayIndex].charAt(
this.charIndex
);
this.charIndex += 1;
setTimeout(this.typeText, 100);
} else {
this.typeStatus = false;
setTimeout(this.eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
}
},
eraseText() {
if (this.charIndex > 0) {
if (!this.typeStatus) this.typeStatus = true;
this.tagLine = this.displayTextArray[this.displayTextArrayIndex].substring(
0,
this.charIndex - 1
);
this.charIndex -= 1;
setTimeout(this.eraseText, 50);
} else {
this.typeStatus = false;
this.displayTextArrayIndex += 1;
if (this.displayTextArrayIndex >= this.displayTextArray.length)
this.displayTextArrayIndex = 0;
setTimeout(this.typeText, 1100);
}
},
},
created() {
setTimeout(this.typeText, 2200);
},
}
</script>