Featured Project

Project

Project Title

Description...

/* Typography */ h1, h2, h3 { font-family: 'Poppins', sans-serif; } body { font-family: 'Open Sans', sans-serif; color: var(--text-dark); } code { font-family: 'Fira Code', monospace; } /* Base Styles */ body { background: var(--neutral); transition: background 0.3s ease; } /* Sticky Header */ .sticky-header { position: sticky; top: 0; background: var(--primary); color: var(--text-light); } /* Card Layout */ .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 2rem; } .card { background: white; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* Dark Mode Toggle */ .theme-toggle { cursor: pointer; transition: transform 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); } /* Responsive Menu */ @media (max-width: 768px) { .nav-menu { position: fixed; top: 70px; right: -100%; background: var(--primary); transition: right 0.3s ease; } .nav-menu.active { right: 0; } } // theme.js // Dark Mode Toggle const themeToggle = document.querySelector('.theme-toggle'); themeToggle.addEventListener('click', () => { document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'light' ? 'dark' : 'light' ); }); // Hamburger Menu const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); }); // Smooth Scroll document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Lazy Load Images const lazyImages = document.querySelectorAll('img[loading="lazy"]'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); lazyImages.forEach(img => observer.observe(img));
:root { --primary: #2C3E50; /* Change these values */ --secondary: #FF6B6B; --accent: #4ECDC4; } // Add to theme.js const viewToggle = document.createElement('button'); viewToggle.textContent = 'Switch View'; viewToggle.addEventListener('click', () => { document.querySelector('.grid-container').classList.toggle('list-view'); }); [data-theme="dark"] { transition: background 0.5s ease, color 0.5s ease; } 

    .your-code-here { color: var(--accent); }