imnyang/imnya.ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

background

Browse source
This commit is contained in:
암냥 2025-02-19 17:28:32 +09:00
commit b6fcc88d65
No known key found for this signature in database
GPG key ID: C96C0327210DD61A
3 changed files with 66 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/back.avif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.3 MiB

78
src/components/Home/Top.tsx
View file

@ -1,37 +1,51 @@
import { import {
Tooltip, Tooltip,
TooltipContent, TooltipContent,
TooltipProvider, TooltipProvider,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import "../../routes/Home.css";
export default function Top() { export default function Top() {
return ( return (
<div className="bg-background text-foreground w-full h-screen flex items-center justify-center"> <div className="bg-background text-foreground w-full h-screen flex items-center justify-center">
<div className="flex flex-col md:flex-row w-full md:w-[50%] h-full py-16 md:py-32"> <div className="flex flex-col md:flex-row w-full md:w-[50%] h-full py-16 md:py-32">
<div className="w-full md:w-[40%] h-full flex flex-col justify-center items-center md:items-end md:pr-16"> <div className="w-full md:w-[45%] h-full flex flex-col justify-center items-center md:items-end md:pr-16">
<div className="text-center md:text-right"> <div className="text-center md:text-right">
<h1 className="text-5xl ntypefont">Nam<br/>HyunSuk</h1> <h1 className="text-5xl ntypefont">
<p className="mt-4 text-xl"> Nam
암냥이라는 이름으로 활동하고 있는<br/> 학생 개발자 남현석라고 합니다. <br />
</p> HyunSuk
</div> </h1>
</div> <p className="mt-4 text-xl">
<TooltipProvider delayDuration={0}> 암냥이라는 이름으로 활동하고 있는
<Tooltip> <br /> 학생 개발자 남현석라고 합니다.
<TooltipTrigger asChild> </p>
<div className="w-full md:w-[60%] h-full flex justify-center md:justify-end items-end bg-transparent md:bg-[#654e5c] rounded-3xl mt-8 md:mt-0 select-none"> </div>
<img
src="https://f.imnya.ng/profile/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.avif"
className="w-[60%] max-w-[360px] select-none pointer-events-none"
title="Special Thanks to @dob2_"
/>
</div>
</TooltipTrigger>
<TooltipContent align="end" side="bottom" className="px-2 py-1 text-xs">Special Thanks to @dob2_</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div> </div>
); <TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger asChild>
<div className="md:w-[55%] select-none avatar-background w-full h-full flex justify-center md:justify-end items-end rounded-3xl mb-8 md:mb-0">
<div className="w-full h-full flex justify-center md:justify-end items-end avatar-background-blur">
<img
src="https://f.imnya.ng/profile/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.avif"
className="w-[60%] max-w-[360px] select-none"
title="Special Thanks to @dob2_"
/>
</div>
</div>
</TooltipTrigger>
<TooltipContent
align="end"
side="bottom"
className="px-2 py-1 text-xs"
>
Special Thanks to @dob2_
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
);
} }

19
src/routes/Home.css
View file

@ -11,3 +11,22 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.avatar-background {
background: none;
}
@media (min-width: 768px) {
.avatar-background {
position: relative;
overflow: hidden;
background-image: url("https://f.imnya.ng/profile/banner.CjixG8N2_15mivN.webp");
background-size: cover;
background-position: 400px center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.avatar-background-blur {
backdrop-filter: blur(5px);
}
}