Portfolio Wordpress — Theme

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

<footer> <p><i class="far fa-copyright"></i> 2026 Paper Portfolio — A WordPress Theme Concept. Crafted with <i class="fas fa-feather-alt"></i> and vintage vibes.</p> <p style="margin-top: 8px; font-size: 0.7rem;">Built to celebrate the beauty of paper textures — fully compatible with Gutenberg & classic editor.</p> </footer> </div>

.wp-nav a { text-decoration: none; font-weight: 500; color: #5b3f22; transition: 0.2s; font-size: 1rem; letter-spacing: -0.2px; padding: 0.3rem 0; border-bottom: 2px solid transparent; }

.contact-item { display: flex; align-items: center; gap: 10px; background: #f7efdf; padding: 0.6rem 1.2rem; border-radius: 60px; font-size: 0.9rem; } Portfolio WordPress Theme

.project-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: #b48b48; font-weight: 600; margin-bottom: 0.75rem; display: inline-block; }

<section id="about" class="about-paper"> <h2 class="section-title">About this theme</h2> <div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1rem;"> <div style="flex: 2; min-width: 200px;"> <p style="margin-bottom: 1rem; font-size: 1rem;">Inspired by the tactility of handmade paper, <strong>Paper Portfolio</strong> is a WordPress theme concept that blends editorial elegance with portfolio functionality. Every element — from the grain overlay to the rounded paper cards — evokes the warmth of a physical sketchbook.</p> <p style="margin-bottom: 1rem;">Perfect for artists, designers, writers, and creative studios who want their online presence to feel authentic, calm, and deeply human. Fully responsive, block-editor ready, and crafted with <i class="fas fa-heart" style="color:#c69c6d;"></i> for the WordPress ecosystem.</p> <div style="display: flex; gap: 12px; margin-top: 1.5rem;"> <span class="wp-btn" style="background:#efe2cd;"><i class="fab fa-wordpress"></i> Download theme</span> <span class="wp-btn"><i class="fas fa-file-alt"></i> Documentation</span> </div> </div> <div style="flex: 1; background: #f3ead9; border-radius: 24px; padding: 1.2rem; text-align: center; border: 1px solid #e7dcc4;"> <i class="fas fa-paper-plane" style="font-size: 2rem; color: #b48b48;"></i> <p style="font-size: 0.8rem; margin-top: 8px;">“Paper has more patience than people.” <br>— Anne Frank</p> </div> </div> </section>

/* 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 grid (wordpress style loop) */

/* main content container — like a paper sheet stack */ .paper-stack { max-width: 1400px; margin: 0 auto; position: relative; z-index: 2; }

.site-tagline { font-size: 1.1rem; color: #7a684c; border-left: 3px solid #d6bc8a; padding-left: 1rem; margin-top: 0.5rem; font-weight: 400; }

body { background: #d9cdb0; /* warm vintage paper background */ font-family: 'Inter', sans-serif; color: #2c2b28; line-height: 1.5; padding: 2rem 1.5rem; position: relative; } Fully responsive, block-editor ready, and crafted with <i

.project-card { background: #fffbf2; border-radius: 28px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.3s; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05), 0 0 0 1px #f3e9d8; }

.wp-btn:hover { background: #f4ecdb; border-color: #c6a86b; color: #3e2a16; }

/* typography paper style */ h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 500; letter-spacing: -0.01em; }

/* header paper card */ .paper-header { background: #fef8ed; padding: 2.5rem 2rem; border-radius: 32px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(230, 210, 170, 0.6); margin-bottom: 3rem; transition: all 0.2s ease; backdrop-filter: blur(0px); }