Hello there, I am a front-end website developer with a passion for UX/UI design, graphic design, and exploring my creativity.

Profile

About Me

As a graphic and web designer, I have learned that the most important skill in creating a successful design is to listen to both your intuition and your client. So whether I am designing a website or creating a logo, I seek user input at every step of the way, regardless of frustrations, time, and effort. I also value the perspectives of others in crafting my designs and see every opportunity to work with someone on any graphic or web design project as a way to improve both my craft and my art as a whole.

As a collaborative showcase of artists, we raised over $180 in on-site donations for our neighbors in need in the aftermath of Hurricane Harvey.

My contributions included the set of logos used in the advertising throughout the event, the design of the advertising itself, and the creation of the Creative Hope Website.

Projects

Portfolio Websites - To prove my competencies in programming and web development I developed several portfolio websites catered to each programming language and framework that I have worked with.

This website is my main web development portfolio and showcases both my PHP and React portfolios through the implementation of iframes which, as a system, allow this application to function as a progressive web application.

My PHP portfolio showcases the various PHP websites that I have created, most of which have been created using object-oriented PHP components and many also include JavaScript to solve problems better suited for a non server-side solution.

My React portfolio showcases the various React applications that I have created using the React framework built on the JavaScript programming language.

Privilege Application(s) - The Privilege application is a thought experiment that explores the many nuances of privilege regarding race and ethnicity.

I built a PHP and a React version of the same Privilege application to explore the similarities, differences, and functionalities of the PHP programming language and the React framework.

The PHP version of the Privilege application is the original application. The PHP Privilege application contains the following programming components: a main 'Race' class containing references to the four different classifications (the privileged race, the enslaved race, the indigenous race, and the othered race) and a reference to the new world, then there's a PHP class created for each race (white, Black, First Nations, and Asian) with references to the homeland and majority religion of the chosen race.

The React Privilege application objectifies the privileged race, the enslaved race, the indigenous race, the othered race, the homeland of the privileged race, the new world (homeland of the indigenous race), and the privileged race's majority religion as React states and properties allocated to sub-components.

Time Application(s) - The Time application is a simple live clock that displays today's date and the current time in both 12 and 24-hour format.

I built a PHP and a React version of the same Time application to explore the similarities, differences, and functionalities of the PHP programming language and the React framework.

The PHP Time application contains the following programming components: a current date component that uses the Date object in PHP to display the current date, the current time component which calls on the custom JavaScript Time class to obtain the 12 and 24-hour clocks, while the main JavaScript file contains a 'refreshTime' function that is automatically called every second to refresh the current time on both clocks in the application.

The React version of the Time application is the original application. The React Time application contains the following programming components: a component for the current date, which calls on the Date object to display today's date and refreshes based on the appropriate interval, and a component for the current time, which displays the current time in 12 and 24-hour format by calling the Date object, then refreshing at the appropriate interval (for the 12-hour clock) or refreshing each component appropriately (the hour, minute and second in the 24-hour clock).

I built a PHP and a React version of the same art portfolio application to explore the similarities, differences, and functionalities of the PHP programming language and the React framework.

The React version of my art portfolio is the original application. My React art portfolio contains the following programming components: a List component that outputs a list of items, where each item is represented by an Item component that serves as a manifestation of each art piece and its relevant details.

Why I Code

I enjoy the process of building customized website solutions as humanity is complex and most our problems involve serious puzzles that we, as humans, must figure out. This is why I believe that the best way to solve any problem to understand (in my own way) the people directly involved and impacted by said problem. Learning about people and their problems gives me, as an autistic person, insight and access to portions of the human mind and connections to people that I, otherwise, would not be given. Every project where I must please a client is another opportunity for me to have this access and to further my understanding of humanity and human motivations, even if that client is myself (as it is for many of the projects that I have done).

Privilege

This is a thought experiment that I created as an educational tool to unpack the dynamics and nuances behind white privilege.

Programming Language/Framework: PHP.

Click here to see the Privilege app’s full functionalities while this link leads you to the code base of this application (which is hosted on Repl.it).

Show the case study for this application.

Objective

The Racial Privilege Hypothetical is a thought experiment/alternative history hypothetical that is meant to emulate, in words, a history in which a non-European group had colonized the rest of the world in the way that Western Europeans have done in the modern era of history.

Click here to explore the codebase for this application and click here to see the application itself.

Implementation

The implementation of this PHP application mandated the use of PHP classes, a complex CSS structure, and several PHP includes containing each component necessary for the full structure of this thought experiment.

