slight refactors
This commit is contained in:
@@ -5,20 +5,20 @@
|
||||
<ContentDoc v-slot="{ doc }">
|
||||
<img :src="doc.image.src"
|
||||
class="mb-2" />
|
||||
<h1 class="text-3xl md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
|
||||
<h1 class="text-3xl text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
|
||||
<p class="mb-1 text-zinc-400">
|
||||
{{ doc.description }}
|
||||
</p>
|
||||
<p class="mb-2 text-zinc-600 dark:text-zinc-400">
|
||||
<p class="mb-2 text-zinc-500">
|
||||
{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
|
||||
</p>
|
||||
<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
|
||||
<IconButton v-for="tag in doc.tags"
|
||||
<IconTag v-for="tag in doc.tags"
|
||||
:name="tag"
|
||||
:iconName='tag'
|
||||
isTag="true" />
|
||||
</div>
|
||||
<ContentRenderer :value="doc" />
|
||||
<ContentRenderer class="text-gray-200" :value="doc" />
|
||||
</ContentDoc>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -5,35 +5,37 @@
|
||||
<div v-for="article in articles"
|
||||
:key="article._path"
|
||||
class="mb-5 px-1.5">
|
||||
<div class="text-white bg-zinc-800 max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
|
||||
<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" />
|
||||
<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-zinc-800 mb-1 pb-1 relative">
|
||||
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 class="text-lg"
|
||||
:to="article._path">
|
||||
{{ article.title }}
|
||||
</nuxt-link>
|
||||
</h3>
|
||||
<p class="text-zinc-600 dark:text-zinc-500">
|
||||
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
|
||||
</p>
|
||||
<p class="text-zinc-400 dark:text-zinc-400">
|
||||
<p class="text-zinc-400">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
<p
|
||||
class="text-zinc-200 max-h-56">
|
||||
<ContentDoc :value="article"
|
||||
<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 mb-2">
|
||||
<IconButton v-for="tag in doc.tags"
|
||||
<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" />
|
||||
<ContentRenderer :value="doc"
|
||||
:excerpt="true" />
|
||||
</ContentDoc>
|
||||
</p>
|
||||
</div>
|
||||
@@ -49,12 +51,8 @@ const { data: articles } = await useAsyncData('posts-list', () => queryContent('
|
||||
.sort({ date: -1, $numeric: true, })
|
||||
.find()
|
||||
);
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
head: {
|
||||
title: 'Juls07'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
useHead({
|
||||
title: 'Juls07',
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<Nav class="absolute z-10" />
|
||||
<header class="w-full h-3/6 sm:h-2/5 md:h-3/5">
|
||||
<div
|
||||
class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full backdrop-blur-md backdrop-saturate-[1.15]">
|
||||
class="p-6 bg-[#12121233] justify-center grid sm:grid-cols-12 gap-5 items-center sm:justify-start w-full h-full blur-background">
|
||||
<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"
|
||||
@@ -35,94 +35,79 @@
|
||||
</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">
|
||||
<IconButton name="Javascript"
|
||||
<IconTag name="Javascript"
|
||||
iconName='logos:javascript' />
|
||||
<IconButton name="Nuxt.js"
|
||||
<IconTag name="Nuxt.js"
|
||||
iconName="logos:nuxt-icon" />
|
||||
<IconButton name="Ruby on rails"
|
||||
<IconTag name="Ruby on rails"
|
||||
iconName="logos:ruby" />
|
||||
<IconButton name="php"
|
||||
<IconTag name="php"
|
||||
iconName="logos:laravel" />
|
||||
<IconButton name="Angular"
|
||||
<IconTag name="Angular"
|
||||
iconName="logos:angular-icon" />
|
||||
<IconButton name="React"
|
||||
<IconTag name="React"
|
||||
iconName="logos:react" />
|
||||
<IconButton name="Bash"
|
||||
<IconTag name="Bash"
|
||||
iconName="logos:bash-icon" />
|
||||
<IconButton name="Tailwindcss"
|
||||
<IconTag name="Tailwindcss"
|
||||
iconName="logos:tailwindcss-icon" />
|
||||
<IconButton name="Rust"
|
||||
<IconTag name="Rust"
|
||||
iconName="logos:rust" />
|
||||
<IconButton name="Node.js"
|
||||
<IconTag name="Node.js"
|
||||
iconName="logos:nodejs-icon" />
|
||||
<IconButton name="Svelte"
|
||||
<IconTag name="Svelte"
|
||||
iconName="logos:svelte-icon" />
|
||||
<IconButton name="Supabase"
|
||||
<IconTag name="Supabase"
|
||||
iconName="logos:supabase-icon" />
|
||||
<IconButton name="tRPC"
|
||||
<IconTag name="tRPC"
|
||||
iconName="logos:trpc" />
|
||||
<IconButton name="Python"
|
||||
<IconTag name="Python"
|
||||
iconName="logos:python" />
|
||||
<IconButton name="Deno"
|
||||
<IconTag name="Deno"
|
||||
iconName="logos:deno" />
|
||||
</section>
|
||||
</section>
|
||||
<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-3 col-span-8 grid-cols-12 gap-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"
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]"
|
||||
link1="https://github.com/juls0730/vuefullstack"
|
||||
button1="Github">
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]">
|
||||
this is a small forum project I made to mock my ruby on rails forum I am
|
||||
working on but in vuejs.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="PHP Forum"
|
||||
headerIcon="mdi:language-php"
|
||||
githubLink="https://github.com/juls0730/php-forum"
|
||||
:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]"
|
||||
link1="https://github.com/juls0730/php-forum"
|
||||
button1="Github">
|
||||
:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]">
|
||||
This is my attempt at a forum written in php, its not great but it works.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="Cyansplash.net"
|
||||
headerIcon="mdi:nuxt"
|
||||
githubLink="https://github.com/juls0730/cyansplash.net"
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]"
|
||||
link1="https://github.com/juls0730/cyansplash.net"
|
||||
button1="Github">
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]">
|
||||
This is the old cyansplash.net site, not amazing but taught me a lot about web
|
||||
development.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="Discord bot 'Echo'"
|
||||
<ProjectCard name="Discord.js bot"
|
||||
headerIcon="mdi:robot-excited-outline"
|
||||
githubLink="https://github.com/juls0730/Echo"
|
||||
:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]"
|
||||
link1="https://github.com/juls0730/Echo"
|
||||
button1="Github">
|
||||
This is an old discord bot that taught me about the discord API how to make a
|
||||
bot and led me to learning alot about JavaScript, without Echo I most likely would not be a
|
||||
web
|
||||
developer.
|
||||
: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.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="juls07.dev V1"
|
||||
headerIcon="mdi:nuxt"
|
||||
githubLink="https://github.com/juls0730/juls07.dev"
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]"
|
||||
link1="https://github.com/juls0730/juls07.dev"
|
||||
button1="Github">
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]">
|
||||
This stie is the site you are currently on, this site is just a place to show
|
||||
off my projects and my skills.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="vuefullstack"
|
||||
headerIcon="mdi:vuejs"
|
||||
githubLink="https://github.com/juls0730/vuefullstack"
|
||||
:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }]"
|
||||
link1="https://github.com/juls0730/vuefullstack"
|
||||
button1="Github">
|
||||
:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }, { 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
|
||||
this is a small forum project I made to mock my ruby on rails forum I am
|
||||
working on but in vuejs.
|
||||
</ProjectCard>
|
||||
@@ -130,4 +115,9 @@
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: 'Juls07',
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user