diff --git a/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/_components/DevvMichaelProfile.tsx b/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/_components/DevvMichaelProfile.tsx new file mode 100644 index 0000000..e12905f --- /dev/null +++ b/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/_components/DevvMichaelProfile.tsx @@ -0,0 +1,133 @@ +"use client"; + +import { useCallback, useEffect, useState } from "react"; +import Image from "next/image"; +import Link from "next/link"; +import { Code, Cpu, Globe } from "lucide-react"; +import { FaXTwitter } from "react-icons/fa6"; +import { LuGithub, LuLinkedin } from "react-icons/lu"; +import { Address } from "~~/components/scaffold-eth"; + +const DevvMichaelProfile = () => { + const [scrollY, setScrollY] = useState(0); + const [mouseX, setMouseX] = useState(0); + const [mouseY, setMouseY] = useState(0); + + const handleScroll = useCallback(() => { + setScrollY(window.scrollY); + }, []); + + const handleMouseMove = useCallback((e: MouseEvent) => { + setMouseX(e.clientX); + setMouseY(e.clientY); + }, []); + + useEffect(() => { + // Check if window is defined (client-side) + if (typeof window !== "undefined") { + window.addEventListener("scroll", handleScroll); + window.addEventListener("mousemove", handleMouseMove); + } + + return () => { + if (typeof window !== "undefined") { + window.removeEventListener("scroll", handleScroll); + window.removeEventListener("mousemove", handleMouseMove); + } + }; + }, [handleScroll, handleMouseMove]); + + const parallaxLayers = [ + { icon: , speed: 0.05, initialPos: { x: "18%", y: "14%" } }, + { icon: , speed: 0.1, initialPos: { x: "80%", y: "50%" } }, + { icon: , speed: 0.15, initialPos: { x: "34%", y: "78%" } }, + ]; + + return ( +
+ {/* Parallax Background */} +
+ {parallaxLayers.map((layer, index) => ( +
+ {layer.icon} +
+ ))} +
+ + {/* Floating Particles */} + {[...Array(20)].map((_, i) => ( +
+ ))} + + {/* Main Content */} +
+
+
+
+ Profile +
+

Michael Ojekunle

+
+ Frontend Developer / Smart Contract Writer +
+
+
+
+
+
+

+ Hey, I'm Michael! I'm a frontend dev, blockchain explorer, and lover of all things tech. + I'm all about building cool stuff, sharing what I learn, and helping others “Code and + Thrive.” When I'm not coding or writing, I'm probably geeking out on finance, snapping + photos of nature, or figuring out how to make life a little more awesome. Let's create something + amazing together! +

+
+
+ } label="LinkedIn" /> + } label="X (formerly Twitter)" /> + } label="GitHub" /> +
+
+
+
+ ); +}; + +const SocialLink = ({ href, icon, label }: { href: string; icon: React.ReactNode; label: string }) => ( + + {icon} + +); + +export default DevvMichaelProfile; diff --git a/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/page.tsx b/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/page.tsx new file mode 100644 index 0000000..80c2c92 --- /dev/null +++ b/packages/nextjs/app/builders/0x7429CbD5eD20736645723E972bE60B7F6BF5959c/page.tsx @@ -0,0 +1,6 @@ +import dynamic from "next/dynamic"; +import type { NextPage } from "next"; + +const DevvMichaelProfile: NextPage = dynamic(() => import("./_components/DevvMichaelProfile"), { ssr: false }); + +export default DevvMichaelProfile; diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 932cb8d..69f951b 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -22,6 +22,7 @@ "blo": "^1.0.1", "burner-connector": "^0.0.8", "daisyui": "4.12.10", + "lucide-react": "^0.453.0", "next": "^14.2.11", "next-nprogress-bar": "^2.3.13", "next-themes": "^0.3.0", diff --git a/packages/nextjs/public/dvm0x742/avatar.jpg b/packages/nextjs/public/dvm0x742/avatar.jpg new file mode 100644 index 0000000..25efb64 Binary files /dev/null and b/packages/nextjs/public/dvm0x742/avatar.jpg differ diff --git a/yarn.lock b/yarn.lock index c94386f..44e5d5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2182,6 +2182,7 @@ __metadata: eslint-config-next: ^14.0.4 eslint-config-prettier: ^8.5.0 eslint-plugin-prettier: ^4.2.1 + lucide-react: ^0.453.0 next: ^14.2.11 next-nprogress-bar: ^2.3.13 next-themes: ^0.3.0 @@ -9368,6 +9369,15 @@ __metadata: languageName: node linkType: hard +"lucide-react@npm:^0.453.0": + version: 0.453.0 + resolution: "lucide-react@npm:0.453.0" + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + checksum: 1a48153fd9338266d8bb14c735bfe8bfb046c505ab91421586cbae0a8ac1924536e813d430d1f91c883bb4ea67f0664bfca273f58e478438f0ad8f8f09fced76 + languageName: node + linkType: hard + "make-dir@npm:^3.1.0": version: 3.1.0 resolution: "make-dir@npm:3.1.0"