Building CloudCV with Vibe Coding: A Journey in no Knowladge Development

Building a modern web portfolio using voice commands presents unique challenges and opportunities. In this post, I’ll share my experience creating CloudCV, a portfolio website built entirely through voice coding, and discuss the solutions we implemented for common web development challenges.

Project Foundation #

The project started with a solid foundation using the Eleventy static site generator and TailwindCSS for styling. This combination provides excellent performance and developer experience while maintaining simplicity. The initial setup included:

• Eleventy for static site generation
• TailwindCSS for utility-first styling
• Liquid templates for flexible layouts
• Dark mode support
• Responsive design patterns

Implementing Dark Mode #

One of our first major features was implementing a smooth dark mode transition. This involved several key components:

/* Dark mode animation styles */
.theme-toggle .sun:not(.hidden) {
  animation: sunRotate 0.5s ease-in-out;
}
.theme-toggle .moon:not(.hidden) {
  animation: moonRotate 0.5s ease-in-out;
}

The theme toggle features a rotating animation for both sun and moon icons, providing visual feedback during mode switches. We also implemented persistent theme storage using localStorage to maintain the user’s preference across visits.

The theme toggle button showing both light and dark mode states

Contact Form Implementation #

Creating an accessible and user-friendly contact form presented several challenges:

• Implementing proper form validation
• Creating a seamless GitHub Issues integration
• Ensuring proper contrast in both light and dark modes
• Adding comprehensive email validation

The contact form validation includes checks for:

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\.[a-zA-Z]{2,})?$/;

This regex pattern ensures valid email formats including complex TLDs like .co.uk or .com.au.

Challenges and Solutions #

1. Theme Toggle Visibility #

Initially, we faced issues with the theme toggle button’s visibility and user feedback. The solution involved:

• Adding contrasting colors for better visibility
• Implementing smooth animations for state changes
• Using appropriate icon colors (yellow sun, dark moon)

2. Form Field Styling #

Form fields required careful attention to ensure visibility in both themes:

• Light mode: Slate-50 background with slate-900 text
• Dark mode: Gray-800 background with white text
• Consistent padding and border radius
• Clear focus states with purple highlights

Voice Coding Experience #

Building this site through voice commands showcased both the power and limitations of voice coding:

• Precise control over HTML structure and CSS classes
• Quick iterations on design changes
• Easy implementation of accessibility features
• Seamless integration with version control

Conclusion #

This project demonstrates that voice coding can be an effective way to build modern, responsive websites. While there were challenges to overcome, the final result is a fully functional portfolio site with dark mode support, accessible forms, and smooth animations - all built without touching a keyboard.