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

Development projects:

Websites and applications built from scratch.

Quiz app

  • HTML
  • CSS
  • JS
  • Figma
  • Bulma
  • json

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