added rollover profile pic
This commit is contained in:
parent
44d1ca7ed4
commit
249fee784a
|
@ -24,14 +24,34 @@ import {
|
||||||
import DiscordActivity from "./discord-activity";
|
import DiscordActivity from "./discord-activity";
|
||||||
|
|
||||||
function Main() {
|
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 (
|
return (
|
||||||
<MainStyle>
|
<MainStyle>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
<div className="profile">
|
<div className="profile">
|
||||||
|
<img
|
||||||
|
src="/images/anime-profile-pic.png"
|
||||||
|
alt=""
|
||||||
|
className="profile-img"
|
||||||
|
id="anime-pic"
|
||||||
|
/>
|
||||||
<img
|
<img
|
||||||
src="/images/profile-new-transp.png"
|
src="/images/profile-new-transp.png"
|
||||||
alt=""
|
alt=""
|
||||||
className="profile-img"
|
className="profile-img"
|
||||||
|
id="prof-pic"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="name">{name}</div>
|
<div className="name">{name}</div>
|
||||||
|
|
|
@ -10,6 +10,14 @@ export default styled.main`
|
||||||
background-image: url("/images/background.jpg");
|
background-image: url("/images/background.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
|
#prof-pic {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#anime-pic:hover + #prof-pic {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.profile-img {
|
.profile-img {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgb(251, 167, 63);
|
background: rgb(251, 167, 63);
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"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 ."
|
"prettier": "prettier --write ."
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
"react-use-lanyard": "^0.1.1",
|
"react-use-lanyard": "^0.1.1",
|
||||||
"sitemap": "^7.1.1",
|
"sitemap": "^7.1.1",
|
||||||
"styled-components": "^5.3.7",
|
"styled-components": "^5.3.7",
|
||||||
"use-last-fm": "https://github.com/BRAVO68WEB/use-last-fm"
|
"use-last-fm": "BRAVO68WEB/use-last-fm"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1003 KiB |
|
@ -3038,9 +3038,9 @@ uri-js@^4.2.2:
|
||||||
dependencies:
|
dependencies:
|
||||||
punycode "^2.1.0"
|
punycode "^2.1.0"
|
||||||
|
|
||||||
"use-last-fm@https://github.com/BRAVO68WEB/use-last-fm":
|
use-last-fm@BRAVO68WEB/use-last-fm:
|
||||||
version "0.6.1"
|
version "0.6.2"
|
||||||
resolved "https://github.com/BRAVO68WEB/use-last-fm#3c8026610a4d7e07c808e162ad4e9bd8ae420fd4"
|
resolved "https://codeload.github.com/BRAVO68WEB/use-last-fm/tar.gz/9d2ce5424e8259ae91d2a0e00d8efdb41971c7ce"
|
||||||
dependencies:
|
dependencies:
|
||||||
swr "^0.4.0"
|
swr "^0.4.0"
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue