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

/* 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; }

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

.project-content { padding: 1.6rem 1.5rem 1.8rem; } Portfolio WordPress Theme

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

<script> // small script to simulate WordPress theme live preview / dynamic year (function() { // dynamic copyright year (optional) const footerYear = document.querySelector('footer p:first-child'); if(footerYear) { const currentYear = new Date().getFullYear(); footerYear.innerHTML = `<i class="far fa-copyright"></i> ${currentYear} Paper Portfolio — A WordPress Theme Concept. Crafted with <i class="fas fa-feather-alt"></i> and vintage vibes.`; }

<section id="contact" class="contact-paper"> <h2 class="section-title">Get in touch</h2> <p style="margin: 1rem 0 0.8rem 0; color: #5b4a33;">Have a project in mind? Send a letter (or an email) — we reply within 24h.</p> <div class="contact-details"> <div class="contact-item"><i class="fas fa-envelope"></i> hello@paperportfolio.wp</div> <div class="contact-item"><i class="fas fa-phone-alt"></i> +1 (800) 789-PAPER</div> <div class="contact-item"><i class="fab fa-instagram"></i> @paper_portfolio</div> <div class="contact-item"><i class="fab fa-github"></i> paper-theme</div> </div>  <div style="margin-top: 2rem; background: #fffbf0; padding: 1.2rem; border-radius: 28px; border: 1px solid #eee1ca;"> <form action="#" method="post" style="display: flex; flex-wrap: wrap; gap: 1rem;"> <input type="text" placeholder="Your name" style="flex: 1; min-width: 160px; background: #fffef7; border: 1px solid #e5d6b8; padding: 0.8rem 1rem; border-radius: 60px; font-family: inherit;"> <input type="email" placeholder="Email address" style="flex: 1; min-width: 200px; background: #fffef7; border: 1px solid #e5d6b8; padding: 0.8rem 1rem; border-radius: 60px; font-family: inherit;"> <button type="submit" class="wp-btn" style="background:#e9ddc7; border: none; cursor: pointer;"><i class="fas fa-paper-plane"></i> Send message</button> </form> <p style="font-size: 0.7rem; margin-top: 0.8rem; color:#aa9a7a;"><i class="fas fa-lock"></i> Your info stays between these paper fibers.</p> </div> </section> /* portfolio grid (wordpress style loop) */

footer { margin-top: 3rem; text-align: center; padding: 1.5rem 0.5rem; font-size: 0.8rem; color: #7b6b50; border-top: 1px solid #e2d2b5; }

/* 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; }

h1 { font-size: 3.2rem; font-weight: 600; background: linear-gradient(135deg, #3a2c1f, #6b4e2e); background-clip: text; -webkit-background-clip: text; color: transparent; margin-bottom: 0.5rem; } Fully responsive, block-editor ready, and crafted with <i

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

/* 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; }

.project-excerpt { color: #4a4238; font-size: 0.9rem; margin-bottom: 1.2rem; line-height: 1.45; }

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

Create Products

Automate Marketing

Sell Digital Products

Help

Inspiration

Free Tools