Merge pull request #50 from defi-wonderland/dev

build: add vercel workflow
defi-wonderland · Sep 18, 2023 · ef2e676 · ef2e676
2 parents d52972e + ba9d668
commit ef2e676
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 42 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+name: Deploy to Vercel
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ github.ref_name == 'main' && 'Prod' || 'Dev' }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+        id: install
+
+      - name: Build project dependencies
+        run: yarn run build
+        id: build
+        env:
+          VITE_RPC_URL: ${{ secrets.VITE_RPC_URL }}
+
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
+          vercel-org-id: ${{ secrets.ORG_ID}} #Required
+          scope: ${{ secrets.ORG_ID}} #Required
+          vercel-args: ${{ github.ref_name == 'main' && '--prod' || '' }}
+          vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
+          working-directory: ./dist
diff --git a/src/data/squad.json b/src/data/squad.json
@@ -2,7 +2,7 @@
   {
     "name": "Matias Nisenson",
     "position": "Co-founder & CEO",
-    "description": "- 3x Startup founder & CEO\n- Founder & GP at a $50m deep-tech VC\n\nFun fact: He used to run a tenebrio molitor farm and has become somewhat of an expert on breeding mealworms."
+    "description": "- 3x Startup founder & CEO.\n- Founder & GP at a $50m deep-tech VC.\n\nFun fact: He used to run a tenebrio molitor farm and has become somewhat of an expert on breeding mealworms."
   },
   {
     "name": "Pepo",
@@ -12,107 +12,107 @@
   {
     "name": "Skeletor Spaceman",
     "position": "Co-founder & Architect",
-    "description": "- First contract deployed on 25/07/2017\n- Enjoys breaking things\n\nFun fact: He has never been to space."
+    "description": "- First contract deployed on 25/07/2017.\n- Enjoys breaking things.\n\nFun fact: Has never been to space."
   },
   {
     "name": "0xGorilla",
     "position": "CTO",
-    "description": "- 10+ years in Software Development\n- Addicted to scalability and conventions\n\nFun fact: His OCD compels him to arrange the dishwasher like a Tetris game!"
+    "description": "- 10+ years in Software Development.\n- Addicted to scalability and conventions.\n\nFun fact: His OCD compels him to arrange the dishwasher like a Tetris game!"
   },
   {
     "name": "Billi",
     "position": "COO",
-    "description": "- Addicted to meetings and context switching\n\nFun fact: Loves scaring buns. Have you seen any around?."
+    "description": "- Addicted to meetings and context switching.\n\nFun fact: Loves scaring buns. Have you seen any around?"
   },
   {
     "name": "Parti",
     "position": "Lead Researcher",
-    "description": "- Managed to earn a PhD in Physics, specializing in quantum information theory\n- Switched from particles for nodes: \"Pls Parti, stop asking about the Beacon Chain's entropy.\"\n- Average chaos enjoyer\n- Definitely not a Furry\nSad fact: Die-hard Boca Juniors fan."
+    "description": "- Managed to earn a PhD in Physics, specializing in quantum information theory.\n- Switched particles for nodes: \"Pls Parti, stop asking about the Beacon Chain's entropy.\"\n- Average chaos enjoyer.\n- Definitely not a Furry.\nSad fact: Die-hard Boca Juniors fan."
   },
   {
     "name": "Joxes",
     "position": "Researcher",
-    "description": "- Background in Engineering\n- Incubated four different communities to spread the word about Ethereum\n\nFun fact: His passion for discussing DeFi and Ethereum's scaling solutions surpasses even his love for life."
+    "description": "- Background in Engineering.\n- Incubated 4 different communities to spread the word about Ethereum.\n\nFun fact: His passion for discussing DeFi and Ethereum's scaling solutions surpasses his love for life."
   },
   {
     "name": "0xMono",
     "position": "Researcher",
-    "description": "- Enrolled in IT infrastructure studies\n- Defi research and scalability enthusiast\n\nFun fact: He also spends his spare time in DeFi."
+    "description": "- Enrolled in IT infrastructure studies.\n- Defi research and scalability enthusiast.\n\nFun fact: Spends his spare time in DeFi as well."
   },
   {
     "name": "Wei3er Hase",
     "position": "Developer",
-    "description": "- Just a bun from Görli 🥕\n\nFun fact: He is afraid of bugs and owls."
+    "description": "- Just a bun from Görli 🥕.\n\nFun fact: Afraid of bugs and owls."
   },
   {
     "name": "NG",
     "position": "Developer",
-    "description": "- Peaked at 5.6k MMR in Dota 2 back when top 1 had 7.5k. Things spiraled down from there\n- Reached 1800 ELO in chess.com to never play a ranked game again due to 1800 looking nicer than 1700\n\nFun fact: Can recite words backwards fast. This is due to OCD. Help."
+    "description": "- Peaked at 5.6k MMR in Dota 2 back when top 1 had 7.5k. Things spiraled down from there.\n- Reached 1800 ELO in chess.com to never play a ranked game again due to 1800 looking nicer than 1700.\n\nFun fact: Can recite words backwards fast. This is due to his OCD. Help."
   },
   {
     "name": "Gas1cent",
     "position": "Developer",
-    "description": "- Watched over a thousand movies, vaguely remember 4 of them\n- A big nap2earn proponent\n\nFun fact: Jail dropout."
+    "description": "- Watched over 1000 movies, vaguely remembers 4 of them.\n- A big nap2earn proponent.\n\nFun fact: Jail dropout."
   },
   {
     "name": "DrGorilla",
     "position": "Developer",
-    "description": "- Random diploma collector\n- Assembly fanatic (Huff is cheating)\n\nFun fact: I got 99 issues and a bitshift ain't one."
+    "description": "- Random diploma collector.\n- Assembly fanatic (Huff is cheating).\n\nFun fact: Has 99 issues and a bitshift ain't one."
   },
   {
     "name": "Ashitaka",
     "position": "Developer",
-    "description": "- Solidity dev\n- Studied Telecommunications engineering and philosophy\n\nFun fact: Pro player of magic the gathering."
+    "description": "- Solidity dev\n- Studied Telecommunications engineering and philosophy.\n\nFun fact: Pro player of Magic: The Gathering."
   },
   {
     "name": "0xJabberwock",
     "position": "Developer",
-    "description": "- Recruited by Wonderland\n- Codes even his life\n\nFun fact: Lifts a dumbbell everyday."
+    "description": "- Recruited by Wonderland.\n- Codes even his life.\n\nFun fact: Lifts a dumbbell everyday."
   },
   {
     "name": "Shaito",
     "position": "Developer",
-    "description": "- Flying bison addicted to crypto and building stuff\n- Normie dev turned Solidity enjoyor\n\nFun fact: Have been rewatching avatar the last airbender for the past 7 years."
+    "description": "- Flying bison addicted to crypto and building stuff.\n- Normie dev turned Solidity enjoyor.\n\nFun fact: Has been rewatching avatar the last airbender for the past 7 years."
   },
   {
     "name": "Gotzen",
     "position": "Developer",
-    "description": "- Compulsive optimizer\n- Another University deserter\n\nFun fact: Really good at voice impressions."
+    "description": "- Compulsive optimizer.\n- Another University deserter.\n\nFun fact: Really good at voice impressions."
   },
   {
     "name": "Turtlemoji",
     "position": "Developer",
-    "description": "- Co-created and helped in multiple onchain and normie products/companies\n- Loves swimming, video games, anime, science and to debate anything\n\nFun fact: He's addicted to Coke (the drink)."
+    "description": "- Co-created and helped in multiple onchain and normie products/companies.\n- Loves swimming, video games, anime, science and debating anything.\n\nFun fact: Addicted to Coke (the drink)."
   },
   {
     "name": "0xRaccoon",
     "position": "Developer",
-    "description": "- UTN Systems engineer\n- Believes that adaptability is an important feature\n\nFun fact: He likes to travel and do outdoor activities."
+    "description": "- UTN Systems engineer.\n- Believes adaptability is an important feature.\n\nFun fact: Likes to travel and do outdoor activities."
   },
   {
     "name": "0xAustrian",
     "position": "Developer",
-    "description": "- Software Developer\n- Learned Solidity because he was bored at work\n\nFun fact: 90's horror movies fan."
+    "description": "- Software Developer.\n- Learned Solidity because he was bored at work.\n\nFun fact: 90's horror movies fan."
   },
   {
     "name": "OneTony",
     "position": "Developer",
-    "description": "TBD"
+    "description": "- Studied Electrical & Computer Engineering.\n- Previously, open source contributor and independent consultant focused on the Ethereum blockchain.\n\nFun fact: Searching for the One Piece 🙂."
   },
   {
     "name": "Ardy",
     "position": "Developer",
-    "description": "- Background in Engineering\n- Passionate about mathematics and philosophy\n\nFun fact: Bonsaist apprentice 🌳."
+    "description": "- Background in Engineering.\n- Passionate about mathematics and philosophy.\n\nFun fact: Bonsaist apprentice 🌳."
   },
   {
     "name": "Excalibor",
     "position": "Developer",
-    "description": "- Decentralization maxi\n- Loves game theory\n\nFun fact: Has a skydiving license."
+    "description": "- Decentralization maxi.\n- Loves game theory.\n\nFun fact: Has a skydiving license."
   },
   {
     "name": "Discotech",
     "position": "Developer",
-    "description": "TBD"
+    "description": "- Interested in blockchain and startups.\n- Loves watching and playing football. Boca Juniors fun\n\nFun fact: Recovering disco addict ... only on weekdays.."
   },
   {
     "name": "0xBa5ed",
@@ -122,21 +122,21 @@
   {
     "name": "Dristpunk",
     "position": "Developer",
-    "description": "- Escaped ML engineering\n- Loves audits but hates doing them\n\nFun fact: I do YouTube videos."
+    "description": "- Escaped ML engineering.\n- Loves audits but hates doing them.\n\nFun fact: Does YouTube videos."
   },
   {
     "name": "Moebius",
     "position": "Developer",
-    "description": "TBD"
+    "description": "- Decentralization and privacy maximalist.\n- In love with the mountains.\n\nFun fact: Former card magician."
   },
   {
     "name": "Rex (m-r-g-t)",
     "position": "Data Analyst",
-    "description": "TBD"
+    "description": "- Background in economics.\n- Just your average abacus ASMR enjoyer.\n\nFun fact: Has a wall with about 136 obscure board games."
   },
   {
     "name": "Shade",
     "position": "Efficiency Evangelist",
-    "description": "- Amateur Organizational Theorist\n- Prefers reading over any other activity\n\nFun fact: Am actually a tree on the internet."
+    "description": "- Amateur Organizational Theorist.\n- Prefers reading over any other activity.\n\nFun fact: Is an actual tree on the internet."
   }
-]
+]
diff --git a/src/pages/Creations/ProjectsList/ProjectsList.styles.tsx b/src/pages/Creations/ProjectsList/ProjectsList.styles.tsx
@@ -53,9 +53,11 @@ export const Name = styled.strong`
   z-index: -1;
   color: white;
   text-align: start;
+  padding-right: 2rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding-left: 1.6rem;
+    padding-right: 1rem;
   }
 `;
 

