Hello, I'm
Gabriela Santos. FRONTEND DEVELOPER

I'm passionate about turning ideas and designs into functional, performant and accessible websites using the power of coding and best UI/UX practices.

Projects

Main Projects:

Websites and applications built from scratch.

TimeStack

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Vue
  • Vue CLI
  • Vuex
  • Vue Router
  • Sass
  • localStorage

App that allows to create actions and to then 'stack' as wanted so they can be executed in order. We can start the plan which sets a countdown timer for each action. The state gets saved in localStorage.

Designed by: Me 👋

LIVE DEMO Source code

Daily Mantra

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Vue
  • Vue CLI
  • Google Sheets
  • localStorage

Experiment to get data from a public Google Sheets of inspirational quotes (curated by me). It gets a random quote and generates a texture + color combination for the background. The quote gets saved on localStorage to get only one per day.

Designed by: Me 👋

LIVE DEMO Source code

Game Helper

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Vue
  • Sass
  • Fetch API

Vue web application that gets data from a json file, displays according to a type and allows a selection of 5 characters. It then shows specifics about the selection.

Designed by: Me 👋

LIVE DEMO Source code

Quiz app

  • HTML
  • CSS
  • JS
  • Figma
  • Bulma
  • etch API

Quiz app for basic web / internet terminology, using JavaScript's Fetch API to get data from a local json file and Bulma (CSS framework). It randomizes the questions and their possible answers, gives correct/incorrect feedback and a progress bar, ending with a results page.

Designed by: Me 👋

LIVE DEMO Source code

Waterly - Water Tracker

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Sass
  • localStorage

Web application to measure glasses of water taken through the day, includes a countdown to remind you when you should have your next glass. Data gets saved in JavaScript's localStorage and it's cleared each day. Enjoyed building many animations and micro-interactions to the UI.

Designed by: Me 👋

LIVE DEMO Source code

Release Date Countdown

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Sass

Single page with a countdown to a game's release date with various CSS animations, using Javascript's Date object.

Designed by: Me 👋

LIVE DEMO Source code

Dog Breeds Selector

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Sass
  • APIs

Shows a background image from the selected dog breed using the Dog API. Includes a loading spinner while waiting for the response.

Designed by: Me 👋

LIVE DEMO Source code

Simple Calculator

  • UI
  • HTML
  • CSS
  • JS
  • Figma
  • Sass

UI created using CSS methods like flexbox and grid with the Sass CSS preprocessor. Core JavaScript for functionality and performant CSS transitions.

Designed by: Me 👋

LIVE DEMO Source code

Apple Watch Landing Page

  • HTML
  • CSS
  • Sass

Landing page to leverage differences between flexbox and CSS grid. Used a modular architecture for CSS (SMACSS) to separate components in an 'atomic design' way.

Designed by: Frontloops - Loop 1.10

LIVE DEMO Source code

Huddle Landing Page

  • HTML
  • CSS
  • CSS custom properties

Simple landing page where I explored using CSS's custom properties & flexbox.

Designed by: Frontend Mentor

LIVE DEMO Source code

UI Challenges:

Small design-to-code challenges where I take an interesting concept and code the layout / interaction / animation.

IKEA Website UI

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.10

LIVE DEMO Source code

Photo Gallery

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.2

LIVE DEMO Source code

Payment UI

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.6

LIVE DEMO Source code

Cinema Seat Picker

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.7

LIVE DEMO Source code

Gaming App

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.8

LIVE DEMO Source code

Entertainment Guide

  • HTML
  • CSS

Designed by: Frontloops - Loop 3.9

LIVE DEMO Source code