From 77b57bddb4794ffac9bbefd17b5ceb4758433bee Mon Sep 17 00:00:00 2001 From: Ardy Date: Mon, 27 Feb 2023 15:26:12 -0400 Subject: [PATCH 01/17] fix: title font color --- index.html | 3 ++- src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx | 3 ++- src/pages/Team/TeamGrid.tsx/index.tsx | 14 ++++++++------ 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 2a2ae23e..f1faea7a 100644 --- a/index.html +++ b/index.html @@ -34,7 +34,8 @@ - + + DeFi Wonderland diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index 5b1fc37f..6f36c614 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -204,7 +204,8 @@ export const Name = styled.strong` font-family: ${FONT_MEDIUM_L}; font-size: ${FONT_SIZE_24}; text-transform: uppercase; - opacity: 1 !important; + opacity: 1; + color: white; @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { font-size: 2rem; diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index 5ed350d1..f5193b7a 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -57,12 +57,14 @@ export function WonderTeamSection() { className={`member member-${index} flip-card-back`} > - {` - - 10+ years in Software Development - - Addicted to scalability and conventions - - University dropout - - Spent 3 years in the military - `} + - 10+ years in Software Development +
+ - Addicted to scalability and conventions +
+ - University dropout +
+ - Spent 3 years in the military +
{/* From 44fff9321a5741f0b6b21bb0b9da8a7ab714b2c0 Mon Sep 17 00:00:00 2001 From: Ardy Date: Mon, 27 Feb 2023 15:30:35 -0400 Subject: [PATCH 02/17] fix: backface visibility --- src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index 6f36c614..ba191dfa 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -273,6 +273,9 @@ export const Social = styled.div` display: flex; align-items: center; justify-content: start; + + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; `; export const SImg = styled.img` From 76c6dc26e8b9ee47e93d33e7f738e59950869f2e Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 10:05:02 -0400 Subject: [PATCH 03/17] fix: deploy --- src/pages/Team/TeamGrid.tsx/index.tsx | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index f5193b7a..5ed350d1 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -57,14 +57,12 @@ export function WonderTeamSection() { className={`member member-${index} flip-card-back`} > - - 10+ years in Software Development -
- - Addicted to scalability and conventions -
- - University dropout -
- - Spent 3 years in the military -
+ {` + - 10+ years in Software Development + - Addicted to scalability and conventions + - University dropout + - Spent 3 years in the military + `} {/* From 788350bf9a7cdcf37e0ff00cc34efd9c575f62e7 Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 11:27:01 -0400 Subject: [PATCH 04/17] fix: hide reverse icons --- src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index ba191dfa..cfd586c0 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -273,14 +273,14 @@ export const Social = styled.div` display: flex; align-items: center; justify-content: start; - - -webkit-backface-visibility: hidden; /* Safari */ - backface-visibility: hidden; `; export const SImg = styled.img` padding: 0 0.4rem; opacity: 0.8; + + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; `; export const EyeImage = styled(KeyImage).attrs({ From 63e73a4dd9a2fe9343617e844ee18f74cfc3e1bc Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 12:04:02 -0400 Subject: [PATCH 05/17] feat: update members data --- src/constants/teamMembers.ts | 147 +++++++++++++++++++++----- src/pages/Team/TeamGrid.tsx/index.tsx | 16 +-- 2 files changed, 133 insertions(+), 30 deletions(-) diff --git a/src/constants/teamMembers.ts b/src/constants/teamMembers.ts index 753cf5d3..75f6ad6f 100644 --- a/src/constants/teamMembers.ts +++ b/src/constants/teamMembers.ts @@ -1,50 +1,149 @@ export const MEMBERS = [ - { name: "MATI", position: "Position", twitterHandle: "@test", link: "/" }, - { name: "BILLI", position: "Position", twitterHandle: "@test", link: "/" }, - { name: "PEPO", position: "Position", twitterHandle: "@test", link: "/" }, + { + name: "MATI", + position: "Position", + twitter: "https://twitter.com/MatiasNisenson", + github: "", + description: "", + }, + { + name: "BILLI", + position: "Position", + twitter: "", + github: "https://github.com/Billy-103", + description: "", + }, + { + name: "PEPO", + position: "Position", + twitter: "https://twitter.com/0xPEPO", + github: "https://github.com/vPEPO", + description: "", + }, + { + name: "AUSTRIAN", + position: "Position", + twitter: "https://twitter.com/0xAustrian", + github: "https://github.com/0xAustrian", + description: "", + }, { name: "DR GORILLA", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "https://twitter.com/DrGorilla_md", + github: "https://github.com/drgorillamd", + description: "", }, { name: "JABBERWOCK", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "https://twitter.com/0xGorillaDev", + github: "https://github.com/0xJabberwock", + description: "", + }, + { + name: "NG", + position: "Position", + twitter: "https://twitter.com/ngndev", + github: "https://github.com/0xng", + description: "", }, - { name: "NG", position: "Position", twitterHandle: "@test", link: "/" }, { name: "OXGORILLA", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "https://twitter.com/0xGorillaDev", + github: "https://github.com/0xGorilla", + description: "", + }, + { + name: "ASHITAKA", + position: "Position", + twitter: "https://twitter.com/0xAshitakah", + github: "https://github.com/ashitakah", + description: "", + }, + { + name: "GAS1CENT", + position: "Position", + twitter: "https://twitter.com/gas1cent", + github: "https://github.com/gas1cent", + description: "", + }, + { + name: "GOTZEN", + position: "Position", + twitter: "https://twitter.com/0xGotzen", + github: "https://github.com/gotzenx", + description: "", }, - { name: "ASHITAKA", position: "Position", twitterHandle: "@test", link: "/" }, - { name: "GAS1CENT", position: "Position", twitterHandle: "@test", link: "/" }, - { name: "GOTZEN", position: "Position", twitterHandle: "@test", link: "/" }, { name: "WEI3ERHASE", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "https://twitter.com/wei3erHase", + github: "https://github.com/wei3erHase", + description: "", + }, + { + name: "PARTI", + position: "Position", + twitter: "https://twitter.com/0xParticle", + github: "https://github.com/0xParticle", + description: "", }, - { name: "PARTICLE", position: "Position", twitterHandle: "@test", link: "/" }, { name: "SKELETOR", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "https://twitter.com/Skeletor_Space", + github: "https://github.com/skeletor-spaceman", + description: "", + }, + { + name: "SHAITO", + position: "Position", + twitter: "https://twitter.com/0xShaito", + github: "https://github.com/0xShaito", + description: "", }, - { name: "SHAITO", position: "Position", twitterHandle: "@test", link: "/" }, { name: "TURTLEMOJI", position: "Position", - twitterHandle: "@test", - link: "/", + twitter: "", + github: "https://github.com/turtlemoji", + description: "", + }, + { + name: "ARDY", + position: "Position", + twitter: "https://twitter.com/0xArdy", + github: "https://github.com/0xArdy", + description: "", + }, + { + name: "RBP", + position: "Position", + twitter: "", + github: "", + description: "", + }, + { + name: "JOXES", + position: "Position", + twitter: "https://twitter.com/0xJoxes", + github: "https://github.com/Joxess", + description: "", + }, + { + name: "RACCON", + position: "Position", + twitter: "https://twitter.com/0xRaccoonDev", + github: "https://github.com/0xRaccoon", + description: "", + }, + { + name: "MONO", + position: "Position", + twitter: "https://twitter.com/0x_mono", + github: "", + description: "", }, - { name: "ARDY", position: "Position", twitterHandle: "@0xArdy", link: "/" }, - { name: "RBP", position: "Position", twitterHandle: "@test", link: "/" }, - { name: "JOXES", position: "Position", twitterHandle: "@test", link: "/" }, ]; diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index 5ed350d1..f5fe8671 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -41,13 +41,17 @@ export function WonderTeamSection() { {member.position} - - - + {member.twitter && ( + + + + )} - - - + {member.github && ( + + + + )} From c78ea3f7c45850c680bb6ea136ea4f2fcca11cb1 Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 12:21:01 -0400 Subject: [PATCH 06/17] fix: members border --- .../Team/TeamGrid.tsx/TeamGrid.styles.tsx | 77 ++++++++++++++----- 1 file changed, 58 insertions(+), 19 deletions(-) diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index cfd586c0..6d559062 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -69,31 +69,52 @@ export const TeamGrid = styled.div` border-bottom: 1px solid rgba(255, 255, 255, 0.4); } - & .member.member-2, - & .member.member-5, - & .member.member-8, - & .member.member-11, - & .member.member-14, - & .member.member-17 { - border-right: unset; - } - - & .member.member-15, - & .member.member-16, - & .member.member-17 { - border-bottom: unset; - } + ${(props) => { + let memberBorder = ""; + for (let i = 0; i < MEMBERS.length; i++) { + if (!((i + 1) % 3)) { + memberBorder += ` + & .member.member-${i} { + border-right: unset; + } + `; + } + } + return memberBorder; + }} + + ${(props) => { + switch (MEMBERS.length % 3) { + case 0: + return ` + & .member.member-${MEMBERS.length - 3}, + & .member.member-${MEMBERS.length - 2}, + & .member.member-${MEMBERS.length - 1} { + border-bottom: unset; + } + `; + case 1: + return ` + & .member.member-${MEMBERS.length - 1} { + border-bottom: unset; + } + `; + case 2: + return ` + & .member.member-${MEMBERS.length - 2}, + & .member.member-${MEMBERS.length - 1} { + border-bottom: unset; + } + `; + } + }} @media screen and (max-width: 900px) { grid-template-columns: auto auto; & .member { border-right: unset; - border-bottom: 1px solid rgba(255, 255, 255, 0.4); - } - - & .member.member-15 { - border-bottom: 1px solid rgba(255, 255, 255, 0.4); + border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important; } ${(props) => { @@ -109,6 +130,24 @@ export const TeamGrid = styled.div` } return memberBorder; }} + + ${(props) => { + switch (MEMBERS.length % 2) { + case 0: + return ` + & .member.member-${MEMBERS.length - 2}, + & .member.member-${MEMBERS.length - 1} { + border-bottom: unset !important; + } + `; + case 1: + return ` + & .member.member-${MEMBERS.length - 1} { + border-bottom: unset !important; + } + `; + } + }} } @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { From 79518b6358dc57f9dec98a2c67f334b66e6f738a Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 13:55:11 -0400 Subject: [PATCH 07/17] style: set user-select none to every image --- src/assets/css/global.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/assets/css/global.css b/src/assets/css/global.css index ca13d581..a184471f 100644 --- a/src/assets/css/global.css +++ b/src/assets/css/global.css @@ -167,3 +167,7 @@ body::-webkit-scrollbar-thumb:hover { body::-webkit-scrollbar-thumb:active { background-color: #999999; } + +img { + user-select: none; +} From d02dd1ca0310e8aa26e6f232bf3a983c73e168a5 Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 14:09:21 -0400 Subject: [PATCH 08/17] test amplifiy --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index f1faea7a..9486783a 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,6 @@ - DeFi Wonderland From f56b9a7417356ac79fed7b56e593765192c72948 Mon Sep 17 00:00:00 2001 From: turtlemoji <78362532+turtlemoji@users.noreply.github.com> Date: Tue, 28 Feb 2023 15:24:10 -0300 Subject: [PATCH 09/17] test: pr preview --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index 9486783a..80102917 100644 --- a/index.html +++ b/index.html @@ -34,6 +34,7 @@ + DeFi Wonderland From 6182f8a3f69aa9364045ae8d5d976628c046ce91 Mon Sep 17 00:00:00 2001 From: Ardy Date: Tue, 28 Feb 2023 15:28:25 -0400 Subject: [PATCH 10/17] feat: hide description when the user clicks again --- .../Team/TeamGrid.tsx/TeamGrid.styles.tsx | 14 +++ src/pages/Team/TeamGrid.tsx/index.tsx | 102 +++++++++++------- 2 files changed, 77 insertions(+), 39 deletions(-) diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index 6d559062..a712bc3d 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -171,6 +171,7 @@ export const FlipCard = styled.button` text-align: start; perspective: 1000px; /* Remove this if you don't want the 3D effect */ padding: unset; + width: 100%; &:active .flip-card-inner, &:focus .flip-card-inner { @@ -340,3 +341,16 @@ export const MemberLink = styled(Link)` z-index: 1; transition: all 200ms linear; `; + +export const MemberContainer = styled.div` + position: relative; +`; + +export const Mask = styled.div` + height: 100%; + width: 100%; + position: absolute; + top: 0; + z-index: 1; + cursor: pointer; +`; diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index f5fe8671..d009998c 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -1,3 +1,5 @@ +import { useState } from "react"; + import { Container, Divider, @@ -16,12 +18,34 @@ import { FlipCard, FlipCardInner, SImg, + Mask, + MemberContainer, } from "./TeamGrid.styles"; import { MEMBERS } from "~/constants/teamMembers"; import TwitterIcon from "/img/footer/twitter-icon.svg"; import GithubIcon from "/img/footer/github-icon.svg"; export function WonderTeamSection() { + const showDescription = new Array(MEMBERS.length).fill(false); + const [showDesc, setShowDesc] = useState(showDescription); + + const resetValues = () => { + const arrayCopy = []; + let i = -1; + + while (++i < showDesc.length) { + arrayCopy[i] = false; + } + + return arrayCopy; + }; + + const handleClick = (index: number) => { + const arrayCopy = resetValues(); + arrayCopy[index] = true; + setShowDesc(arrayCopy); + }; + return ( @@ -30,51 +54,51 @@ export function WonderTeamSection() { {MEMBERS.map((member, index) => ( - - - -
- {member.name} - {member.position} -
- - {member.twitter && ( - - - - )} + + {showDesc[index] && ( + setShowDesc(resetValues())} /> + )} + handleClick(index)}> + + +
+ {member.name} + {member.position} +
+ + {member.twitter && ( + + + + )} - {member.github && ( - - - - )} - + {member.github && ( + + + + )} + - - - - - {` + + + + + {` - 10+ years in Software Development - Addicted to scalability and conventions - University dropout - Spent 3 years in the military - `} - - - {/* - - */} - - - + `} + + + + + ))} Date: Wed, 1 Mar 2023 08:59:19 -0400 Subject: [PATCH 11/17] style: add member description --- src/constants/teamMembers.ts | 63 ++++++++++++------- .../Team/TeamGrid.tsx/TeamGrid.styles.tsx | 12 +++- src/pages/Team/TeamGrid.tsx/index.tsx | 50 +++++---------- 3 files changed, 68 insertions(+), 57 deletions(-) diff --git a/src/constants/teamMembers.ts b/src/constants/teamMembers.ts index 75f6ad6f..8426862f 100644 --- a/src/constants/teamMembers.ts +++ b/src/constants/teamMembers.ts @@ -4,146 +4,167 @@ export const MEMBERS = [ position: "Position", twitter: "https://twitter.com/MatiasNisenson", github: "", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "BILLI", position: "Position", twitter: "", github: "https://github.com/Billy-103", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "PEPO", position: "Position", twitter: "https://twitter.com/0xPEPO", github: "https://github.com/vPEPO", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "AUSTRIAN", position: "Position", twitter: "https://twitter.com/0xAustrian", github: "https://github.com/0xAustrian", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "DR GORILLA", position: "Position", twitter: "https://twitter.com/DrGorilla_md", github: "https://github.com/drgorillamd", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "JABBERWOCK", position: "Position", twitter: "https://twitter.com/0xGorillaDev", github: "https://github.com/0xJabberwock", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "NG", position: "Position", twitter: "https://twitter.com/ngndev", github: "https://github.com/0xng", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "OXGORILLA", position: "Position", twitter: "https://twitter.com/0xGorillaDev", github: "https://github.com/0xGorilla", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "ASHITAKA", position: "Position", twitter: "https://twitter.com/0xAshitakah", github: "https://github.com/ashitakah", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "GAS1CENT", position: "Position", twitter: "https://twitter.com/gas1cent", github: "https://github.com/gas1cent", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "GOTZEN", position: "Position", twitter: "https://twitter.com/0xGotzen", github: "https://github.com/gotzenx", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "WEI3ERHASE", position: "Position", twitter: "https://twitter.com/wei3erHase", github: "https://github.com/wei3erHase", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "PARTI", position: "Position", twitter: "https://twitter.com/0xParticle", github: "https://github.com/0xParticle", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "SKELETOR", position: "Position", twitter: "https://twitter.com/Skeletor_Space", github: "https://github.com/skeletor-spaceman", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "SHAITO", position: "Position", twitter: "https://twitter.com/0xShaito", github: "https://github.com/0xShaito", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "TURTLEMOJI", position: "Position", twitter: "", github: "https://github.com/turtlemoji", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "ARDY", position: "Position", twitter: "https://twitter.com/0xArdy", github: "https://github.com/0xArdy", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "RBP", position: "Position", twitter: "", github: "", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "JOXES", position: "Position", twitter: "https://twitter.com/0xJoxes", github: "https://github.com/Joxess", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "RACCON", position: "Position", twitter: "https://twitter.com/0xRaccoonDev", github: "https://github.com/0xRaccoon", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "MONO", position: "Position", twitter: "https://twitter.com/0x_mono", github: "", - description: "", + description: + "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, ]; diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index a712bc3d..70d52edc 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -109,7 +109,7 @@ export const TeamGrid = styled.div` } }} - @media screen and (max-width: 900px) { + @media screen and (max-width: ${TABLET_MAX_WIDTH}) { grid-template-columns: auto auto; & .member { @@ -185,7 +185,7 @@ export const FlipCardInner = styled.div` transform-style: preserve-3d; `; -export const MemberContainerFront = styled.div` +export const CardFront = styled.div` position: relative; display: flex; flex-direction: column; @@ -217,7 +217,7 @@ export const MemberContainerFront = styled.div` } `; -export const MemberContainerBack = styled(MemberContainerFront)` +export const CardBack = styled(CardFront)` position: absolute; top: 0rem; background-image: radial-gradient( @@ -229,6 +229,8 @@ export const MemberContainerBack = styled(MemberContainerFront)` background-size: cover; background-position: bottom; transform: rotateX(-180deg); + width: 100%; + overflow: hidden; & img { opacity: 1; @@ -263,6 +265,10 @@ export const Position = styled.p` } `; +export const Description = styled(Position)` + font-size: 1.6rem; +`; + export const Divider = styled.canvas` background: linear-gradient( to right, diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index d009998c..f4981098 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -3,8 +3,8 @@ import { useState } from "react"; import { Container, Divider, - MemberContainerFront, - MemberContainerBack, + CardFront, + CardBack, Name, Position, Social, @@ -20,28 +20,18 @@ import { SImg, Mask, MemberContainer, + Description, } from "./TeamGrid.styles"; import { MEMBERS } from "~/constants/teamMembers"; import TwitterIcon from "/img/footer/twitter-icon.svg"; import GithubIcon from "/img/footer/github-icon.svg"; export function WonderTeamSection() { - const showDescription = new Array(MEMBERS.length).fill(false); - const [showDesc, setShowDesc] = useState(showDescription); - - const resetValues = () => { - const arrayCopy = []; - let i = -1; - - while (++i < showDesc.length) { - arrayCopy[i] = false; - } - - return arrayCopy; - }; + const hideDescriptions = new Array(MEMBERS.length).fill(false); + const [showDesc, setShowDesc] = useState(hideDescriptions); const handleClick = (index: number) => { - const arrayCopy = resetValues(); + const arrayCopy = hideDescriptions; arrayCopy[index] = true; setShowDesc(arrayCopy); }; @@ -54,15 +44,13 @@ export function WonderTeamSection() { {MEMBERS.map((member, index) => ( - + {showDesc[index] && ( - setShowDesc(resetValues())} /> + setShowDesc(hideDescriptions)} /> )} - handleClick(index)}> + handleClick(index)}> - +
{member.name} {member.position} @@ -82,20 +70,16 @@ export function WonderTeamSection() { - - + + - - {` - - 10+ years in Software Development - - Addicted to scalability and conventions - - University dropout - - Spent 3 years in the military - `} - - + + From d390a429fd59212ca674cb731d4e672ecd854dcf Mon Sep 17 00:00:00 2001 From: Ardy Date: Wed, 1 Mar 2023 09:14:25 -0400 Subject: [PATCH 12/17] fix: remove dangerous code --- src/constants/teamMembers.ts | 42 +++++++++---------- .../Team/TeamGrid.tsx/TeamGrid.styles.tsx | 1 + src/pages/Team/TeamGrid.tsx/index.tsx | 4 +- 3 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/constants/teamMembers.ts b/src/constants/teamMembers.ts index 8426862f..f819a3a1 100644 --- a/src/constants/teamMembers.ts +++ b/src/constants/teamMembers.ts @@ -5,7 +5,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/MatiasNisenson", github: "", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "BILLI", @@ -13,7 +13,7 @@ export const MEMBERS = [ twitter: "", github: "https://github.com/Billy-103", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "PEPO", @@ -21,7 +21,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xPEPO", github: "https://github.com/vPEPO", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "AUSTRIAN", @@ -29,7 +29,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xAustrian", github: "https://github.com/0xAustrian", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "DR GORILLA", @@ -37,7 +37,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/DrGorilla_md", github: "https://github.com/drgorillamd", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "JABBERWOCK", @@ -45,7 +45,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xGorillaDev", github: "https://github.com/0xJabberwock", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "NG", @@ -53,7 +53,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/ngndev", github: "https://github.com/0xng", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "OXGORILLA", @@ -61,7 +61,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xGorillaDev", github: "https://github.com/0xGorilla", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "ASHITAKA", @@ -69,7 +69,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xAshitakah", github: "https://github.com/ashitakah", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "GAS1CENT", @@ -77,7 +77,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/gas1cent", github: "https://github.com/gas1cent", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "GOTZEN", @@ -85,7 +85,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xGotzen", github: "https://github.com/gotzenx", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "WEI3ERHASE", @@ -93,7 +93,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/wei3erHase", github: "https://github.com/wei3erHase", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "PARTI", @@ -101,7 +101,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xParticle", github: "https://github.com/0xParticle", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "SKELETOR", @@ -109,7 +109,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/Skeletor_Space", github: "https://github.com/skeletor-spaceman", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "SHAITO", @@ -117,7 +117,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xShaito", github: "https://github.com/0xShaito", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "TURTLEMOJI", @@ -125,7 +125,7 @@ export const MEMBERS = [ twitter: "", github: "https://github.com/turtlemoji", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "ARDY", @@ -133,7 +133,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xArdy", github: "https://github.com/0xArdy", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "RBP", @@ -141,7 +141,7 @@ export const MEMBERS = [ twitter: "", github: "", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "JOXES", @@ -149,7 +149,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xJoxes", github: "https://github.com/Joxess", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "RACCON", @@ -157,7 +157,7 @@ export const MEMBERS = [ twitter: "https://twitter.com/0xRaccoonDev", github: "https://github.com/0xRaccoon", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, { name: "MONO", @@ -165,6 +165,6 @@ export const MEMBERS = [ twitter: "https://twitter.com/0x_mono", github: "", description: - "- 10+ years in Software Development
- Addicted to scalability and conventions
- University dropout
- Spent 3 years in the military

Fun fact: His OCD forces him to make the dishwasher look like a Tetris game!", + "- 10+ years in Software Development\n- Addicted to scalability and conventions\n- University dropout\n- Spent 3 years in the military\n\nFun fact: His OCD forces him to make the dishwasher look like a Tetris game!", }, ]; diff --git a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx index 70d52edc..d20bcf93 100644 --- a/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx +++ b/src/pages/Team/TeamGrid.tsx/TeamGrid.styles.tsx @@ -267,6 +267,7 @@ export const Position = styled.p` export const Description = styled(Position)` font-size: 1.6rem; + white-space: pre-wrap; `; export const Divider = styled.canvas` diff --git a/src/pages/Team/TeamGrid.tsx/index.tsx b/src/pages/Team/TeamGrid.tsx/index.tsx index f4981098..84e376a0 100644 --- a/src/pages/Team/TeamGrid.tsx/index.tsx +++ b/src/pages/Team/TeamGrid.tsx/index.tsx @@ -76,9 +76,7 @@ export function WonderTeamSection() { key={member.name} className={`member member-${index} flip-card-back`} > - + {member.description} From f2e74479fe111aa252e04ce811a8a06dc320c086 Mon Sep 17 00:00:00 2001 From: Ardy Date: Wed, 1 Mar 2023 10:09:44 -0400 Subject: [PATCH 13/17] fix: remove animation on mobile --- src/components/common/MainTitle.tsx | 14 +++++++++++ src/components/common/index.ts | 1 + src/containers/Navbar/index.tsx | 1 + src/pages/Blog/Blog.tsx | 6 ++--- src/pages/Landing/HeroSection/index.tsx | 15 +++++++++--- src/pages/Lore/Lore.tsx | 9 +++---- src/pages/Portfolio/index.tsx | 12 +++++----- src/pages/Team/index.tsx | 31 ++++++++++++++++++------- 8 files changed, 64 insertions(+), 25 deletions(-) create mode 100644 src/components/common/MainTitle.tsx diff --git a/src/components/common/MainTitle.tsx b/src/components/common/MainTitle.tsx new file mode 100644 index 00000000..240730c1 --- /dev/null +++ b/src/components/common/MainTitle.tsx @@ -0,0 +1,14 @@ +import styled from "styled-components"; + +import { FONT_DISPLAY } from "./Variables"; + +interface TitleProps { + fontSize?: number; +} +export const MainTitle = styled.h1` + font-family: ${FONT_DISPLAY}; + text-align: center; + font-size: ${(props) => (props.fontSize ? props.fontSize : 5)}rem; + width: max-content; + margin: 0 auto; +`; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index ace3dc10..60b8f94d 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -9,4 +9,5 @@ export * from "./LiquidDistortion"; export * from "./Ring"; export * from "./Section"; export * from "./SectionArticle"; +export * from "./MainTitle"; export * from "./Variables"; diff --git a/src/containers/Navbar/index.tsx b/src/containers/Navbar/index.tsx index e320d22e..55bbb691 100644 --- a/src/containers/Navbar/index.tsx +++ b/src/containers/Navbar/index.tsx @@ -70,6 +70,7 @@ export const Navbar = ({}: NavbarProps) => { }); if (index !== undefined) newNavLink[index].disabled = true; + setShowNavbar(false); setNavLink(newNavLink); }, [pathname]); diff --git a/src/pages/Blog/Blog.tsx b/src/pages/Blog/Blog.tsx index 7fd4200c..01b22159 100644 --- a/src/pages/Blog/Blog.tsx +++ b/src/pages/Blog/Blog.tsx @@ -1,7 +1,7 @@ import { useNavigate } from "react-router-dom"; import { POSTS } from "~/constants/posts"; -import { Distortion } from "~/components/common/DistortionText"; +import { Distortion, MainTitle } from "~/components/common"; import { PageContainer, Title, @@ -34,8 +34,8 @@ export function Blog() { )} {isMobile && ( <> - - + NEWS, STORIES AND + UPDATES FROM WONDERLAND )} diff --git a/src/pages/Landing/HeroSection/index.tsx b/src/pages/Landing/HeroSection/index.tsx index 52c078b3..47b7cc5a 100644 --- a/src/pages/Landing/HeroSection/index.tsx +++ b/src/pages/Landing/HeroSection/index.tsx @@ -1,7 +1,12 @@ import { FC } from "react"; import styled from "styled-components"; -import { Section, Distortion, MOBILE_MAX_WIDTH } from "~/components/common"; +import { + Section, + Distortion, + MOBILE_MAX_WIDTH, + MainTitle, +} from "~/components/common"; import { useWindowDimensions } from "~/hooks/windowDimensions"; const HeroDivider = styled.img` @@ -28,7 +33,7 @@ const StyledHeroSection = styled(Section)` background-image: url("/img/hero/hero_mobile.png"); & div { - top: 5rem; + top: 10rem; } } `; @@ -53,7 +58,11 @@ export const HeroSection: FC = ({ ...props }) => { /> )} {isMobile && ( - +
+ + TO HELP THE WEB3 ECOSYSTEM THRIVE + +
)} diff --git a/src/pages/Lore/Lore.tsx b/src/pages/Lore/Lore.tsx index 914d38cb..97b4d481 100644 --- a/src/pages/Lore/Lore.tsx +++ b/src/pages/Lore/Lore.tsx @@ -9,6 +9,7 @@ import { SPACING_512, SPACING_700, LiquidDistortion, + MainTitle, } from "~/components/common"; import { useWindowDimensions } from "~/hooks/windowDimensions"; import TextSection from "./TextSection"; @@ -96,10 +97,10 @@ export function Lore() { {isMobile && ( - - - - + WOND3RLAND + IS NOT A PLACE, + IT'S A FEELING WITHIN, + A PROCESS. )} diff --git a/src/pages/Portfolio/index.tsx b/src/pages/Portfolio/index.tsx index f68d657e..d9b65e8a 100644 --- a/src/pages/Portfolio/index.tsx +++ b/src/pages/Portfolio/index.tsx @@ -14,9 +14,9 @@ import { MobileTitleContainer, } from "./Portfolio.styles"; import { ProjectsList } from "./ProjectsList"; -import { Distortion } from "~/components/common/DistortionText"; import { Divider } from "./ProjectsList/ProjectsList.styles"; import { useWindowDimensions } from "~/hooks/windowDimensions"; +import { MainTitle, Distortion } from "~/components/common"; export function Portfolio() { const { isMobile } = useWindowDimensions(); @@ -39,11 +39,11 @@ export function Portfolio() { {isMobile && ( - - - - - + TOGETHER, + WE WANT TO SUSTAINBLY + BUILD A MORE INCLUSIVE + AND DECENTRALIZED + FINANCIAL ECOSYSTEM )} diff --git a/src/pages/Team/index.tsx b/src/pages/Team/index.tsx index b5762769..67a8fb09 100644 --- a/src/pages/Team/index.tsx +++ b/src/pages/Team/index.tsx @@ -1,6 +1,6 @@ import { WonderTeamSection } from "./TeamGrid.tsx"; import { BackgroundImg, Container, HeroDivider, TeamBall } from "./Team.styles"; -import { LiquidDistortion } from "~/components/common"; +import { LiquidDistortion, MainTitle } from "~/components/common"; import { useWindowDimensions } from "~/hooks/windowDimensions"; export function Team() { @@ -11,14 +11,27 @@ export function Team() { - - + {!isMobile && ( + <> + + + + )} + + {isMobile && ( + <> + WOND3RLAND IS NOT A PLACE, + + IT'S A FEELING WITHIN, A PROCESS. + + + )} From 465bfff052c8b16e733370a8d628a0fc4ba560fb Mon Sep 17 00:00:00 2001 From: Ardy Date: Wed, 1 Mar 2023 11:06:35 -0400 Subject: [PATCH 14/17] fix: letter spacing --- src/components/common/MainTitle.tsx | 2 ++ src/pages/Team/index.tsx | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/common/MainTitle.tsx b/src/components/common/MainTitle.tsx index 240730c1..c1a3006f 100644 --- a/src/components/common/MainTitle.tsx +++ b/src/components/common/MainTitle.tsx @@ -11,4 +11,6 @@ export const MainTitle = styled.h1` font-size: ${(props) => (props.fontSize ? props.fontSize : 5)}rem; width: max-content; margin: 0 auto; + letter-spacing: 0.4px; + line-height: 1.15; `; diff --git a/src/pages/Team/index.tsx b/src/pages/Team/index.tsx index 67a8fb09..9b09bb45 100644 --- a/src/pages/Team/index.tsx +++ b/src/pages/Team/index.tsx @@ -28,7 +28,7 @@ export function Team() { <> WOND3RLAND IS NOT A PLACE, - IT'S A FEELING WITHIN, A PROCESS. + IT'S A FEELING WITHIN, A PROCESS )} From 692f4d53d7a15bc07b4bcd09fb89c8665cf53a5f Mon Sep 17 00:00:00 2001 From: Ardy Date: Thu, 2 Mar 2023 08:26:23 -0400 Subject: [PATCH 15/17] fix: remove external lib --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 80102917..2a2ae23e 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,7 @@ - - + DeFi Wonderland From ec631cb85e68b3c18fcfe25a2c7e5becbc40b043 Mon Sep 17 00:00:00 2001 From: Ardy Date: Thu, 2 Mar 2023 12:14:53 -0400 Subject: [PATCH 16/17] style: reduce layout shifting --- src/pages/Blog/Blog.styles.tsx | 6 ++++++ src/pages/Portfolio/Portfolio.styles.tsx | 3 +-- src/pages/Team/Team.styles.tsx | 7 ++++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/pages/Blog/Blog.styles.tsx b/src/pages/Blog/Blog.styles.tsx index 7ffa66af..a61b3b3b 100644 --- a/src/pages/Blog/Blog.styles.tsx +++ b/src/pages/Blog/Blog.styles.tsx @@ -34,10 +34,12 @@ export const BackgroundImage = styled(SectionBackground)` export const Title = styled.div` margin-top: 16rem; margin-bottom: 10rem; + height: 22rem; @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { margin-top: 10rem; margin-bottom: 5rem; + height: unset; } `; @@ -104,6 +106,10 @@ export const DetailsContainer = styled.div` align-items: flex-start; height: 100%; width: 100%; + + @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { + padding: 0; + } `; export const TitleContainer = styled.div` diff --git a/src/pages/Portfolio/Portfolio.styles.tsx b/src/pages/Portfolio/Portfolio.styles.tsx index 89f361de..59dd732c 100644 --- a/src/pages/Portfolio/Portfolio.styles.tsx +++ b/src/pages/Portfolio/Portfolio.styles.tsx @@ -6,7 +6,6 @@ import { MOBILE_MAX_WIDTH, SectionBackground, SPACING_128, - SPACING_256, TABLET_MAX_WIDTH, } from "~/components/common"; @@ -27,7 +26,7 @@ export const HeroDivider = styled.div` flex-direction: column; justify-content: center; align-items: center; - margin-top: ${SPACING_256}; + margin-top: 21rem; @media screen and (max-width: ${TABLET_MAX_WIDTH}) { margin-top: 12rem; diff --git a/src/pages/Team/Team.styles.tsx b/src/pages/Team/Team.styles.tsx index a50acc71..c7651ad7 100644 --- a/src/pages/Team/Team.styles.tsx +++ b/src/pages/Team/Team.styles.tsx @@ -6,7 +6,6 @@ import { MOBILE_MAX_WIDTH, SectionBackground, SPACING_1152, - SPACING_256, SPACING_384, } from "~/components/common"; @@ -30,16 +29,18 @@ export const STitle = styled.img` export const HeroDivider = styled.div` width: 100%; + height: 51rem; bottom: 0; z-index: 3; display: flex; flex-direction: column; - justify-content: center; + justify-content: end; align-items: center; - margin-top: ${SPACING_256}; + margin-top: 18rem; @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { margin-top: 15.5rem; + height: unset; } `; From a466871f840e1d2d8ef35da2b986c2e0aa77b4bc Mon Sep 17 00:00:00 2001 From: Ardy Date: Fri, 3 Mar 2023 09:16:15 -0400 Subject: [PATCH 17/17] feat: optimize loading on mobile --- src/pages/Landing/IntroMask/Intro.styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Landing/IntroMask/Intro.styles.tsx b/src/pages/Landing/IntroMask/Intro.styles.tsx index 6a94099b..33e8dfa8 100644 --- a/src/pages/Landing/IntroMask/Intro.styles.tsx +++ b/src/pages/Landing/IntroMask/Intro.styles.tsx @@ -22,7 +22,7 @@ export const IntroContainer = styled.div` justify-content: space-between; @media screen and (max-width: ${MOBILE_MAX_WIDTH}) { - background-image: url("/img/hero/hero-bg.jpg"); + background-image: url("/img/hero/hero_mobile.png"); background-repeat: no-repeat; background-position: center; background-size: cover;