diff --git a/src/pages/Creations/ProjectsList/index.tsx b/src/pages/Creations/ProjectsList/index.tsx
@@ -39,11 +39,11 @@ export function ProjectsList({ projects }: ProjectListProps) {
 
   const handleClick = (project: Project, target: Element) => {
     if (!projectMap[project.name]) {
-      target.classList.add('active');
-      target.classList.add('gradient');
+      target.parentElement?.classList.add('active');
+      target.parentElement?.classList.add('gradient');
     } else {
-      target.classList.remove('active');
-      target.classList.remove('gradient');
+      target.parentElement?.classList.remove('active');
+      target.parentElement?.classList.remove('gradient');
     }
 
     projectMap[project.name] = !projectMap[project.name];
@@ -53,13 +53,12 @@ export function ProjectsList({ projects }: ProjectListProps) {
   return (
     <List>
       {projects.map((project) => (
-        <ProjectContainer
-          key={project.name}
-          onClick={(e) => {
-            handleClick(project, e.currentTarget);
-          }}
-        >
-          <ProjectHeader>
+        <ProjectContainer key={project.name}>
+          <ProjectHeader
+            onClick={(e) => {
+              handleClick(project, e.currentTarget);
+            }}
+          >
             <Name>{project.name}</Name>
             <Circle src={circle} alt='circle icon' />
             <HLine />

diff --git a/src/pages/Insights/Insights.styles.tsx b/src/pages/Insights/Insights.styles.tsx
@@ -56,6 +56,7 @@ export const BlogsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     justify-content: center;
+    width: 100%;
   }
 `;
 
@@ -78,7 +79,7 @@ export const BlogPost = styled.div`
   }
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    width: calc(100% - 3rem);
+    width: 95vw;
   }
 `;
 
@@ -89,7 +90,8 @@ export const Image = styled.img`
   min-height: 31rem;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
-    height: 65%;
+    min-height: unset;
+    height: 55%;
   }
 `;
 
@@ -127,11 +129,13 @@ export const TitleContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem;
+    gap: 1rem;
 
     & h1 {
       white-space: unset;
       text-overflow: unset;
       overflow: unset;
+      font-size: 1.8rem;
     }
   }
 `;
@@ -148,6 +152,10 @@ export const DescriptionContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 2rem 2rem 0;
+
+    & p {
+      font-size: 1.8rem;
+    }
   }
 `;
 
@@ -163,6 +171,10 @@ export const TagsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem 2rem;
+
+    & div strong {
+      font-size: 1.8rem;
+    }
   }
 `;
 

diff --git a/src/pages/Insights/Insights.tsx b/src/pages/Insights/Insights.tsx
@@ -19,13 +19,21 @@ import {
 import VIDEO_CHROME from '~/assets/videos/insights.webm';
 import VIDEO_SAFARI from '~/assets/videos/insights.mp4';
 import { TitleContainer } from '../Landing/HeroSection';
+import { MOBILE_MAX_WIDTH } from '~/components/common';
 import StarIcon from '/img/footer/star-icon.svg';
 import styled from 'styled-components';
 
 const BlogTitleContainer = styled(TitleContainer)`
   & video {
     max-width: 450px;
   }
+
+  @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
+    padding-top: 5rem;
+    & video {
+      max-width: 300px;
+    }
+  }
 `;
 
 export const Star = styled.img.attrs({ loading: 'lazy' })`

diff --git a/src/pages/Landing/IntroMask/Intro.styles.tsx b/src/pages/Landing/IntroMask/Intro.styles.tsx
@@ -14,7 +14,7 @@ export const IntroContainer = styled.div`
   flex-direction: column;
   align-items: center;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   justify-content: space-between;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
@@ -84,6 +84,7 @@ export const Text = styled.span<StyledContainerProps>`
   user-select: none;
   opacity: ${(props) => 1 - props.backgroundEffect * 3};
   z-index: 100;
+  text-align: center;
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     font-size: 2rem;

diff --git a/src/pages/Landing/IntroMask/Intro.tsx b/src/pages/Landing/IntroMask/Intro.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Draggable from 'react-draggable';
 
 import { StyledNavbar } from '~/containers/Navbar/Navbar.styles';
@@ -28,10 +29,16 @@ export function Intro({ showBackground, setShowBackground, ...props }: IntroProp
   const [activateDragEffect, setDragEffect] = useState(false);
   const [backgroundEffect, setBackgroundEffect] = useState(0);
   const nodeRef = useRef(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (activateDragEffect) {
       setShowBackground(true);
+
+      // wait until animation is done to navigate to landing
+      setTimeout(() => {
+        navigate('/landing');
+      }, 1400);
     }
   }, [activateDragEffect]);