Portfolio Wordpress Theme Online

/* responsive touches */ @media (max-width: 680px) { body { padding: 1rem; } h1 { font-size: 2.2rem; } .paper-header { padding: 1.5rem; } .portfolio-grid { gap: 1.2rem; } }

/* subtle grain overlay (paper texture effect) */ body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300" opacity="0.08"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>'); background-repeat: repeat; pointer-events: none; z-index: 0; } Portfolio WordPress Theme

/* navigation (WordPress-style menu) */ .wp-nav { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed #e2d5bb; } /* responsive touches */ @media (max-width: 680px) {

// simple smooth scrolling for anchor links (keeping paper style navigation) document.querySelectorAll('.wp-nav a[href^="#"], .wp-btn[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { const targetId = this.getAttribute('href'); if(targetId && targetId !== "#" && targetId.startsWith('#')) { const targetElement = document.querySelector(targetId); if(targetElement) { e.preventDefault(); targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } }); }); } h1 { font-size: 2.2rem

/* torn paper edge effect (subtle) */ .paper-header, .project-card, .about-paper, .contact-paper { position: relative; } .project-card::after, .about-paper::after { content: ''; position: absolute; bottom: -6px; left: 20px; width: 90%; height: 12px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 80%); filter: blur(3px); border-radius: 50%; pointer-events: none; }

.contact-item i { color: #b48b48; font-size: 1.1rem; }

/* portfolio grid (wordpress style loop) */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; margin: 2rem 0 3rem; }