Portfolio — Wordpress Theme

<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>

.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; } Portfolio WordPress Theme

/* wordpress admin bar simulation (optional aesthetic) */ .mock-wp-toolbar { background: #1e1e1e; color: #ddd; font-size: 0.7rem; padding: 4px 12px; display: flex; justify-content: flex-end; gap: 20px; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; font-family: monospace; backdrop-filter: blur(4px); background: rgba(0,0,0,0.6); } body { padding-top: 28px; } @media (max-width: 600px) { body { padding-top: 24px; } } .mock-wp-toolbar span { cursor: default; } </style> </head> <body> a href="#" class="wp-btn"&gt

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

// 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' }); } } }); });

<section id="portfolio"> <h2 class="section-title" style="margin-bottom: 1.5rem;">Featured Projects</h2> <div class="portfolio-grid">  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/20/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="far fa-folder-open"></i> Brand Identity</span> <h3 class="project-title">Art of Letterpress</h3> <p class="project-excerpt">A tactile rebrand for a vintage printing studio. Handcrafted typography and natural paper textures define this visual identity.</p> <a href="#" class="wp-btn">View case study <i class="fas fa-arrow-right"></i></a> </div> </article>  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/29/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="fas fa-palette"></i> Editorial Design</span> <h3 class="project-title">Wildflower Journal</h3> <p class="project-excerpt">Quarterly magazine celebrating botanical illustration. Designed with uncoated paper simulation and organic layouts.</p> <a href="#" class="wp-btn">Explore <i class="fas fa-arrow-right"></i></a> </div> </article>  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/169/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="fas fa-laptop-code"></i> Web Design</span> <h3 class="project-title">Studio Noda</h3> <p class="project-excerpt">Minimalist portfolio site for a ceramic artist, using warm parchment tones & hand-drawn elements.</p> <a href="#" class="wp-btn">Live preview <i class="fas fa-arrow-right"></i></a> </div> </article>  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/42/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="fas fa-camera"></i> Photography</span> <h3 class="project-title">Analog Memories</h3> <p class="project-excerpt">Film photography archive presented in a vintage album style, with grain overlays and handwritten captions.</p> <a href="#" class="wp-btn">View gallery <i class="fas fa-arrow-right"></i></a> </div> </article>  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/39/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="fas fa-drafting-compass"></i> Architecture</span> <h3 class="project-title">Sketchbook Series</h3> <p class="project-excerpt">Hand-drawn architectural concepts presented on recycled paper stock — concept sketches & mood boards.</p> <a href="#" class="wp-btn">Discover <i class="fas fa-arrow-right"></i></a> </div> </article>  <article class="project-card"> <div class="card-media" style="background-image: url('https://picsum.photos/id/147/600/400');"></div> <div class="project-content"> <span class="project-category"><i class="fas fa-icons"></i> Illustration</span> <h3 class="project-title">Fable & Ink</h3> <p class="project-excerpt">Children's book illustrations with watercolor textures, inspired by antique paper and natural fibers.</p> <a href="#" class="wp-btn">Read story <i class="fas fa-arrow-right"></i></a> </div> </article> </div> </section>

.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; }