hacka.ai

How hacka.ai Was Created

This website was created entirely with the assistance of AI, specifically using Claude-3.7-Sonnet from Anthropic through the Cline extension (GitHub) in Visual Studio Code. Below are some of the prompts used to create and refine the site.

Initial Website Creation Prompt

Create a simple but modern website for showcasing various GenAI-generated standalone projects. The site should have a clean, professional look with a touch of creativity. Include sections for:

1. Hero section with a brief introduction
2. About section explaining the purpose of the showcase
3. Projects section with a grid of project cards
4. Contact information

The projects will be standalone HTML/CSS/JS applications that can be linked to from this main page. 

Name the site "hacka.ai" with the tagline "GenAI Project Showcase".

Adding Project Filtering

Add filtering functionality to the projects section so visitors can filter projects by category (e.g., games, tools, utilities).

Styling Refinements

Update the styling to have a retro game console pixelated feeling for the project cards, while keeping the rest of the site modern and clean.

Adding TouchFS Project

Add a new project card for TouchFS - The Swiss Army Knife of Synthetic Data Generation. Create a simple thumbnail with a finger pointing downwards emoji.

The entire development process was iterative, with Claude providing code, explanations, and suggestions at each step. The AI was able to understand the requirements, generate appropriate HTML, CSS, and JavaScript, and make adjustments based on feedback.

Development Process Screen Recording

Below is a screen recording showing how another very similar screen recording is compressed, converted, and sped up to 2x speed, before being integrated into this website.