Learn about contrast ratio, luminance, and how to use these to make a text color match any background in an accessible way.

Make a Text Match Any Background Color

In this post, we will learn how to animate SVG icons using React Spring. We will be building a dark mode toggle. 

Using React Spring to Animate SVG Icons: Dark Mode Toggle

Learn how to change themes dynamically with the Ant Design UI library. In this post, we will be exploring how to change between dark and light themes.

Dynamic Theme Switching in Ant Design: How to Change Between Light and Dark Themes

Learn how to set up Mailhog with Docker so you can test your email flow for free 

Test Your Email Flow with Mailhog, a Fake SMTP Server

Resources are extremely important for a programmer since they can greatly improve productivity while coding. 

40+ High Quality Free Resources for Web Development

Learn how to find solutions outside of Stack Overflow using Github and other methods. 

How to Find solutions To Your  Programming Problems Outside of Stack Overflow

Learn how to create and publish a robust Typescript codebase with tsdx and np

Create and Publish a Supercharged Typescript Codebase

Use semantic HTML and CSS to create an accessible and pixel perfect website.

Creating an Accessible, Responsive Pixel Perfect Website

Learn why semantic HTML is important for creating accessible and pixel perfect websites.

Semantic HTML. What, Why, and How

Approaches to create a perfect layout that will let the developer translate his design to responsive and accessible code.

How To Create Pixel Perfect Layout Models

Create a markdown blog with Next.js and Tailwind.css.

How to Make a Markdown Blog With Next.js

Approaches to create a friendly navigation in mobile phones.

Create a mobile friendly navigation with React

Reasons why developers must opt to use mobile friendly navigation on websites.

Why Use Bottom Navigation in Mobile Websites

Habits that make you a better developer everyday.

Habits I've acquired as a developer


"Designed and developed an e-commerce while focusing on search engine optimization, low maintenance cost, and scalability.

The project is built on Gatbsy.js, Typescript, and Snipcart. Snipcart allows for a secure e-commerce experience, and management of products, cart, payment, and shipping.

The most interesting part of this project was using Tailwind. It brings a maintainable and efficient solution to styling by reducing bundle size and making the site faster with reusable classes.",


A freshly made e-commerce

Mixcart

Designed and developed the front-end and back-end for a student dashboard to make the student's life easier.

The hardest challenge was designing an efficient React and Redux architecture. However, by using an elm inspired structure the project is now easy to develop with readable and modular Typescript.

The most interesting part was integrating Firebase Cloud Messaging.

Organize your homework, evaluations, and to-dos with your friends

My Study Planner

Designed and developed a concept website to showcase the development of a potential start-up website.

The project is a front-end and back-end monolith based on Typescript.

The user interface is powered by React, Redux, and Styled Components.

The back-end is mainly Express with Bulletproof Architecture which increases the project's maintainability and flexibility of development.

A concept social media start-up website app

JetNet


Developed and designed a website to select the best trip with the best price possible.

The most interesting part was integrating WordPress with Elementor to enhance the developer's experience.


A concept travel agency made in WordPress

Tourbound

Designed and developed a coffee shop with love to showcase my skill in translating a design to code.\n\nThe most interesting part was using SASS with BEM notation.

A concept coffee shop made with love

Stella's Coffee Shop

This project displays primarily the consumption of an API with AJAX and displaying its data.

Jose Felix

Front-End Engineer

Blog.

Make a Text Match Any Background Color

Using React Spring to Animate SVG Icons: Dark Mode Toggle

Dynamic Theme Switching in Ant Design: How to Change Between Light and Dark Themes

Read all posts

Projects.

Mixcart

My Study Planner

JetNet

A front-end web development newsletter with novelty

Contact me