diff --git a/assets/css/main.css b/assets/css/main.css index ac99b39..2583bb7 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -13,7 +13,7 @@ body { } header { - background-image: url(~/assets/pictues/header.avif); + background-image: url(~/assets/pictues/header.min.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; diff --git a/assets/pictues/header.avif b/assets/pictues/header-full.avif similarity index 100% rename from assets/pictues/header.avif rename to assets/pictues/header-full.avif diff --git a/assets/pictues/header.min.jpg b/assets/pictues/header.min.jpg new file mode 100644 index 0000000..b354e59 Binary files /dev/null and b/assets/pictues/header.min.jpg differ diff --git a/components/TagButton.vue b/components/TagButton.vue index 5bff143..73699a4 100644 --- a/components/TagButton.vue +++ b/components/TagButton.vue @@ -14,20 +14,21 @@ export default { 'docker': 'docker-icon', 'linux': 'linux-tux', 'bittorrent': 'webtorrent', - 'web-server': 'nginx' + 'web-server': 'nginx', + 'supabase': 'supabase-icon' }, } }, - props: ['iconName', 'name'] + props: ['iconName', 'name'] } \ No newline at end of file diff --git a/content/blog/how-i-made-my-site-fast.md b/content/blog/how-i-made-my-site-fast.md index 68c1e16..33ce844 100644 --- a/content/blog/how-i-made-my-site-fast.md +++ b/content/blog/how-i-made-my-site-fast.md @@ -1,9 +1,19 @@ --- title: How I made my site fast description: How I made my social media site fast -img: /images/how-i-made-my-site-fast.png -alt: how i made snowball fast -writer: juls07 +image: + src: '/images/how-i-made-my-site-fast.png' + alt: 'How I made my site fast' +head: + meta: + - name: 'keywords' + content: 'web dev, fullstack development, angular, nodejs, redis' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' date: 2022-05-22 tags: - web dev @@ -12,7 +22,7 @@ tags: - nodejs - 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. 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 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] for (let i = 0; i < replies.length; i++) { diff --git a/content/blog/nuxtjs-trpc-fullstack.md b/content/blog/nuxtjs-trpc-fullstack.md index 0f517c5..68c582b 100644 --- a/content/blog/nuxtjs-trpc-fullstack.md +++ b/content/blog/nuxtjs-trpc-fullstack.md @@ -1,9 +1,19 @@ --- title: My nuxtjs + trpc fullstack web app description: My experiences with nuxtjs 3 and tRPC -img: /images/how-i-made-my-site-fast.png -alt: how i made snowball fast -writer: juls07 +image: + src: '/images/archlinux.png' + alt: 'Why I chose archlinux' +head: + meta: + - name: 'keywords' + content: 'web dev, fullstack development, nuxtjs, tRPC, redis' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' date: 2022-09-20 _draft: true tags: @@ -15,60 +25,3 @@ tags: --- 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 - -## JS Code Block - -```js -const a = 5; -``` - -## One liners -`here` `and here` `count` you don't even know what you're asking me to confess - -## Vue Code Block - -```vue - - - -``` - -## Vue Code Block With Line Highlighting - -```svelte - -``` - -```lua {2,6-10} -local name = "juls07" -``` - -## Vue Code Block With Filename - -```vue [pages/[...slug.vue]] - -``` diff --git a/content/blog/portfolio-site-rebuild.md b/content/blog/portfolio-site-rebuild.md new file mode 100644 index 0000000..48e00db --- /dev/null +++ b/content/blog/portfolio-site-rebuild.md @@ -0,0 +1,26 @@ +--- +title: Rebuilding my personal website! +description: My experiences with nuxtjs 3 and tRPC +image: + src: '/images/archlinux.png' + alt: 'Why I chose archlinux' +head: + meta: + - name: 'keywords' + content: 'web dev, fullstack development, nuxtjs, tRPC, redis' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' +date: 2022-09-20 +_draft: false +tags: + - web dev + - fullstack development + - nuxtjs 3 + - 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 diff --git a/content/blog/running-bittorent-webserver.md b/content/blog/running-bittorent-webserver.md index b775593..d97185e 100644 --- a/content/blog/running-bittorent-webserver.md +++ b/content/blog/running-bittorent-webserver.md @@ -1,9 +1,19 @@ --- title: Running a qbittorrent webserver! description: My experience with a qbittorrent webserver -img: /images/qbittorrent-web.png -alt: running bittorrent webserver -writer: juls07 +image: + src: '/images/qbittorrent-web.png' + alt: 'Qbittorrent web server' +head: + meta: + - name: 'keywords' + content: 'linux, bittorrent, docker, web server' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' date: 2022-03-07 tags: - Linux @@ -12,7 +22,7 @@ tags: - Web server --- -Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier. Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them. +Recently, I started running a qbittorrent webserver on my raspberry pi 4B+ using [this docker image](https://hotio.dev/containers/qbittorrent/), It has been quite a journey. First, I started looking for a way to run a qbittorrent in a container, this is how I run all the applications on my raspberry pi and I inevibly asked in the [Arch linux discord server](https://discord.gg/3m6dbPR) and I got a reply from @runsamok on discord and they reccomend the docker image I mentioned earlier. Then I started seeding linux distros (obviously) and I started with a batch of about 7 give or take, Ubuntu 18.04, Ubuntu 20.04, Ubuntu 21.04, Arch Linux (duh), Rocky Linux, and tails linux. I shotly realized that Rocky and tails are baren wastelands when it comes to people wanting to torrent them so I eventually Scrapped them.
So after about 10 or so days I wanted to automatically download Arch linux and ubuntu updates using RSS, the qbittorrent webserver has thought of that so you can easily so so in the RSS tab. However, When downloading the latest Arch Linux version it worked fine but I added an ubuntu feed that I accidentally downloaded the 10 most recent torrents, but I deleted them and moved on. Later down the road I was trying to download the march patch of the Arch Linux torrent but I could not, after a while of wondering why I realized my storage was full, my raspberry pi doesnt have a lot of storage but not a little, it turns out that the torrents I deleted from the Ubuntu RSS were still on the raspberry pi, this isnt the fault of the developers because I didnt check the "delete on disk" button but there was not "not enough space warning" message when I tried to download the Arch Linux torrent.
diff --git a/content/blog/what-ive-been-doing.md b/content/blog/what-ive-been-doing.md index 6b29668..56cf301 100644 --- a/content/blog/what-ive-been-doing.md +++ b/content/blog/what-ive-been-doing.md @@ -1,9 +1,19 @@ --- title: What I've been doing description: Stuff I've been doing recently -img: /images/what-ive-been-doing.png -alt: what ive been doing -writer: juls07 +image: + src: '/images/what-ive-been-doing.png' + alt: "What I've been doing recently" +head: + meta: + - name: 'keywords' + content: 'web dev, fullstack development, angular, nodejs, mongodb' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' date: 2022-05-21 tags: - web dev @@ -13,7 +23,7 @@ tags: - mongodb --- -So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later. This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads. +So I have been working on a social media site I am currently calling snowballsocial, so far I have users, posts, replies, and likes. Expressjs not having HTTP/2 is slightly annoying and I have kind of thought migrating all of my code to hapi but I'm too lazy to migrate all my code right now, especially since I just "asyncified" it, remaking my code rather than making all new code would probably be easier but I'll do that later. This project I again used mongoDB, I fist used mongodb in my [vuefullstack](https://github.com/juls0730/vuefullstack) app, and I loved it, it's much easier for the kind of projects I use than mySQL. Actually targeting a production site rather than just having fun like with my vuefullstack app or my rails-forum, etc. make me worry about alot more thigs like SEO, I tried to add OG tags to the post-show tag just showing post data but it doesnt work because the tags are added after the data loads.
I've gotten a VPS from [linode](linode.com) so I could expose my non-static only page to the internet without exposing my home IP address, making me vulnerable to being doxxed and DDoS attacks. Using nignx I have reverse-proxied my api from port 3001 to 2087, and added ssl certs, and I have used it to server my static site on port 80, I have used nginx before and it's pretty simple to use. Optimizing has been the bain of development so far, making api requests faster, and reducing bundle size, I'm going to focus on api optimizations since its the harder one. My main worry for more than a couple requests is getting posts, since I do a for loop to change userId's to usernames ```js diff --git a/content/blog/why-i-chose-arch.md b/content/blog/why-i-chose-arch.md index 0cbcc73..23a33a7 100644 --- a/content/blog/why-i-chose-arch.md +++ b/content/blog/why-i-chose-arch.md @@ -1,16 +1,26 @@ --- title: Why I chose archlinux description: All of my reasons for choosing archlinux -img: /images/archlinux.png -alt: why I chose arch -writer: juls07 +image: + src: /images/archlinux.png + alt: "Why I chose archlinux" +head: + meta: + - name: 'keywords' + content: 'linux, archlinux' + - name: 'robots' + content: 'index, follow' + - name: 'author' + content: 'juls07' + - name: 'copyright' + content: '© 2022 juls07' date: 2022-03-07 tags: - Linux - archlinux --- -I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me. Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed. +I started using linux about 3 years ago, I started with Pop!_OS but after that I switched to fedora, then Zorin which is still the most beautiful out of the box linux distro I have ever used. After that howerver, I switched to arch and I've been on my misadventure's with arch for about 2 years now. I have a very minimalist approach to linux, trying to save as much space as possible save as much computer power as possible, arch being an extremely minimal install of linux was great for me. Next, being able to customize the install of arch is great, dont like systemd because of the company behind it, try runit or openrc, want btrfs so you can compress your files, go ahead, dont want grub, try systemdboot, etc. It's just the way arch lets you do whatever you want. Then, its the support from the [community discord](https://discord.gg/3m6dbPR) or the [arch wiki](https://wiki.archlinux.org/title/Main_page) if someone has had that problem theres a good chance you can get it fixed.
Overall, I know that arch isnt good for industrial applications since it doesnt scale well, its definitely for enthusiasts who have the time to work on their computer and not for linux novices. I love arch for its simplicity and flexibility and I think you should try it if your used to linux and want something new to play with. Using arch over the years has taught me so much about linux in general and if your a seasoned linux user give it a change, maybe you'll find the same love for it I did all the years ago.
diff --git a/nuxt.config.ts b/nuxt.config.ts index 50d2d0b..50c7f35 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -3,6 +3,19 @@ import { defineNuxtConfig } from 'nuxt/config'; export default defineNuxtConfig({ target: 'static', + app: { + head: { + title: 'Juls07', + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + + // hid is used as unique identifier. Do not use `vmid` for it as it will not work + { hid: 'description', name: 'description', content: 'Juls07 is a fullstack web developer' } + ] + }, + }, + css: ['~/assets/css/main.css'], postcss: { @@ -22,6 +35,7 @@ export default defineNuxtConfig({ content: { documentDriven: true, + highlight: { theme: { default: 'github-dark' diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue index af3fbeb..32606fb 100644 --- a/pages/blog/[...slug].vue +++ b/pages/blog/[...slug].vue @@ -1,9 +1,10 @@ \ No newline at end of file +
+ + © 2022 Juls07 - GPL v3.0 License +
+ + diff --git a/pages/blog/index.vue b/pages/blog/index.vue index f8ce5a6..2bcd7a5 100644 --- a/pages/blog/index.vue +++ b/pages/blog/index.vue @@ -5,12 +5,11 @@
-

{{ article.date }}

-
- + -
+

@@ -23,15 +22,17 @@

{{ article.description }}

-

- +

+

- +

@@ -41,7 +42,7 @@
- - \ No newline at end of file diff --git a/pages/index.vue b/pages/index.vue index e99f45b..fcf76b0 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -6,7 +6,7 @@ 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]">
- juls07 profile picture

Juls07

@@ -21,7 +21,7 @@

About me

- Hi there, I'm juls07, I am 14 years old and I love web development. I first dabbled in web development when I was ten, and here we are today! I mainly use