— Website exploring Mexican gastronomy

_{🗓️ Developed in April 2026}

Saborea México is a responsive, multi-page website dedicated to Mexican gastronomy. It invites visitors to discover the country's culinary traditions through featured recipes, an overview of several Mexican regions, and in-depth pages on two iconic dishes: tacos and nachos, covering their history, ingredients, and preparation.

Beyond the content, the project is a hands-on exercise in modern front-end development: a mobile-first, accessible (W3C/WCAG) site built with Sass, PostHTML and Parcel, structured with ITCSS + BEM + OOCSS, and tuned for performance through image optimization, responsive images, lazy loading and PageSpeed Insights improvements.

✅ Pages

Home Page: landing page presenting featured recipes and information about several regions of Mexico.
Recipes Page: a collection of 4 typical Mexican recipes.
Tacos Page: a dedicated page covering the history of tacos, their ingredients, and how to prepare them.
Nachos Page: a dedicated page covering the history of nachos, their ingredients, and how to prepare them.
Sources Page: documentation and links to the sources consulted throughout the project's development.

⚡ Features

Phase 1️⃣

Initial configurations.
Pages' structure and content.
Use of preprocessors and postprocessors.
Semantics and accessibility following W3C guidelines.

Phase 2️⃣

Appropiate image format selection.
Three phase (+ baseline) image optimization:
- (0) Original images.
- (1) Resizing.
- (2) Sharp configuration.
- (3) Format conversion.
The tests were done with the Network DevTools with Slow 4G, Hard Reload and studying the transferred resource size and loading time.

(0) Original images:

(1) Resized images:

(2) Images with sharp:

(3) Images with format conversion:

(0 vs 1+2+3) Table with all optimizations:

Responsive image techniques:
- Resolution switching (size) for images in /, /categoria, /det1 and /det2.
- Resolution switching (dpi) for the header and footer icon.
- Art direction for images in /, /det1 and /det2.

Images created for art direction:

Data from images with art direction applied:

Table with all optimizations + responsive image techniques:

CSS element animations, clip-path usage and SVG addition.

Phase 3️⃣

Two phase (+ baseline) page load performance analysis:
- (1) Original page (With Phase 2️⃣ optimizations).
- (2) Lazy loading and asynchronous script loading.
- (3) Google PageSpeed Insights test optimizations.
The tests were done with the Network DevTools with Regular 3G, Disable caché and studying the full-page load time, total page size, transferred size transferred over the network, and number of resources loaded.

(1) Original Firefox Developer Tools:

(2) Firefox Developer Tools with lazy loading and async script loading:

(2) Before applying Google PageSpeed Insights recommendations:

(3) After applying Google PageSpeed Insights recommendations:

(1 vs 2 vs 3) Table with all optimizations:

More data, information and explanations available at https://github.com/marcturu/saboreamexico/tree/main/docs.

🛠 Installation & Setup

a0. Prerequisites

Make sure you have installed:

Node.js 20.x or higher

Check the version:

node -v

a1. Clone the repository

git clone https://github.com/marcturu/saboreamexico.git
cd saboreamexico

a2. Install dependencies

npm install

a3. Run locally

npm run start

The app will be available at http://localhost:1234, with live reload enabled.

b1. Try the website

You can try the deployed version directly in the browser:

Netlify (browser testing): WebApp: https://saboreamexico.netlify.app/

ℹ️ Deployment details: The project is deployed on Netlify from the main branch.

Build command: npm run build

Publish directory: dist

🧩 Methodology

ITCSS — style architecture (settings, tools, generic, elements, objects, components, utilities)
BEM — CSS class naming convention
OOCSS — reusable object classes (o-container, o-section)
Responsive, mobile-first design

🧰 Built With

Core

Technology	Purpose
Parcel v2	Bundler — development server, production build, asset pipeline
Sass/SCSS	CSS preprocessor — variables, nesting, functions, mixins, partials (`@parcel/transformer-sass`)
PostHTML	HTML partials via `posthtml-include`
Stylelint	SCSS linting with custom BEM and SCSS rules (`stylelint-config-prettier-scss`, `stylelint-config-recommended-scss`, `stylelint-scss`), configured in `.stylelintrc`

Optimization (production build)

Technology	Purpose
`lightningcss`	CSS minification and optimization (`@parcel/optimizer-css`)
`htmlnano`	HTML minification (`@parcel/optimizer-htmlnano`)
SWC	JavaScript minification (`@parcel/optimizer-swc`)
`sharp`	Image transformation and WebP conversion (`@parcel/transformer-image`)

Dependencies

Dependency	Purpose
AOS	Scroll animations `"aos": "^2.3.4"`
Font Awesome	Icons `"@fortawesome/fontawesome-free": "^7.2.0"`

📜 Commands

Command	Description
`npm run start`	Starts the development server at http://localhost:1234 with live reload
`npm run build`	Compiles and optimizes the files for production into `dist/`
`npm run clean`	Removes the `dist/` folder and caches
`npm run stylelint`	Validates the SCSS files against the configured rules

📂 Project Structure

docs/
screenshots/
src/
├── index.html
├── categoria.html
├── det1.html
├── det2.html
├── links.html
├── views/                  # PostHTML partials
│   ├── partials/
│   ├── home/
│   ├── categoria/
│   ├── det1/
│   ├── det2/
│   └── links/
├── assets/
│   ├── fonts/              # Self-hosted fonts (Unbounded, DM Sans)
│   ├── images/
│   ├── scripts/
│   │   ├── app.js
│   │   └── modules/        # JS modules (aos and header)
│   └── styles/
│       ├── main.scss
│       ├── _dependencies.scss
│       ├── settings/       # Variables, fonts
│       ├── tools/          # Functions, mixins
│       ├── generic/        # Reset
│       ├── elements/       # Base styles
│       ├── objects/        # OOCSS objects
│       ├── components/     # BEM components
│       └── utilities/      # Utility classes

Name		Name	Last commit message	Last commit date
docs		docs
screenshots		screenshots
src		src
.gitignore		.gitignore
.posthtmlrc		.posthtmlrc
.stylelintrc		.stylelintrc
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
sharp.config.json		sharp.config.json

Latest commit

History

Folders and files

Repository files navigation

— Website exploring Mexican gastronomy

✅ Pages

⚡ Features

Phase 1️⃣

Phase 2️⃣

(0) Original images:

(1) Resized images:

(2) Images with sharp:

(3) Images with format conversion:

(0 vs 1+2+3) Table with all optimizations:

Images created for art direction:

Data from images with art direction applied:

Table with all optimizations + responsive image techniques:

Phase 3️⃣

(1) Original Firefox Developer Tools:

(2) Firefox Developer Tools with lazy loading and async script loading:

(2) Before applying Google PageSpeed Insights recommendations:

(3) After applying Google PageSpeed Insights recommendations:

(1 vs 2 vs 3) Table with all optimizations:

🛠 Installation & Setup

a0. Prerequisites

a1. Clone the repository

a2. Install dependencies

a3. Run locally

b1. Try the website

🧩 Methodology

🧰 Built With

Core

Optimization (production build)

Dependencies

📜 Commands

📂 Project Structure

📷 Screenshots

Home Page (Desktop):

Recipes Page (Desktop):

Tacos Page (Desktop):

Nachos Page (Desktop):

Links Page (Desktop):

Home Page (Mobile):

Recipes Page (Mobile):

Tacos Page (Mobile):

Nachos Page (Mobile):

Links Page (Mobile):

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages