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

updated cards slightly, just need to pull on a remote

Browse Source
This commit is contained in:
Zoe
2022-12-09 15:32:49 -06:00
parent 5d422a15b3
commit 549d2513a5
12 changed files with 892 additions and 1036 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/IconButton.vue Normal file
View File

@@ -0,0 +1,34 @@
<script>
export default {
data() {
return {
tagMap: {
'nuxtjs': 'nuxt-icon',
'nuxt': 'nuxt-icon',
'nuxtjs-3': 'nuxt-icon',
'web-dev': 'web-dev-icon',
'fullstack-development': 'jamstack-icon',
'angular': 'angular-icon',
'nodejs': 'nodejs-icon',
'mongodb': 'mongodb-icon',
'docker': 'docker-icon',
'linux': 'linux-tux',
'bittorrent': 'webtorrent',
'web-server': 'nginx',
'supabase': 'supabase-icon'
},
}
},
props: ['iconName', 'name', 'isTag', 'size']
}
</script>
<template>
<button :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="(isTag) ? 'select-none' : 'select-text'" :style="(size) ? 'font-size: ' + size + 'px;' : ''">
<Icon :size="(size) ? size : '20'"
class="mr-2"
:name="(isTag) ? ('logos:' + (tagMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase())) : iconName" />
{{name}}
</button>
</template>

27
components/ProjectCard.vue Normal file
View File

@@ -0,0 +1,27 @@
<script>
import { LOGICAL_OPERATORS } from '@babel/types';
import { Icon } from '@iconify/vue';
export default {
props: ["name", "body", "icons", "headerIcon"],
}
</script>
<template>
<div class="bg-[#1a191a] border p-6 col-span-1 md:col-span-2 border-zinc-700/70 shadow-md rounded-lg">
<div class="flex" v-if="headerIcon">
<!-- <Icon size="64" :name="logo.name" :iconName="logo.icon" /> -->
<Icon size="64" :iconName="headerIcon.src" :name="headerIcon.name" />
</div>
<h4 class="text-xl md:text-2xl mb-1 font-semibold">{{ name }}</h4>
<p>{{ body }}</p>
<div class="ml-1 my-1.5 flex flex-wrap gap-2"
v-if="icons">
<div v-for="icon in icons">
<IconButton size="16"
:name="icon.name"
:iconName="icon.icon"></IconButton>
</div>
</div>
</div>
</template>

34
components/TagButton.vue
View File

@@ -1,34 +0,0 @@
<script>
export default {
data() {
return {
iconMap: {
'nuxtjs': 'nuxt-icon',
'nuxt': 'nuxt-icon',
'nuxtjs-3': 'nuxt-icon',
'web-dev': 'web-dev-icon',
'fullstack-development': 'jamstack-icon',
'angular': 'angular-icon',
'nodejs': 'nodejs-icon',
'mongodb': 'mongodb-icon',
'docker': 'docker-icon',
'linux': 'linux-tux',
'bittorrent': 'webtorrent',
'web-server': 'nginx',
'supabase': 'supabase-icon'
},
}
},
props: ['iconName', 'name']
}
</script>
<template>
<div :aria-label="name"
class="font-inter select-none 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">
<Icon size="20"
class="mr-2"
:name="('logos:' + (iconMap[iconName.toLowerCase().split(' ').join('-')] || iconName.toLowerCase()))" />
{{ name }}
</div>
</template>

10
components/skillButton.vue
View File

@@ -1,10 +0,0 @@
<script>
export default {
props: ['iconName', 'name']
}
</script>
<template>
<button :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">
<Icon size="20" class="mr-2" :name="iconName" />
{{name}}</button>
</template>

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

@@ -2,7 +2,7 @@
title: Rebuilding my personal website!
description: My experiences with nuxtjs 3 and tRPC
image:
src: '/images/archlinux.png'
src: '/images/website-rebuild-draft-1.avif'
alt: 'Why I chose archlinux'
head:
meta:

2
nuxt.config.ts
View File

