Intro
I've never made a personal website before. If I was ever going to do it, I would do it now, during summer break. I've done plenty of webdev over the past two years or so, and I think I know just about enough to make the best personal website I could make.
A month and a half ago, I sat down and listed all the ideas I wanted to do for my personal website.
Most importantly:
- Must be my own design. No templates, no AI, must be my work. I should be able to enjoy the process as well. The website must be personal, and I must enjoy spending time there.
- Draw inspiration from Neocities. The retro style with hand-drawn art is exactly the style I'm going for.
- Make it based upon my real life a bit. Like, use my real room for example, but change some stuff.
- Some things that would appear in my room: a plant, my desk setup, a cat similar to the one in my pfp, and more.
- This is kinda supposed to be like a portfolio. Fit in a bio somewhere, and maybe some links to a blog and whatnot.
Looking back, I'm quite surprised at just how terrible the earliest drawings were, and how easily I managed to make the later ones. Such is the importance of learning new skills. It's fun and also very rewarding!
Alright, the final finished website is on https://orangishcat.github.io. Next are all my devlogs, fully unedited. I highly recommend giving them a read, it feels like I became a totally different person after the project.
2026-6-3
I have no idea how to draw, and this is my first time. I've procrastinated for about a week already because I know this is going to be hard. And I'm also starting with the hardest thing to draw: the cat.
I started off with a 256x256 canvas, then realized that was too difficult for me to handle given my nonexistent skill. I then downscaled to 128x128, then to 64x64.
Long story short, I fiddled around a long time with no clear results. But I have learned a few things:
- Drawing actual lines is too hard. I'm going with pixel art.
- Krita is actually a really nice piece of software. 10/10 would recommend. And it's FOSS too!
- I'm gonna have to use reference images pretty heavily.
- I'm pretty terrible at this. Hopefully things will improve...
- I'm glad I went with pixel art. How am I meant to draw the eyes? That would be an absolute nightmare if I didn't choose pixel art. I know literally nothing about drawing.
Revision #7
Revision #8 Added spots
Revision #15 adjusted the head position a bit to make it look better
Revision #16: Adjusted the face and the shape of the body
Total time spent today: 4 hours?
(these are all estimations as I'm not really time tracking for art)
2026-6-4
Any artist looking at this is probably losing brain cells right now.
By the way, I make a new revision every time I make a potentially breaking change that I might want to revert. So Day 1 consisted of a lot of experimenting. Hopefully things will stabilize now...
Revision #17: Adjusted the face, moved the head like 10 times so that the position made more sense.
Revision #18: Added whiskers, adjusted the spot pattern and added some white for the belly
Total time: roughly 2 hours
2026-6-5
I had an interview for a robotics competition. I had plenty of time to draw, but my brain refused to stop thinking about the interview so I just didn't.
I set up the Astro template for my website though.
The robotics interview went pretty well. Yay!
Total time: 14 minutes
2026-6-6
Maybe I should have googled "cat proportions" or something before this. The drawing has started to make sense, but it's clear the proportions are off.
I've run out of ways to adjust the cat for the most part. But a lot of things are still glaringly wrong. I tried to make it look cartoonish to play off all the issues, but they're still making my drawing look a lot worse than it could be.
Some issues:
- The head is too big.
- It looks as if the cat has no neck.
- The face expression is supposed to be minimal and cartoonish, but it still looks kinda bad.
- The tail is disproportionately thick.
- The legs are too thick.
- I dunno how else to describe it, but cats are extremely long. The body in the drawing is definitely not long enough, and too thick.
- I found a good reference image to compare my original drawing with, and it becomes pretty obvious what I'm talking about.
Source (Alvesgaspar on Wikipedia)
Revision 1
New drawing time!
I'm not quite satisfied with the cat design, so I'm redoing it. I'm gonna draw it in a sleeping pose so I don't have to draw sprites for like walking animations and stuff.
Nevermind, this is taking way too long. Let's just copy the original design and modify the shape.
In editor screenshot 'cause why not
My reference images:
3D Cat Billboard in Shinjuku, Tokyo (from a video I took while I was there in the summer of 2024)
Oliver_Johnson on Shutterstock
Revision 2: made the head smaller
I did it again, the head was too big. So I fixed it.
Revision 3: Fixed the coloring
I realized that the coloring didn't make sense. You would usually see stripes like these on an orange cat, not a calico.
Also I got distracted and read a post on calico cats. Basically calicos have three colors in their fur, are 25-75% white, and from what I can tell, their fur colors are mixed pretty evenly. So that means redoing the coloring.
This is pretty good. I could probably adjust the color a bit more by adding some blending between the fur colors and whatnot, but this is pretty much done. The size of the spots are a bit too similar, but I don't have a good fix for this so I'll just leave it as is.
Total time: 2 hours
2026-6-7
Ok moving on. Let's draw a plant to put on my table.
Nah, not the right vibe.
This plant is apparently called a dumb cane, and is a beginner friendly indoor plant.
Ok, that's better.
With some color
added the leaf veins
Final result
Pretty good. I could add some horizontal veins and improve the coloring a little bit, but I'm getting tired. For now, this is done.
Total time: 2 hours
2026-6-8
Drew this.
I needed to make the screen a slightly bit more interesting, so I added a splotch of gray and then aggressively blended it with the Blender blur brush. Now the screen looks like it's been smudged with fingerprints. The AVIF image compression kinda ruined the effect a bit, but that's fine. The effect still works out pretty nicely.
For improvements, I definitely need a bright accent color and incorporate it into the drawing somehow. This is good for now.
Fortunately, the cat seemed to be by far the hardest thing to draw. Hopefully that means smooth sailing from here?
Total time: 1 hr 15 mins
2026-6-9
Used the same technique to brighten the frame of the keyboard. I'm too lazy to figure out to draw a bright spot on the screen so whatever, leaving it as is.
I also stared at a blank screen for 20 minutes trying to figure out the layout of the website.
The biggest challenge was definitely how to fit all the content I wanted to, such as updates, bio, and blog, while leaving space to view the art and assets I had spent a long time making.
Plus, since this is based off of a front-view of my room, it would be very challenging to create a scrollable section in the website. Like what would happen if you scrolled an image downwards?
I'm tempted to use the computer screen as a scrollable section, but I had already decided that the computer would be purely cosmetic.
Total time: 45 minutes.
2026-6-10
Yeah so progress started to slow down...
June 10: I spent 20 minutes and couldn't think of anything.
June 11-15: I was busy preparing for and attending robotics competition, and had no time at all to work on this.
June 16-July 7: Traveling. Although I had time, I didn't feel like it and wanted to enjoy the vacation.
2026-7-3
Finally I've done enough work to the point where I can at least make some sort of devlog from it.
It totally hasn't been 3 weeks since the last devlog...
Layout would look like this:
I still need to draw a banner to place on the top, fix up the clock, and replace the table lamp with a hand drawn version instead of a downscaled version of a random image from Amazon.
Not sure what to do with the window, either.
I will definitely be using a grid view (similar to Supabase's landing page) where there will be my about me, projects, blog, etc. taking up each panel. I might make it appear immediately after the user scrolls down on the webpage, or I might make it replace the window. I'm leaning towards the latter option, as otherwise I'd have to draw something for the window, which would be super annoying.
Annoyingly, I pretty much abandoned my original idea for the layout, where you hover over items to reveal panels such as the about me, but that doesn't really fit a personal site very well. For most personal sites, all you need to do in terms of interaction is read and scroll down on the page, and all the important information should be present in front of you.
I also drew the title banner (won't be including the background pattern in the actual site, I'll make something else for it). My reference for this was neon lights, as I had the idea of a glowing neon banner at the top of the page. However, I didn't really execute the neon effect that well, as if you imagine each letter as a neon light tube, they would be too thick. The glow effect also kinda sucks, because I was lazy and just used Krita's fill tool with some feathering. It recreates light scattering decently, but it's not the greatest.
Also, the text would've looked much better in lowercase. Didn't think that one through.
Total time: 4 hours (since the last devlog)
2026-7-4
Did the clock. It's a very rough drawing, but it gets the job done.
This is an exported image of the table as of right now. I need to replace the desk lamp, but it's getting pretty close to completion.
Updated layout: (not drawing the window that will take forever)
the main content and bookshelf won't overlap in the actual site
I started coding a bit, and it seems like taking up so much vertical space just doesn't make sense. The layout might need to change again.
Total time: 3 hours
yeah, this project is starting to take too long.
2026-7-6
Stuff is happening. The page layout is already different as the desk setup is part of the main content rather than scrolling. Now I need to decide if I want to change the bookshelf on the left and screen on the right as was originally planned in the layout.
Total time: 2 hours
2026-7-7
I changed the layout again. Hopefully this time will be the last.
Also improved the styling of the homepage.
Remaining tasks for the website:
- Add more content to main page
- Add Projects page
- Set up the blog
- Figure out how to use remaining assets
- Make the clock display the user's time
- Add custom icons for entries in the links and socials sections
- Bookshelf asset + move devlogs there
- Add something as the background (e.g. rain, moon, stars)
- Polish all assets That is still a lot of tasks... but the layout and design (which is what I struggled with the most, basically stalling the project for like 2.5 weeks) seems to be fully done, now only the implementation remains.
Total time: 2 hours?
2026-7-9
I'm in a summer program now. I'm actually writing this devlog and all the ones until July 14 on July 14, since I've been doing work occasionally in the background without logging it. I've spent my remaining free time working on this project, here's what I've been up to (according to my commits).
Created a separate component for the links on the right sidebar, and adding it to the About me page.
Also moved the cat into the links component, as I've decided I want it there all the time.
The text is currently the same as the index page, I'll figure out something new to write later.
Total time: 30 minutes
2026-7-10
Set up the blog. I'm gonna debug it further when I get an actual blog post in.
I also added a robots.txt that allows search engines to crawl my entire site if they wanted to.
Total time: 30 minutes
2026-7-11
Finished the content in the homepage!
And yay, I used the computer for what I intended it to be used for: displaying stuff on the screen!
The video is intentionally very low resolution, it fits the pixelated aesthetic of the site. Right now it's just my top play in osu!, but I want to put bird videos, cat videos, memes, etc.
And I also changed out the about me too, so it doesn't repeat information on the homepage.
Total time: 2 hours
2026-7-12
Animated the clock.
Since I didn't have any resolution for the am text, I actually tripled the resolution of the image. But it still fits in surprisingly well.
And I animated the cat too!
I learned a lot about how to use Krita's animation features.
The animation is just a linear fade-in-out animation for each of the three z's, where there is one for each layer and offset for each layer.
And the clock is even simpler, it's just two frames, one with dots, one without.
One caveat was that GIF images don't support partial transparency. I was too lazy to figure out how to do a color transition instead of an opacity transition (I'd have to transition the color of the Z to the background color of the website). So instead I converted all my animated images to APNG.
Then I got GitHub Pages deployment working.
I found out that instead of using the base img HTML tag, I had to use Astro's Image component, otherwise all the assets in /src/assets would not be included in the built output.
Instead of fixing it properly, I just dumped all my assets into public/, changed the paths, and called it a day.
Total time: 4 hours
2026-7-13
Projects page!
Projects list! (in the homepage)
Devlog book!
This one was fun to draw. I used the book on https://kuroi.neocities.org/ as a reference on how to draw a book, then I drew my own.
It turned out surprisingly well! I went for the look of a non-spiral notebook, but I think it fits better.
I also learned how to use a transparency mask in Krita to create the beam of light, and how to animate a transform mask.
Total time: 4 hours
2026-7-14
Everything was completed, except for the blog post.
Then I spent like an hour fixing the blog. First it was fixing the content collection to load it from the blog site properly, then it was passing the table of contents to the blog's layout component so that it could render a post's table of contents.
I also made a favicon for the site, it's very basic.
I can't believe everything is done.
Total time: 3 hour
2026-7-15
The site is fully up and functional, and could be considered done. Some few remaining tasks:
- Background image. This one is important as not having one bugs me a lot.
- More animations on the images. Like do one for the plant and definitely the banner.
- Separate background image for the blog.
Ok I'm making a background image.
I was wondering why I couldn't erase this, turns out it was a reference image I somehow pasted in.
Background. btw, the little dipper is on the top left!
Stars only; just an upside-down image of the background with the moon removed and the stars scattered a bit.
Now I could do a grass overlay on the rest of the images, but maybe later. The project is fully done now! Everything works amazingly, and I could not be more satisfied with the outcome.
Total time: 4 hours
Final thoughts
The website is done. Fully done. There are improvements that could be made, but everything is functional and looks great. As with most projects, I will have to leave some stuff for the future to complete, as I need to be done with this project and move on.
Originally, this website was supposed to take 2 weeks max, but it instead took a month and a half and 30+ hours.
Remaining tasks for the future (in order):
- ANIMATE THE STARS
- "ground" background image to place at end of page (e.g. grass, stardew valley, or drawing of a street with houses)
- Animate more assets (most importantly the banner and plant)
- Add a music player
- Add more easter eggs to the computer screen
Alright, let's summarize what I've learned.
- Pixel art! I gained so much experience with using reference images and different techniques to achieve my desired drawing. Definitely my biggest gain from the entire project, I had no idea I would improve this much.
- Krita! One of the best art programs out there (if not the best), yet 100% free and open source!
- Astro! Friendship ended with SvelteKit, Astro is now my new favorite web framework. Its built-in routing and
mdxsupport is amazing. - Writing blog posts! Like this one! The only time I've ever documented my progress was after I had finished my project. Bad idea. These devlogs literally showcase an entire character arc.
- Finishing projects! I have a slightly better idea on how to manage my time and finish a project, hopefully the next project won't take any more than 2x longer than expected.
These final thoughts probably don't do my learnings justice. But I really need to wrap up the project, so I will be ending it here.
The end!
Reflection (1 month later)
It's been nearly a month since the site was finished, and honestly, it feels like a weight off my chest.
I've gotten so used to having a bunch of half-finished projects that having a completed one feels incredibly unusual.
Unlike my other projects, this site does not need any maintainence. If I edit the site, I'm almost always adding new content
or writing a new blog post.
Practically, having a personal website is highly useful. It's a centralized place where my projects and activities reside, and a good marketing tool as well. I can drop a link to my site if anyone wants to know more about me, and I don't have to individually tell other people what I've been up to.
Besides, blog hosting (e.g. Medium) feels very predatory these days. Large companies essentially have full access to your work, and who knows what they will do with it. Their site experience is often terrible, with ads, trackers, and paywalls throughout the page, and it's not something I want to be associated with. As for something this personal, I needed to feel like I had true ownership of my work, and I also wanted to have the ability to customize the webpage surrounding my blog posts.
Joining Neocities
This site is dual hosted on https://orangishcat.github.io and https://orangishcat.neocities.org.
I usually use Neocities as it gives me a view counter, and number go up make me happy.
More importantly though, it's a great community. Neocities was one of the biggest inspirations for my site, and I'm honored that I can and am allowed to contribute something to the platform. I'm glad to know that out there, creative people making cool things still exist.
I might consider joining a webring someday.
I'm also, like, probably the only person to use Tailwind CSS on the entire platform.
Site changes
I updated my socials and my games list. There are, as it turns out, lots of cool games out there.
I also made my first Rust project, so I will be adding that to my projects list too.
Conclusion
I'm pretty proud of this website. I've never really made something so personal before. I partially wish I had done it earlier, but I'm also glad that doing it this late means I had enough webdev and art experience to execute it well.
Thank you so much for reading.
Top comments (0)