Skip to content

Commit

Permalink
feat: create new animtion border
Browse files Browse the repository at this point in the history
  • Loading branch information
FarhanRafid97 committed Sep 28, 2023
1 parent fa5743b commit 79498bb
Showing 2 changed files with 50 additions and 9 deletions.
46 changes: 46 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
@@ -93,3 +93,49 @@ table {
.porse h1 {
color: rgb(255, 255, 255, 0.5);
}

.box-animation {
display: flex;
position: relative;
align-items: center;
overflow: hidden;
justify-content: center;

z-index: 99;
border-radius: 7px;
background-color: rgba(226, 232, 255, 0.01);
}

.box-animation::before {
content: '';
position: absolute;
width: 70px;
height: 400px; /* Match the container's height */
background: conic-gradient(
from 135deg,
#383444,
rgba(217, 235, 243, 0.54),
rgba(255, 243, 230, 0.66),
#f8eac3,
transparent 120deg
);
animation: animate 8s linear infinite;
}

@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.box-animation::after {
content: '';
inset: 1.5px;
border-radius: 0.25rem;
z-index: 0;
position: absolute;
background-color: #111010;
}
13 changes: 4 additions & 9 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -18,15 +18,10 @@ const ProfileSumarry = () => {
return (
<div className="flex flex-col w-full gap-12 ">
<div className="flex gap-4 mt-8 md:mt-12 flex-col md:flex-row">
<div className="w-[150px] h-[150px] md:min-w-[130px] bg-white rounded-[50%] overflow-hidden md:h-[140px]">
<Image
src="/assets/prof1.jpg"
width={190}
height={190}
className="rounded-lg "
priority
alt="profile pict"
/>
<div className="box-animation w-[150px] h-[170px] p-1 md:min-w-[130px] md:h-[150px]">
<div className=" relative z-20 rounded h-[100%] w-[100%] overflow-hidden ">
<Image src="/assets/prof1.jpg" width={290} height={290} priority alt="profile pict" />
</div>
</div>

<div className="flex flex-col ">

0 comments on commit 79498bb

Please sign in to comment.