add TOC add better blog navigation and a new blog post
This commit is contained in:
@@ -1,46 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import { withoutTrailingSlash } from 'ufo'
|
||||
import { useBrowserLocation, useClipboard } from '@vueuse/core';
|
||||
const { copy, copied } = useClipboard();
|
||||
const location = useBrowserLocation()
|
||||
|
||||
let year = new Date().getFullYear();
|
||||
|
||||
let route = useRoute();
|
||||
const { data: doc } = await useAsyncData('blog', () => queryContent(route.path).findOne())
|
||||
if (!doc.value) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Article not found', fatal: true })
|
||||
}
|
||||
|
||||
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => queryContent('/blog')
|
||||
.where({ _extension: 'md' })
|
||||
.only(['title', 'description', '_path'])
|
||||
.sort({ date: 1 })
|
||||
.where({ _draft: false })
|
||||
.findSurround(withoutTrailingSlash(route.path))
|
||||
)
|
||||
|
||||
const activeTocId: Ref<string | null> = ref(null)
|
||||
const nuxtContent = ref(null)
|
||||
|
||||
const updateActiveHeading = () => {
|
||||
const headings = document.querySelectorAll('#main h2[id], #main h3[id]')
|
||||
const windowHeight = window.innerHeight
|
||||
const windowMidpoint = windowHeight / 2
|
||||
|
||||
headings.forEach((heading) => {
|
||||
const headingRect = heading.getBoundingClientRect()
|
||||
const headingBottom = headingRect.bottom
|
||||
|
||||
if (headingBottom <= windowMidpoint) {
|
||||
activeTocId.value = heading.id
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', updateActiveHeading)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', updateActiveHeading)
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: doc.value?.title,
|
||||
description: doc.value?.description,
|
||||
ogTitle: doc.value?.title,
|
||||
ogDescription: doc.value?.description,
|
||||
ogImage: doc.value?.image.src,
|
||||
ogUrl: 'https://juls07.dev',
|
||||
twitterTitle: doc.value?.title,
|
||||
twitterDescription: doc.value?.description,
|
||||
twitterImage: doc.value?.image.src,
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
|
||||
useHead({
|
||||
htmlAttrs: {
|
||||
lang: 'en'
|
||||
},
|
||||
meta: [
|
||||
{
|
||||
name: "copyright",
|
||||
content: "© ${year} juls07"
|
||||
},
|
||||
{
|
||||
name: "robots",
|
||||
content: "index, follow"
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: doc.value?.tags.join(", ")
|
||||
},
|
||||
{
|
||||
name: "author",
|
||||
content: "juls07",
|
||||
}
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'icon',
|
||||
type: 'image/png',
|
||||
href: '/favicon.png'
|
||||
}
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<Nav />
|
||||
<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" class="mb-2 rounded-md drop-shadow" />
|
||||
<h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
|
||||
<p class="mb-1 dark:text-zinc-400 text-zinc-600">
|
||||
{{ doc.description }}
|
||||
</p>
|
||||
<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-3">
|
||||
<IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
|
||||
</div>
|
||||
<main id="main" class="leading-relaxed">
|
||||
<ContentRenderer class="dark:text-gray-200 text-gray-800" :value="doc" />
|
||||
</main>
|
||||
</ContentDoc>
|
||||
</div>
|
||||
</div>
|
||||
<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" /> -->
|
||||
© {{ year }} Juls07 - GPL v3.0 License
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="min-h-screen">
|
||||
<Nav />
|
||||
<div class="grid grid-cols-12 gap-x-5 justify-center pt-6 mb-4 relative">
|
||||
<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">
|
||||
<NuxtImg :src="doc.image.src" class="mb-2 rounded-md drop-shadow w-full" quality="80" />
|
||||
<h1 class="text-3xl dark:text-gray-100 md:text-4xl font-semibold mb-2">{{ doc.title }}</h1>
|
||||
<p class="mb-1 dark:text-zinc-400 text-zinc-600">
|
||||
{{ doc.description }}
|
||||
</p>
|
||||
<p class="mb-2 text-zinc-500">
|
||||
{{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }} |
|
||||
{{ doc.readTime }} minute read
|
||||
</p>
|
||||
<div class="flex flex-wrap w-full gap-2 justify-start mb-3">
|
||||
<IconTag v-for="tag in doc.tags" :name="tag" :iconName='tag' isTag="true" />
|
||||
</div>
|
||||
<hr class="mb-4 border-[#ECE6E7] dark:border-[#232326] border-t" />
|
||||
</div>
|
||||
<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">
|
||||
<ContentRenderer ref="nuxtContent" class="dark:text-gray-200 text-gray-800" :value="doc" />
|
||||
</main>
|
||||
</div>
|
||||
<nav
|
||||
class="lg:ml-2 mb-3 lg:mb-0 col-start-2 md:col-start-3 lg:block lg:col-start-10 lg:col-span-2 md:col-span-8 col-span-10 lg:sticky lg:top-8 h-fit order-2 lg:order-4">
|
||||
<TableOfContents :doc="doc" :activeTocId="activeTocId" />
|
||||
</nav>
|
||||
<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-5">
|
||||
<div class="flex justify-between mt-10">
|
||||
<NuxtLink class="flex items-center text-fuschia hover:underline visited:bg-rose-700" to="/blog">
|
||||
← Back to Blog
|
||||
</NuxtLink>
|
||||
<button class="flex items-center px-2 py-1" @click="copy(location.origin + location.pathname)">
|
||||
<Icon v-if="copied" name="tabler:check" class="mr-1.5" size="20" />
|
||||
<Icon v-else name="tabler:link" class="mr-1.5" size="20" />
|
||||
Copy Link
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="surround">
|
||||
<hr class="my-6 border-[#ECE6E7] dark:border-[#232326] border-t" />
|
||||
<div class="grid gap-8 grid-cols-1 sm:grid-cols-2">
|
||||
<MiniBlogCard v-if="surround[0]" :to="surround[0]._path" :title="surround[0].title"
|
||||
:description="surround[0].description" />
|
||||
<MiniBlogCard class="col-start-2" v-if="surround[1]" :to="surround[1]._path"
|
||||
:title="surround[1].title" :right-align="true" :description="surround[1].description" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer 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 text-center">
|
||||
© {{ year }} Juls07 - GPL v3.0 License
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
br {
|
||||
@apply my-3;
|
||||
display: block;
|
||||
@apply my-3;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#main a {
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,70 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: 'Juls07',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<Nav />
|
||||
<main>
|
||||
<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
|
||||
<ContentQuery path="blog" :only="['image', '_path', 'title', 'description', 'date', 'tags', 'excerpt']"
|
||||
:sort="{
|
||||
date: -1
|
||||
}" :where="{
|
||||
_draft: false
|
||||
}" v-slot="{ data }">
|
||||
<div v-for="article in data" :key="article._path" class="mb-5 px-1.5">
|
||||
<div
|
||||
class="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">
|
||||
<NuxtImg v-if="article.image.src" :src="article.image.src"
|
||||
class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
|
||||
<div
|
||||
class="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">
|
||||
<h3>
|
||||
<nuxt-link tabindex="0" class="text-lg" :to="article._path">
|
||||
{{ article.title }}
|
||||
</nuxt-link>
|
||||
</h3>
|
||||
<p class="dark:text-zinc-400 text-zinc-600">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
<p class="text-zinc-500">
|
||||
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
|
||||
</p>
|
||||
<p class="dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
|
||||
<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>
|
||||
<div class="max-h-full leading-relaxed">
|
||||
<ContentRenderer :value="doc">
|
||||
<ContentRendererMarkdown :value="doc" :excerpt="true" />
|
||||
</ContentRenderer>
|
||||
</div>
|
||||
</ContentDoc>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentQuery>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="min-h-screen">
|
||||
<Nav />
|
||||
<main>
|
||||
<div id="main" class="gap-4 justify-evenly py-2 grid grid-cols-[repeat(auto-fit,_minmax(50px,_450px))]">
|
||||
<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">
|
||||
<div
|
||||
class="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">
|
||||
<NuxtImg v-if="article.image" :src="article.image.src" width="464" densities="1x 2x"
|
||||
quality="80" class="w-full rounded-tl-lg rounded-tr-lg aspect-video" loading="lazy" />
|
||||
<div
|
||||
class="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">
|
||||
<h3>
|
||||
<nuxt-link tabindex="0" class="text-lg" :to="article._path">
|
||||
{{ article.title }}
|
||||
</nuxt-link>
|
||||
</h3>
|
||||
<p class="dark:text-zinc-400 text-zinc-600">
|
||||
{{ article.description }}
|
||||
</p>
|
||||
<p class="text-zinc-500">
|
||||
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }} |
|
||||
{{ article.readTime }} minute read
|
||||
</p>
|
||||
<p class="dark:text-zinc-200 text-zinc-800 max-h-[13.75rem]">
|
||||
<div class="flex flex-wrap w-full gap-2 justify-start my-1">
|
||||
<IconTag v-for="tag in article.tags" :name="tag" :iconName='tag' isTag="true" />
|
||||
</div>
|
||||
<div class="max-h-full leading-relaxed">
|
||||
<ContentRenderer :value="article">
|
||||
<ContentRendererMarkdown :value="article" :excerpt="true" />
|
||||
</ContentRenderer>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentQuery>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.text-fade::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 33.333333%;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 33.333333%;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#main a {
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({
|
||||
title: 'Juls07',
|
||||
})
|
||||
</script>
|
||||
|
||||
325
pages/index.vue
325
pages/index.vue
@@ -1,9 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
let colorMode = useColorMode();
|
||||
let today = new Date();
|
||||
let age = today.getFullYear() - 2008;
|
||||
|
||||
if (new Date(today.getFullYear() + "-07-30") > today) {
|
||||
age--;
|
||||
age--;
|
||||
}
|
||||
|
||||
let tagLine = ref("");
|
||||
@@ -13,182 +14,204 @@ let displayTextArrayIndex = ref(0);
|
||||
let charIndex = ref(0);
|
||||
|
||||
const typeText = () => {
|
||||
if (charIndex.value < displayTextArray[displayTextArrayIndex.value].length) {
|
||||
if (!typeStatus.value) typeStatus.value = true;
|
||||
tagLine.value += displayTextArray[displayTextArrayIndex.value].charAt(
|
||||
charIndex.value
|
||||
);
|
||||
charIndex.value += 1;
|
||||
setTimeout(typeText, 100);
|
||||
} else {
|
||||
typeStatus.value = false;
|
||||
setTimeout(eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
|
||||
}
|
||||
if (charIndex.value < displayTextArray[displayTextArrayIndex.value].length) {
|
||||
if (!typeStatus.value) typeStatus.value = true;
|
||||
tagLine.value += displayTextArray[displayTextArrayIndex.value].charAt(
|
||||
charIndex.value
|
||||
);
|
||||
charIndex.value += 1;
|
||||
setTimeout(typeText, 100);
|
||||
} else {
|
||||
typeStatus.value = false;
|
||||
setTimeout(eraseText, Math.min(Math.floor(Math.random() * 2001), 1750));
|
||||
}
|
||||
}
|
||||
|
||||
const eraseText = () => {
|
||||
if (charIndex.value > 0) {
|
||||
if (!typeStatus.value) typeStatus.value = true;
|
||||
tagLine.value = displayTextArray[displayTextArrayIndex.value].substring(
|
||||
0,
|
||||
charIndex.value - 1
|
||||
);
|
||||
charIndex.value -= 1;
|
||||
setTimeout(eraseText, 50);
|
||||
} else {
|
||||
typeStatus.value = false;
|
||||
displayTextArrayIndex.value += 1;
|
||||
if (displayTextArrayIndex.value >= displayTextArray.length)
|
||||
displayTextArrayIndex.value = 0;
|
||||
setTimeout(typeText, 1100);
|
||||
}
|
||||
if (charIndex.value > 0) {
|
||||
if (!typeStatus.value) typeStatus.value = true;
|
||||
tagLine.value = displayTextArray[displayTextArrayIndex.value].substring(
|
||||
0,
|
||||
charIndex.value - 1
|
||||
);
|
||||
charIndex.value -= 1;
|
||||
setTimeout(eraseText, 50);
|
||||
} else {
|
||||
typeStatus.value = false;
|
||||
displayTextArrayIndex.value += 1;
|
||||
if (displayTextArrayIndex.value >= displayTextArray.length)
|
||||
displayTextArrayIndex.value = 0;
|
||||
setTimeout(typeText, 1100);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(typeText, 2200);
|
||||
setTimeout(typeText, 2200);
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'Juls07',
|
||||
title: 'Juls07',
|
||||
})
|
||||
|
||||
type ProjectIcon = {
|
||||
icon: string,
|
||||
name: string,
|
||||
}
|
||||
|
||||
type Project = {
|
||||
headerIcon: string | string[],
|
||||
name: string,
|
||||
githubLink?: string,
|
||||
externalLink?: string,
|
||||
body: string,
|
||||
icons: ProjectIcon[],
|
||||
}
|
||||
|
||||
let projects: Project[] = [
|
||||
{
|
||||
headerIcon: "mdi:language-rust",
|
||||
name: "CappuccinOS",
|
||||
githubLink: "https://github.com/juls0730/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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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",
|
||||
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' }]
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen">
|
||||
<Nav class="absolute z-10 text-white" />
|
||||
<header class="w-full h-[50vh] sm:h-[40vh] md:h-[60vh]">
|
||||
<div
|
||||
class="p-6 bg-[#1212121A] 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" 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 text-white">Juls07</h1>
|
||||
<p class="text-sea-green 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 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>
|
||||
<hr class="border-2 my-1.5 border-fuschia 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-4">
|
||||
Hi there, I'm juls07, I am {{ age }} years old and I <span tabindex="0" 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 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>.
|
||||
</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">
|
||||
<IconTag name="TypeScript" iconName="skill-icons:typescript" />
|
||||
<IconTag name="Nuxt.js" iconName="skill-icons:nuxtjs-dark" />
|
||||
<IconTag name="Vue.js" iconName="skill-icons:vuejs-dark" />
|
||||
<IconTag name="Ruby on rails" iconName="skill-icons:rails" />
|
||||
<IconTag name="php" iconName="skill-icons:php-dark" />
|
||||
<IconTag name="React" iconName="skill-icons:react-dark" />
|
||||
<IconTag name="Bash" iconName="skill-icons:bash-dark" />
|
||||
<IconTag name="Tailwindcss" iconName="skill-icons:tailwindcss-dark" />
|
||||
<IconTag name="Rust" iconName="skill-icons:rust" />
|
||||
<IconTag name="Node.js" iconName="skill-icons:nodejs-dark" />
|
||||
<IconTag name="Svelte" iconName="skill-icons:svelte" />
|
||||
<IconTag name="Figma" iconName="skill-icons:figma-dark" />
|
||||
<IconTag name="Electron" iconName="skill-icons:electron" />
|
||||
<IconTag name="Cypress" iconName="skill-icons:cypress-dark" />
|
||||
<IconTag name="Prisma" iconName="skill-icons:prisma" />
|
||||
<IconTag name="Docker" icon-name="skill-icons:docker" />
|
||||
</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-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="tabler:brand-nuxt"
|
||||
githubLink="https://github.com/juls0730/juls07.dev-v2"
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }]">
|
||||
This is the site you're currently on, a simple but decent looking portfolio and blog site.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="PHP Forum" headerIcon="mdi:language-php"
|
||||
githubLink="https://github.com/juls0730/php-forum"
|
||||
: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="tabler:brand-nuxt"
|
||||
githubLink="https://github.com/juls0730/cyansplash.net"
|
||||
: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.js bot" 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.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="juls07.dev V1" headerIcon="tabler:brand-nuxt"
|
||||
githubLink="https://github.com/juls0730/juls07.dev"
|
||||
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]">
|
||||
This is my original portfolio website, it isn't much and it definitely isn't the best thing I've
|
||||
ever written, but it's something.
|
||||
</ProjectCard>
|
||||
<ProjectCard name="vuefullstack" headerIcon="tabler:brand-vue"
|
||||
githubLink="https://github.com/juls0730/vuefullstack"
|
||||
: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>
|
||||
<ProjectCard name="100DaysOfCode" headerIcon="mdi:nodejs"
|
||||
githubLink="https://github.com/juls0730/vuefullstack"
|
||||
:icons="[{ 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
|
||||
This is my #100DaysOfCode challenge, my challenge was to create my own UI framework thing, check out
|
||||
a
|
||||
<nuxt-link to="/blog/100daysofcode-challenge">large overview of my 100DaysOfCode
|
||||
challenge</nuxt-link> on my
|
||||
blog.
|
||||
</ProjectCard>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<div class="min-h-screen">
|
||||
<Nav class="absolute z-10 text-white" />
|
||||
<header class="w-full h-[50vh] sm:h-[40vh] md:h-[60vh]">
|
||||
<div
|
||||
class="p-6 bg-[#1212121A] 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" 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 text-white">Juls07</h1>
|
||||
<p class="text-sea-green 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 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>
|
||||
<hr class="border-2 my-1.5 border-fuschia 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-4">
|
||||
Hi there, I'm juls07, I am {{ age }} years old and I <span tabindex="0" 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 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>.
|
||||
</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">
|
||||
<IconTag name="TypeScript" iconName="skill-icons:typescript" />
|
||||
<IconTag name="Nuxt.js" :iconName="'skill-icons:nuxtjs-' + $colorMode.value" />
|
||||
<IconTag name="Vue.js" :iconName="'skill-icons:vuejs-' + $colorMode.value" />
|
||||
<IconTag name="Ruby on rails" iconName="skill-icons:rails" />
|
||||
<IconTag name="php" :iconName="'skill-icons:php-' + $colorMode.value" />
|
||||
<IconTag name="React" :iconName="'skill-icons:react-' + $colorMode.value" />
|
||||
<IconTag name="Bash" :iconName="'skill-icons:bash-' + $colorMode.value" />
|
||||
<IconTag name="Tailwindcss" :iconName="'skill-icons:tailwindcss-' + $colorMode.value" />
|
||||
<IconTag name="Rust" iconName="skill-icons:rust" />
|
||||
<IconTag name="Node.js" :iconName="'skill-icons:nodejs-' + $colorMode.value" />
|
||||
<IconTag name="Svelte" iconName="skill-icons:svelte" />
|
||||
<IconTag name="Figma" :iconName="'skill-icons:figma-' + $colorMode.value" />
|
||||
<IconTag name="Electron" iconName="skill-icons:electron" />
|
||||
<IconTag name="Cypress" :iconName="'skill-icons:cypress-' + $colorMode.value" />
|
||||
<IconTag name="Prisma" iconName="skill-icons:prisma" />
|
||||
<IconTag name="Docker" icon-name="skill-icons:docker" />
|
||||
</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-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">
|
||||
<slot>
|
||||
<p v-html="project.body" />
|
||||
</slot>
|
||||
</ProjectCard>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.blur-background {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main a {
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
@apply text-fuschia hover:underline visited:bg-rose-700;
|
||||
}
|
||||
|
||||
.blur-background::before {
|
||||
content: '';
|
||||
margin: -35px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
filter: blur(16px) saturate(125%);
|
||||
content: '';
|
||||
margin: -35px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
filter: blur(16px) saturate(125%);
|
||||
}
|
||||
|
||||
header,
|
||||
.blur-background::before {
|
||||
background-image: url(~/assets/images/header.jpg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-image: url(~/assets/images/header.jpg);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user