Recently, I came across the IndieWeb movement after hopping through rabbit-holes on the internet and thought ‘neat!’. It was exactly what I was looking for!

A way to feel connected to people and share my own creations.

I’m still starting out at coding but seeing IndieWeb Standards like webmentions fired up that 10-year old inside me who loved reading through random how-to guides and videos to learn and create things that are uniquely mine.

And so, while I put off re-designing and re-coding my website for a very long time, I finally did it! For now, I've produce a MVP that allows me to show off my designs and illustrations. I'm still figuring out how to implement webmentions, but I'll get there in due time.

Coding this site has been a really fun journey. I opted to go for 11ty as the framework due to its speedy loading times and great performance. I've also already done some projects with Hugo (my first web project) and React before and wanted to get my hands dirty with something new!

Some difficulties when working with 11ty moving from React was that reusable components are finnicky and a bit hacky to create. I ended up using macros and includes to make something similar to how React components work. The approach was similar to this.

I loved whenever things worked out though, even though a lot of experimentation was needed. You can view the source code for this project here on my Github... and the Figma designs here.

For this website, I used:

• 11ty – static website generation
• Figma – design
• GSAP – javascript animation library
• LightGallery – opensource javascript image lightbox library (free for projects under GPL-3.0 license)
• Netlify – build and deploy
• PyxelEdit – pixel art just for the slime with a wing
• Pixelarticons by Halfmage – open source pixel icon library
• SASS/SCSS – stylesheets