Autotel

Website for Kreen Foundation

Live Site: fundacionkreen.cl
Client: 2Litros Agency
Timeline: September 2025 - January 2026
Tech Stack: WordPress, Advanced Custom Fields (ACF), Sage Theme Framework, WPML

Project Overview

Fundación Kreen is a Chilean environmental foundation dedicated to protecting biodiversity in Patagonia's Aysén region. The organization needed a bilingual (Spanish/English) website that could effectively communicate their conservation efforts, showcase their research programs, and engage with the community.

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.

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.

The Challenge

The project presented several technical and design challenges:

  • Pixel-perfect implementation of a comprehensive graphic design provided by 2Litros
  • Modular architecture allowing editors to mix and match components across different page types
  • Bilingual functionality with proper content translation and URL structure
  • Multiple custom post types (Programs, News, Publications, Memories, Documents, Podcasts, Conservation Objects)
  • Complex interactive components including galleries with lightbox, animated backgrounds, team member hover effects, and custom navigation patterns
  • Performance optimization for media-heavy content while maintaining visual quality

Technical Approach

Theme Development

The site was built using the Sage theme framework, which provided a modern development workflow while maintaining WordPress compatibility. The Sage framework allowed for:

  • Component-based architecture
  • Modern PHP templating (<?= $variable ?>)
  • Organized asset management
  • Efficient development workflow

Advanced Custom Fields (ACF)

ACF was the backbone of the content management system, enabling:

  • Flexible page builder with reusable blocks that editors can arrange
  • Custom post type fields tailored to each content type
  • Repeater fields for dynamic content sections
  • Conditional logic for showing/hiding fields based on context

Key ACF implementations included:

  • Gallery blocks with configurable thumbnail display
  • Media + Content overlapping sections with video background support
  • Team member blocks with hover-state photo switching
  • Decorated content blocks with embed options
  • Accordion components for FAQ pages

Custom Post Types

Seven custom post types were created to organize different content types:

  1. Programas (Programs) - Conservation and research initiatives
  2. Noticias (News) - Updates and announcements
  3. Gráficas Ecológicas - Educational ecological graphics
  4. Memorias (Memories) - Annual reports
  5. Documentos (Documents) - Resource library
  6. Podcast - Audio content
  7. Objetos de Conservación (Conservation Objects) - Species and ecosystem profiles

Each post type features:

  • Custom taxonomies for organization
  • Related posts functionality
  • Breadcrumb navigation
  • SEO optimization via Yoast

Key Features

Dynamic Components

The site features a library of reusable components that can be combined in any order:

Content Blocks:

  • Text + Media (with image/video support)
  • Overlapping Media + Content (with background video)
  • Two-column text layouts
  • Decorated content with embeds
  • Custom HTML sections with animations

Interactive Elements:

  • Advanced gallery with lightbox navigation (zoom, pan, image captions)
  • Animated background graphics
  • Team member cards with hover-triggered photo changes
  • Accordion FAQ sections
  • News carousel with touch-friendly navigation

Navigation:

  • Sticky header that hides on scroll down, reveals on scroll up
  • Anchor-point based sub-navigation for the Sanctuary page
  • Breadcrumb trails
  • Active menu item highlighting

Homepage Features

The homepage showcases the foundation's work through:

  • Full-width hero video with animated SVG overlay
  • Featured programs section with custom cards
  • News carousel with featured article
  • Sanctuary highlight with overlapping content design
  • Ecological graphics showcase
  • Newsletter subscription (MailerLite integration)

Performance & Optimization

  • WP Fastest Cache configured for optimal caching
  • Image optimization with special handling for retina displays
  • Lazy loading for images and videos
  • Video poster images to prevent blank frames during loading
  • SVG support enabled for crisp graphics at any resolution

Security & Maintenance

  • Login attempt limiting to prevent brute force attacks
  • Google reCAPTCHA integration in contact forms
  • Gravity Forms for robust form handling
  • Regular backups via All-in-One WP Migration
  • Google Search Console sitemap submission

Design Implementation

Animation & Interaction

Special attention was paid to subtle animations that enhance user experience without overwhelming:

  • Fade-in animations for images on scroll
  • Typing effect for key messaging (with optimized timing)
  • Gallery expansion with smooth transitions
  • Mobile menu with fast, smooth expansion
  • Hover effects on team photos and post cards

Responsive Design

Fully responsive across all devices with special considerations for:

  • Mobile-optimized navigation with larger touch targets
  • Flexible gallery layouts adapting to screen size
  • Vertical image handling in galleries
  • Touch-friendly carousels and swipe gestures
  • Responsive typography scaling

Development Highlights

Docker Development Environment

A custom Docker Compose setup was created for local development, providing:

  • Consistent development environment
  • Easy database management via phpMyAdmin
  • Version-controlled configuration
  • Simplified team collaboration

View the live site: www.fundacionkreen.cl