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

slight refactors

Browse Source
This commit is contained in:
Zoe
2022-12-14 23:36:34 -06:00
parent 216fd468ce
commit 53fe2087c6
11 changed files with 103 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
assets/css/main.css
View File

@@ -1,4 +1,3 @@
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=Inter&display=swap'); @import url('https://fonts.googleapis.com/css?family=Inter&display=swap');
@@ -10,15 +9,33 @@ html,
body { body {
background-color: #191819; background-color: #191819;
color: white; color: white;
z-index: 0;
} }
header { header,
.blur-background::before {
background-image: url(~/assets/pictues/header.min.jpg); background-image: url(~/assets/pictues/header.min.jpg);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.blur-background {
position: relative;
overflow: hidden;
}
.blur-background::before {
content: '';
margin: -35px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(12px) saturate(115%);
}
a { a {
@apply text-rose-500 hover:underline visited:bg-rose-700; @apply text-rose-500 hover:underline visited:bg-rose-700;
} }
@@ -27,7 +44,10 @@ a {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }
code, kbd, pre, samp { code,
kbd,
pre,
samp {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
} }

9
components/IconButton.vue → components/IconTag.vue
View File

@@ -23,12 +23,13 @@ export default {
} }
</script> </script>
<template> <template>
<button :aria-label="name" <div :aria-label="name"
class="font-inter md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center" class="font-inter md:text-lg w-fit max-h-9 min-w-fit bg-zinc-800 border border-zinc-700/30 py-1 px-2 rounded shadow flex items-center"
:class="(isTag) ? 'select-none' : 'select-text'" :style="(size) ? 'font-size: ' + size + 'px;' : ''"> :class="(isTag) ? 'select-none' : 'select-text'"
:style="(size) ? 'font-size: ' + size + 'px;' : ''">
<Icon :size="(size) ? size : '20'" <Icon :size="(size) ? size : '20'"
class="mr-2" class="mr-2"
:name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" /> :name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" />
{{name}} {{ name }}
</button> </div>
</template> </template>

2
components/Nav.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<nav class="px-2 py-4"> <nav class="px-2 py-4">
<ul class="flex gap-3 font-semibold"> <ul class="flex gap-x-3 font-semibold">
<li><nuxt-link class="text-white" to="/">Home</nuxt-link></li> <li><nuxt-link class="text-white" to="/">Home</nuxt-link></li>
<li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li> <li><nuxt-link class="text-white" to="/blog">Blog</nuxt-link></li>
</ul> </ul>

17
components/ProjectCard.vue
View File

@@ -5,7 +5,8 @@ export default {
</script> </script>
<template> <template>
<div class="bg-[#201F20] border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[494px] border-zinc-700/30 shadow-md rounded-lg"> <div
class="bg-[#201F20] relative border p-6 col-span-12 sm:col-span-10 sm:col-start-2 md:col-start-auto md:col-span-6 xl:!col-span-4 h-[60vw] max-h-[425px] min-h-[375px] border-zinc-700/30 shadow-md rounded-lg">
<div class="flex mb-4 items-center" <div class="flex mb-4 items-center"
v-if="headerIcon"> v-if="headerIcon">
<Icon size="64" <Icon size="64"
@@ -28,16 +29,16 @@ export default {
</div> </div>
</div> </div>
<h4 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h4> <h4 class="text-xl mb-1 capitalize font-jetbrains">{{ name }}</h4>
<div id="body" class="mb-4"> <div id="body"
class="mb-4">
<slot /> <slot />
</div> </div>
<div class="flex flex-wrap gap-2" <div class="flex flex-wrap gap-2 absolute bottom-6"
v-if="icons"> v-if="icons">
<div v-for="icon in icons"> <IconTag v-for="icon in icons"
<IconButton size="16" size="16"
:name="icon.name" :name="icon.name"
:iconName="icon.icon"></IconButton> :iconName="icon.icon"></IconTag>
</div>
</div> </div>
</div> </div>
</template> </template>

2
components/content/ProseCode.vue
View File

@@ -25,7 +25,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useClipboard } from '@vueuse/core'; import { useClipboard } from '@vueuse/core';
const { copy, copied, text } = useClipboard(); const { copy, copied } = useClipboard();
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
code?: string; code?: string;

2
content/blog/how-i-made-my-site-fast.md
View File

@@ -22,7 +22,7 @@ tags:
- nodejs - nodejs
- redis - redis
--- ---
So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory.<!--more--> I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this. So yesterday I talked about my social media site that I'm working on. Today I implemented redis, a memory store that I used to reduce requests at most by 48ms. First when I tried to use redis I just used the `redis` package off of npmjs because it only makes sense but when I tried to get a key with the name of `user-cache-[userId]` It failed for some reason, I still dont know why it failed but using the `ioredis` package and<!--more--> everything started working, not user data processing, what I used redis to cache since it's a terrible for loop that executes database requests for every post, but now it's all stored in memory. I still want to add TTL since my VPS that I intend on deploying my site on for production only has 1GB of RAM but I'm not sure how to do that. If you saw my blog post from [yesterday](/blog/what-ive-been-doing) then you'll know what my user code used to look like, now it looks like this.
```js[post.js] ```js[post.js]
for (let i = 0; i < replies.length; i++) { for (let i = 0; i < replies.length; i++) {

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

@@ -2,8 +2,8 @@
title: Rebuilding my personal website! title: Rebuilding my personal website!
description: My experiences with nuxtjs 3 and tRPC description: My experiences with nuxtjs 3 and tRPC
image: image:
src: '/images/website-rebuild-draft-1.avif' src: 'https://via.placeholder.com/1920x1080.png?text=placeholder'
alt: 'Why I chose archlinux' alt: 'placeholder'
head: head:
meta: meta:
- name: 'keywords' - name: 'keywords'
@@ -18,9 +18,8 @@ date: 2022-09-20
_draft: false _draft: false
tags: tags:
- web dev - web dev
- fullstack development
- nuxtjs 3 - nuxtjs 3
- supabase - supabase
--- ---
Recently I've been working with nuxtjs 3 and tTRPC. I've heard a lot of things about nuxtjs 3 and tRPC lately, mostly bad with nuxtjs 3 and mostly good with trpc. These are not technoligies I've been interested in working with for a while For the past month I've been quietly rebuilding my portfolio site, designing and building a new site. My previous site was bland and dull, this one is like a whole new world. The old site was just a two colors that don't even go well together, it was clear to me that was no way to present myself. So about halfway though november I started fresh, with Nuxt3 and a whole lot of insomnia in my possession I went to figma to design my new site. <!--more--> After a couple days of making a design in figma I setup a new nuxt3 project and

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

@@ -5,20 +5,20 @@
<ContentDoc v-slot="{ doc }"> <ContentDoc v-slot="{ doc }">
<img :src="doc.image.src" <img :src="doc.image.src"
class="mb-2" /> 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"> <p class="mb-1 text-zinc-400">
{{ doc.description }} {{ doc.description }}
</p> </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(' ') }} {{ new Date(doc.date).toDateString().split(' ').slice(1).join(' ') }}
</p> </p>
<div class="flex flex-wrap w-full gap-2 justify-start mb-7"> <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" :name="tag"
:iconName='tag' :iconName='tag'
isTag="true" /> isTag="true" />
</div> </div>
<ContentRenderer :value="doc" /> <ContentRenderer class="text-gray-200" :value="doc" />
</ContentDoc> </ContentDoc>
</div> </div>
</main> </main>

40
pages/blog/index.vue
View File

@@ -5,35 +5,37 @@
<div v-for="article in articles" <div v-for="article in articles"
:key="article._path" :key="article._path"
class="mb-5 px-1.5"> 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" <img v-if="article.image.src"
:src="article.image.src" :src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg" /> 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-zinc-800 mb-1 pb-1 relative"> <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> <h3>
<nuxt-link class="text-lg" <nuxt-link class="text-lg"
:to="article._path"> :to="article._path">
{{ article.title }} {{ article.title }}
</nuxt-link> </nuxt-link>
</h3> </h3>
<p class="text-zinc-600 dark:text-zinc-500"> <p class="text-zinc-400">
{{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
</p>
<p class="text-zinc-400 dark:text-zinc-400">
{{ article.description }} {{ article.description }}
</p> </p>
<p <p class="text-zinc-500">
class="text-zinc-200 max-h-56"> {{ new Date(article.date).toDateString().split(' ').slice(1).join(' ') }}
<ContentDoc :value="article" </p>
<p class="text-zinc-200 max-h-56">
<ContentDoc :head="false" :value="article"
:path="article._path" :path="article._path"
v-slot="{ doc }"> v-slot="{ doc }">
<div class="flex flex-wrap w-full gap-2 justify-start mb-2"> <div class="flex flex-wrap w-full gap-2 justify-start my-1">
<IconButton v-for="tag in doc.tags" <IconTag v-for="tag in doc.tags"
:name="tag" :name="tag"
:iconName='tag' :iconName='tag'
isTag="true" /> isTag="true" />
</div> </div>
<ContentRenderer :value="doc" :excerpt="true" /> <ContentRenderer :value="doc"
:excerpt="true" />
</ContentDoc> </ContentDoc>
</p> </p>
</div> </div>
@@ -49,12 +51,8 @@ const { data: articles } = await useAsyncData('posts-list', () => queryContent('
.sort({ date: -1, $numeric: true, }) .sort({ date: -1, $numeric: true, })
.find() .find()
); );
</script>
<script lang="ts"> useHead({
export default { title: 'Juls07',
head: { })
title: 'Juls07' </script>
}
}
</script>

72
pages/index.vue
View File

@@ -3,7 +3,7 @@
<Nav class="absolute z-10" /> <Nav class="absolute z-10" />
<header class="w-full h-3/6 sm:h-2/5 md:h-3/5"> <header class="w-full h-3/6 sm:h-2/5 md:h-3/5">
<div <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 <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"> 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" <img alt="juls07 profile picture"
@@ -35,94 +35,79 @@
</p> </p>
<h3 class="text-2xl md:text-3xl mb-1.5 ml-0.5">Skills</h3> <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"> <section class="flex flex-wrap w-full gap-2 justify-start ml-1">
<IconButton name="Javascript" <IconTag name="Javascript"
iconName='logos:javascript' /> iconName='logos:javascript' />
<IconButton name="Nuxt.js" <IconTag name="Nuxt.js"
iconName="logos:nuxt-icon" /> iconName="logos:nuxt-icon" />
<IconButton name="Ruby on rails" <IconTag name="Ruby on rails"
iconName="logos:ruby" /> iconName="logos:ruby" />
<IconButton name="php" <IconTag name="php"
iconName="logos:laravel" /> iconName="logos:laravel" />
<IconButton name="Angular" <IconTag name="Angular"
iconName="logos:angular-icon" /> iconName="logos:angular-icon" />
<IconButton name="React" <IconTag name="React"
iconName="logos:react" /> iconName="logos:react" />
<IconButton name="Bash" <IconTag name="Bash"
iconName="logos:bash-icon" /> iconName="logos:bash-icon" />
<IconButton name="Tailwindcss" <IconTag name="Tailwindcss"
iconName="logos:tailwindcss-icon" /> iconName="logos:tailwindcss-icon" />
<IconButton name="Rust" <IconTag name="Rust"
iconName="logos:rust" /> iconName="logos:rust" />
<IconButton name="Node.js" <IconTag name="Node.js"
iconName="logos:nodejs-icon" /> iconName="logos:nodejs-icon" />
<IconButton name="Svelte" <IconTag name="Svelte"
iconName="logos:svelte-icon" /> iconName="logos:svelte-icon" />
<IconButton name="Supabase" <IconTag name="Supabase"
iconName="logos:supabase-icon" /> iconName="logos:supabase-icon" />
<IconButton name="tRPC" <IconTag name="tRPC"
iconName="logos:trpc" /> iconName="logos:trpc" />
<IconButton name="Python" <IconTag name="Python"
iconName="logos:python" /> iconName="logos:python" />
<IconButton name="Deno" <IconTag name="Deno"
iconName="logos:deno" /> iconName="logos:deno" />
</section> </section>
</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"> <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> <h2 class="md:text-4xl text-3xl mb-1">Projects</h2>
</div> </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" <ProjectCard name="Juls07.dev V2"
headerIcon="mdi:nuxt" headerIcon="mdi:nuxt"
githubLink="https://github.com/juls0730/vuefullstack" githubLink="https://github.com/juls0730/vuefullstack"
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]" :icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v3' }, { 'icon': 'logos:supabase-icon', 'name': 'supabase' }]">
link1="https://github.com/juls0730/vuefullstack"
button1="Github">
this is a small forum project I made to mock my ruby on rails forum I am this is a small forum project I made to mock my ruby on rails forum I am
working on but in vuejs. working on but in vuejs.
</ProjectCard> </ProjectCard>
<ProjectCard name="PHP Forum" <ProjectCard name="PHP Forum"
headerIcon="mdi:language-php" headerIcon="mdi:language-php"
githubLink="https://github.com/juls0730/php-forum" githubLink="https://github.com/juls0730/php-forum"
:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]" :icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]">
link1="https://github.com/juls0730/php-forum"
button1="Github">
This is my attempt at a forum written in php, its not great but it works. This is my attempt at a forum written in php, its not great but it works.
</ProjectCard> </ProjectCard>
<ProjectCard name="Cyansplash.net" <ProjectCard name="Cyansplash.net"
headerIcon="mdi:nuxt" headerIcon="mdi:nuxt"
githubLink="https://github.com/juls0730/cyansplash.net" githubLink="https://github.com/juls0730/cyansplash.net"
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]" :icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]">
link1="https://github.com/juls0730/cyansplash.net"
button1="Github">
This is the old cyansplash.net site, not amazing but taught me a lot about web This is the old cyansplash.net site, not amazing but taught me a lot about web
development. development.
</ProjectCard> </ProjectCard>
<ProjectCard name="Discord bot 'Echo'" <ProjectCard name="Discord.js bot"
headerIcon="mdi:robot-excited-outline" headerIcon="mdi:robot-excited-outline"
githubLink="https://github.com/juls0730/Echo" githubLink="https://github.com/juls0730/Echo"
:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]" :icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]">
link1="https://github.com/juls0730/Echo" This is one of the first projects that wasn't just a dinky website, this project brought me to where I am today.
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.
</ProjectCard> </ProjectCard>
<ProjectCard name="juls07.dev V1" <ProjectCard name="juls07.dev V1"
headerIcon="mdi:nuxt" headerIcon="mdi:nuxt"
githubLink="https://github.com/juls0730/juls07.dev" githubLink="https://github.com/juls0730/juls07.dev"
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]" :icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss' }]">
link1="https://github.com/juls0730/juls07.dev"
button1="Github">
This stie is the site you are currently on, this site is just a place to show This stie is the site you are currently on, this site is just a place to show
off my projects and my skills. off my projects and my skills.
</ProjectCard> </ProjectCard>
<ProjectCard name="vuefullstack" <ProjectCard name="vuefullstack"
headerIcon="mdi:vuejs" headerIcon="mdi:vuejs"
githubLink="https://github.com/juls0730/vuefullstack" githubLink="https://github.com/juls0730/vuefullstack"
:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }]" :icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }, { 'icon': 'logos:nodejs-icon', 'name': 'nodejs' }]">
link1="https://github.com/juls0730/vuefullstack"
button1="Github">
this is a small forum project I made to mock my ruby on rails forum I am this is a small forum project I made to mock my ruby on rails forum I am
working on but in vuejs. working on but in vuejs.
</ProjectCard> </ProjectCard>
@@ -130,4 +115,9 @@
</main> </main>
</div> </div>
</template> </template>
<script setup lang="ts">
useHead({
title: 'Juls07',
})
</script>

7
tailwind.config.js
View File

@@ -10,7 +10,12 @@ module.exports = {
"./app.vue", "./app.vue",
], ],
theme: { theme: {
extend: {}, extend: {
screens: {
'xs': '512px',
'3xl': '1792px'
}
},
}, },
plugins: [], plugins: [],
} }