tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor changes

Browse Source
This commit is contained in:
BenjaminToby 2021-07-02 06:29:43 +01:00
parent 83cdd53187
commit 01fb09ee20
3 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -164,7 +164,7 @@
<!-- <img src="images/my-image-large.jpg" alt=""> --> <!-- <img src="images/my-image-large.jpg" alt=""> -->
<div> <div>
<h3>Transcend Barriers Animation</h3> <h3>Transcend Barriers Animation</h3>
<p>This animations was made for web view. I used aftereffects and bodymoving to accomplish this: <p>This animation was made for web view. I used aftereffects and bodymoving to accomplish this:
the result? High definition svg anmimation that looks crisp on any resolution and maintains the result? High definition svg anmimation that looks crisp on any resolution and maintains
a relatively light weight</p> a relatively light weight</p>
</div> </div>

9
main.css
View File

@ -233,7 +233,7 @@ h1, h2, h3, h4 {
h1 { h1 {
font-size: 46px; font-size: 62px;
} }
h2 { h2 {
@ -243,7 +243,7 @@ h2 {
} }
h3 { h3 {
font-size: 30px;
} }
h4 { h4 {
@ -851,6 +851,7 @@ input:focus {
.portfolio-entry > div:nth-of-type(1) p { .portfolio-entry > div:nth-of-type(1) p {
font-size: 16px; font-size: 16px;
opacity: .8;
} }
.portfolio-entry > div:nth-of-type(2) { .portfolio-entry > div:nth-of-type(2) {
@ -1742,6 +1743,10 @@ input:focus {
@media (max-width: 430px) { @media (max-width: 430px) {
h3 {
font-size: 24px;
}
p { p {
font-size: 16px; font-size: 16px;
} }

45
scripts/main.js
View File

@ -433,7 +433,7 @@ function contentsObserverAboutImg(entries) {
myImageAbout.animate([ myImageAbout.animate([
{ {
transform: "none", transform: "none",
opacity: .5, opacity: .8,
} }
], { ], {
duration: 1300, duration: 1300,
@ -656,40 +656,41 @@ const myImage = ben(".benjamin-image-block");
const myImageOverlay = ben(".benjamin-image-block-overlay"); const myImageOverlay = ben(".benjamin-image-block-overlay");
const serviceDisplay = ben(".service-display-block"); const serviceDisplay = ben(".service-display-block");
uiuxDesignerLinks.forEach(item => { if (window.innerWidth > 1200) {
item.addEventListener("mouseover", function (event) { uiuxDesignerLinks.forEach(item => {
// myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)"; item.addEventListener("mouseover", function (event) {
myImage.style.width = "20vw";
if (event.target.className == "uiux-designer-link") { // myImage.style.transform = "rotateX(1deg) rotateY(2deg) rotateZ(-2deg) translateZ(20px) translateX(20px)";
myImage.style.width = "20vw";
myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)"; if (event.target.className == "uiux-designer-link") {
} else if (event.target.className == "web-designer-link") { myImageOverlay.style.backgroundColor = "rgba(237,125,113,0.8)";
myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)"; } else if (event.target.className == "web-designer-link") {
// serviceDisplay.style.width = "300px";
// serviceDisplay.style.height = "250px";
} else if (event.target.className == "frontend-designer-link") { myImageOverlay.style.backgroundColor = "rgba(117,240,230,0.8)";
// serviceDisplay.style.width = "300px";
// serviceDisplay.style.height = "250px";
myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)"; } else if (event.target.className == "frontend-designer-link") {
// serviceDisplay.style.width = "250px";
// serviceDisplay.style.height = "200px";
} else if (event.target.className == "graphic-motion-designer-link") { myImageOverlay.style.backgroundColor = "rgba(116,123,239,0.8)";
// serviceDisplay.style.width = "250px";
// serviceDisplay.style.height = "200px";
myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)"; } else if (event.target.className == "graphic-motion-designer-link") {
// serviceDisplay.style.width = "200px";
// serviceDisplay.style.height = "200px";
} myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)";
// serviceDisplay.style.width = "200px";
// serviceDisplay.style.height = "200px";
}
});
}); });
}
});
uiuxDesignerLinks.forEach(item => { uiuxDesignerLinks.forEach(item => {