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=""> -->
<div>
<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
a relatively light weight</p>
</div>

9
main.css
View File

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

45
scripts/main.js
View File

@ -433,7 +433,7 @@ function contentsObserverAboutImg(entries) {
myImageAbout.animate([
{
transform: "none",
opacity: .5,
opacity: .8,
}
], {
duration: 1300,
@ -656,40 +656,41 @@ const myImage = ben(".benjamin-image-block");
const myImageOverlay = ben(".benjamin-image-block-overlay");
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)";
myImage.style.width = "20vw";
item.addEventListener("mouseover", function (event) {
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)";
// serviceDisplay.style.width = "300px";
// serviceDisplay.style.height = "250px";
} else if (event.target.className == "web-designer-link") {
} 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)";
// serviceDisplay.style.width = "250px";
// serviceDisplay.style.height = "200px";
} else if (event.target.className == "frontend-designer-link") {
} 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)";
// serviceDisplay.style.width = "200px";
// serviceDisplay.style.height = "200px";
} else if (event.target.className == "graphic-motion-designer-link") {
}
myImageOverlay.style.backgroundColor = "rgba(28,55,102,0.8)";
// serviceDisplay.style.width = "200px";
// serviceDisplay.style.height = "200px";
}
});
});
});
}
uiuxDesignerLinks.forEach(item => {