In addition to being a full-time Software Engineer at Weevio, I am also a part-time developer at KueCloud. KueCloud is made up of the same developers from Weevio, me and friend/mentor Andrew.

KueCloud's first product is Genius. Genius is the ultimate AI-powered GitHub project management tool. It effortlessly searches issues using natural language, avoids duplicates, creates and comments on issues via chat. Support for Genius is starting with Discord. Followed by Slack and Microsoft Teams.

Initially we considered developing the marketing website in the same codebase as the user dashboard however, we suspected it would lead to an overcomplicated codebase. Instead, we opted for Ghost. Ghost is great. It's a powerful CMS capable of creating, sharing and growing a business around content. One of our favorite built-in features is newsletters. It's a feature we are utilizing to inform interested users and track a waitlist as we roll out. Ghost also has an API so most of the data can be fetched this way.

In fact, all articles on this site have been written in my Ghost dashboard. I'm using Ghost as a headless CMS and fetching the posts from the Ghost API and rendering them in this Next.js application (my portfolio). Ghost is great.

I chose to work on the marketing website. Ghost themes leverage the Handlebars templating language, ensuring a clear separation between the HTML templates and JavaScript logic through helpers. This approach enables themes to deliver fast performance, combining the benefits of a dynamic client-side application with server-side content that is delivered to the browser as static HTML.

Additionally, Ghost incorporates a library named express-hbs, which enhances Handlebars by introducing features like layouts and partials.

For those with experience in theme development on other popular platforms, adapting to Ghost's theme architecture is straightforward. Ghost's documentation provides you with the necessary tools to craft static HTML and CSS for your theme, utilizing Handlebars expressions for dynamic data rendering.

Ghost has theme marketplace where you can browse free and paid themes. Ghost's themes are a great starting point. Collectively at KueCloud we browsed themes that were closely resembling the look we wanted. After we agreed on a theme, I got to work.

Before the theme could be installed, we needed helpful graphics to easily explain how Genius works. After a few sketches I opened up Figma and designed the following chat interaction for the hero section.

We wanted to showcase how easy it is to search, prevent duplicates and automatically create new issues. After a few revisions I landed on two additional designs that would showcase these features.

Both designs have dark-mode equivalents because I improved the theme by automatically switching between light and dark-mode versions of the images.

The theme was built using Tailwind CSS. Modifying the theme was a great opportunity for me to get hands-on experience with Tailwind. While class names can be a bit lengthy, I find that they flow very well. Responsive components can be written so easily. There is a plethora of color classes with each color ranging from 100 to 900, i.e. sky-600. When I'm coding, I use VIM and I've found that Tailwind and VIM are a match made in heaven. Finally, it's very well optimized for production. Tailwind automatically removes all unused CSS for production, so the final CSS bundle is the smallest it could possibly be.

I'm very proud of the work I did on the KueCloud website. Opting against incorporating the marketing website into the same codebase as the user dashboard to avoid complexity has proven to be the correct call. We chose Ghost for its robust CMS capabilities, including newsletters and an API for data fetching, to support our rollout strategy and waitlist management. In crafting the marketing site, I leveraged Ghost’s use of the Handlebars templating language and its express-hbs library for enhanced theme development, selecting and tailoring a theme from Ghost’s marketplace to suit our aesthetic needs. This process involved creating illustrative graphics in Figma, including dark-mode compatible designs, and utilizing Tailwind CSS for responsive design elements and its efficient production optimization by removing unused CSS. Visit KueCloud to view the site and sign up for the waitlist!