added rollover profile pic
This commit is contained in:
parent
44d1ca7ed4
commit
249fee784a
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 |
|
@ -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"
|
||||
|
||||
|
|
Loading…
Reference in New Issue