Show description
Lalo's Repo Directory
Lalo's Repo Directory
Lalo's Repo Directory
A QUEST LOG OF CODE
Find a Quest:
Made with ♥ by Lalo Morales
View on GitHub
Lalo's Repo Directory
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lalo's Repo Directory</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.min.js"></script>
<style>
body {
font-family: 'Press Start 2P', cursive;
background-color: #1a1a2e;
color: #e0e0e0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px);
background-size: 40px 40px;
animation: bg-scroll 20s linear infinite;
}
@keyframes bg-scroll {
0% { background-position: 0 0; }
100% { background-position: -40px -40px; }
}
/* Custom 8-bit border style */
.pixel-border {
border: 4px solid;
border-image-slice: 2;
border-image-width: 4px;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="6" height="6"><g fill="%23e0e0e0"><path d="M0,2 V4 H2 V6 H4 V4 H6 V2 H4 V0 H2 V2 Z"/></g></svg>');
position: relative;
background-color: #16213e;
}
.pixel-border::after {
content: "";
position: absolute;
top: -4px; right: -4px; bottom: -4px; left: -4px;
border: 4px solid;
border-image-slice: 2;
border-image-width: 4px;
border-image-repeat: stretch;
border-image-source: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="6" height="6"><g fill="%230f3460"><path d="M0,2 V4 H2 V6 H4 V4 H6 V2 H4 V0 H2 V2 Z"/></g></svg>');
}
/* Blinking cursor effect */
.blinking-cursor::after {
content: '_';
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background-color: #1a1a2e;
border: 2px solid #0f3460;
}
::-webkit-scrollbar-thumb {
background-color: #e94560;
border: 2px solid #0f3460;
}
::-webkit-scrollbar-thumb:hover {
background-color: #ff7675;
}
/* Button Styles */
.pixel-button {
background-color: #e94560;
color: #ffffff;
border: 2px solid #0f3460;
padding: 8px 16px;
text-transform: uppercase;
transition: all 0.2s ease;
box-shadow: 4px 4px 0px #0f3460;
}
.pixel-button:hover {
background-color: #ff7675;
box-shadow: 2px 2px 0px #0f3460;
transform: translate(2px, 2px);
}
.pixel-button:active {
background-color: #ff7675;
box-shadow: 0px 0px 0px #0f3460;
transform: translate(4px, 4px);
}
</style>
</head>
<body class="p-4 md:p-8">
<div class="container mx-auto max-w-5xl">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-3xl md:text-5xl font-bold text-[#e94560] tracking-wider" style="text-shadow: 4px 4px 0px #0f3460;">
Lalo's Repo Directory
</h1>
<p class="text-sm text-[#53a9b1] mt-2 blinking-cursor">A QUEST LOG OF CODE</p>
</header>
<!-- Search/Filter Bar -->
<div class="mb-8 pixel-border p-4">
<label for="search" class="block mb-2 text-lg text-[#53a9b1]">Find a Quest:</label>
<input type="text" id="searchInput" placeholder="Search by name, language, or keyword..." class="w-full p-2 bg-[#1a1a2e] border-2 border-[#0f3460] focus:outline-none focus:border-[#e94560] text-white">
</div>
<!-- Repo List -->
<main id="repoList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Repo items will be injected here by JavaScript -->
</main>
<!-- Footer -->
<footer class="text-center mt-12">
<p class="text-sm text-[#53a9b1]">Made with <span class="text-[#e94560]">♥</span> by Lalo Morales</p>
<a href="https://github.com/lalomorales22" target="_blank" class="pixel-button inline-block mt-4">
View on GitHub
</a>
</footer>
</div>
<script>
const repoData = [
{ name: '2030-beyond', description: 'A futuristic project looking towards the web of 2030.', language: 'TypeScript', url: 'https://github.com/lalomorales22/2030-beyond' },
{ name: '2030-community-platform', description: 'A next-generation community platform.', language: 'TypeScript', url: 'https://github.com/lalomorales22/2030-community-platform' },
{ name: '3d-car-driving-simulation', description: 'Ozgur\'s Car Driving Sim-forkd.', language: 'Not specified', url: 'https://github.com/lalomorales22/3d-car-driving-simulation' },
{ name: '3d-model-playground-forkd', description: 'Control 3D models using hand gestures and voice commands.', language: 'JavaScript', url: 'https://github.com/lalomorales22/3d-model-playground-forkd' },
{ name: '3d-wave-visualizations', description: 'More wave visualizations.', language: 'TypeScript', url: 'https://github.com/lalomorales22/3d-wave-visualizations' },
{ name: '7670', description: 'Single File Apps (Python, Html, CSS, JS).', language: 'HTML', url: 'https://github.com/lalomorales22/7670' },
{ name: '8bit-Gaming-Images', description: 'Image Generation with FLUX model for 8bit RPG style images.', language: 'Python', url: 'https://github.com/lalomorales22/8bit-Gaming-Images' },
{ name: 'A-POS-POS', description: 'A Point of Sale system.', language: 'HTML', url: 'https://github.com/lalomorales22/A-POS-POS' },
{ name: 'after-visit-summaries', description: 'Drop your notes from the day in and get a detailed after visit summary.', language: 'Python', url: 'https://github.com/lalomorales22/after-visit-summaries' },
{ name: 'AgentVerse', description: 'Deploy multiple LLM-based agents in various applications.', language: 'Not specified', url: 'https://github.com/lalomorales22/AgentVerse' },
{ name: 'AI-AWS-Study-Buddy', description: 'Study Buddy for the AWS Certification exams.', language: 'Python', url: 'https://github.com/lalomorales22/AI-AWS-Study-Buddy' },
{ name: 'ai-for-seniors', description: 'Easy to use AI for seniors.', language: 'TypeScript', url: 'https://github.com/lalomorales22/ai-for-seniors' },
{ name: 'ai-legion', description: 'An LLM-powered autonomous agent platform.', language: 'Not specified', url: 'https://github.com/lalomorales22/ai-legion' },
{ name: 'anti-social-media-board', description: 'Your own text and video gen platform with Stability and LumaLabs API.', language: 'Python', url: 'https://github.com/lalomorales22/anti-social-media-board' },
{ name: 'aplinyjavaapp', description: 'A tribute app in java to the one and only Elder Plinius aka Pliny.', language: 'Java', url: 'https://github.com/lalomorales22/aplinyjavaapp' },
{ name: 'AstronomyGuide-Streamlit100', description: '15 of 100, 100 Streamlit apps in 48 hours.', language: 'Python', url: 'https://github.com/lalomorales22/AstronomyGuide-Streamlit100' },
{ name: 'AutoGPT', description: 'Accessible AI for everyone, to use and to build on.', language: 'Not specified', url: 'https://github.com/lalomorales22/AutoGPT' },
{ name: 'automata', description: 'Automata: The Future is Self-Written.', language: 'Not specified', url: 'https://github.com/lalomorales22/automata' },
{ name: 'autonomous-hr-chatbot', description: 'An autonomous HR agent that can answer user queries using tools.', language: 'Not specified', url: 'https://github.com/lalomorales22/autonomous-hr-chatbot' },
{ name: 'BambooAI', description: 'Converse with your data using natural language.', language: 'Not specified', url: 'https://github.com/lalomorales22/BambooAI' },
{ name: 'beatbox-buddies', description: 'A beatboxing application.', language: 'TypeScript', url: 'https://github.com/lalomorales22/beatbox-buddies' },
{ name: 'become-the-strawberry-man', description: 'Cryptic social media post generator and library.', language: 'TypeScript', url: 'https://github.com/lalomorales22/become-the-strawberry-man' },
{ name: 'Beginner-Java', description: '4 md files, a flask app, call it a day. Go learn something.', language: 'Python', url: 'https://github.com/lalomorales22/Beginner-Java' },
{ name: 'Biology-Learning-Assistant-Streamlit100', description: '17 of 100, 100 Streamlit apps in 48 hours.', language: 'Python', url: 'https://github.com/lalomorales22/Biology-Learning-Assistant-Streamlit100' },
{ name: 'biomes-game', description: 'An open source sandbox MMORPG for the web.', language: 'Not specified', url: 'https://github.com/lalomorales22/biomes-game' },
{ name: 'bit-therapy-forkd', description: 'Desktop Pets for macOS!', language: 'Not specified', url: 'https://github.com/lalomorales22/bit-therapy-forkd' },
{ name: 'bolt-elevenlabs-beat-machine', description: 'Elevenlabs sound effects API to beat machine.', language: 'TypeScript', url: 'https://github.com/lalomorales22/bolt-elevenlabs-beat-machine' },
{ name: 'budtender-business-boost', description: 'Open source POS system for cannabis brands.', language: 'TypeScript', url: 'https://github.com/lalomorales22/budtender-business-boost' },
{ name: 'cad-hub-architech-AI', description: 'AI CAD, architect dashboard portfolio.', language: 'TypeScript', url: 'https://github.com/lalomorales22/cad-hub-architech-AI' },
{ name: 'calculus-commander', description: 'A tool for calculus.', language: 'TypeScript', url: 'https://github.com/lalomorales22/calculus-commander' },
{ name: 'calculus-dot-exe-ollama', description: 'Calculus for engineers formulas cheat sheet.', language: 'TypeScript', url: 'https://github.com/lalomorales22/calculus-dot-exe-ollama' },
{ name: 'calculus2-dot-exe-ollama', description: 'Calculus 2 formulas and concepts with ollama.', language: 'TypeScript', url: 'https://github.com/lalomorales22/calculus2-dot-exe-ollama' },
{ name: 'canvas-nexus-forge', description: 'Infinite canvas to do anything you want.', language: 'TypeScript', url: 'https://github.com/lalomorales22/canvas-nexus-forge' },
{ name: 'CareerGuidanceCounselor-Streamlit100', description: '10 of 100, 100 Streamlit apps in 48 hours.', language: 'Python', url: 'https://github.com/lalomorales22/CareerGuidanceCounselor-Streamlit100' },
{ name: 'chat-with-ollama', description: 'A chat interface for Ollama models.', language: 'JavaScript', url: 'https://github.com/lalomorales22/chat-with-ollama' },
{ name: 'Chemistry-Equation-Balancer-Streamlit100', description: '16 of 100, 100 Streamlit apps in 48 hours.', language: 'Python', url: 'https://github.com/lalomorales22/Chemistry-Equation-Balancer-Streamlit100' },
{ name: 'Chess-CLI-GeminiPro', description: 'A Java CLI Chess game against Gemini Pro.', language: 'Java', url: 'https://github.com/lalomorales22/Chess-CLI-GeminiPro' },
{ name: 'chirp-ai-walkie-talkies', description: 'Walkie talkies, web socket, live tv, antenna radio.', language: 'TypeScript', url: 'https://github.com/lalomorales22/chirp-ai-walkie-talkies' },
{ name: 'claude-engineer', description: 'A CLI that leverages Claude-3.5-Sonnet to assist with software development.', language: 'Python', url: 'https://github.com/lalomorales22/claude-engineer' },
{ name: 'penguin-programming-game', description: 'Fun game where you solve puzzles and talk to AI NPCs.', language: 'JavaScript', url: 'https://github.com/lalomorales22/penguin-programming-game' },
{ name: 'penguindreamsgame', description: 'My first game in python. There is no end to this game. Or is there??????', language: 'Python', url: 'https://github.com/lalomorales22/penguindreamsgame' },
{ name: 'Voxel-Maze-Adventure', description: 'It\'s a maze, it\'s AI, if you have ollama installed this one\'s for you.', language: 'HTML', url: 'https://github.com/lalomorales22/Voxel-Maze-Adventure' },
{ name: 'cosmic-chaos', description: 'Submission for vibe coding game jam.', language: 'JavaScript', url: 'https://github.com/lalomorales22/cosmic-chaos' },
];
const repoList = document.getElementById('repoList');
const searchInput = document.getElementById('searchInput');
let synth;
// Function to create a "bleep" sound for UI interactions
function playSound(note) {
if (!synth) {
synth = new Tone.Synth({
oscillator: { type: 'square' },
envelope: { attack: 0.01, decay: 0.1, sustain: 0.2, release: 0.1 }
}).toDestination();
}
synth.triggerAttackRelease(note, '8n');
}
// Add sound to buttons
document.querySelectorAll('.pixel-button').forEach(button => {
button.addEventListener('click', () => playSound('C4'));
});
searchInput.addEventListener('focus', () => playSound('A3'));
// Function to render the list of repositories
function renderRepos(reposToRender) {
repoList.innerHTML = ''; // Clear the list
if (reposToRender.length === 0) {
repoList.innerHTML = `<p class="text-center text-lg text-gray-400 col-span-full">No quests found matching your search!</p>`;
return;
}
reposToRender.forEach(repo => {
// Determine language color
let langColor = 'text-gray-400';
const lang = repo.language.toLowerCase();
if (lang === 'python') langColor = 'text-yellow-400';
else if (lang === 'typescript') langColor = 'text-blue-400';
else if (lang === 'javascript') langColor = 'text-yellow-300';
else if (lang === 'html') langColor = 'text-red-400';
else if (lang === 'java') langColor = 'text-orange-400';
else if (lang === 'swift') langColor = 'text-pink-400';
const repoCard = `
<div class="pixel-border p-4 flex flex-col h-full transform hover:-translate-y-1 transition-transform duration-200">
<h3 class="text-lg text-[#e94560] mb-2 truncate">${repo.name}</h3>
<p class="text-sm text-gray-300 mb-4 flex-grow">${repo.description || 'No objective provided...'}</p>
<div class="mt-auto">
<p class="text-xs mb-4"><span class="text-[#53a9b1]">TOOLS:</span> <span class="${langColor}">${repo.language || 'N/A'}</span></p>
<a href="${repo.url}" target="_blank" class="pixel-button w-full text-center block" onclick="playSound('G4')">
Start Quest
</a>
</div>
</div>
`;
repoList.innerHTML += repoCard;
});
}
// Event listener for the search input
searchInput.addEventListener('keyup', (e) => {
const searchTerm = e.target.value.toLowerCase();
const filteredRepos = repoData.filter(repo => {
return (
repo.name.toLowerCase().includes(searchTerm) ||
(repo.description && repo.description.toLowerCase().includes(searchTerm)) ||
(repo.language && repo.language.toLowerCase().includes(searchTerm))
);
});
renderRepos(filteredRepos);
});
// Initial render of all repositories
window.onload = () => {
// Sort repositories to put game-related ones first for thematic effect
repoData.sort((a, b) => {
const aIsGame = a.name.includes('game') || a.name.includes('Gaming');
const bIsGame = b.name.includes('game') || b.name.includes('Gaming');
if (aIsGame && !bIsGame) return -1;
if (!aIsGame && bIsGame) return 1;
return a.name.localeCompare(b.name);
});
renderRepos(repoData);
};
</script>
</body>
</html>