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

add blogs, move pictures to local + much more

Browse Source
This commit is contained in:
Zoe
2022-11-30 23:09:32 -06:00
parent 3b775e1eba
commit 66aa241a43
37 changed files with 4277 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
pages/blog/[...slug].vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<Nav />
<main class="grid grid-cols-12 gap-5 justify-center">
<div 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">
<ContentDoc v-slot="{ doc }">
<img :src="doc.img" class="mb-2" />
<h1 class="text-3xl 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">
{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<div class="flex flex-wrap w-full gap-2 justify-start mb-7">
<tagButton v-for="tag in doc.tags" :name="tag"
:iconName='tag' />
</div>
<ContentRenderer :value="doc" />
</ContentDoc>
</div>
</main>
<footer class="grid grid-cols-12 gap-5 justify-center">
<div class="py-6 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 />
</div>
</footer>
</template>

77
pages/blog/index.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<div>
<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">
<p v-show="false">{{ article.date }}</p>
<div class="text-white rounded-lg border border-neutral-700 bg-zinc-800 shadow-md">
<img v-if="article.img"
:src="article.img"
class="w-full rounded-tl-lg rounded-tr-lg" />
<div class="p-3">
<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">
{{ article.description }}
</p>
<p style="max-height: 224px;"
class="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 text-zinc-200">
<ContentDoc :value="article" :path="article._path" v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start mb-2">
<tagButton v-for="tag in doc.tags"
:name="tag"
:iconName='tag' />
</div>
<ContentRenderer :value="doc" />
</ContentDoc>
</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const { data: articles } = await useAsyncData('posts-list', () => queryContent('/blog')
.where({ _draft: false })
.sort({ date: -1, $numeric: true, })
.find()
);
</script>
<script>
export default {
head: {
title: "Juls07",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ name: "google", content: "notranslate" },
{
hid: "description",
name: "description",
content: "Juls07 is a game developer, web developer and pixel artist.",
},
{ property: "og:type", content: "website" },
{ property: "og:image", content: "/og.png" },
{ property: "og:title", content: "Juls07" },
{ property: "og:description", content: "Juls07's website" },
{ property: "og:url", content: "https://juls07.dev" },
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
},
};
</script>

59
pages/index.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="h-screen text-white">
<header class="w-screen h-3/5 sm:h-2/5 md:h-3/5">
<Nav class="absolute z-10" />
<header class="w-screen 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]">
<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 src="https://avatars.githubusercontent.com/u/62722391"
<img src="~/assets/pictues/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>
@@ -14,30 +15,56 @@
</div>
</div>
</header>
<main
class="grid grid-cols-12 inset-0 bg-grid-slate-900/[0.04] bg-grid-pink-600/[0.05] bg-bottom border-[#2d1544]/5 gap-5 justify-center">
<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="text-rhd md:text-4xl text-3xl mb-1">About me</h2>
<h2 class="md:text-4xl text-3xl mb-1">About me</h2>
<hr class="border-2 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-3">
Hi there, I'm juls07, I am 14 years old and I <span tabindex="1" class="love">love</span> web
<p class="max-w-md sm:max-w-xl md:max-w-3xl lg:max-w-4xl mb-4">
Hi there, I'm juls07, I am 14 years old and I <span tabindex="1"
class="love">love</span> web
development. I first dabbled in web development
when I was ten, and here we are today! I mainly use
<a class="text-rose-500 hover:underline visited:bg-rose-700" href="https://nuxtjs.org">NuxtJs</a> to
<a
href="https://nuxtjs.org">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 class="text-rose-500 hover:underline visited:bg-rose-700"
checkout my <a
href="https://github.com/juls0730">Github</a> and also my <a
class="text-rose-500 hover:underline visited:bg-rose-700"
href="https://twitter.com/julie4055_">Twitter</a>.
</p>
<h3 class="text-rhd text-2xl md:text-3xl mb-1">Skills</h3>
<section class="grid grid-flow-col gap-2 justify-start">
<SkillButton name="javascript" iconSrc='/icons/JavaScript.svg' />
<SkillButton name="Vue.js" iconSrc="/icons/Vue.js.svg" />
<SkillButton name="Ruby on rails" iconSrc="/icons/ruby.svg" />
<SkillButton name="php" iconSrc="/icons/Laravel.svg" />
<h3 class="text-2xl md:text-3xl mb-1">Skills</h3>
<section class="flex flex-wrap w-full gap-2 justify-start">
<SkillButton name="Javascript"
iconName='logos:javascript' />
<SkillButton name="Nuxt.js"
iconName="logos:nuxt-icon" />
<SkillButton name="Ruby on rails"
iconName="logos:ruby" />
<SkillButton name="php"
iconName="logos:laravel" />
<SkillButton name="Angular"
iconName="logos:angular-icon" />
<SkillButton name="React"
iconName="logos:react" />
<SkillButton name="Bash"
iconName="logos:bash-icon" />
<SkillButton name="Tailwindcss"
iconName="logos:tailwindcss-icon" />
<SkillButton name="Rust"
iconName="logos:rust" />
<SkillButton name="Node.js"
iconName="logos:nodejs-icon" />
<SkillButton name="Svelte"
iconName="logos:svelte-icon" />
<SkillButton name="Supabase"
iconName="logos:supabase-icon" />
<SkillButton name="tRPC"
iconName="logos:trpc" />
<SkillButton name="Python"
iconName="logos:python" />
<SkillButton name="Deno"
iconName="logos:deno" />
</section>
</section>
</main>