The Vision
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.
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.
The Process
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:
• Color Palette: Clay (#c17b5c), Moss (#4c6b4a), Rice (#fff9ed), Ash (#e3dbcf)
• Typography: Playfair Display for headings (serif, earthy), Inter for body text (clean, readable)
• Shapes: Asymmetric border radii (50px 20px 50px 20px) that morph on hover
• Textures: Himalayan mountain overlay with SVG patterns
• Animations: liquidShift, liquidMorph, hammerSwing animations
Key Features
- Dynamic Content Management
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.
- Organic Design System
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.
- Automatic Resume Generator
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!
- Blog System
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.
- Case Studies
Each project can have a detailed case study with challenge, solution, and results sections. This helps tell the complete story behind each build.
Technical Implementation
The site uses Laravel 11 with MySQL database. Key packages include:
• Filament PHP v3 — Admin panel
• Spatie Media Library — Image management
• Spatie Sluggable — URL slugs
• barryvdh/laravel-dompdf — PDF generation
• Livewire — Dynamic components
Challenges Overcome
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.
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!
What I Learned
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.
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.
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.
