How to Create This Website
Curious how far AI has come, I decided to build this site by prompting an AI agent through the entire process.
I gave it structure and intent — it handled most of the implementation. Total cost? ~$15 and less than a day's work (mostly researching legal requirements).
Final touches were made by hand mostly because it was faster than writing another prompt. Some minor visual changes were also done by me to fix alignment issues or to improve the overall look.
Features
- No Libraries & Build Tools
- SPA Experience
- Modern Design
- Responsive Design
- Unique and Interactive Controls
- Smooth Animations
- Time-Based Accent Color
No Libraries & Build Tools
Built using only HTML, CSS, and JavaScript without any external libraries or frameworks.
All code is vanilla, no transpilation or compilation needed.
SPA Experience
Single Page Application (SPA) experience with smooth transitions and no full page reloads.
Navigation is handled via JavaScript, allowing for a seamless user experience.
Modern Design
Designed with a modern aesthetic, focusing on usability and visual appeal.
Unique and Interactive Controls
Features unique controls like the constellation navigation and interactive skill descriptions.
Controls are designed to enhance user engagement and provide a modern browsing experience.
Smooth Animations
Includes smooth animations for transitions, hover effects, and interactive elements.
Time-Based Accent Color
Easter-Egg: Accent color changes based on the time of day.
Responsive Design
Fully responsive design that adapts to different screen sizes and devices.
How I Build this Site with AI
Select a tool to learn more
Click on any node in the constellation to see detailed information about that tool.
How It Works
Setup VSCode
Install VSCode and the RooCode extension. Create an OpenRouter API key (or any provider you prefer) and configure RooCode with it and the AI model(s) you want to use.
AI-Assisted Development
Prompt RooCode to generate code, refactor existing code, and/or implement complex features with natural language instructions. Choose the AI Model that best fits your needs (Google's Gemini works great for large projects).
Iterative Refinement
Continuously refine and improve through AI collaboration and/or manual intervention, testing different approaches and optimizing for performance and aesthetics.
Polish & Deploy
Fine-tune the final product, clean up the code, and deploy the finished website. You want to keep the technical debt low, so monitor what the AI does and guide it.
Results & Insights
Impressive Speed
Complex features in minutes - not hours
Fast Output
Fast, but fragile. Monitor it to avoid regressions.
Learning Curve
Prompting is a skill. Garbage in, garbage out.
Cost & Time
Delegate to AI - but stay in control.