hedi's dream, My Digital Room
As a coding newbie, it took me around a year to officially ru cuo (入厝). It's only a small room, but it's big enough to hold my soul. I mean, it's really exciting.
---
Last summer, I happened to visit elle's homepage , and I noticed the cool cursor party on her page. While emailing with elle, I told her that I wanted to customize my own cursor party. That's literally the start of my journey to build my own space on the internet.
---
The Room#
So, this is how my homepage, my digital room looks like at this moment:
There's a chair to sit on, a table where I can work on my laptop, a bed to lie down and sleep in, and an anywhere door that can teleport me to friends' homepages. (it hasn't been initialized .w.) My teddy is also there living with me. And we love to watch the wassie cursors (you and me!) running around the room!≡≡≡ ᕕ( ᐛ )ᕗ
---
This job was not easy.
But I just started small, step by step.
And I used ai to get the code I needed for my idea, then put most of my effort into programming. (For me, I would like to have a place to sleep first (my room), and then study and learn if possible. : )
Cursor Party#
This is my first time trying to connect a static page to a backend server. I even had no idea why I didn't have to push my edits to github at the beginning... (now I know it just directly ships to partykit server as package.json tells us.)
And thanks to elle's share [1], I also directly use PGP key as the way to verify domain ownership for cursor party chat according to her building experience. By the way, I also luckily learned how to simply create and use custom email ([email protected]) via gmail for free while I tried to verify my domain on elle's cursor chat.
---
In the months after setting up my own cursor party, I practiced drawing pixel art, I made a community tool for a game as my first project which taught me many of the basics of making website. (The projects I made will be listed on the wall of my room.)
And finally I came back to build the blog for my homepage. The key motivation is that I want to share my thoughts in my own way instead of being limited by the framework of platforms.
Obsidian + 11ty => The Blog#
This combo just fulfills my wish of managing my random notes and posts in the same place effortlessly. With 11ty, a folder of source of my blog can simply live under my homepage repo, and then it can output my blog under the /blog folder as I like, which is convenient. It took me some time to arrange the whole structure, so that my custom blog CMS can be flexible, and it was totally worth it.
And of course, I spent more time on designing the look of my blog. I want it to represent me. Besides the teddy "read more" link, I'm most proud of the falling maple leaves. It adds a lil warmth into my blue color base blog and brings some fun with the sweeping function. I directly use the maple leaf emoji to make it. It's just very beautiful and has the best performance since it is Unicode.
If you've seen leaves falling down to this section, it means that you've already been staying here for a while, thanks for your reading. : )
By the way, I'm very satisfied with my own code playground on my blog. Instead of embedding codepen and causing high memory usage, I assemble three ace editors (for html, css and js) and an iframe for previewing, turning them into a codepen-like playground. By doing so, I can safely attach many code showcases in one post but keep it as lightweight as possible.
---
To be honest, I'm not really an internet person even though I stick to my computer for most of my waking hours. Like I said in the letter to my reader, I'm an HSP. I did find that I tend to focus on only a few things at a time. So I really haven't visited many personal website so far because I didn't leave much spare time in my days.
But Luckily again, there are many people who worship the vibe of personal websites and build communities with friendly guides. The Ideas for Your Personal Website article from 32-Bit Cafe is just a good reference for me. After finishing the post I'm writing now, Interacting with Other Websites will be my next step. (I decided to explore and shape my soul into my website first before making like-minded friends, and I mean... it was truly a long journey, haha...◖⚆ᴥ⚆◗)
---
My First 8 Direction Character + Room Builder => The Room#
A personal room means a lot in my life; it protects self-identity and personal boundaries. Even though the environment of my room sometimes makes me uncomfortable, it's just the safe haven of my mind. Therefore, my homepage must be my room.
I definitely need some tool to help me build my digital room. I found this repo and made myself a room builder to get a schema for my isometric room. And I used habbo avatar imaging API to get template for character posing and actions. Even with the template as reference, it still took me days to develop my own style. Still, the good news is that I have my own character template now. :D
I love that my room ends up looking like an interactive watercolor picture book, even though all the images drawn on canvas are actually pixel-perfect. It reminds me of my favorite children's television series, Wibbly Pig. I guess it's the muted tone I choose and the outline of the objects that bring a similar style feeling.
What can make this room special should be the hugging teddy action. it's more complex, non-reusable, so we don't see this kind of action in habbo, I guess. But since my script is only for my room, I can do whatever I want! As for what I can prepare for people who got lost in my room (How??? :o), it's the void room with a wordle floor. No matter if you guess the word or not, you'll be routed to safety after five tries. And I only use simple encoding for the words, just so you know.
---
So this is a quick review of how I built myself a cozy space on the internet. This room is the start of my brand-new internet life. I hope I can experience more exciting moments while building something interesting in the future.