From 5808a91e07482fd8b3aa9d87d419d042b606ba63 Mon Sep 17 00:00:00 2001 From: santosh898 Date: Fri, 29 Nov 2024 09:49:43 +0530 Subject: [PATCH] Added Web3 Section --- src/components/Header.tsx | 12 +++--- src/components/Skills.tsx | 48 +++++++++++----------- src/logos/alchemy.svg | 5 +++ src/logos/ethers.svg | 5 +++ src/logos/hardhat.svg | 36 +++++++++++++++++ src/logos/infura.svg | 5 +++ src/logos/metamask.svg | 84 +++++++++++++++++++++++++++++++++++++++ src/logos/solidity.svg | 5 +++ 8 files changed, 171 insertions(+), 29 deletions(-) create mode 100644 src/logos/alchemy.svg create mode 100644 src/logos/ethers.svg create mode 100644 src/logos/hardhat.svg create mode 100644 src/logos/infura.svg create mode 100644 src/logos/metamask.svg create mode 100644 src/logos/solidity.svg diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b7535d6..360e292 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -29,6 +29,11 @@ const Header = () => { label: "Phone", href: "tel:+919985094687", }, + { + icon: Mail, + label: "Email", + href: "mailto:me.sai.santosh@email.com", + }, { icon: Github, label: "GitHub", @@ -39,11 +44,6 @@ const Header = () => { label: "LinkedIn", href: "https://www.linkedin.com/in/santosh898", }, - { - icon: Mail, - label: "Email", - href: "mailto:me.sai.santosh@email.com", - }, ].map(({ icon: Icon, label, href }) => ( @@ -67,7 +67,7 @@ const Header = () => { -
+

Experienced Tech Lead with expertise in modern web technologies. Passionate about creating efficient, scalable, and innovative diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx index e371944..0e438f2 100644 --- a/src/components/Skills.tsx +++ b/src/components/Skills.tsx @@ -1,6 +1,10 @@ "use client"; +import { useState } from "react"; +import { ChevronDown, ChevronUp } from "lucide-react"; + import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; import ReactLogo from "@/logos/react.svg"; import ReactNativeLogo from "@/logos/react-native.svg"; @@ -23,37 +27,48 @@ import WebextensionsLogo from "@/logos/webextensions.svg"; import WebrtcLogo from "@/logos/webrtc.svg"; import ThingsboardLogo from "@/logos/thingsboard.svg"; import DockerLogo from "@/logos/docker.svg"; -import { Button } from "./ui/button"; -import { ChevronDown, ChevronUp } from "lucide-react"; -import { useEffect, useState } from "react"; +import SolidityLogo from "@/logos/solidity.svg"; +import EthersLogo from "@/logos/ethers.svg"; +import AlchemyLogo from "@/logos/alchemy.svg"; +import HardhatLogo from "@/logos/hardhat.svg"; +import InfuraLogo from "@/logos/infura.svg"; +import MetamaskLogo from "@/logos/metamask.svg"; const seggregatedSkills = { frontend: [ { name: "React", logo: ReactLogo }, + { name: "Typescript", logo: TypescriptLogo }, + { name: "Tailwind", logo: TailwindLogo }, + { name: "Next.JS", logo: NextjsLogo }, { name: "React Native", logo: ReactNativeLogo }, { name: "Javascript", logo: JavascriptLogo }, - { name: "Typescript", logo: TypescriptLogo }, { name: "Styled Components", logo: StyledComponentsLogo }, - { name: "Tailwind", logo: TailwindLogo }, { name: "Vue.JS", logo: VuejsLogo }, { name: "Solid.JS", logo: SolidjsLogo }, { name: "Redux", logo: ReduxLogo }, - { name: "Next.JS", logo: NextjsLogo }, { name: "Vitest/Jest", logo: VitestLogo }, ], backend: [ { name: "Node.JS", logo: NodejsLogo }, { name: "Postgres", logo: PostgresqlLogo }, - { name: "GraphQL", logo: GraphqlLogo }, { name: "Firebase", logo: FirebaseLogo }, - { name: "Microservices", logo: MicroservicesLogo }, { name: "Docker", logo: DockerLogo }, + { name: "GraphQL", logo: GraphqlLogo }, + { name: "Microservices", logo: MicroservicesLogo }, ], misc: [ { name: "Electron.JS", logo: ElectronLogo }, { name: "Web Extensions", logo: WebextensionsLogo }, { name: "WebRTC", logo: WebrtcLogo }, + { name: "Metamask", logo: MetamaskLogo }, { name: "Thingsboard", logo: ThingsboardLogo }, + { name: "Infura", logo: InfuraLogo }, + ], + web3: [ + { name: "Solidity", logo: SolidityLogo }, + { name: "Ethers", logo: EthersLogo }, + { name: "Hardhat", logo: HardhatLogo }, + { name: "Alchemy", logo: AlchemyLogo }, ], }; @@ -70,21 +85,8 @@ function SkillSection({ expanded: boolean; onToggle: () => void; }) { - const [isMobile, setIsMobile] = useState(false); - - useEffect(() => { - const checkMobile = () => setIsMobile(window.innerWidth < 1024); - checkMobile(); - window.addEventListener("resize", checkMobile); - return () => window.removeEventListener("resize", checkMobile); - }, []); - - const displayedSkills = !isMobile - ? skills - : expanded - ? skills - : skills.slice(0, ITEMS_TO_SHOW); - const showToggle = skills.length > ITEMS_TO_SHOW && isMobile; + const displayedSkills = expanded ? skills : skills.slice(0, ITEMS_TO_SHOW); + const showToggle = skills.length > ITEMS_TO_SHOW; return (

diff --git a/src/logos/alchemy.svg b/src/logos/alchemy.svg new file mode 100644 index 0000000..e5bb07b --- /dev/null +++ b/src/logos/alchemy.svg @@ -0,0 +1,5 @@ + + Alchemy + + diff --git a/src/logos/ethers.svg b/src/logos/ethers.svg new file mode 100644 index 0000000..b801733 --- /dev/null +++ b/src/logos/ethers.svg @@ -0,0 +1,5 @@ + + Ethers + + diff --git a/src/logos/hardhat.svg b/src/logos/hardhat.svg new file mode 100644 index 0000000..1019868 --- /dev/null +++ b/src/logos/hardhat.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/logos/infura.svg b/src/logos/infura.svg new file mode 100644 index 0000000..ebaab7b --- /dev/null +++ b/src/logos/infura.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/logos/metamask.svg b/src/logos/metamask.svg new file mode 100644 index 0000000..a87edf3 --- /dev/null +++ b/src/logos/metamask.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/logos/solidity.svg b/src/logos/solidity.svg new file mode 100644 index 0000000..b9eb2ad --- /dev/null +++ b/src/logos/solidity.svg @@ -0,0 +1,5 @@ + + Solidity + +