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

Portfolio design v3 added

Browse Source
This commit is contained in:
BenjaminToby 2021-06-09 05:41:48 +01:00
parent 87d3205297
commit 57af43f6f2
8 changed files with 661 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/clouds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/hero-image-ben.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

1
images/logo-v3.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.63 1042.32"><defs><style>.cls-1{fill:#565e9a;}.cls-2{fill:#6369b0;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="610.63 784.67 610.63 952.95 461.71 1042.32 461.71 874.03 464.52 872.35 610.63 784.67"/><polygon class="cls-1" points="610.63 619.33 610.63 784.67 461.71 702.53 468.56 698.7 563.9 645.44 610.63 619.33"/><path class="cls-2" d="M610.63,515.37v104l-19.91-11.74-129-76.08L306.83,617,151.94,702.39l-13.61,7.5L0,786.14V0H362Q470.26,0,532.42,47.12q2.94,2.24,5.75,4.57,55.51,46.1,56.41,130.05c0,.92,0,1.83,0,2.75q0,62.19-32.59,104.78t-86.73,56.65q64.15,15,99.77,61.67T610.63,515.37Zm-242.14,4.52Q383,508.37,383,482.28q0-51.13-59.16-51.13H222.6V531.42H323.87Q353.95,531.42,368.49,519.89ZM368,227.61q0-26.07-14.54-38.61t-44.62-12.53H222.6V276.74h86.23q30.07,0,44.62-12T368,227.61Z"/><polygon class="cls-2" points="461.71 874.03 461.71 1042.32 306.83 957.3 306.83 789.02 461.71 874.03"/><polygon class="cls-1" points="306.83 789.02 306.83 957.3 151.94 1042.32 151.94 875.51 156.15 873.19 306.83 789.02"/><polygon class="cls-2" points="151.94 875.51 151.94 1042.32 0 958.98 0 786.14 151.94 875.51"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
images/mountains.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

26
scripts/v3.js Normal file
View File

@ -0,0 +1,26 @@
var headerController = document.querySelector("#header-controller");
var windowRect = {
rootMargin: "0px",
};
var headerObserver = new IntersectionObserver(changeHeader, windowRect);
function changeHeader(entry) {
if(entry[0].isIntersecting) {
document.querySelector("header").className = "none";
document.querySelector("header img").style.width = "40px";
document.querySelector("header img").style.top = "0px";
document.querySelector("header > a > div").classList.remove("logo-text-dissapear");
} else {
document.querySelector("header").classList.add("scrolled");
document.querySelector("header img").style.width = "60px";
document.querySelector("header img").style.top = "20px";
document.querySelector("header > a > div").classList.add("logo-text-dissapear");
}
}
headerObserver.observe(headerController);

4
v2.css
View File

@ -632,6 +632,10 @@ input:focus {
#my-work-text-section {
perspective: 500px;
transform-style: preserve-3d;
/*
position: sticky;
top: 0px;
*/
}
.container {

511
v3.css Normal file
View File

File diff suppressed because it is too large Load Diff

119
v3.html Normal file
View File

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head><!-- ...................................................................................................................... Head -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Tben Design V3</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="v3.css">
</head>
<body>
<!-- #################################################################################-- Preloader -->
<div class="preloader-init" id="preloader"></div>
<!-- #################################################################################-- Header -->
<header>
<a href="#">
<img src="images/logo-v3.svg" alt="">
<div>Tben.<br>Design</div>
</a>
<nav>
<a href="#">About Me</a>
<a href="#">My Work</a>
<a href="#">Resume</a>
<a href="#">Contact Me</a>
<a href="#" class="social-media-links material-icons" id="mail">mail</a>
<a href="#" class="social-media-links material-icons" id="linkedin">adb</a>
<a href="#" class="social-media-links material-icons" id="behance">mouse</a>
</nav>
</header>
<div id="header-controller"></div>
<!-- #################################################################################-- Hero -->
<section class="hero-section">
<div></div>
<div>
<div class="main-text-block">
Hi. I’m a
<h1 class="main-hero-text">
<a href="">UI UX Designer</a>,
<a href="">Web Designer</a>,
<a href="">Frontend Web Developer</a>,
<a href="">Graphic and motion Designer</a>.
</h1>
</div>
<button class="main-cta-button">Let's Talk</button>
</div>
<img src="images/clouds.jpg" alt="" id="clouds">
<img src="images/mountains.png" alt="" id="mountains">
<div class="benjamin-image-block"></div>
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
</section>
<!-- #################################################################################-- Hero -->
<section>
<div>
</div>
<div>
</div>
</section>
<!-- #################################################################################-- Scripts -->
<script src="scripts/v3.js"></script>
</body>
</html>