From 931d579a068f20070b967fe5c8254a5bc5416ee5 Mon Sep 17 00:00:00 2001 From: Indra Lukmana Date: Tue, 13 Aug 2024 12:29:27 +0700 Subject: [PATCH 1/6] feat: :sparkles: add builder page for _indra lukmana_ --- .../_components/CardHover.tsx | 63 +++++++ .../_components/IndraAboutMeSection.tsx | 14 ++ .../_components/IndraSkillsSection.tsx | 54 ++++++ .../_components/IndraSocialsSection.tsx | 88 +++++++++ .../_components/IndraSparkleName.tsx | 107 +++++++++++ .../_data/skills.tsx | 177 ++++++++++++++++++ .../page.tsx | 27 +++ packages/nextjs/tailwind.config.js | 7 + 8 files changed, 537 insertions(+) create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills.tsx create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx new file mode 100644 index 0000000..6e0fd6f --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx @@ -0,0 +1,63 @@ +import { type SkillIcon } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills"; + +type CardProps = { + Icon: SkillIcon; + name: string; + description: string; + time: string; +}; + +const CardContent = ({ Icon, description, name, time }: CardProps) => { + return ( +
+
+ +

{name}

+
+

{description}

+
+ {time} +
+
+ ); +}; + +export const CardHoverEffect1 = (props: CardProps) => { + return ( +
+ + +
+ ); +}; + +export const CardHoverEffect2 = (props: CardProps) => { + return ( +
+ + +
+ ); +}; + +export const CardHoverEffect3 = (props: CardProps) => { + return ( +
+ + + + +
+ ); +}; + +export const CardHoverEffect4 = (props: CardProps) => { + return ( +
+ + + + +
+ ); +}; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx new file mode 100644 index 0000000..d024cdf --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx @@ -0,0 +1,14 @@ +const IndraAboutMeSection = () => { + return ( +
+

About Me

+

+ {`I'm a front-end engineer πŸ§‘β€πŸ’» with full-stack prowess πŸ’ͺ`}
+ {`I love to build products that are useful and delightful to use.`}
+ {`I'm a big fan of the Ethereum ecosystem and am interested in buidling on the blockchain tech.`} +

+
+ ); +}; + +export default IndraAboutMeSection; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx new file mode 100644 index 0000000..9997456 --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx @@ -0,0 +1,54 @@ +import { + CardHoverEffect1, + CardHoverEffect2, + CardHoverEffect3, + CardHoverEffect4, +} from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover"; +import { skills } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills"; + +const IndraSkillsSection = (): React.ReactElement => { + return ( +
+

Skills

+
+
    + {skills.map((skill, index) => ( +
  • + {index % 4 === 0 ? ( + + ) : index % 3 === 0 ? ( + + ) : index % 2 === 0 ? ( + + ) : ( + + )} +
    • + ))} +
+
+
+ ); +}; + +export default IndraSkillsSection; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection.tsx new file mode 100644 index 0000000..b7b6d6a --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection.tsx @@ -0,0 +1,88 @@ +import Link from "next/link"; +import { SiGithub, SiLinkedin, SiTwitter, SiYoutube } from "react-icons/si"; +import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo"; + +export const socials = [ + { + icon: SiGithub, + label: "GitHub", + name: "GitHub", + navbar: true, + url: "https://dub.sh/indra-github", + username: "indralukmana", + }, + { + icon: SiLinkedin, + label: "LinkedIn", + name: "LinkedIn", + navbar: true, + url: "https://dub.sh/indra-linkedin", + username: "in/indralukmana", + }, + { + icon: SiTwitter, + label: "Twitter", + name: "Twitter", + navbar: true, + url: "https://dub.sh/indra-twitter", + username: "@indluk", + }, + { + icon: SiYoutube, + label: "Youtube", + username: "@indluk", + name: "Youtube", + navbar: true, + url: "https://dub.sh/indra-youtube", + }, + { + name: "BuidlGuidl", + url: "https://app.buidlguidl.com/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3", + label: "BuidlGuidl", + icon: BuidlGuidlLogo, + username: "0x8...3C3", + }, +] as const; + +type Icon = (typeof socials)[number]["icon"]; + +type HoverRevealButtonProps = { + Icon: Icon; + label: string; +}; + +const HoverRevealButton = ({ Icon, label }: HoverRevealButtonProps) => { + return ( +
+ + + {label} + +
+ ); +}; + +const IndraSocialsSection = () => { + return ( +
+

Socials

+ +
+ ); +}; + +export default IndraSocialsSection; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName.tsx new file mode 100644 index 0000000..728b9e0 --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName.tsx @@ -0,0 +1,107 @@ +"use client"; + +import React, { CSSProperties, useEffect, useState } from "react"; + +interface Sparkle { + id: string; + x: string; + y: string; + color: string; + delay: number; + scale: number; + lifespan: number; +} + +interface SparklesTextProps { + className?: string; + text: string; + sparklesCount?: number; + colors?: { + first: string; + second: string; + }; +} + +const SparklesText: React.FC = ({ + text, + colors = { first: "#9E7AFF", second: "#FE8BBB" }, + className = "", + sparklesCount = 10, +}) => { + const [sparkles, setSparkles] = useState([]); + + useEffect(() => { + const generateStar = (): Sparkle => ({ + id: `${Math.random()}-${Date.now()}`, + x: `${Math.random() * 100}%`, + y: `${Math.random() * 100}%`, + color: Math.random() > 0.5 ? colors.first : colors.second, + delay: Math.random() * 2, + scale: Math.random() * 1 + 0.3, + lifespan: Math.random() * 10 + 5, + }); + + const initializeStars = () => { + setSparkles(Array.from({ length: sparklesCount }, generateStar)); + }; + + const updateStars = () => { + setSparkles(currentSparkles => + currentSparkles.map(star => (star.lifespan <= 0 ? generateStar() : { ...star, lifespan: star.lifespan - 0.1 })), + ); + }; + + initializeStars(); + const interval = setInterval(updateStars, 100); + + return () => clearInterval(interval); + }, [colors.first, colors.second, sparklesCount]); + + return ( +
+ {sparkles.map(sparkle => ( + + ))} + {text} +
+ ); +}; + +const Sparkle: React.FC = ({ id, x, y, color, delay, scale }) => { + return ( + + + + ); +}; + +const IndraSparkleName: React.FC = () => { + return ( + <> + + + ); +}; + +export default IndraSparkleName; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills.tsx new file mode 100644 index 0000000..a80cf5e --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills.tsx @@ -0,0 +1,177 @@ +import { AiOutlineApi } from "react-icons/ai"; +import { BsGearWideConnected } from "react-icons/bs"; +import { + SiChakraui, + SiCypress, + SiDocker, + SiElectron, + SiGit, + SiGraphql, + SiJavascript, + SiJest, + SiNextdotjs, + SiNodedotjs, + SiRadixui, + SiReact, + SiReacthookform, + SiReactquery, + SiRedux, + SiSocketdotio, + SiStorybook, + SiSwagger, + SiTailwindcss, + SiTestinglibrary, + SiTypescript, +} from "react-icons/si"; +import { TbBrandReactNative } from "react-icons/tb"; + +const currentYear = new Date().getFullYear(); + +export const skills = [ + { + description: "A JavaScript library for building user interfaces", + icon: SiReact, + name: "React", + time: `${currentYear - 2019}+ years`, + }, + { + description: "The React Framework for Production", + icon: SiNextdotjs, + name: "Next.js", + time: `${currentYear - 2019}+ years`, + }, + { + description: "Typed superset of JavaScript that compiles to plain JavaScript", + icon: SiTypescript, + name: "TypeScript", + time: `${currentYear - 2019}+ years`, + }, + { + description: "High-level, interpreted programming language", + icon: SiJavascript, + name: "JavaScript", + time: `${currentYear - 2017}+ years`, + }, + { + description: "JavaScript runtime built on Chrome's V8 JavaScript engine", + icon: SiNodedotjs, + name: "Node.js", + time: `${currentYear - 2017}+ years`, + }, + { + description: "Framework for building native apps using React", + icon: TbBrandReactNative, + name: "React Native", + time: `${currentYear - 2019}+ years`, + }, + { + description: "A library for managing server state in React applications", + icon: SiReactquery, + name: "React Query", + time: `${currentYear - 2020}+ years`, + }, + { + description: "A library for building forms in React applications", + icon: SiReacthookform, + name: "React Hook Form", + time: `${currentYear - 2020}+ years`, + }, + { + description: "Swagger is a framework for building RESTful web services", + icon: SiSwagger, + name: "Swagger", + time: `${currentYear - 2020}+ years`, + }, + { + description: "Query language for APIs", + icon: SiGraphql, + name: "GraphQL", + time: `${currentYear - 2022}+ years`, + }, + { + description: "Architectural style for designing networked applications", + icon: AiOutlineApi, + name: "REST APIs", + time: `${currentYear - 2018}+ years`, + }, + { + description: "Predictable state container for JavaScript apps", + icon: SiRedux, + name: "Redux", + time: `${currentYear - 2019}+ years`, + }, + { + description: "Utility-first CSS framework", + icon: SiTailwindcss, + name: "Tailwind CSS", + time: `${currentYear - 2020}+ years`, + }, + { + description: "Simple, modular and accessible component library for React", + icon: SiChakraui, + name: "Chakra UI", + time: `${currentYear - 2022}+ years`, + }, + { + description: "Unstyled, accessible components for building high‑quality design systems", + icon: SiRadixui, + name: "Radix UI", + time: `${currentYear - 2022}+ years`, + }, + { + description: "Protocol for real time data exchange", + icon: SiSocketdotio, + name: "Web Sockets", + time: `${currentYear - 2020}+ years`, + }, + { + description: "Tool for developing UI components in isolation", + icon: SiStorybook, + name: "Storybook", + time: `${currentYear - 2020}+ years`, + }, + { + description: "JavaScript testing framework", + icon: SiJest, + name: "Jest", + time: `${currentYear - 2020}+ years`, + }, + { + description: "React Testing Library (RTL) - react testing utilities that encourage good testing practices", + icon: SiTestinglibrary, + name: "RTL", + time: `${currentYear - 2020}+ years`, + }, + { + description: "End-to-end testing framework", + icon: SiCypress, + name: "Cypress", + time: `${currentYear - 2020}+ years`, + }, + { + description: "Tool for developing, shipping, and running applications", + icon: SiDocker, + name: "Docker", + time: `${currentYear - 2021}+ years`, + }, + { + description: "Continuous Integration and Continuous Deployment", + icon: BsGearWideConnected, + name: "CI/CD", + time: `${currentYear - 2019}+ years`, + }, + { + description: "Distributed version control system", + icon: SiGit, + name: "Git", + time: `${currentYear - 2015}+ years`, + }, + { + description: "Framework for building cross-platform desktop apps with web technologies", + icon: SiElectron, + name: "Electron", + time: `${currentYear - 2019}+ years`, + }, +] as const; + +export type SkillIcon = (typeof skills)[number]["icon"]; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx new file mode 100644 index 0000000..2841e51 --- /dev/null +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import IndraAboutMeSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection"; +import IndraSkillsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection"; +import IndraSocialsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection"; +import IndraSparkleName from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName"; +import { Address } from "~~/components/scaffold-eth"; + +const BuilderPage: React.FC = () => { + return ( +
+
+

+ +

+
+
+ + + + + + +
+ ); +}; + +export default BuilderPage; diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index 9099dc5..dc29874 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -81,6 +81,13 @@ module.exports = { }, animation: { "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite", + sparkle: "sparkle 1.5s ease-in-out infinite", + }, + keyframes: { + sparkle: { + "0%, 100%": { opacity: 0, transform: "scale(0) rotate(0deg)" }, + "50%": { opacity: 1, transform: "scale(1) rotate(180deg)" }, + }, }, }, }, From aff2defb4efeed401d943363a55136057c2f9666 Mon Sep 17 00:00:00 2001 From: Indra Lukmana Date: Tue, 13 Aug 2024 14:33:47 +0700 Subject: [PATCH 2/6] feat: :sparkles: add web and restructure for separation of concern --- .../_components/CardHover.tsx | 4 +- .../_components/IndraSkillsSection.tsx | 4 +- .../_components/IndraSocialsSection.tsx | 56 +++---------------- .../_data/{skills.tsx => indra-skills.tsx} | 4 +- .../_data/indra-socials.tsx | 50 +++++++++++++++++ 5 files changed, 63 insertions(+), 55 deletions(-) rename packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/{skills.tsx => indra-skills.tsx} (97%) create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials.tsx diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx index 6e0fd6f..083a16f 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx @@ -1,7 +1,7 @@ -import { type SkillIcon } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills"; +import { type IndraIconSkill } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-skills"; type CardProps = { - Icon: SkillIcon; + Icon: IndraIconSkill; name: string; description: string; time: string; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx index 9997456..12ecebc 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection.tsx @@ -4,7 +4,7 @@ import { CardHoverEffect3, CardHoverEffect4, } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover"; -import { skills } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/skills"; +import { indraSkills } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-skills"; const IndraSkillsSection = (): React.ReactElement => { return ( @@ -12,7 +12,7 @@ const IndraSkillsSection = (): React.ReactElement => {

Skills

    - {skills.map((skill, index) => ( + {indraSkills.map((skill, index) => (
  • {index % 4 === 0 ? ( { return (

    Socials

    -
      - {socials.map(social => ( +
        + {indraSocials.map(social => (
      • Date: Thu, 15 Aug 2024 20:00:34 +0700 Subject: [PATCH 3/6] refactor: :recycle: move address to data related for separation of concerns --- .../_data/indra-socials.tsx | 2 ++ .../0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials.tsx index f7af460..b8b2270 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials.tsx @@ -48,3 +48,5 @@ export const indraSocials = [ ] as const; export type IndraIconSocials = (typeof indraSocials)[number]["icon"]; + +export const indraEthAddress = "0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3"; diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx index 2841e51..be368a8 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx @@ -3,6 +3,7 @@ import IndraAboutMeSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d69 import IndraSkillsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection"; import IndraSocialsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection"; import IndraSparkleName from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSparkleName"; +import { indraEthAddress } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials"; import { Address } from "~~/components/scaffold-eth"; const BuilderPage: React.FC = () => { @@ -12,7 +13,7 @@ const BuilderPage: React.FC = () => {

        -
        +
From 0acaedc8890072002267c6d05b895a64908bdb0b Mon Sep 17 00:00:00 2001 From: Indra Lukmana Date: Thu, 15 Aug 2024 20:06:55 +0700 Subject: [PATCH 4/6] refactor: :recycle: change the builder page type to NextPage --- .../0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx index be368a8..0c28e35 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/page.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import type { NextPage } from "next"; import IndraAboutMeSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection"; import IndraSkillsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSkillsSection"; import IndraSocialsSection from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraSocialsSection"; @@ -6,7 +6,7 @@ import IndraSparkleName from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d69693 import { indraEthAddress } from "~~/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_data/indra-socials"; import { Address } from "~~/components/scaffold-eth"; -const BuilderPage: React.FC = () => { +const BuilderPage: NextPage = () => { return (
From 95b455c9eb185d7add941ff67d7bd8e182da0cb9 Mon Sep 17 00:00:00 2001 From: Indra Lukmana Date: Thu, 15 Aug 2024 20:39:19 +0700 Subject: [PATCH 5/6] feat: :sparkles: add profile image --- .../_assets/indra_photo_600.jpg | Bin 0 -> 11552 bytes .../_components/IndraAboutMeSection.tsx | 25 ++++++++++++------ 2 files changed, 17 insertions(+), 8 deletions(-) create mode 100644 packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_assets/indra_photo_600.jpg diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_assets/indra_photo_600.jpg b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_assets/indra_photo_600.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d703a3acf3b9446459e17db52808540d87c466b1 GIT binary patch literal 11552 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 SpnSPqaS4JFRBV%v%l{7@tXu#9 literal 0 HcmV?d00001 diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx index d024cdf..33fae0e 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/IndraAboutMeSection.tsx @@ -1,12 +1,21 @@ -const IndraAboutMeSection = () => { +import React from "react"; +import Image from "next/image"; +import indraPhoto from "../_assets/indra_photo_600.jpg"; + +const IndraAboutMeSection: React.FC = () => { return ( -
-

About Me

-

- {`I'm a front-end engineer πŸ§‘β€πŸ’» with full-stack prowess πŸ’ͺ`}
- {`I love to build products that are useful and delightful to use.`}
- {`I'm a big fan of the Ethereum ecosystem and am interested in buidling on the blockchain tech.`} -

+
+
+
+ Indra +
+
+

About Me

+

{`I'm a front-end engineer πŸ§‘β€πŸ’» with full-stack prowess πŸ’ͺ, loving the craft of building useful and delightful products.`}

+

{`My expertise spans React ecosystem across the stack, with a keen interest in Web3 technologies.`}

+

{`I'm excited about the Ethereum ecosystem and exploring the transformative potential of blockchain technology.`}

+
+
); }; From 0892536a05480ed5de30f2f1e27b48756d59f59f Mon Sep 17 00:00:00 2001 From: Indra Lukmana Date: Thu, 15 Aug 2024 20:47:11 +0700 Subject: [PATCH 6/6] fix: :lipstick: fix inconsistent paddings on skills --- .../_components/CardHover.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx index 083a16f..c20b5bc 100644 --- a/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx +++ b/packages/nextjs/app/builders/0x80Ad2861Ab5D4EeA61330A4bd7d6969357C463C3/_components/CardHover.tsx @@ -9,7 +9,7 @@ type CardProps = { const CardContent = ({ Icon, description, name, time }: CardProps) => { return ( -
+

{name}

@@ -24,7 +24,7 @@ const CardContent = ({ Icon, description, name, time }: CardProps) => { export const CardHoverEffect1 = (props: CardProps) => { return ( -
+
@@ -33,7 +33,7 @@ export const CardHoverEffect1 = (props: CardProps) => { export const CardHoverEffect2 = (props: CardProps) => { return ( -
+