Add new projects (#383)

* Add new projects

* Optimize transition

src/components/PortalItem.tsx

@@ -52,7 +52,11 @@ export const PortalItem = ({
       {/* pc */}
       <div className="hidden lg:block" style={{ perspective: 800 }}>
         <div className="card-filp" style={{ ...(flipped === meta.name ? { transform: "rotateY(-180deg)" } : {}) }}>
-          <div className="back flex flex-col items-center justify-between bg-bg-component/70 p-5">
+          <div
+            className={`back flex flex-col items-center justify-between bg-bg-component/70 p-5 transition-opacity duration-700 ${
+              flipped === meta.name ? "opacity-100" : "opacity-0"
+            }`}
+          >
             <span className="text-bold text-xs text-white">{meta.description}</span>
             {meta.link.startsWith("//") ? (
               <a
@@ -74,7 +78,7 @@ export const PortalItem = ({
           </div>
           <div
             className="front flex flex-col items-center justify-center border border-transparent bg-bg-component p-3 transition hover:cursor-pointer hover:border-primary active:scale-95"
-            style={{ ...(flipped === meta.name ? { zIndex: -1, opacity: 0.2 } : {}) }}
+            style={{ ...(flipped === meta.name ? { zIndex: -1, opacity: 0.2 } : { opacity: 1 }) }}
             onClick={() => onClick(meta.name)}
           >
             <img alt="..." src={meta.logo} className="h-[5rem] w-[5rem]" />

src/config/portals.ts

@@ -48,6 +48,10 @@ import hardhat from "../assets/portals/hardhat.png";
 import web3Py from "../assets/portals/web3-py.png";
 import web3Js from "../assets/portals/web3-js.png";
 import ethersJs from "../assets/portals/ethers-js.png";
+import foundry from "../assets/portals/foundry.png";
+import brownie from "../assets/portals/brownie.png";
+import scaffoldEth from "../assets/portals/scaffold-eth.png";
+import walletconnect from "../assets/portals/walletconnect.png";
 
 export const portals = (t: TFunction): PortalMeta[] => [
   {
@@ -447,4 +451,38 @@ export const portals = (t: TFunction): PortalMeta[] => [
     ),
     tags: ["Infrastructure", "Tool"],
   },
+  {
+    logo: foundry,
+    name: t("Foundry"),
+    link: t("https://book.getfoundry.sh"),
+    description: t(
+      "Foundry is a blazing fast, portable and modular toolkit for Ethereum application development written in Rust."
+    ),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: brownie,
+    name: t("Brownie"),
+    link: t("https://eth-brownie.readthedocs.io/en/stable/"),
+    description: t(
+      "A Python-based development and testing framework for smart contracts targeting the Ethereum Virtual Machine."
+    ),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: scaffoldEth,
+    name: t("scaffold-eth"),
+    link: t("https://github.com/scaffold-eth/scaffold-eth#-scaffold-eth"),
+    description: t("Forkable Ethereum dev stack focused on fast product iterations."),
+    tags: ["Infrastructure", "Tool"],
+  },
+  {
+    logo: walletconnect,
+    name: t("Walletconnect"),
+    link: t("https://walletconnect.com/"),
+    description: t(
+      "WalletConnect is the Web3 messaging layer and a standard to connect blockchain wallets to Dapps. Our mission continues to expand the interoperability of the Web3 space by providing the best tooling and infrastructure for Wallets to deliver an outstanding user experience."
+    ),
+    tags: ["Wallet"],
+  },
 ];