carlos profile image with my computer in the background carlos profile image

Front End Developer

I'm a Front End Developer helping to innovate the web one function at a time.

Recently graduated from School of Code. An intensive coding BootCamp that helped me to fine-tune my problem-solving skills.

I enjoy supporting the open source community so if you need help finding that missing semi-colon, creating documentation, or collaborating, let's connect!.

Tech Stack

  • JavaScript
  • React
  • Nodejs
  • TypeScript
  • Python
  • Django
  • PHP
  • WordPress
  • CSS
  • Bootstrap
  • SASS
  • Express.js
  • Git
  • MongoDB
  • TailwindCSS

Currently learning

  • CS50W

    At the moment I'm working my way through the CS50W course that is covering SQL to be used alongside a Django app.

    SQL is a language used to query relational databases. I do have some previous experience but not confortable enough with it so need more practice.

  • Playwright

    As said by Playwright: Playwright enables reliable end-to-end testing for modern web apps.

    A testing software developed by Microsoft. It's meant to be similar to Cypress. It allows the testing of different browsers and automate actions.

    I will start learning by adding tests to my projects. First it will be the 'SOC tribute page' to start simple followed by 'How to cocktails' which runs on React and fetches data from an API.

  • Cypress is used for End-to-End testing. I tried it on a full-stack app and it was kinda of freaky how you can see Cypress walking through the app as if someone was using it.

    It has a learning curve longer than expected but so much fun.

Projects

Space Tourism

Tech Stack

  • Django
  • Python
  • HTML
  • CSS
Live GitHub
screenshot of the home page for a space tourism site. There is a big round button and a picture of earth as background

About

This is a solution to the Space tourism website challenge on Frontend Mentor.

For this one I decided to push myself and try deplying a React app to github. It takes a little but of setup but essentially the process is straight forward.

I also created issues and used the git comment, with their issue number, to mark them as solved. I loved this! so cool.

There is also a little extra on there, I used the NASA API to spice it up with their images from the Moon, Mars, Europa and Titan.

Users should be able to:

  • View the optimal layout for each of the website's pages depending on their device's screen size
  • See hover states for all interactive elements on the page
  • View each page and be able to toggle between the tabs to see new information

Personal

Wikipedia-like

Tech Stack

  • Django
  • Python
  • HTML
  • CSS
Live GitHub
screenshot of the wikipedia like django app that show the home page with a search bar and menu

About

A Django app that stores and displays encyclopedia entries using Markdown. A CS50W course project.

For the project I created a Markdown to HTML parser. Although basic, in its current stage, it can process heading, unordered list items at different levels, bold text, and links. It was an interesting challenge that helped me to gain more experience with Python.

Current features:

  • Read any encyclopedia entry stored in the app.
  • Make changes to any encyclopedia entry.
  • Create new entries using Markdown.
  • Search for entries by using the search bar.
  • Load a random encyclopedia entry.

Personal

Markdown to HTML parser

Tech Stack

  • Markdown
  • Python
  • HTML
Live GitHub
screenshot of the linux terminal running the program and the output on the other side

About

A simple markdown to html parser, module, written in Python. It is for the CS50W course project built with Django.

It was interesting to read through the Markdown documentation because there are so many little things to look out for that I, as a markdown lover, took for granted.

Current features:

  • Headers, Links, Lists, Bold text and Paragraphs support
  • Made to be used as a module
  • Search file system for file name provided by user
  • Try and catches any errors produced when accessing the markdown file.

Personal

Frontend Mentor Challenges

Tech Stack

  • Next.js
  • Postman
  • JavaScript
  • CSS3
  • Bootstrap
  • SASS
  • TailwindCSS
  • HTML
  • Git
  • React
Live Github
screenshot the home page that houses links to all the challenges completed

About

Here are my solutions to the frontend challenges created by frontend mentor. These challenges are really fun and a great way to practice with new technologies.

My Vision

To join the world of web development professionally and share my passion of all things web. This way I can help create amazing things which can be enjoyed by other people, whether to help them achieve a goal or just have fun.

Repo purpose

The purpose of this repo is to use these challenges as practice and improve or gain knowledge about web development. Maybe in the mean time also help other developers tackling the same challenges and are stuck.

Personal

Our House

Tech Stack

  • Next.js
  • Auth0
  • MongoDB
  • Jest
  • Cypress
  • Postman
  • JavaScript
  • CSS3
  • HTML
  • Express.js
  • Git
Live Github
screenshot of our house app

About

School of Code 4 weeks project.

Team of 6. Fullstack app.

Its a household planner that allows people living together to create shared lists.

This project was a good exposure to MongoDB and Next.js as I had not used them before. Why did we choose them? because apart from creating something functional we also wanted to learn a new technology.

