Projects

Oscar Nominations

https://oscar.ralacerda.dev/

This project aimed to create an easy way to showcase the Oscar nominated and winning films from each year.

In addition to an overview of all nominated films for a given year and dedicated pages for each award category, it's possible to access information about each film, including the main cast, director and screenwriter information, and a list of streaming services where the film is available in Brazil.

The project uses a backend created with Nuxt to consume the TMDb API. The collected data is saved in a SQLite database, which is queried using Drizzle. The site features responsive design that adapts to screens of different sizes, using modern HTML and CSS, and Vue as the framework.

The site is hosted on a virtual machine, running a Docker container. The entire deployment process is automated using GitHub Actions.

Project Repository

Luminares Arq

https://luminares-arq.netlify.app/

The objective of this project was to create and implement an elegant and modern design for a fictional architecture company website, conveying a professional and sophisticated image.

One of the main highlights of the site is navigation through a grid, which transforms into a header for each page. The grid is a CSS grid that uses navigation information to modify the size of each row and column, leaving only the desired image in focus when one of the links is accessed.

For this project, VueJS and Typescript were used. With the Nuxt framework, it was possible to implement efficient page transitions. Additionally, the use of the SASS preprocessor allowed for the creation of modular, scalable CSS with high maintainability.

The site is hosted on the Netlify platform, which also provides CI/CD, enabling continuous integration and automated delivery.

Project Repository

Bookshelf

https://ralacerda-books.netlify.app/

It's common to completely forget which books you've read when someone asks for reading suggestions. To solve this problem, I started a website project featuring books I recommend, have read, or am currently reading. To host information about each book, such as title, authors' names, publisher, release year, and cover image, I used Contentful, a content management system (CMS).

To keep the site always up to date, I used Next.js 13, a React framework. With Server Side Rendering strategy, the site is built on the server at each visit, resulting in an always updated website.

Since the site deals with external information, I used Zod to validate API call results and TypeScript to ensure the content model matched the code. This allowed me to be confident when I needed to modify the content model or refactor my code.

The result is a fast, always up-to-date, and easy-to-maintain website. To add a new book, I just need to use the CMS, without having to edit code or build the site locally. With this approach, the project becomes robust and reliable for future updates.

Project Repository

Contrast Checker

https://multiple-contrast-checker.netlify.app/

This project is a web application that allows you to check the contrast level between different colors at once, helping to determine if a color combination has the necessary contrast to meet the WCAG (Web Content Accessibility Guidelines) standards.

You can add, modify, and remove colors using a color picker or by modifying the RGB color representation. Even after closing or restarting the web application, the chosen colors are saved.

A results table displays the contrast values between the foreground and background colors, and whether they meet the contrast limits required by WCAG. The contrast value is displayed in a box that uses the selected colors.

Project Repository