Super Star

@julia ⚡ has marked personal website as a Super Star! · about 10 hours ago

As a prize for your great work, look out for a bonus prize in the mail :)

Ship #1

I built my personal website in SvelteKit!

This is a remake of my previous site which was made in plain HTML+CSS+JS. I made the switch because I wanted to add additional functionality to my site, such as listing my blog posts by reading my blog’s RSS feed. Components also make development SO much easier since this site uses so much repeating elements (windows, projects, artwork , etc.)

This is my first Sveltekit project, so it was difficult learning the ropes at first. Even so, developing with Sveltekit is a lot more intuitive than Next.js, which I found to be a pain.

This site was very much inspired by sites on neocities and nekoweb! I wanted to make a site that emulated that retro feel while still feeling practical to use!

5 devlogs
24h

Try project → See source code →

Open comments for this post

@pixi on personal website · 1 day ago

5h 21m 5s logged

Finalizing my personal website!

windows are now decorated with an icon and gradient
home page is now completely responsive for mobile screens
made all windows evenly spaced apart
added favicon
spent 2 hrs animating an 88x31 button, and also added a buttons window
added my site to the page webring!

Open comments for this post

@pixi on personal website · 2 days ago

3h 11m 10s logged

Showing featured projects and my latest blog posts on my website’s homepage

New featured projects window
added a system that fetches the rss feed from my blog and uses fast-xml-parser to return data about my latest posts
new blogpost component that displays the blog’s thumbnail, title, description, and date
the gif of me now disappears when window shrinks
the about me page is also now fully responsive with the cool cat changing size and moving to the next line

Open comments for this post

@pixi on personal website · 4 days ago

3h 36m 52s logged

Adding an art page to my personal website

created all of the art data (filename, description, alt desc) in a separate ts object
new artwork component that processes that art data and displays it as a square
the art page is responsive and will change to two columns when shrinked
Whenever an artwork is clicked, it’ll show the art in full, as well as a description.

Open comments for this post

@pixi on personal website · 5 days ago

6h 44m 49s logged

Creating the projects page on my personal website!

I’m starting to see why SvelteKit is so popular, development with it is so fun and intuitive!

My name now moves in a wave and has a rainbow gradient!
created the projects page
There is now a ts file dedicated to importing lists of images from folders. I’m using it to import the icons and the project thumbnails.
New project component for each project! Did my best to make it look elegant and concise. They’re inspired by Nicky Case’s project page

Open comments for this post

@pixi on personal website · 13 days ago

5h 8m 29s logged

Rewriting my old personal website with SvelteKit!

I’m was very happy with my personal website, but because it was written entirely with plain HTML CSS JS, modifying it became tedious. The code was bloated and messy, especially since there were so many repeating parts. I switched to SvelteKit to deal with this, and also because I plan on adding additional functionality to my website!

Progress:

Transcribed all of the old HTML CSS code into reusable Svelte components (the window divs, the sidebar links)
The javascript canvas elements (the fish background and the little idiots that you can drag around) were also turned into Svelte components!
Made a lot of modifications to the old about me page. Not only is it now a route, so the fish background is preserved, but it’s now a lot more stylized and some descriptions were added/changed.