I seem to have a strange habit of perfectionism. In only the third year of having this website up, it's undergone two major rewrites (and now a third!) with each bringing something new to the table

Versions

• v1 - Parsley
• v2 - Cilantro
• v3 - Rosemary

Parsley - A bit of history

Stack: HTML, CSS, JavaScript, jQuery, Heroku

The original design of Parsley manifested three years ago, in the text app of Chrome OS. A teacher gave my class the task of creating a Google Site to organise our classwork. Not wanting to use a website builder, I gave writing it from scratch a half-hearted attempt, falling short of my grandiose visions. I scrapped the idea.

I remember that the main inspiration for Parsley was Stripe's home page. It's evident in the major UI elements, such as the large gradient slice and the navigation bar.

Well, not completely. After not having much motivation to work on a simple classwork listing site but still wanting to make a website, I messed around with some more styling ideas and eventually completely remade the page for a personal website. It wasn't very good, although many people have informed me that it was much better than Cilantro.

Why it's bad

Not only was the codebase terrible to maintain, there was absoultely no consistency besides the navbar and footer. Neumorphism, attempted professionalism, a small card layout with parallax, a barely styled page, and a dark colorscheme were all "features" that were used on a per-page basis, and then never reappeared again.

The final moments of Parsley showcased my attempts to create a monetization system without any backend.

Cilantro - (Re)starting again

Stack: HTML, CSS, JavaScript, Express.js, Heroku

About a year later and losing motivation to maintain a terrible codebase, I decide to rewrite my website. But this time, things were going to be different. For starters, I had learned how to use Node.js, and set up a proper Express.js server. I wrote my own router system for my api, complete with wildcards and hierarchy, a blog system which parsed markdown files and converted them to html, ordered them by date, and even had a cool pagination feature which was never used as I never wrote more than 10 blog posts.

Inspiration

• werewolf.design - Monospace design
• wesbos.com - Blog

The style present in Rosemary (v3) formed here. After learning my lesson on consistency, I was determined to create a something managable and modular that I could work with on a larger scale.

The design of Cilantro was quite forced. I knew a rewrite was necesarry, but I wasn't sure of the direction I wanted to head in. I found a website (werewolf.design) and really dug some aspects of the style, and decided to adapt the style to fit my vision. Work began on the Home Page, as I needed to solidify the theme of my website, and it seemed to work. I created a page template that I used for all of the pages, which streamlined development immensely.

The blog navigation page was inspired by Wes Bos. I wrote my own implementation of the page turning that changed the url and content, which (as stated previously) was never used. The navbar came from a website I visited with the Hacker-Blog Jekyll theme. I specifically remember trying and failing to find an image of the theme, and it ended up inspiring the filesystem-like navigation I used.

Around this time, I was apprenticed by Joder and Varedz, two extremely talented web reverse engineers. Armed with their knowledge, I set out on Joder's vision to create a Blooket cheat. After seeing how broken it was, I knew that it would be a somewhat simple introduction to breaking websites. I've been maintaining the cheat ever since creating the first Blooket cheat, which has since become the flagship feature of my website.

Note the use of the word 'cheat' and not the word 'hack.' To hack is to gain unauthorized access to data in a system, while cheating is when you, well, cheat. A cheat can be made by a hacker via a hack, but that still makes people who use it cheaters, not hackers. I personally don't consider reverse engineering 'hacking.'

The Bad, the Worse, and the Ugly

You know how I started off with the home page? Due to it was the first page I made, it also has old styles not reflected anywhere else, ruining the consistency. It's also very bare, but that fit with the minimalistic feel I had at the time. The templating system and other features I had created worked perfectly, except for that the website used no frameworks of any kind. Everything was plain HTML, CSS, and JavaScript, as was Parsley. But unlike Parsley, the public consensus pointed to the website being too boring and hard to navigate.

Rosemary - Young and hip

Stack: Next.js, React, Sass, MDX, Vercel

Rosemary has a somewhat interesting story. Once or twice a year, I get this incredibly powerful urge to just do some graphic design. For some bizarre reason, it's pretty much the only time I can crank out a good design. I don't know why or how they happen, or how to trigger them on demand (yet), but I was in the mood to remake the home page to solve all of the issues I had with it.

This was the first project I used Figma to fully design. Previously, I had just sat down and written styles and structure at the same time until I stumbled upon a design that worked. I only used Figma on occasions to design the more complex UI of Cilantro, and I can safely say that it improved the experience immensly, and I will 100% work with it in the future.

The idea for the first look people would have came from those amazing singlepage scrolling apps you see on awwwards. I started out designing the home page (shocker) and thought a lot about what people had told me about my previous designs, and after a day or two created this:

I chose to use Next.js with Sass, as I wanted React experience, smoother development, and something new to put on my resume. Then, disaster struck; The look I was going for with Rosemary was a blend of Cilantro's color scheme and font, and glassmorphism. I had the entire home page mocked up and was in the middle of recreating it with code, when I realised that backdrop-filter was way too unreliable to be used in a production grade app, or even portfolio. All of the moving elements caused major tearing issues with the renderer, and Firefox (my browser of choice) didn't even support it without going out of your way to enable it.

Great.

I want back to the drawing board and spent about a week (the urge to design was wearing off) creating a new homepage that wouldn't use the glassmorphism effect. After tweaking the color pallete and adding more images, I started to like the design. Ekmand helped immensly in the design of the showcase section and came up with the original card design. After solidifying the design, I wrote it in Next.js and rewrote other parts of Cilantro.

TLDR: Figma is good and Next.js is just plain awesome.

Near release update

The finish line is drawing close. I've finished most of the website and outlined what I want in release v3.0 and what to delay for v3.1, and want to write a bit about it. I went with the choice of using MDX (think Markdown meets JSX) for blog posts after seeing Josh's amazing blog post about how he built his blog. His recommendation was to use mdx-bundler, an npm package to bundle MDX files and their dependencies to be used as React Components.

I was happily hacking away at integrating it into my setup, and all was going somewhat smoothly, until I hit a massive roadblock; Sass files. Heck, at the time of writing this, it's the one thing stopping me from publishing my website sooner. You know how I write page and component styles in Sass? It turns out that integrating it isn't as smooth as for Next.js. After struggling with error messages and plugins that refused to work despite my best attempts, I put MDX on the list of "Things I should do now but don't want to deal with" and went on with my day. As of writing this, I'm undergoing the second round of trying to get something to work, and I feel like I'm somewhat close.

Credit where credit is due

Although I have a credits page, I'll explain in a bit more detail the roles the people listed played.

Joder & Varedz taught me reverse engineering web apps, and without them, the Blooket cheat would not exist. Joder left the cheating scene a few months ago, and I wish him the best of luck in the future. Cookie, Chimchar, GoLuckyOne, Joncar66, (listed as SmugSenko, I don't know their branding too well,) and Kneppl created... art. Jokes aside, they are all incredible artists, and I'm honored to have been on the recieving end of their work. I can't just forget Ljabert, and while he didn't directly create drawings, he handled the technical side of the inside joke that sparked the creation of art. He set up four websites, humorously edited my leaf onto multiple images and videos, and a lot more I won't list here for the sake of brevity.

Again, I'm immensly greatful for everyone who's helped out or contributed to the journey of getting where I am.

Wrapping up

Thanks for reading! I'm writing this section on the intended day of release, and it's pretty much the last thing I need to do before I iron out a few small bugs and publish the new site.