Home Projects Portfolio Dashboard Export PDF Log in

Languages

English
50

Latest Updates

Documenting code, one commit at a time.

React 10 posts
×

Refining Visual Consistency: Improving CSS Architecture in the Harry Potter App

Working on the Harry Potter app has been an exercise in balancing thematic design with maintainable styling. Recently, I focused on refining our CSS implementation to ensure a more cohesive look across the board, specifically targeting layout spacing and component responsiveness.

The Situation

As our project grew, our styling started to feel like a collection of patches.

Optimizing Layout Persistence in FutbolFem

Improving Navigation Stability

In the FutbolFem project, maintaining a consistent user experience across different views is critical. Recently, I focused on refining the application's layout, specifically addressing how the navigation bar behaves as users scroll through content-heavy pages.

The Challenge: Nav Bar Drift

When building responsive interfaces with React and Material UI,

0 React

Refining Visual Consistency in FutbolFem

The Importance of Visual Assets

In modern web applications, the integrity of visual assets—like team emblems or logos—is crucial for maintaining a professional user interface. In the FutbolFem project, we recently focused on addressing inconsistencies in how our visual assets were rendered.

0 React Bootstrap

Maintaining Clean Architecture: The Importance of Project Organization

In software development, especially within growing projects like the FutbolFem initiative, technical debt often accumulates not in the code itself, but in the folder structure and file naming conventions. As we scale our React-based frontend, keeping our assets organized ensures that the team can find, update, and deploy features with minimal friction.

The Cost of Disorganized Directories

Clean Code at Scale: Strategies for Improving React Application Performance

Improving Maintainability

Working on the FutbolFem project, a platform built with React, Next.js, and Bootstrap, taught us that technical debt isn't just about functionality—it's about how efficiently your codebase evolves. Recently, we focused on a comprehensive refactoring effort to clean up our component logic and optimize performance.

The Refactoring Journey

As our components grew in

0 React CSS

Optimizing Layout Precision: Refining the Harry Potter App Grid

Introduction

The app-Harry-Potter project is a specialized React application dedicated to delivering content related to the Wizarding World. To ensure a consistent and visually appealing interface, we recently focused on refining our layout architecture by standardizing our grid measurements.

The Problem

Previously, the layout relied on hardcoded spacing values across various components.

Completing a React Architecture: Lessons from Building a Full-Stack Application

Architectural Overview

Working on the Naty-Arevalo/Entrega-final-reactjs-arevalo project recently provided a great opportunity to finalize a full-stack application leveraging React for the frontend and Firestore as the backend database. The goal was to build a cohesive, state-driven application that handles data persistence while maintaining a clean, responsive interface.

Starting Fresh: Building Foundations for Modern Web Applications

Getting Started

Starting a new project often feels like standing before a blank canvas. Recently, I began working on the Entrega-final-reactjs-arevalo project, a web-based application designed to integrate modern frontend practices with a robust component architecture. The initial phase focused on setting up a performant environment using Vite for fast builds and React for declarative UI

0 React HTML

Enhancing Social Visibility: Implementing Open Graph Tags in FutbolFem

Improving Social Media Presence

In our latest updates to FutbolFem, a React-based project dedicated to women's football, we identified a need to improve how our content appears when shared across social media platforms. When users shared links to our site, the preview images and metadata were often missing or unoptimized, leading to poor click-through rates.

The Challenge