@@ -34,8 +34,6 @@ export default defineNuxtConfig({
},
content: {
documentDriven: true,
highlight: {
theme: {
default: 'github-dark'

1722
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,7 +1,7 @@
<template>
<Nav />
<main class="grid grid-cols-12 gap-5 justify-center">
<div class="py-6 !col-start-2 md:!col-start-3 lg:!col-start-4 lg:col-span-6 md:col-span-8 col-span-10">
<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" />
@@ -13,9 +13,10 @@
{{ 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"
<IconButton v-for="tag in doc.tags"
:name="tag"
:iconName='tag' />
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc" />
</ContentDoc>
@@ -23,7 +24,7 @@
</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" />
<!-- <NewsletterSignup class="mb-2" /> -->
© 2022 Juls07 - GPL v3.0 License
</div>
</footer>

7
pages/blog/index.vue
View File

@@ -5,7 +5,7 @@
<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] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
<div class="text-white bg-zinc-800 max-h-[563.25px] h-[563.25px] overflow-hidden rounded-lg border border-neutral-700 shadow-md">
<img v-if="article.image.src"
:src="article.image.src"
class="w-full rounded-tl-lg rounded-tr-lg" />
@@ -28,9 +28,10 @@
: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"
<IconButton v-for="tag in doc.tags"
:name="tag"
:iconName='tag' />
:iconName='tag'
isTag="true" />
</div>
<ContentRenderer :value="doc" :excerpt="true" />
</ContentDoc>

75
pages/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="h-screen text-white">
<Nav class="absolute z-10" />
<header class="w-screen 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
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 alt="juls07 profile picture" src="~/assets/pictues/juls07.png"
<img alt="juls07 profile picture"
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>
@@ -19,54 +20,84 @@
<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 border-[#EB0066] rounded-md w-7/12 min-w-[200px] max-w-xs lg:max-w-sm mb-1" />
<hr
class="border-2 my-1.5 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-4">
Hi there, I'm juls07, I am 14 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://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
href="https://github.com/juls0730">Github</a> and also my <a
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">Skills</h3>
<section class="flex flex-wrap w-full gap-2 justify-start">
<SkillButton name="Javascript"
<IconButton name="Javascript"
iconName='logos:javascript' />
<SkillButton name="Nuxt.js"
<IconButton name="Nuxt.js"
iconName="logos:nuxt-icon" />
<SkillButton name="Ruby on rails"
<IconButton name="Ruby on rails"
iconName="logos:ruby" />
<SkillButton name="php"
<IconButton name="php"
iconName="logos:laravel" />
<SkillButton name="Angular"
<IconButton name="Angular"
iconName="logos:angular-icon" />
<SkillButton name="React"
<IconButton name="React"
iconName="logos:react" />
<SkillButton name="Bash"
<IconButton name="Bash"
iconName="logos:bash-icon" />
<SkillButton name="Tailwindcss"
<IconButton name="Tailwindcss"
iconName="logos:tailwindcss-icon" />
<SkillButton name="Rust"
<IconButton name="Rust"
iconName="logos:rust" />
<SkillButton name="Node.js"
<IconButton name="Node.js"
iconName="logos:nodejs-icon" />
<SkillButton name="Svelte"
<IconButton name="Svelte"
iconName="logos:svelte-icon" />
<SkillButton name="Supabase"
<IconButton name="Supabase"
iconName="logos:supabase-icon" />
<SkillButton name="tRPC"
<IconButton name="tRPC"
iconName="logos:trpc" />
<SkillButton name="Python"
<IconButton name="Python"
iconName="logos:python" />
<SkillButton name="Deno"
<IconButton name="Deno"
iconName="logos:deno" />
</section>
</section>
<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">Projects</h2>
<section class="w-11/12 sm:w-full mx-auto grid sm:grid-cols-2 md:grid-cols-4 gap-3">
<ProjectCard name="PHP Forum"
body="This is my attempt at a forum written in php, its not great but it works."
:icons="[{ 'icon': 'logos:laravel', 'name': 'php' }]"
link1="https://github.com/juls0730/php-forum"
button1="Github" />
<ProjectCard name="Old Cyansplash.net site"
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }]"
body="This is the old cyansplash.net site, not amazing but taught me a lot about web development."
link1="https://github.com/juls0730/cyansplash.net"
button1="Github" />
<ProjectCard name="Discord bot 'Echo'"
:icons="[{ 'icon': 'logos:javascript', 'name': 'Javascript' }]"
body="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."
link1="https://github.com/juls0730/Echo"
button1="Github" />
<ProjectCard name="juls07.dev"
:icons="[{ 'icon': 'logos:nuxt-icon', 'name': 'nuxtjs v2' }, { 'icon': 'logos:tailwindcss-icon', 'name': 'tailwindcss'}]"
body="This stie is the site you are currently on, this site is just a place to show off my projects and my skills."
link1="https://github.com/juls0730/juls07.dev"
button1="Github" />
<ProjectCard name="vuefullstack"
:icons="[{ 'icon': 'logos:vue', 'name': 'vue v3' }]"
body="this is a small forum project I made to mock my ruby on rails forum I am working on but in vuejs."
link1="https://github.com/juls0730/vuefullstack"
button1="Github" />
</section>
</section>
</main>
</div>
</template>

BIN
public/images/website-rebuild-draft-1.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

4
supabase/functions/newsletter/index.ts
View File

@@ -16,10 +16,12 @@ serve(async (req) => {
const supabase = createClient(Deno.env.get('SUPABASE_URL'), Deno.env.get('SUPABASE_ANON_KEY'))
const { email, name } = await req.json()
if (!name || !email || !emailRegex.test(email)) throw new Error(
if (!email || !emailRegex.test(email)) throw new Error(
'Please provide a valid email address or name'
)
const name = email.split('@')[0]
const { data, error } = await supabase
.from('subscribers')
.upsert({ name: name, email: email })