[{"data":1,"prerenderedAt":582},["ShallowReactive",2],{"posts:\u002Fposts\u002F2026-01-27-kreen":3},{"id":4,"title":5,"body":6,"categories":564,"date":566,"description":567,"extension":568,"image":46,"lang":569,"meta":570,"navigation":571,"path":572,"seo":573,"stem":574,"tags":575,"titleInPicture":580,"__hash__":581},"posts\u002Fposts\u002F2026-01-27-kreen.md","Website for Kreen Foundation",{"type":7,"value":8,"toc":539},"minimark",[9,43,47,52,55,58,61,65,68,108,112,117,124,143,147,150,176,179,196,200,203,248,251,265,269,273,276,281,298,303,320,325,339,343,346,366,370,402,406,438,442,446,449,481,485,488,505,509,513,516,530],[10,11,12,16,17,24,27,30,31,33,36,37,39,42],"p",{},[13,14,15],"strong",{},"Live Site:"," ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fwww.fundacionkreen.cl\u002F",[22],"nofollow","fundacionkreen.cl",[25,26],"br",{},[13,28,29],{},"Client:"," 2Litros Agency",[25,32],{},[13,34,35],{},"Timeline:"," September 2025 - January 2026",[25,38],{},[13,40,41],{},"Tech Stack:"," WordPress, Advanced Custom Fields (ACF), Sage Theme Framework, WPML",[44,45],"img",{"src":46},"\u002Fimages\u002F2026\u002F01\u002FKreen-screenshot.jpg",[48,49,51],"h2",{"id":50},"project-overview","Project Overview",[10,53,54],{},"Fundación Kreen is a Chilean environmental foundation dedicated to protecting biodiversity in Patagonia's Aysén region. The organization needed a bilingual (Spanish\u002FEnglish) website that could effectively communicate their conservation efforts, showcase their research programs, and engage with the community.",[10,56,57],{},"The project required translating a detailed graphic design into a fully functional, modular WordPress site with an intuitive content management system that would allow the foundation's team to easily update and create new content.",[10,59,60],{},"This project was developed in collaboration with 2Litros Agency, who provided the graphic design, creative direction, and quality assurance. They also guided me with what plugins to use and their details.",[48,62,64],{"id":63},"the-challenge","The Challenge",[10,66,67],{},"The project presented several technical and design challenges:",[69,70,71,78,84,90,96,102],"ul",{},[72,73,74,77],"li",{},[13,75,76],{},"Pixel-perfect implementation"," of a comprehensive graphic design provided by 2Litros",[72,79,80,83],{},[13,81,82],{},"Modular architecture"," allowing editors to mix and match components across different page types",[72,85,86,89],{},[13,87,88],{},"Bilingual functionality"," with proper content translation and URL structure",[72,91,92,95],{},[13,93,94],{},"Multiple custom post types"," (Programs, News, Publications, Memories, Documents, Podcasts, Conservation Objects)",[72,97,98,101],{},[13,99,100],{},"Complex interactive components"," including galleries with lightbox, animated backgrounds, team member hover effects, and custom navigation patterns",[72,103,104,107],{},[13,105,106],{},"Performance optimization"," for media-heavy content while maintaining visual quality",[48,109,111],{"id":110},"technical-approach","Technical Approach",[113,114,116],"h3",{"id":115},"theme-development","Theme Development",[10,118,119,120,123],{},"The site was built using the ",[13,121,122],{},"Sage theme framework",", which provided a modern development workflow while maintaining WordPress compatibility. The Sage framework allowed for:",[69,125,126,129,137,140],{},[72,127,128],{},"Component-based architecture",[72,130,131,132,136],{},"Modern PHP templating (",[133,134,135],"code",{},"\u003C?= $variable ?>",")",[72,138,139],{},"Organized asset management",[72,141,142],{},"Efficient development workflow",[113,144,146],{"id":145},"advanced-custom-fields-acf","Advanced Custom Fields (ACF)",[10,148,149],{},"ACF was the backbone of the content management system, enabling:",[69,151,152,158,164,170],{},[72,153,154,157],{},[13,155,156],{},"Flexible page builder"," with reusable blocks that editors can arrange",[72,159,160,163],{},[13,161,162],{},"Custom post type fields"," tailored to each content type",[72,165,166,169],{},[13,167,168],{},"Repeater fields"," for dynamic content sections",[72,171,172,175],{},[13,173,174],{},"Conditional logic"," for showing\u002Fhiding fields based on context",[10,177,178],{},"Key ACF implementations included:",[69,180,181,184,187,190,193],{},[72,182,183],{},"Gallery blocks with configurable thumbnail display",[72,185,186],{},"Media + Content overlapping sections with video background support",[72,188,189],{},"Team member blocks with hover-state photo switching",[72,191,192],{},"Decorated content blocks with embed options",[72,194,195],{},"Accordion components for FAQ pages",[113,197,199],{"id":198},"custom-post-types","Custom Post Types",[10,201,202],{},"Seven custom post types were created to organize different content types:",[204,205,206,212,218,224,230,236,242],"ol",{},[72,207,208,211],{},[13,209,210],{},"Programas"," (Programs) - Conservation and research initiatives",[72,213,214,217],{},[13,215,216],{},"Noticias"," (News) - Updates and announcements",[72,219,220,223],{},[13,221,222],{},"Gráficas Ecológicas"," - Educational ecological graphics",[72,225,226,229],{},[13,227,228],{},"Memorias"," (Memories) - Annual reports",[72,231,232,235],{},[13,233,234],{},"Documentos"," (Documents) - Resource library",[72,237,238,241],{},[13,239,240],{},"Podcast"," - Audio content",[72,243,244,247],{},[13,245,246],{},"Objetos de Conservación"," (Conservation Objects) - Species and ecosystem profiles",[10,249,250],{},"Each post type features:",[69,252,253,256,259,262],{},[72,254,255],{},"Custom taxonomies for organization",[72,257,258],{},"Related posts functionality",[72,260,261],{},"Breadcrumb navigation",[72,263,264],{},"SEO optimization via Yoast",[48,266,268],{"id":267},"key-features","Key Features",[113,270,272],{"id":271},"dynamic-components","Dynamic Components",[10,274,275],{},"The site features a library of reusable components that can be combined in any order:",[10,277,278],{},[13,279,280],{},"Content Blocks:",[69,282,283,286,289,292,295],{},[72,284,285],{},"Text + Media (with image\u002Fvideo support)",[72,287,288],{},"Overlapping Media + Content (with background video)",[72,290,291],{},"Two-column text layouts",[72,293,294],{},"Decorated content with embeds",[72,296,297],{},"Custom HTML sections with animations",[10,299,300],{},[13,301,302],{},"Interactive Elements:",[69,304,305,308,311,314,317],{},[72,306,307],{},"Advanced gallery with lightbox navigation (zoom, pan, image captions)",[72,309,310],{},"Animated background graphics",[72,312,313],{},"Team member cards with hover-triggered photo changes",[72,315,316],{},"Accordion FAQ sections",[72,318,319],{},"News carousel with touch-friendly navigation",[10,321,322],{},[13,323,324],{},"Navigation:",[69,326,327,330,333,336],{},[72,328,329],{},"Sticky header that hides on scroll down, reveals on scroll up",[72,331,332],{},"Anchor-point based sub-navigation for the Sanctuary page",[72,334,335],{},"Breadcrumb trails",[72,337,338],{},"Active menu item highlighting",[113,340,342],{"id":341},"homepage-features","Homepage Features",[10,344,345],{},"The homepage showcases the foundation's work through:",[69,347,348,351,354,357,360,363],{},[72,349,350],{},"Full-width hero video with animated SVG overlay",[72,352,353],{},"Featured programs section with custom cards",[72,355,356],{},"News carousel with featured article",[72,358,359],{},"Sanctuary highlight with overlapping content design",[72,361,362],{},"Ecological graphics showcase",[72,364,365],{},"Newsletter subscription (MailerLite integration)",[113,367,369],{"id":368},"performance-optimization","Performance & Optimization",[69,371,372,378,384,390,396],{},[72,373,374,377],{},[13,375,376],{},"WP Fastest Cache"," configured for optimal caching",[72,379,380,383],{},[13,381,382],{},"Image optimization"," with special handling for retina displays",[72,385,386,389],{},[13,387,388],{},"Lazy loading"," for images and videos",[72,391,392,395],{},[13,393,394],{},"Video poster images"," to prevent blank frames during loading",[72,397,398,401],{},[13,399,400],{},"SVG support"," enabled for crisp graphics at any resolution",[113,403,405],{"id":404},"security-maintenance","Security & Maintenance",[69,407,408,414,420,426,432],{},[72,409,410,413],{},[13,411,412],{},"Login attempt limiting"," to prevent brute force attacks",[72,415,416,419],{},[13,417,418],{},"Google reCAPTCHA"," integration in contact forms",[72,421,422,425],{},[13,423,424],{},"Gravity Forms"," for robust form handling",[72,427,428,431],{},[13,429,430],{},"Regular backups"," via All-in-One WP Migration",[72,433,434,437],{},[13,435,436],{},"Google Search Console"," sitemap submission",[48,439,441],{"id":440},"design-implementation","Design Implementation",[113,443,445],{"id":444},"animation-interaction","Animation & Interaction",[10,447,448],{},"Special attention was paid to subtle animations that enhance user experience without overwhelming:",[69,450,451,457,463,469,475],{},[72,452,453,456],{},[13,454,455],{},"Fade-in animations"," for images on scroll",[72,458,459,462],{},[13,460,461],{},"Typing effect"," for key messaging (with optimized timing)",[72,464,465,468],{},[13,466,467],{},"Gallery expansion"," with smooth transitions",[72,470,471,474],{},[13,472,473],{},"Mobile menu"," with fast, smooth expansion",[72,476,477,480],{},[13,478,479],{},"Hover effects"," on team photos and post cards",[113,482,484],{"id":483},"responsive-design","Responsive Design",[10,486,487],{},"Fully responsive across all devices with special considerations for:",[69,489,490,493,496,499,502],{},[72,491,492],{},"Mobile-optimized navigation with larger touch targets",[72,494,495],{},"Flexible gallery layouts adapting to screen size",[72,497,498],{},"Vertical image handling in galleries",[72,500,501],{},"Touch-friendly carousels and swipe gestures",[72,503,504],{},"Responsive typography scaling",[48,506,508],{"id":507},"development-highlights","Development Highlights",[113,510,512],{"id":511},"docker-development-environment","Docker Development Environment",[10,514,515],{},"A custom Docker Compose setup was created for local development, providing:",[69,517,518,521,524,527],{},[72,519,520],{},"Consistent development environment",[72,522,523],{},"Easy database management via phpMyAdmin",[72,525,526],{},"Version-controlled configuration",[72,528,529],{},"Simplified team collaboration",[10,531,532,16,535],{},[13,533,534],{},"View the live site:",[18,536,538],{"href":20,"rel":537},[22],"www.fundacionkreen.cl",{"title":540,"searchDepth":541,"depth":541,"links":542},"",2,[543,544,545,551,557,561],{"id":50,"depth":541,"text":51},{"id":63,"depth":541,"text":64},{"id":110,"depth":541,"text":111,"children":546},[547,549,550],{"id":115,"depth":548,"text":116},3,{"id":145,"depth":548,"text":146},{"id":198,"depth":548,"text":199},{"id":267,"depth":541,"text":268,"children":552},[553,554,555,556],{"id":271,"depth":548,"text":272},{"id":341,"depth":548,"text":342},{"id":368,"depth":548,"text":369},{"id":404,"depth":548,"text":405},{"id":440,"depth":541,"text":441,"children":558},[559,560],{"id":444,"depth":548,"text":445},{"id":483,"depth":548,"text":484},{"id":507,"depth":541,"text":508,"children":562},[563],{"id":511,"depth":548,"text":512},[565],"portfolio","2026-01-27","WordPress site for Fundación Kreen, made with 2Litros Agency","md",null,{},true,"\u002Fposts\u002F2026-01-27-kreen",{"title":5,"description":567},"posts\u002F2026-01-27-kreen",[576,577,578,579],"area_web","area_development","context_for-clients","tool_wordpress",false,"mTdoa7CLmNMk2kPczUN3WdeR58PCd4ZZ4uzTEN75vsU",1790793425507]