Skip to content

feat: add homepage with links to micro projects #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elias4044 wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat: add homepage with links to micro projects #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Micro Projects Collection</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<h1>Micro Projects</h1>
<span class="subtitle">Collection of Interactive Web Apps</span>
</div>
<nav class="nav">
<a href="#projects" class="nav-link">Projects</a>
<a href="https://github.com/jovdim/Micro-Projects-Collection" target="_blank" class="nav-link github-link">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
GitHub
</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container">
<div class="hero-content">
<h2 class="hero-title">Explore Interactive Web Projects</h2>
<p class="hero-description">
A curated collection of 26 mini web applications built with HTML, CSS, and JavaScript.
Perfect for learning, inspiration, or quick utilities.
</p>
<a href="#projects" class="cta-button">
Browse Projects
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7V17"/>
</svg>
</a>
</div>
</div>
</section>

<section id="projects" class="projects">
<div class="container">
<h2 class="section-title">Projects</h2>
<div class="projects-grid" id="projectsGrid">
<!-- Projects will be dynamically inserted here -->
</div>
</div>
</section>
</main>

<footer class="footer">
<div class="container">
<p>&copy; 2024 Micro Projects Collection. Open source and free to use.</p>
<div class="footer-links">
<a href="https://github.com/jovdim/Micro-Projects-Collection" target="_blank">GitHub</a>
<a href="https://github.com/jovdim/Micro-Projects-Collection/blob/main/CONTRIBUTING.md" target="_blank">Contribute</a>
<a href="https://github.com/jovdim/Micro-Projects-Collection/blob/main/LICENSE" target="_blank">License</a>
</div>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
286 changes: 286 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,286 @@
// Project data with emojis and descriptions
const projects = [
{
name: "Todo List",
folder: "to-do-list",
emoji: "📝",
description: "A modern task management app with local storage and smooth animations."
},
{
name: "Digital Clock",
folder: "digital-clock",
emoji: "🕐",
description: "Beautiful digital clock with date display and smooth transitions."
},
{
name: "Quote Generator",
folder: "inspirational-quotes-generator",
emoji: "💭",
description: "Get inspired with random quotes, text-to-speech, and favorites."
},
{
name: "Calculator",
folder: "calculator",
emoji: "🧮",
description: "Clean and functional calculator with keyboard support."
},
{
name: "Stopwatch",
folder: "stopwatch",
emoji: "⏱️",
description: "Precise stopwatch with lap times and persistent storage."
},
{
name: "Rock Paper Scissors",
folder: "rock-paper-scissors-game",
emoji: "✂️",
description: "Classic game with animations, sounds, and auto-play mode."
},
{
name: "Password Generator",
folder: "password-generator",
emoji: "🔐",
description: "Generate secure passwords with customizable options and strength meter."
},
{
name: "BMI Calculator",
folder: "bmi-calculator",
emoji: "⚖️",
description: "Calculate BMI with multiple unit support and real-time updates."
},
{
name: "Expense Tracker",
folder: "expense-tracker",
emoji: "💰",
description: "Track expenses by category with filtering and local storage."
},
{
name: "Unit Converter",
folder: "unit-converter",
emoji: "🔄",
description: "Convert between different units for temperature, weight, length, and more."
},
{
name: "Tip Calculator",
folder: "tip-calculator",
emoji: "💸",
description: "Calculate tips and split bills with multiple people."
},
{
name: "Number Guessing Game",
folder: "number-guessing-game",
emoji: "🔢",
description: "Fun guessing game with scoring system and difficulty levels."
},
{
name: "Tic-Tac-Toe",
folder: "tic-tac-toe-game",
emoji: "⭕",
description: "Classic game with two-player and computer opponent modes."
},
{
name: "Notes App",
folder: "note-taking",
emoji: "📓",
description: "Take notes with tags, colors, and search functionality."
},
{
name: "Quiz App",
folder: "quiz-app",
emoji: "🧠",
description: "Interactive quiz with multiple categories and timer."
},
{
name: "Markdown Previewer",
folder: "markdown-previewer",
emoji: "📄",
description: "Write and preview Markdown with live rendering and export."
},
{
name: "Pomodoro Timer",
folder: "pomodoro-timer",
emoji: "🍅",
description: "Productivity timer with customizable work and break intervals."
},
{
name: "CSS Generator",
folder: "css-generator",
emoji: "🎨",
description: "Generate CSS gradients and box shadows with live preview."
},
{
name: "Image Compressor",
folder: "image-compressor",
emoji: "🖼️",
description: "Compress images with quality control and resize options."
},
{
name: "Image Connector",
folder: "image-connector",
emoji: "🔗",
description: "Combine multiple images horizontally or vertically."
},
{
name: "Currency Converter",
folder: "currency-converter",
emoji: "💱",
description: "Convert between currencies with real-time exchange rates."
},
{
name: "Age Calculator",
folder: "age-calculator",
emoji: "🎂",
description: "Calculate age with zodiac signs and fun facts."
},
{
name: "Drawing Canvas",
folder: "drawing-canvas",
emoji: "🎨",
description: "Digital drawing pad with brush tools and emoji stamps."
},
{
name: "Text to Speech",
folder: "text-to-speech",
emoji: "🗣️",
description: "Convert text to speech with voice selection and speed control."
},
{
name: "Theme Toggle",
folder: "theme-toggle",
emoji: "🌗",
description: "Smooth theme switching with modern design patterns."
},
{
name: "Calendar",
folder: "calendar",
emoji: "📅",
description: "Interactive calendar with event management and navigation."
}

// Simply add more projects here when needed :D
];

