Soil & Code Portfolio

A personal portfolio website with organic/roots aesthetic, built with Laravel and Filament. Features dynamic content management, blog system, case studies, and automatic resume generation.

• <h2>The Vision</h2>
  <p>I wanted to create a portfolio that didn't look like every other developer site. Inspired by the terraced fields of Nepal and the pottery of my homeland, I envisioned something organic—something that felt handmade, like clay pots formed on a wheel.</p>
  
  <p>The name "Soil & Code" came from this vision. Just as farmers tend soil with patience and care, I wanted to craft code with the same generational wisdom. Every line should feel intentional, every design element should remind you of something natural.</p>
  
  <h2>The Process</h2>
  <p>I started with Laravel 11 for the backend and Filament PHP for the admin panel. The key was creating a unique design language that felt organic yet functional:</p>
  
  <ul>
  <li><strong>Color Palette</strong>: Clay (#c17b5c), Moss (#4c6b4a), Rice (#fff9ed), Ash (#e3dbcf)</li>
  <li><strong>Typography</strong>: Playfair Display for headings (serif, earthy), Inter for body text (clean, readable)</li>
  <li><strong>Shapes</strong>: Asymmetric border radii (50px 20px 50px 20px) that morph on hover</li>
  <li><strong>Textures</strong>: Himalayan mountain overlay with SVG patterns</li>
  <li><strong>Animations</strong>: liquidShift, liquidMorph, hammerSwing animations</li>
  </ul>
  
  <h2>Key Features</h2>
  
  <h3>1. Dynamic Content Management</h3>
  <p>Built with Filament PHP v3, the admin panel allows me to update all content without touching code. I can add projects, write blog posts, update skills, and change theme settings—all through a beautiful, intuitive interface.</p>
  
  <h3>2. Organic Design System</h3>
  <p>The entire design follows organic principles: clay-colored buttons, moss-green accents, pottery-shaped cards, and wavy underlines that mimic rice terraces. The Himalayan texture overlay adds depth and cultural connection.</p>
  
  <h3>3. Automatic Resume Generator</h3>
  <p>One of my favorite features! The site automatically generates a PDF resume from my database content. When I update my experience, skills, or projects, the resume updates automatically. No more manual PDF editing!</p>
  
  <h3>4. Blog System</h3>
  <p>A fully functional blog with categories, tags, and featured posts. I can write about my learning journey, share code snippets, and document my progress as a developer.</p>
  
  <h3>5. Case Studies</h3>
  <p>Each project can have a detailed case study with challenge, solution, and results sections. This helps tell the complete story behind each build.</p>
  
  <h2>Technical Implementation</h2>
  <p>The site uses Laravel 11 with MySQL database. Key packages include:</p>
  <ul>
  <li>Filament PHP v3 - Admin panel</li>
  <li>Spatie Media Library - Image management</li>
  <li>Spatie Sluggable - URL slugs</li>
  <li>barryvdh/laravel-dompdf - PDF generation</li>
  <li>Livewire - Dynamic components</li>
  </ul>
  
  <h2>Challenges Overcome</h2>
  <p>The biggest challenge was implementing the organic design consistently across all devices. I used CSS custom properties for the color palette and created reusable classes for pottery shapes. Making the design responsive while maintaining the organic feel required careful media query planning.</p>
  
  <p>Another challenge was the automatic resume generator. Getting the PDF to look exactly like my design took multiple iterations, but the result is worth it—a resume that updates itself!</p>
  
  <h2>What I Learned</h2>
  <p>This project taught me that code can be both functional and beautiful. The organic design constraints pushed me to think creatively about user experience. I learned the importance of building systems that are easy to update—the admin panel means I can change content without touching code.</p>
  
  <p>I also deepened my understanding of Laravel's ecosystem, from Eloquent relationships to custom helpers and view composers. The project became a complete learning experience in full-stack development.</p>

The Challenge

The biggest challenge was translating organic, natural concepts into CSS and HTML. How do you make code feel like clay? How do you make a website feel like it was hand-formed? I spent weeks experimenting with border radii, trying to create shapes that didn't look like perfect rectangles. Creating a design system that felt natural while remaining functional and accessible was a significant challenge.

The Solution

I built a custom design system using CSS custom properties for the organic color palette (clay, moss, rice, ash). For shapes, I used asymmetric border radii (50px 20px 50px 20px) that morph on hover. The admin panel is powered by Filament PHP, making all content dynamic. I added a theme_settings table that stores all text content, making the entire site editable through the admin panel. The automatic resume generator uses DOMPDF to create PDFs from database content.

The Results

A unique, fully dynamic portfolio that reflects my Himalayan roots. The site loads quickly, is SEO-optimized, and features a blog, case studies, and automatic resume generation. All content can be updated through the admin panel without touching code. The design has received positive feedback for its originality and authentic feel.