Blaine Anderson

Front-End Developer

Strategic Thinker | Precise Coder | Brings Clarity to Complex UI Problems

Projects

Weather App

A web application that will fetch local weather data from an API and display it to the user.

Technology Used: React JS | TypeScript | GeolocationPosition | Fetch API | Vite

Gift Logger

Work in Progress

A web application for people who are bad at gift giving. Keep a record of the gifts you've given people and how well it was received, so you can be better informed for the next occasion.

Technology Used: React JS | TypeScript | Vite

Guided Prayer App

Work in Progress

A web application that will guide a user through a time of prayer based on the A.C.T.S. method.

Technology Used: JavaScript | Tone JS | Web Audio API

Style Guide

Brand Colors

Green

Green Light

  • #63AA78
  • rgba(99, 170, 120, 1)

Green Primary

  • #006130
  • rgba(0, 97, 48, 1)

Green Dark

  • #0D4222
  • rgba(13, 66, 34, 1)

Purple

Purple Light

  • #B392A4
  • rgba(179, 146, 164, 1)

Purple Primary

  • #6C4B5E
  • rgba(108, 75, 94, 1)

Purple Dark

  • #48333F
  • rgba(72, 51, 63, 1)

Grayscale

White

  • #FFFFFF
  • rgba(255, 255, 255, 1)

White Soft

  • #F3F3F3
  • rgba(243, 243, 243, 1)

Gray Lightest

  • #DDDDDD
  • rgba(221, 221, 221, 1)

Gray Light

  • #B0B0B0
  • rgba(176, 176, 176, 1)

Gray

  • #868686
  • rgba(134, 134, 134, 1)

Gray Dark

  • #5E5E5E
  • rgba(94, 94, 94, 1)

Gray Darkest

  • #393939
  • rgba(57, 57, 57, 1)

Black

  • #1F1F1F
  • rgba(31, 31, 31, 1)

Typography

Font Family: Cabin, sans-serif

View Font on Google Fonts

h1 - Sphinx of black quartz, judge my vow.

h2 - How vexingly quick daft zebras jump!

h3 - Pack my box with five dozen liquor jugs.

h4 - Waltz, bad nymph, for quick jigs vex.

p.large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tellus vitae imperdiet bibendum. Donec faucibus dui sed volutpat commodo. Nulla sodales neque at fermentum lacinia. Maecenas aliquam a nulla at porttitor. Curabitur leo mauris, mattis ut pretium a, efficitur tincidunt orci. Mauris tincidunt nisi vel felis lacinia, ac tristique felis ultrices. Nunc in scelerisque nulla. Praesent gravida, magna ut viverra rutrum, diam ante venenatis quam, quis hendrerit magna sapien sit amet erat. Donec ornare arcu erat. Aliquam eget leo non libero venenatis dictum vitae vel urna.

p - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tellus vitae imperdiet bibendum. Donec faucibus dui sed volutpat commodo. Nulla sodales neque at fermentum lacinia. Maecenas aliquam a nulla at porttitor. Curabitur leo mauris, mattis ut pretium a, efficitur tincidunt orci. Mauris tincidunt nisi vel felis lacinia, ac tristique felis ultrices. Nunc in scelerisque nulla. Praesent gravida, magna ut viverra rutrum, diam ante venenatis quam, quis hendrerit magna sapien sit amet erat. Donec ornare arcu erat. Aliquam eget leo non libero venenatis dictum vitae vel urna.

p.small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tellus vitae imperdiet bibendum. Donec faucibus dui sed volutpat commodo. Nulla sodales neque at fermentum lacinia. Maecenas aliquam a nulla at porttitor. Curabitur leo mauris, mattis ut pretium a, efficitur tincidunt orci. Mauris tincidunt nisi vel felis lacinia, ac tristique felis ultrices. Nunc in scelerisque nulla. Praesent gravida, magna ut viverra rutrum, diam ante venenatis quam, quis hendrerit magna sapien sit amet erat. Donec ornare arcu erat. Aliquam eget leo non libero venenatis dictum vitae vel urna.

Example Link

Buttons