| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width" /> |
| <title>Gemini Vibe Coding Projects - Index</title> |
| <link rel="stylesheet" href="style.css" /> |
| </head> |
| <body> |
| <nav> |
| <div class="nav-container"> |
| <div class="nav-links"> |
| <a href="#productivity">Productivity & Work</a> |
| <a href="#creative">Creative & Media</a> |
| <a href="#analysis">Analysis & Intelligence</a> |
| <a href="#utilities">Utilities & Assistants</a> |
| </div> |
| <div class="modality-key"> |
| <span class="modality-key-label">Modalities:</span> |
| <span class="badge" title="Text processing and generation">Text</span> |
| <span class="badge" title="Audio processing and analysis">Audio</span> |
| <span class="badge" title="Image and video processing">Vision</span> |
| <span class="badge" title="Data analysis and insights">Analysis</span> |
| </div> |
| </div> |
| </nav> |
|
|
| <div class="content-wrapper"> |
| <header> |
| <h1>Gemini Vibe Coding Projects</h1> |
| <p class="subtitle">Experimental AI Application Prototypes by Daniel Rosehill</p> |
| <p class="description">A collection of multimodal AI applications built using Google AI Studio, showcasing rapid experimentation across text, audio, vision, and video processing.</p> |
| </header> |
|
|
| <main id="projects-container"> |
| <div class="loading">Loading projects...</div> |
| </main> |
|
|
| <footer> |
| <p> |
| <a href="https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects" target="_blank">View on GitHub</a> | |
| <a href="https://danielrosehill.com" target="_blank">danielrosehill.com</a> |
| </p> |
| </footer> |
| </div> |
|
|
| |
| <div id="imageModal" class="modal" onclick="closeModal()"> |
| <span class="modal-close">×</span> |
| <img class="modal-content" id="modalImage"> |
| <div class="modal-caption" id="modalCaption"></div> |
| </div> |
|
|
| |
| <script> |
| |
| const PROJECTS_DATA = { |
| "metadata": { |
| "title": "Gemini Vibe Coding Projects", |
| "description": "Experimental AI Application Prototypes by Daniel Rosehill", |
| "lastUpdated": "2025-10-26" |
| }, |
| "categories": [ |
| { |
| "name": "Productivity & Work Tools", |
| "projects": [ |
| { |
| "name": "AI Timesheet", |
| "description": "Automated timesheet generation and tracking using AI", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/ai-timesheet/1.png" |
| ], |
| "screenshot": "screenshots/ai-timesheet/1.png" |
| }, |
| { |
| "name": "Echo Scribe", |
| "description": "Voice-to-text transcription and note-taking assistant", |
| "modalities": [ |
| "Audio", |
| "Text" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/echo-scribe/1.png" |
| ], |
| "screenshot": "screenshots/echo-scribe/1.png" |
| }, |
| { |
| "name": "Notepad", |
| "description": "AI-enhanced note-taking application", |
| "modalities": [ |
| "Text" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/notepad/1.png" |
| ], |
| "screenshot": "screenshots/notepad/1.png" |
| } |
| ] |
| }, |
| { |
| "name": "Creative & Media Tools", |
| "projects": [ |
| { |
| "name": "Audio Speaker Editor", |
| "description": "Edit and enhance audio with AI-powered speaker identification", |
| "modalities": [ |
| "Audio", |
| "Text" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/audio-speaker-editor/1.png" |
| ], |
| "screenshot": "screenshots/audio-speaker-editor/1.png" |
| }, |
| { |
| "name": "Playlist Curator", |
| "description": "AI-powered music playlist creation and curation", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects" |
| }, |
| { |
| "name": "Text to SSML", |
| "description": "Convert plain text to Speech Synthesis Markup Language", |
| "modalities": [ |
| "Text", |
| "Audio" |
| ], |
| "repo": "https://github.com/danielrosehill/Text-To-SSML-Generator", |
| "screenshots": [ |
| "screenshots/text-to-ssml/1.png" |
| ], |
| "screenshot": "screenshots/text-to-ssml/1.png" |
| }, |
| { |
| "name": "Movie Recommendations", |
| "description": "AI-powered movie recommendation engine", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects" |
| } |
| ] |
| }, |
| { |
| "name": "Analysis & Intelligence", |
| "projects": [ |
| { |
| "name": "Body Language Analyst", |
| "description": "Analyze body language and non-verbal communication patterns", |
| "modalities": [ |
| "Vision", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Body-Language-Analyst", |
| "screenshots": [ |
| "screenshots/body-language-analyst/1.png" |
| ], |
| "screenshot": "screenshots/body-language-analyst/1.png" |
| }, |
| { |
| "name": "Voice Analyzer", |
| "description": "Analyze voice patterns and characteristics", |
| "modalities": [ |
| "Audio", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Voice-Analyzer", |
| "screenshots": [ |
| "screenshots/voice-analyzer/1.png" |
| ], |
| "screenshot": "screenshots/voice-analyzer/1.png" |
| }, |
| { |
| "name": "AI Personal EQ Creator", |
| "description": "Create personalized emotional intelligence profiles and insights", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/AI-Personal-EQ-Creator", |
| "screenshots": [ |
| "screenshots/eq-template-creator/1.png" |
| ], |
| "screenshot": "screenshots/eq-template-creator/1.png" |
| } |
| ] |
| }, |
| { |
| "name": "Utilities & Assistants", |
| "projects": [ |
| { |
| "name": "Career Pivot", |
| "description": "AI assistant for career transitions and planning", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Career-Pivot-AI", |
| "screenshots": [ |
| "screenshots/career-pivot/1.png" |
| ], |
| "screenshot": "screenshots/career-pivot/1.png" |
| }, |
| { |
| "name": "Diagram Enhancer", |
| "description": "Enhance and improve diagrams with AI suggestions", |
| "modalities": [ |
| "Vision", |
| "Text" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/diagram-enhancer/1.png" |
| ], |
| "screenshot": "screenshots/diagram-enhancer/1.png" |
| }, |
| { |
| "name": "Home Inventory", |
| "description": "Manage and track home inventory with AI assistance", |
| "modalities": [ |
| "Text", |
| "Vision" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/home-inventory/1.png" |
| ], |
| "screenshot": "screenshots/home-inventory/1.png" |
| }, |
| { |
| "name": "Room Dimensions", |
| "description": "Calculate and analyze room dimensions from images", |
| "modalities": [ |
| "Vision", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/AI-Room-Dimension-Estimator", |
| "screenshots": [ |
| "screenshots/room-dimensions/1.png" |
| ], |
| "screenshot": "screenshots/room-dimensions/1.png" |
| }, |
| { |
| "name": "Use Case Ideator", |
| "description": "Generate and explore AI use case ideas", |
| "modalities": [ |
| "Text", |
| "Analysis" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/use-case-ideator/1.png" |
| ], |
| "screenshot": "screenshots/use-case-ideator/1.png" |
| }, |
| { |
| "name": "Botify", |
| "description": "Bot creation and management platform", |
| "modalities": [ |
| "Text" |
| ], |
| "repo": "https://github.com/danielrosehill/Gemini-Vibe-Coding-Projects", |
| "screenshots": [ |
| "screenshots/botify/1.png" |
| ], |
| "screenshot": "screenshots/botify/1.png" |
| } |
| ] |
| } |
| ] |
| }; |
| </script> |
|
|
| <script> |
| function displayProjects(data) { |
| const container = document.getElementById('projects-container'); |
| container.innerHTML = ''; |
| |
| // Map category names to IDs |
| const categoryIdMap = { |
| 'Productivity & Work Tools': 'productivity', |
| 'Creative & Media Tools': 'creative', |
| 'Analysis & Intelligence': 'analysis', |
| 'Utilities & Assistants': 'utilities' |
| }; |
| |
| // Display each category |
| data.categories.forEach(category => { |
| const categorySection = document.createElement('section'); |
| categorySection.className = 'category'; |
| categorySection.id = categoryIdMap[category.name] || ''; |
| |
| categorySection.innerHTML = ` |
| <h2>${category.name} <span class="project-count">(${category.projects.length})</span></h2> |
| <div class="projects-grid"></div> |
| `; |
| |
| const grid = categorySection.querySelector('.projects-grid'); |
| |
| category.projects.forEach(project => { |
| const projectCard = document.createElement('div'); |
| projectCard.className = 'project-card'; |
| |
| const badges = project.modalities.map(m => |
| `<span class="badge">${m}</span>` |
| ).join(''); |
| |
| // Handle screenshots as embedded images OR GitHub badge |
| let screenshotHTML = ''; |
| if (project.screenshots && project.screenshots.length > 0) { |
| screenshotHTML = ` |
| <div class="screenshot-preview" onclick="openModal('${project.screenshots[0]}')"> |
| <img src="${project.screenshots[0]}" alt="${project.name} screenshot" loading="lazy"> |
| <div class="screenshot-overlay"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="11" cy="11" r="8"></circle> |
| <path d="m21 21-4.35-4.35"></path> |
| <line x1="11" y1="8" x2="11" y2="14"></line> |
| <line x1="8" y1="11" x2="14" y2="11"></line> |
| </svg> |
| <span>Click to enlarge</span> |
| </div> |
| </div> |
| `; |
| } else if (project.screenshot) { |
| screenshotHTML = ` |
| <div class="screenshot-preview" onclick="openModal('${project.screenshot}')"> |
| <img src="${project.screenshot}" alt="${project.name} screenshot" loading="lazy"> |
| <div class="screenshot-overlay"> |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <circle cx="11" cy="11" r="8"></circle> |
| <path d="m21 21-4.35-4.35"></path> |
| <line x1="11" y1="8" x2="11" y2="14"></line> |
| <line x1="8" y1="11" x2="14" y2="11"></line> |
| </svg> |
| <span>Click to enlarge</span> |
| </div> |
| </div> |
| `; |
| } else if (project.repo) { |
| // If no screenshot, show GitHub badge |
| screenshotHTML = ` |
| <div class="github-badge-preview"> |
| <a href="${project.repo}" target="_blank"> |
| <img src="https://img.shields.io/badge/GitHub-Repository-181717?style=for-the-badge&logo=github" alt="View on GitHub"> |
| </a> |
| </div> |
| `; |
| } |
| |
| projectCard.innerHTML = ` |
| ${screenshotHTML} |
| <div class="project-content"> |
| <h3>${project.name}</h3> |
| <p>${project.description}</p> |
| <div class="modalities">${badges}</div> |
| <div class="links"> |
| ${project.repo ? `<a href="${project.repo}" target="_blank" class="btn"><img src="https://img.shields.io/badge/View_Repo-GitHub-transparent?style=for-the-badge&logo=github&logoColor=black&labelColor=transparent&color=black" alt="View Repository" style="vertical-align: middle;"></a>` : ''} |
| </div> |
| </div> |
| `; |
| |
| grid.appendChild(projectCard); |
| }); |
| |
| container.appendChild(categorySection); |
| }); |
| } |
| |
| // Load projects on page load |
| displayProjects(PROJECTS_DATA); |
| |
| // Modal functions |
| function openModal(imageSrc) { |
| const modal = document.getElementById('imageModal'); |
| const modalImg = document.getElementById('modalImage'); |
| modal.style.display = 'block'; |
| modalImg.src = imageSrc; |
| } |
| |
| function closeModal() { |
| document.getElementById('imageModal').style.display = 'none'; |
| } |
| |
| // Close modal on Escape key |
| document.addEventListener('keydown', function(event) { |
| if (event.key === 'Escape') { |
| closeModal(); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
