Frontend Overview

This chapter has been written many times and can be described in several ways, but to summarize, let’s break it down into different sections:

First, the HTML and SCSS foundation originally crafted by Andres (UI/Dev) and Meche (UI/UX) and has grown richer thanks to everyone’s contributions over time. While it has a stable core over the past 2–3 years, it continues to evolve to meet our team’s needs.

Folder structures may vary between projects—Astro, Nuxt, WordPress, Vue, and so on—but our approach to markup and styling remains consistent. Some projects adopt more advanced versions than others, yet they all share the same underlying principles.

On the JavaScript side, we’re continuously improving our tooling and workflows to support a learning-oriented team. Right now, we’re focused on democratizing that knowledge so everyone has the tools to identify and solve the same problems.

Once you’ve completed your 30-/60-/90-day training, you’ll see this isn’t just about you adapting to our methods—it’s a shared journey. Every suggestion for improvement is welcome as we build on our collective experience. Unlike many companies that adopt frameworks on fixed schedules, Terra evolves only when real needs arise, forging an internal language that empowers us to accomplish extraordinary things together.

@amaia folder structure corroborar

📦 {client-acronim}-wp-theme/
├── 📦 components/          // All PHP components live here (e.g. buttons, cards)
├── 📦 config/              // Config files (SFTP deploy, Vite settings)
├── 📦 documentation/       // Project docs: checklist, performance tips, etc.
├── 📦 flexible/            // Hero sections and modules used on the site
├── 📦 functions/
│   ├── default/            // Terra's default framework (reusable functions)
│   └── project/            // Custom functions for this specific project
├── 📦 public/              // Files publicly accessible (e.g. favicon, robots.txt)
├── 📦 src/
│   ├── 📦 js/              // JavaScript code
│   └── 📦 scss/            // SCSS stylesheets
├── .env.local              // Local environment variables
├── .env.production         // Production environment variables
├── .env.virtual            // Virtual/staging environment variables
├── .gitignore              // Files and folders Git should ignore
├── 404.php                 // Custom 404 error page
├── footer.php              // Global footer template
├── functions.php           // Loads theme features and functions
├── gulpfile.js             // Used for deploying the site
├── header.php              // Global header template
├── package.json            // Project dependencies and scripts
├── index.php               // Main entry point for WordPress
├── style.css               // Main global SCSS file (WP config)
└── vite.config.js          // Vite build tool config