// DOM elements
const projectsGrid = document.getElementById('projectsGrid');

// Create project cards
function createProjectCard(project, index) {
const card = document.createElement('div');
card.className = 'project-card';
card.style.setProperty('--index', index);

card.innerHTML = `
<div class="project-image">
${project.emoji}
</div>
<div class="project-content">
<h3 class="project-title">${project.name}</h3>
<p class="project-description">${project.description}</p>
<a href="${project.folder}/index.html" class="project-link">
View Project
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M7 17L17 7M17 7H7M17 7V17"/>
</svg>
</a>
</div>
`;

return card;
}

// Render all projects
function renderProjects() {
projects.forEach((project, index) => {
const card = createProjectCard(project, index);
projectsGrid.appendChild(card);
});
}

// Smooth scroll for navigation links
function initSmoothScroll() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
}

// Header scroll effect
function initHeaderScroll() {
const header = document.querySelector('.header');
let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;

if (currentScrollY > 100) {
header.style.background = 'rgba(255, 255, 255, 0.98)';
header.style.boxShadow = '0 1px 3px 0 rgb(0 0 0 / 0.1)';
} else {
header.style.background = 'rgba(255, 255, 255, 0.95)';
header.style.boxShadow = 'none';
}

lastScrollY = currentScrollY;
});
}

// Intersection Observer for animations
function initScrollAnimations() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
});

// Observe project cards
document.querySelectorAll('.project-card').forEach(card => {
observer.observe(card);
});
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
renderProjects();
initSmoothScroll();
initHeaderScroll();

// Delay animation initialization to ensure cards are rendered
setTimeout(initScrollAnimations, 100);
});

// Add loading states and error handling
window.addEventListener('load', () => {
document.body.classList.add('loaded');
});

// Handle project link clicks with loading states
document.addEventListener('click', (e) => {
if (e.target.closest('.project-link')) {
const link = e.target.closest('.project-link');
const card = link.closest('.project-card');

// Add loading state
card.style.opacity = '0.7';
card.style.transform = 'scale(0.98)';

// Reset after a short delay (in case navigation is slow)
setTimeout(() => {
card.style.opacity = '';
card.style.transform = '';
}, 1000);
}
});
Loading