Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addition of profile page for 0xBC428Bb80B1cc3C29164820528819Abf6b20cB88 #24

Merged
merged 9 commits into from
Aug 26, 2024
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import Image from "next/image";
import wavingRalphImage from "../0xBC428Bb80B1cc3C29164820528819Abf6b20cB88/images/simpsonsPhotos/ralph-transparent.png";
import skillStack from "../0xBC428Bb80B1cc3C29164820528819Abf6b20cB88/images/skillStack.svg";
import buidlGuidlLogo from "../0xBC428Bb80B1cc3C29164820528819Abf6b20cB88/images/socialMediaIcons/buidlguidlSmallLogo.png";
import { IM_Fell_English_Sans, ImbueSans, ItalianaSans } from "./utils/font";
import { CopyDiscordHandle, CopyMailId } from "./utils/onclickButtonComponents";
import { FaInstagram } from "react-icons/fa";
import { FaTwitter } from "react-icons/fa";
import { Address } from "~~/components/scaffold-eth";

const PersonalPage: React.FC = () => {
return (
<main className="h-auto px-9 py-8 ">
<div className={`${ItalianaSans.className} w-full h-full flex flex-col xl:flex-row`}>
<div className="h-full w-full xl:w-9/12 flex flex-col gap-10">
<div className="text-6xl md:text-8xl text-center sm:text-start">
Benhur <span>P</span> Benny
<div className="flex justify-center sm:justify-normal">
<Address address="0xbc428bb80b1cc3c29164820528819abf6b20cb88" />
</div>
</div>
<div
className={`w-full mb-7 h-full rounded-lg px-10 pb-24 dark:bg-gray-800 dark:shadow-md bg-gray-300 dark:shadow-gray-900 dark:text-white text-gray-800 flex flex-col shadow-inner shadow-gray-500 gap-4 relative`}
>
<div className={`${ImbueSans.className} text-4xl `}>
About <span className="text-8xl ">↑</span>
</div>
<div className={`${IM_Fell_English_Sans.className} text-2xl xl:pr-24 pb-28 leading-10 `}>
I am second year engineering student from GECT, Kerala, India. I love to tinker with new stuff and explore
new bounteries. As of 18/08/24, I am navigating through the rabbit hole of blockchain and table tennis.
Also looking for some cool hackathons to crack and gain some exp points in real life.
</div>
<div className={`flex gap-10 pb-10 items-center justify-center`}>
<div className={`${ImbueSans.className} text-4xl `}>
Come Say Hi <span className="text-5xl">→</span>
</div>
<div className="flex flex-wrap gap-4 min-w-20 items-center">
<a
className=" px-4 py-2 rounded-xl dark:hover:shadow-inner dark:hover:shadow-black hover:dark:bg-base-200 hover:bg-gray-100 transition-all hover:shadow-md shadow-black "
href="https://app.buidlguidl.com/builders/0xBC428Bb80B1cc3C29164820528819Abf6b20cB88"
target="_blank"
>
<Image width={8} height={8} unoptimized src={buidlGuidlLogo} alt="buidlguidl" className="w-8 h-8" />
</a>
<a
className=" px-4 py-2 rounded-xl dark:hover:shadow-inner dark:hover:shadow-black hover:dark:bg-base-200 hover:bg-gray-100 transition-all hover:shadow-md"
href="https://x.com/ruhneb0_0"
target="_blank"
>
<FaTwitter className="h-8 w-8 fill-blue-400" />
</a>
<CopyMailId />
<CopyDiscordHandle />
<a
className=" px-4 py-2 rounded-xl dark:hover:shadow-inner dark:hover:shadow-black hover:dark:bg-base-200 hover:bg-gray-100 transition-all hover:shadow-md"
href="https://www.instagram.com/_benhurbenny._/"
target="_blank"
>
<FaInstagram className="h-8 w-8 fill-red-400" />
</a>
</div>
</div>
<div className="h-20 w-20 absolute bottom-8">
<Image width={80} height={80} src={wavingRalphImage} alt="" />
</div>
</div>
</div>

<div className="w-full xl:w-3/12 flex justify-center items-center ">
<Image src={skillStack} alt="" className="h-[80vh]" width={400} height={400} />
</div>
</div>
</main>
);
};
export default PersonalPage;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { IM_Fell_English, Imbue, Italiana } from "next/font/google";

export const ItalianaSans = Italiana({ subsets: ["latin"], weight: "400" });
export const ImbueSans = Imbue({ subsets: ["latin"], weight: "400" });
export const IM_Fell_English_Sans = IM_Fell_English({ subsets: ["latin"], weight: "400" });
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
"use client";

import { BiLogoGmail } from "react-icons/bi";
import { FaDiscord } from "react-icons/fa";

export const CopyMailId = () => {
return (
<button
className=" px-4 py-2 rounded-xl dark:hover:shadow-inner dark:hover:shadow-black hover:dark:bg-base-200 hover:bg-gray-100 ransition-all hover:shadow-md "
onClick={() => {
navigator.clipboard
.writeText("[email protected]")
.then(() => {
alert("mail id copied!");
})
.catch(() => console.error);
}}
>
<BiLogoGmail className="h-8 w-8 " />
</button>
);
};

export const CopyDiscordHandle = () => {
return (
<button
className=" px-4 py-2 rounded-xl dark:hover:shadow-inner dark:hover:shadow-black hover:dark:bg-base-200 hover:bg-gray-100 transition-all hover:shadow-md"
onClick={() => {
navigator.clipboard
.writeText("benhur_05751")
.then(() => {
alert("username copied!");
})
.catch(() => console.error);
}}
>
<FaDiscord className="h-8 w-8 fill-blue-500" />
</button>
);
};
Loading