Check the back-end repo

Personal

Bootcamper Organiser

Tech Stack

  • React
  • CCS3
  • Jest
  • Git
  • JavaScript
  • Postman
  • HTML
screenshot of bootcamp organiser app

About

School of Code 1 week project.

Team of 4. Fullstack app.

This App enables School of Code Bootcampers to organise, reference, comment and rate subjects taught on the bootcamp on a daily and weekly basis. The App also features a weekend todo list where students can move daily subjects to the weekend list for further study.

The feedback would be available to the coaches which would help the bootcamp improve their resources and what is being taught.

Personal

How to cocktails

Tech Stack

  • React
  • TailwindCSS
  • HTML
  • CSS
Live GitHub
screenshot of a cocktails with details on the ingredients with a neon bright border

About

A cocktails recipe react app, do you want to create your next refreshing drink? look no further. Built for a School of Code Hackathon Friday.

First project using TailwindCSS and I loved it!. Whenever I came to a stop because I needed to implement a feature, the documentation would mention how they have allowed for this case and you can customise tailwind to suit your needs.

Current features:

  • Connects to the free cocktails API
  • Responsive
  • Search for cocktail by name

Personal

SOC Tribute page

Tech Stack

  • HTML
  • CSS3
Live GitHub
screenshot the road fools tribute page, with a bmx jumping over some stairs

About

A one page tribute page to Props Road Fools BMXing documentary. Created as part of the application process to the School of Code bootcamp.

I chose Road Fools because it was a show that used to inspire me to push myself even harder when I used to BMX. The was all the riders used to encourage each other to go that extra mile.

The site was built with HTML and CSS only!, because there was no need to go fancy with scripts to showcase my tribute page. ROAD FOOLS!!!

Personal

Simplify my Home

Tech Stack

  • Wordpress
  • PHP
  • CSS3
  • HTML
  • JavaScript
Live GitHub
screenshot of simplify my home site with large heading and site menu to the left side

About

Complete site update. Worked with a designer to improve and create a new fully responsive look.

It involved a lot of back-and-forth between the client, designer and myself at the beginning while we agreed on the look of the site. Afterwards the rest was liquid.

Learned to use the core Walker class for the Nav Menu to implement custom side navbar. It was an interesting task, as it was completely new to me and the docs on the subject were not the best, they have improved.

Freelance

Ringo Vision

Tech Stack

  • PHP
  • JavaScript
  • Bootstrap
  • CSS3
  • Wordpress
Live GitHub
screenshot of home page with a beach background with white sand, clear water and palm trees

About

Designed and Developed a single page, fully responsive site to match the client brand of caribbean good food.

Because of time restrictions I used Bootstrap to get the site up and running quicker. It is mainly used for the site structure and responsive menu

Don't worry I also used custom CSS to create the personal feel that matches the clients brand.

The theme uses a gallery plugin for ease of use and so the client can quickly upload images.

Freelance

100x Crypto Mentor

Tech Stack

  • JavaScript
  • HTML
  • CSS3
  • Webpack
Live GitHub
screenshot of 100 x crypto mentor nft landing site

About

A landing page to showcase 100x Crypto Mentor latest NFTs. The site is only on its first iteration.

I learned to speed up page load with font pre-loading and the use of image sprites. At this point not sure about using other peoples icons I went ahead and create custom ones for the site.

The site is fully responsive with a sleak and simple look. The client knew what he wanted and the design was liquid.

Freelance

Hook House Community Centre

Tech Stack

  • JavaScript
  • Bootstrap
  • PHP
  • CSS3
  • Wordpress
Live GitHub
screenshot of hook house community centre home page with a bright but gentle yellow light

About

The site is a custom Wordpress theme that is fully responsive. Colour scheme was chosen by the client.

I worked on this project during my early days learning Wordpress. Theme creation is really fun. The documentation was not the best but what it could do was great.

This project could have benefit from Bootstrap to speed up the process but still delivered.

Freelance

tic tact toe moomin

Tech Stack

  • JavaScript
  • HTML
  • CSS3
Live GitHub
screenshot of the tic tac toe moomin edit game

About

Little fun game of tic-tac-toe made to practice JavaSscript and CSS. The logic for the computer moves took a little bit longer to complete than expected but it all came together in the end.

I wrote the project a little while ago so I have done an update to the code syntax to match current standards.

Presently I could definately create something much better but I will not give in to the temptation of improving this project, because in its current state, it represents my skills at that point in time and its great to see how much I have improved.

Personal

Get in touch

Send me a message

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Game

Tic Tac Toe - Moomins edit

tic tac toe - moomins edit game cover has moomin playing the game with snufkin