added rollover profile pic

This commit is contained in:
Jyotirmoy Bandyopadhayaya 2023-04-23 20:38:19 +05:30
parent 44d1ca7ed4
commit 249fee784a
Signed by: bravo68web
GPG Key ID: F5671FD7BCB9917A
5 changed files with 33 additions and 5 deletions

View File

@ -24,14 +24,34 @@ import {
import DiscordActivity from "./discord-activity";
function Main() {
const animePic = document.getElementById('anime-pic');
const profPic = document.getElementById('prof-pic');
animePic.addEventListener('mouseover', function() {
animePic.style.display = 'none';
profPic.style.display = 'block';
});
profPic.addEventListener('mouseout', function() {
animePic.style.display = 'block';
profPic.style.display = 'none';
});
return (
<MainStyle>
<div className="content">
<div className="profile">
<img
src="/images/anime-profile-pic.png"
alt=""
className="profile-img"
id="anime-pic"
/>
<img
src="/images/profile-new-transp.png"
alt=""
className="profile-img"
id="prof-pic"
/>
</div>
<div className="name">{name}</div>

View File

@ -10,6 +10,14 @@ export default styled.main`
background-image: url("/images/background.jpg");
background-size: cover;
background-position: center;
#prof-pic {
display: none;
}
#anime-pic:hover + #prof-pic {
display: block;
}
.profile-img {
border-radius: 50%;
background: rgb(251, 167, 63);

View File

@ -18,7 +18,7 @@
"build": "next build",
"start": "next start",
"lint": "next lint",
"postinstall": "node tools/copy-webviewer-files.js",
"postinstall": "node tools/copy-webviewer-files.js && cd node_modules/use-last-fm && yarn && cd ../..",
"prettier": "prettier --write ."
},
"dependencies": {
@ -40,7 +40,7 @@
"react-use-lanyard": "^0.1.1",
"sitemap": "^7.1.1",
"styled-components": "^5.3.7",
"use-last-fm": "https://github.com/BRAVO68WEB/use-last-fm"
"use-last-fm": "BRAVO68WEB/use-last-fm"
},
"devDependencies": {
"eslint": "^7.32.0",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1003 KiB

View File

@ -3038,9 +3038,9 @@ uri-js@^4.2.2:
dependencies:
punycode "^2.1.0"
"use-last-fm@https://github.com/BRAVO68WEB/use-last-fm":
version "0.6.1"
resolved "https://github.com/BRAVO68WEB/use-last-fm#3c8026610a4d7e07c808e162ad4e9bd8ae420fd4"
use-last-fm@BRAVO68WEB/use-last-fm:
version "0.6.2"
resolved "https://codeload.github.com/BRAVO68WEB/use-last-fm/tar.gz/9d2ce5424e8259ae91d2a0e00d8efdb41971c7ce"
dependencies:
swr "^0.4.0"