Home Projects Portfolio Dashboard Export PDF Log in

Languages

English
50

Latest Updates

Documenting code, one commit at a time.

English 10 posts
×
0 React JavaScript

Fixing Visual Regression: Managing Asset Paths in React

In the Naty-Arevalo/FutbolFem project, maintaining visual consistency is as important as the underlying logic. A recent issue regarding incorrect shield icons (escudos) highlighted a common pitfall: how we manage static assets within a component-based architecture.

The Problem

When working with team logos or crests in React, it is easy to fall into the trap of using hardcoded relative paths

0 CSS HTML

Refining the Vivero Verde Paisaje Frontend

When managing a project like Vivero Verde Paisaje, the smallest adjustments often yield the most significant improvements in visual consistency. Recently, I dedicated time to a pre-delivery refinement pass, focusing on cleaning up the existing frontend structure to ensure a polished user experience.

The Cleanup Process

Frontend maintenance is rarely about adding massive new features; it is

Implementing Responsive Image Grids in FutbolFem

The Challenge

When building the FutbolFem project, a key objective was to create a visually engaging interface to showcase sports photography. We needed a layout that was not only aesthetically pleasing but also robust across various device sizes. The initial implementation lacked a structured way to display a collection of images, leading to inconsistent spacing and layout overflows on

0 CSS SCSS Sass

Enhancing Visual Consistency: Implementing Accessory Styling in Vivero-Verde-Paisaje

The Challenge

In our ongoing development of the Vivero-Verde-Paisaje project—a digital landscape management tool—we noticed that our accessory display modules lacked visual cohesion. As our collection of landscaping components grew, the styles applied to these elements became fragmented, leading to inconsistent spacing and typography across different views.

The Approach

Refining UI Consistency: A CSS Housekeeping Update

In the Naty-Arevalo/FutbolFem project, we recently focused on cleaning up our styling layer. While building out robust features, CSS files often accumulate "visual debt"—small overrides, redundant declarations, and layout adjustments that made the frontend feel inconsistent over time.

The CSS Challenge

As our React and Next.js codebase grew, we noticed that many components were relying on

0 CSS SCSS Sass

Scaling Design: Implementing Responsive Media Queries in Vivero Verde Paisaje

In the Vivero Verde Paisaje project, we recently shifted our focus toward improving the platform's visual accessibility and responsiveness across various devices. As a green-focused landscape design platform, it is crucial that our interface remains as clean and organized as the projects we showcase, regardless of whether a user is viewing them on a desktop monitor or a mobile screen.

Refactoring for Reuse: Componentizing the FutbolFem Navbar

A cluttered codebase is often a sign of technical debt, and our navigation logic in the Naty-Arevalo/FutbolFem project was starting to feel the strain. When the same header configuration is repeated across multiple pages, maintenance becomes a nightmare. This week, we focused on cleaning up the UI architecture by componentizing our navigation bar.

The Problem: Tight Coupling

0 CSS HTML SCSS Sass

Mastering Responsive Layouts with Sass Media Queries

Responsive design is the backbone of modern web development, but managing breakpoints across a growing project can quickly become a maintenance nightmare. In the Vivero-Verde-Paisaje project, we recently focused on refining our responsive architecture to ensure consistency across various screen sizes.

The Complexity of Breakpoints

When working on landscape and visual projects, UI elements

0 PostgreSQL

Documentation as the First Line of Code

Documentation often gets pushed to the bottom of the priority list, treated as an afterthought or a chore to be completed once the 'real work' is done. Yet, we recently revisited the repository for the app-Harry-Potter project and found that the most impactful change we could make wasn't a refactor, but a simple update to our documentation.

The Cost of Silent Repositories

Starting Fresh: Establishing the Foundation for FutbolFem

Getting Started

Every great project begins with a single commit. The FutbolFem project has officially been initialized, marking the start of a new codebase dedicated to the world of women's soccer. This initial setup establishes the repository architecture, laying the groundwork for a modern web application.

The Technical Foundation

By leveraging the React and Next.js ecosystem, the