AdamPetroff

Title: Goerli Network Native Token Tracker

Objective: Create a small backend application that tracks native token balances for a list of Ethereum addresses on the Goerli Network and serves this information through an API. This project will be used as a hiring test for a backend developer skilled in Node.js, TypeScript, Express.js, SQLite, Prisma ORM or Knex.js, and ethers.js.

Requirements:

1. The backend application should be developed using Node.js with TypeScript.

2. Utilize Express.js as the web framework for creating the API.

AdamPetroff

    background-image: radial-gradient( rgba(0, 0, 0, 0) 1px, var(--background) 1px );
    background-size: 4px 4px;
    backdrop-filter: blur(3px);

AdamPetroff

backdrop-filter: brightness(90%) blur(20px);
-webkit-backdrop-filter: brightness(90%) blur(20px);
-moz-backdrop-filter: brightness(90%) blur(20px);
mask-image: repeating-radial-gradient( circle at 50% 50% center, var(--background), var(--background) 20px, rgba(255, 255, 255, 0.3) 20.5px, rgba(255, 255, 255, 0.3) 21px );
-webkit-mask-image: repeating-radial-gradient( circle at 50% 50%, var(--background), var(--background) 20px, rgba(255, 255, 255, 0.3) 20.5px, rgba(255, 255, 255, 0.3) 21px );

AdamPetroff

variables.scss:
```
$bp-desktop-sm: 75em;     // 1200px
$bp-tablet-land: 62.5em;     // 1000px
$bp-tablet: 48em;     // 768px
$bp-phone-lg: 27em;     // 425px
$bp-phone-sm: 23.5em;
```

mixins.scss:

AdamPetroff

globals.scss:
```
:root {
  --navbar-height: 12rem;

  @include respond($bp-phone-lg) {
    --navbar-height: 9rem;
  }
}
```

AdamPetroff

index.tsx:
```
if(typeof window !== "undefined") {
  document.documentElement.style.setProperty('--vh', `${window.innerHeight/100}px`);
}
```

mixins.scss: 
```
@function vh($quantity) {

AdamPetroff

animation on scroll in (supports ssr) - https://www.npmjs.com/package/react-animation-on-scroll