resume-site.md

Click to begin
Follow the guided interview
AI processes your conversation
Resume site prompt generated

Inspiration 💡

Traditional resume builders are tedious – endless forms, rigid templates, and static outputs. We envisioned a future where you could simply talk about your career and get a professional website built automatically.

But here's the twist: instead of building the website directly, we generate comprehensive instructions that with one click, passes the instructions to Bolt.new to create your resume site. This creates the perfect synergy between conversational AI and Bolt's powerful website generation capabilities.

What it does 🎯

resume-site.md transforms career conversations into professional website building instructions through an intelligent voice interface. Here's the magic:

Voice Interview: Have a natural conversation about your career – no forms, no typing
AI Processing: GPT-4o-mini extracts and professionally formats your information
Instructions Generation: Creates a comprehensive design brief with all content and specifications
Bolt.new Integration: One-click generation on Bolt.new. Watch your resume website come to life and continue editing on Bolt.new.

The app conducts a structured interview covering your name, contact info, LinkedIn data, career goals, and work experience, leading you to actionable results that hiring managers look for. It then generates a detailed markdown document with your content, modern design specifications, and technical requirements – perfectly formatted for Bolt.new's AI to build a stunning resume website.

How we built it 🛠️

Frontend Architecture

React 18 + TypeScript for type-safe component architecture
Tailwind CSS with custom design system for Apple-level aesthetics
Web Speech API for real-time voice recognition and synthesis
React Router for seamless navigation between interview steps

AI Integration

OpenAI GPT-4o-mini for intelligent conversation and data extraction
Custom prompt engineering for each interview step
Structured JSON responses for reliable data processing
Fallback mechanisms for robust error handling

Voice Interface Innovation

Real-time speech recognition with visual feedback
Smart auto-submission with pause detection
Text input fallback for accessibility
Smooth transitions between speaking and listening states

Security & Privacy

Local API key encryption using CryptoJS
Fresh sessions on every reload (no data persistence)
Secure OpenAI API communication
No server-side data storage

Instructions Generation Engine

The core innovation is our resumeGenerator.ts utility that transforms interview data into comprehensive website building instructions including:

Complete content structure with professional formatting
Modern design specifications (dark mode, responsive, animations)
Technical requirements optimized for Bolt.new
SEO and performance guidelines

Challenges we ran into 🚧

Creating a smooth, context aware flow between questions
Ensuring a smooth flow in the later, more free flowing steps (Still buggy)
Struggled with find a solution to pass in an image url via query params

Accomplishments that we're proud of 🏆

Seamless Voice Experience

Created a truly natural voice interface that feels like talking to a career counselor, not a machine. Users can speak naturally without worrying about keywords or specific phrases.

Perfect Bolt.new Synergy

Achieved seamless integration where our instructions generate beautiful, professional websites in Bolt.new with zero additional input required.

Professional Output Quality

The generated instructions produce resume websites that rival expensive custom designs, complete with modern aesthetics, responsive layouts, and professional content formatting.

Innovative Workflow

Pioneered a new approach to resume building: conversation → instructions → AI website generation. This workflow is more flexible and powerful than traditional direct-build approaches.

Technical Excellence

Built a production-ready application with advanced React patterns, real-time processing, secure API integration, and a comprehensive design system.

What we learned 📚

Voice UI Design Principles

Learned the nuances of designing for voice-first interactions, including timing, feedback, error recovery, and accessibility considerations.

Vibe Product Optimization

Allowed ample time to allow Bolt to analyze the code base, asking for areas of improvement in modularity, state management consistency and general optimizations. Then selected my improvements from the ordered list.

Instructions-Based Architecture

Discovered the power of generating instructions rather than direct outputs – it provides more flexibility and better integration with AI builders like Bolt.new.