Skip to content

Commit ffc4c64

Browse files
shahriarshafinshahriarshafin
authored
fix: avatar adjust margin
1 parent f889738 commit ffc4c64

File tree

2 files changed

+67
-67
lines changed

2 files changed

+67
-67
lines changed

‎components/avatar.jsx‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,57 @@ import Image from 'next/image';
44
import { useRef, useState } from 'react';
55

66
const Avatar = () => {
7-
const typingIntervalRef = useRef(null);
8-
const [typedText, setTypedText] = useState('');
9-
const fullText = "Hey, It's so nice to see you here, thanks for visiting !";
7+
const typingIntervalRef = useRef(null);
8+
const [typedText, setTypedText] = useState('');
9+
const fullText = "Hey, It's so nice to see you here, thanks for visiting !";
1010

11-
const handleMouseEnter = () => {
12-
startTypingAnimation();
13-
};
11+
const handleMouseEnter = () => {
12+
startTypingAnimation();
13+
};
1414

15-
const handleMouseLeave = () => {
16-
clearInterval(typingIntervalRef.current);
17-
setTypedText('');
18-
};
15+
const handleMouseLeave = () => {
16+
clearInterval(typingIntervalRef.current);
17+
setTypedText('');
18+
};
1919

20-
const startTypingAnimation = () => {
21-
let index = 0;
22-
typingIntervalRef.current = setInterval(() => {
23-
setTypedText(fullText.substring(0, index));
24-
index++;
25-
if (index > fullText.length) {
26-
clearInterval(typingIntervalRef.current);
27-
}
28-
}, 50);
29-
};
20+
const startTypingAnimation = () => {
21+
let index = 0;
22+
typingIntervalRef.current = setInterval(() => {
23+
setTypedText(fullText.substring(0, index));
24+
index++;
25+
if (index > fullText.length) {
26+
clearInterval(typingIntervalRef.current);
27+
}
28+
}, 50);
29+
};
3030

31-
return (
32-
<div className="relative flex h-44 w-44 items-center justify-center">
33-
<div
34-
onMouseEnter={handleMouseEnter}
35-
onMouseLeave={handleMouseLeave}
36-
className="group absolute transition-all ease-in"
37-
>
38-
<div className="wrap-avater">
39-
<Image
40-
src="/images/icons/shafin-logo.png"
41-
alt="avatar"
42-
draggable="false"
43-
className="-mt-[55px] duration-500 group-hover:drop-shadow-[-1px_-1px_0px_#ec4899]"
44-
width={600}
45-
height={826}
46-
priority
47-
/>
48-
</div>
49-
<div className="absolute bottom-0 -ml-[100px] mb-56 hidden w-32 flex-col items-center lg:group-hover:flex">
50-
<p className="whitespace-no-wrap relative z-10 h-[50px] w-32 rounded-md bg-sh-dark p-2 text-xs leading-none text-sh-white shadow-lg">
51-
{typedText}
52-
</p>
53-
<div className='before:absolute before:-bottom-3 before:right-3 before:h-0 before:w-0 before:border-b-[20px] before:border-l-[12px] before:border-r-[24px] before:border-t-[12px] before:border-b-transparent before:border-l-transparent before:border-r-sh-dark before:border-t-sh-dark before:content-[""]'></div>
54-
</div>
55-
</div>
56-
</div>
57-
);
31+
return (
32+
<div className='relative flex h-44 w-44 items-center justify-center mt-5'>
33+
<div
34+
onMouseEnter={handleMouseEnter}
35+
onMouseLeave={handleMouseLeave}
36+
className='group absolute transition-all ease-in'
37+
>
38+
<div className='wrap-avater'>
39+
<Image
40+
src='/images/icons/shafin-logo.png'
41+
alt='avatar'
42+
draggable='false'
43+
className='-mt-[55px] duration-500 group-hover:drop-shadow-[-1px_-1px_0px_#ec4899]'
44+
width={600}
45+
height={826}
46+
priority
47+
/>
48+
</div>
49+
<div className='absolute bottom-0 -ml-[100px] mb-56 hidden w-32 flex-col items-center lg:group-hover:flex'>
50+
<p className='whitespace-no-wrap relative z-10 h-[50px] w-32 rounded-md bg-sh-dark p-2 text-xs leading-none text-sh-white shadow-lg'>
51+
{typedText}
52+
</p>
53+
<div className='before:absolute before:-bottom-3 before:right-3 before:h-0 before:w-0 before:border-b-[20px] before:border-l-[12px] before:border-r-[24px] before:border-t-[12px] before:border-b-transparent before:border-l-transparent before:border-r-sh-dark before:border-t-sh-dark before:content-[""]'></div>
54+
</div>
55+
</div>
56+
</div>
57+
);
5858
};
5959

6060
export default Avatar;
@@ -87,6 +87,6 @@ console.log(`
8787
u66;...^.....n$$&66o
8888
-...-..-.`);
8989
console.log(
90-
'%c 🎉 Congratulations! 🎉\nYou found absolutely nothing!',
91-
'font-size: 18px; color: #ff1493; font-family: monospace;'
90+
'%c 🎉 Congratulations! 🎉\nYou found absolutely nothing!',
91+
'font-size: 18px; color: #ff1493; font-family: monospace;'
9292
);

‎components/greeting-switcher.jsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@ import { greetingList } from '@/app/data/greetings';
44
import { useState } from 'react';
55

66
const GreetingSwitcher = () => {
7-
const [arrItem, setArrItem] = useState(0);
7+
const [arrItem, setArrItem] = useState(0);
88

9-
return (
10-
<div className="group relative inline-block">
11-
<p
12-
onClick={() => setArrItem((arrItem + 1) % greetingList.length)}
13-
className="animate-up mb-5 inline-block cursor-pointer select-none bg-gradient-to-r from-sh-blue to-sh-blue text-3xl font-bold tracking-widest"
14-
>
15-
{greetingList[arrItem].text}
16-
<span className="italic">!</span>
17-
</p>
18-
<div className="absolute bottom-0 mb-14 hidden flex-col items-center group-hover:flex">
19-
<span className="whitespace-no-wrap relative z-10 rounded-md bg-sh-dark p-2 text-xs leading-none text-sh-white shadow-lg">
20-
{greetingList[arrItem].lang}
21-
</span>
22-
<div className="-mt-2 h-3 w-3 rotate-45 bg-sh-dark"></div>
23-
</div>
24-
</div>
25-
);
9+
return (
10+
<div className='group relative inline-block'>
11+
<p
12+
onClick={() => setArrItem((arrItem + 1) % greetingList.length)}
13+
className='animate-up my-5 inline-block cursor-pointer select-none bg-gradient-to-r from-sh-blue to-sh-blue text-3xl font-bold tracking-widest'
14+
>
15+
{greetingList[arrItem].text}
16+
<span className='italic'>!</span>
17+
</p>
18+
<div className='absolute bottom-0 mb-14 hidden flex-col items-center group-hover:flex'>
19+
<span className='whitespace-no-wrap relative z-10 rounded-md bg-sh-dark p-2 text-xs leading-none text-sh-white shadow-lg'>
20+
{greetingList[arrItem].lang}
21+
</span>
22+
<div className='-mt-2 h-3 w-3 rotate-45 bg-sh-dark'></div>
23+
</div>
24+
</div>
25+
);
2626
};
2727

2828
export default GreetingSwitcher;

0 commit comments

Comments
 (0)