As this application is class-based, I implemented the Race superclass and the Black, The_People, Asian, and White subclasses. This represents the racial structure that predominates in the world today and how, although it is simply a social construct, its relevancy will continue for centuries to come. Each Race class contains references to the people, indigenous, enslaved, othered, enslaved's homeland, and the New World, with get methods to all but the people reference. At the same time, each subclass contains a reference to an instance of the Details class to output the homeland and religion of the current instance.

As PHP has object-oriented features and allows for the use of components as needed, I was able to implement a system of PHP includes to facilitate the application's structure. For instance, every page has a reference to the header and footer components, while the header component itself has a reference to the form and navigation component. Finally, I was able to create and implement an overview component to compare the current situation of race relations where white people colonized the lands of indigenous First Nations people, enslaved Black people, othered East Asian people, and colonized most of the rest of the world at one point or another.

Features

The Racial Privilege Hypothetical contains a form that asks for a privileged race, an indigenous race, and enslaved race, and an othered race for a hypothetical situation. By default, the privileged race is white, the indigenous race is First Nations, the enslaved race is Black, and the othered race is East Asian, a simplified scenario of the current situation that is white supremacy. The intent of this form is to create a situation where white, Black, First Nations, or East Asian supremacy are the realities in any given scenario of this hypothetical, with the chosen enslaved, indigenous, and othered races.

Based on the chosen components for the form, a series of statements and assertions are generated for this scenario with an overview, a colonialism, and a postcolonialism page containing relevant statements about these respective topics.

Lessons Learned

I credit this application with teaching me the fundamentals of class-based, object-oriented PHP and has served as my springboard to created other object-oriented PHP applications.

Because of the time that I have spent on this website, I have been able to learn about class features like methods, constructors, types of variables, and inheritance from the perspective of the PHP programming language.

Time

This is my first self-hosted React application: a simple clock/calendar that integrates the Date object using React components and methods.

Programming Language/Framework: JavaScript/React framework.

Click here to see the Time app’s full functionalities while this link leads you to the code base of this application (which is hosted on GitHub).

Show the case study for this application.

Objective

This clock application serves as a portal site that displays today's date and the local time, with links to privacy-conscious online services and applications.

Click here to explore the codebase for this application and click here to see the application itself.

Implementation

This React application was implemented through the use of the JavaScript Date object. From the Date object I was able to derive, not only the current date, but also the current time. I accomplished this by utilizing the React framework's states and intervals to ensure that the hour, minute and second rendered correspond to the current time.

The different React components that I implemented in this application include the CurrentTime and CurrentDate that are rendered in the App component. These components, in turn (alongside the Footer component), are rendered in the index.js file that renders the App and Footer components to the React Document Object Model.

Features

The Time app's current date component simply renders today's date in the format that is accepted in the locale of an application's viewer. For instance, a viewer of the application who lives in the United States will see the date as (month)/(day)/(year).

The current time component renders the current time in two ways: the 12-hour and the 24-hour format, with the top rendering containing the 12-hour format and the bottom rendering containing the 24-hour format.

Finally, helpful links for the user are displayed under these dynamic components.

Lessons Learned

As this was my first React application, by working on this project, I was able to learn the basics of JSX syntax and how to integrate basic JavaScript functionalities into the React framework.

Art

This art portfolio is a dynamic showcase of my artwork, that integrates my knowledge of stateful classes and states.

Programming Language/Framework: JavaScript/React framework.

Click here to see the Art app’s full functionalities while this link leads you to the code base of this application (which is hosted on GitHub).

Show the case study for this application.

Objective

I created an art portfolio website for my artwork to help me expand my knowledge of states and their applications within the React framework, as well as to learn how to design a fully-functional and attractive React application.

Click here to explore the codebase for this application and click here to see the application itself.

Implementation

This React application was implemented through the inclusion of various React components, alongside the implementation of React states and methods.

The structure of this art portfolio React application includes an index.js file that render the App, List and Footer components to the React document object model of the index.html file. The List component, then, contains a set of Item components that hold the details of each specified Item according to the items.json file.

Features

This art portfolio contains the following information about my artwork: the title, the image reference, the media of the piece, the description that I set for the piece, and the type of artwork.

These data make it possible to display the relevant information for each piece, as well as a preview of the piece itself.

Lastly, I was able to utilize states to allow for the visibility of only certain (or all) pieces based on methods that I included in the List component, one to show drawings, paintings, digital pieces, and mixed media artwork.

Lessons Learned

Through this application, I expanded my knowledge of states and React framework functionalities by introducing myself to class constructors, component states, and component methods. Altogether, this project enabled me to compose and customize a fully-functional, dynamic React application.