diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7d435b --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + Micro Projects Collection + + + + +
+
+ + +
+
+ +
+
+
+
+

Explore Interactive Web Projects

+

+ A curated collection of 26 mini web applications built with HTML, CSS, and JavaScript. + Perfect for learning, inspiration, or quick utilities. +

+ + Browse Projects + + + + +
+
+
+ +
+
+

Projects

+
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..4f8df9d --- /dev/null +++ b/script.js @@ -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 = ` +
+ ${project.emoji} +
+
+

${project.name}

+

${project.description}

+ + View Project + + + + +
+ `; + + 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); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..2425623 --- /dev/null +++ b/styles.css @@ -0,0 +1,382 @@ +:root { + --primary-color: #2563eb; + --primary-hover: #1d4ed8; + --secondary-color: #64748b; + --background: #ffffff; + --surface: #f8fafc; + --border: #e2e8f0; + --text-primary: #0f172a; + --text-secondary: #64748b; + --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + --border-radius: 12px; + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-primary); + background: var(--background); + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +/* Header */ +.header { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--border); + z-index: 1000; + transition: var(--transition); +} + +.header .container { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.5rem; +} + +.logo h1 { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); + margin-bottom: 0.25rem; +} + +.subtitle { + font-size: 0.875rem; + color: var(--text-secondary); + font-weight: 400; +} + +.nav { + display: flex; + align-items: center; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: var(--text-secondary); + font-weight: 500; + transition: var(--transition); + display: flex; + align-items: center; + gap: 0.5rem; +} + +.nav-link:hover { + color: var(--primary-color); +} + +.github-link { + background: var(--text-primary); + color: white; + padding: 0.5rem 1rem; + border-radius: 6px; + transition: var(--transition); +} + +.github-link:hover { + background: var(--primary-color); + color: white; + transform: translateY(-1px); +} + +/* Hero Section */ +.hero { + padding: 8rem 0 4rem; + background: var(--gradient); + color: white; + text-align: center; + position: relative; + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.hero-content { + position: relative; + z-index: 1; + max-width: 600px; + margin: 0 auto; + animation: fadeInUp 1s ease-out; +} + +.hero-title { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1.5rem; + line-height: 1.2; +} + +.hero-description { + font-size: 1.25rem; + margin-bottom: 2.5rem; + opacity: 0.9; + line-height: 1.6; +} + +.cta-button { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: white; + color: var(--primary-color); + padding: 1rem 2rem; + border-radius: var(--border-radius); + text-decoration: none; + font-weight: 600; + transition: var(--transition); + box-shadow: var(--shadow-lg); +} + +.cta-button:hover { + transform: translateY(-2px); + box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); +} + +/* Projects Section */ +.projects { + padding: 5rem 0; + background: var(--surface); +} + +.section-title { + text-align: center; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 3rem; + color: var(--text-primary); +} + +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.project-card { + background: white; + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: var(--shadow); + transition: var(--transition); + opacity: 0; + transform: translateY(20px); + animation: fadeInUp 0.6s ease-out forwards; +} + +.project-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.project-card:nth-child(n) { + animation-delay: calc(var(--index) * 0.1s); +} + +.project-image { + width: 100%; + height: 200px; + background: var(--gradient); + display: flex; + align-items: center; + justify-content: center; + font-size: 3rem; + color: white; + position: relative; + overflow: hidden; +} + +.project-image::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); + transform: translateX(-100%); + transition: transform 0.6s; +} + +.project-card:hover .project-image::before { + transform: translateX(100%); +} + +.project-content { + padding: 1.5rem; +} + +.project-title { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--text-primary); +} + +.project-description { + color: var(--text-secondary); + margin-bottom: 1.5rem; + line-height: 1.5; +} + +.project-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + transition: var(--transition); +} + +.project-link:hover { + color: var(--primary-hover); + gap: 0.75rem; +} + +/* Footer */ +.footer { + background: var(--text-primary); + color: white; + padding: 2rem 0; + text-align: center; +} + +.footer .container { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 1rem; +} + +.footer-links { + display: flex; + gap: 2rem; +} + +.footer-links a { + color: rgba(255, 255, 255, 0.7); + text-decoration: none; + transition: var(--transition); +} + +.footer-links a:hover { + color: white; +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .header .container { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .nav { + gap: 1rem; + } + + .hero { + padding: 6rem 0 3rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-description { + font-size: 1.125rem; + } + + .section-title { + font-size: 2rem; + } + + .projects-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .footer .container { + flex-direction: column; + text-align: center; + } + + .footer-links { + justify-content: center; + } +} + +@media (max-width: 480px) { + .container { + padding: 0 1rem; + } + + .hero-title { + font-size: 1.75rem; + } + + .cta-button { + padding: 0.875rem 1.5rem; + } +} + +/* Smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Loading animation for project cards */ +.project-card.loading { + opacity: 0; + transform: translateY(20px); +} + +.project-card.loaded { + opacity: 1; + transform: translateY(0); +} \ No newline at end of file