Portfolio design v3 added

images/logo-v3.svg

@@ -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>

scripts/v3.js

@@ -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);

v2.css

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

v3.css

@@ -0,0 +1,511 @@
+html {
+	width: 100%;
+	overflow-x: hidden;
+	font-display: swap;
+    scroll-behavior: smooth;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;	
+	font-family: "Poppins", Helvetica;
+	font-display: swap;
+    font-size: 18px;
+    line-height: 1.5;
+    color: #222;
+    position: relative;
+}
+
+:root {
+    --main-color: #747bef;
+    --base-color: #222;
+    --sec-color-1: #ed7d71;
+    --sec-color-2: #d67772;
+    --sec-color-3: #f5b9eb;
+    --dark-color: #1c3766;
+}
+
+
+/*................................................... Body */
+
+body {
+	width: 100%;
+	margin: 0px;
+	overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    padding: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    transition: all .3s ease;
+    height: 140px;
+    overflow: hidden;
+}
+
+header.scrolled {
+    padding: 20px;
+    background-color: white;
+/*    box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);*/
+    height: 80px;
+}
+
+#header-controller {
+    position: absolute;
+    width: 100%;
+    height: 15vh;
+    top: 0;
+    left: 0;
+    background: lightgray;
+}
+
+header img {
+    width: 40px;
+    margin-right: 10px;
+    transition: all .3s ease;
+    position: relative;
+    top: 0;
+}
+
+header > a {
+    font-family: "Poppins";
+    border: none;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    font-weight: 900;
+    position: relative;
+}
+
+header > a > div {
+    line-height: 16px;
+    font-size: 24px;
+    color: var(--dark-color);
+    transition: all .3s ease;
+}
+
+.logo-text-dissapear {
+    transform: translateX(-50px);
+    opacity: 0;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    color: inherit;
+}
+
+nav > a:not(.social-media-links) {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 10px 15px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: -200px 41px;
+    background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
+    color: inherit;
+}
+
+nav > a:not(.social-media-links):hover {
+    color: var(--sec-color-1);
+    background-position: 0px 41px;
+}
+
+section {
+    display: flex;
+    position: relative;
+    width: 100%;
+    perspective: 500px;
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    overflow: hidden;
+}
+
+section > div {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    perspective: 500px;
+    transform-style: preserve-3d;
+    padding: 60px;
+    position: relative;
+}
+
+section > div p{
+    width: 350px;
+    color: inherit;
+}
+
+
+
+
+
+
+/*############################################# -- Text */
+
+a {
+	text-decoration: none;
+	color: var(--dark-color);
+	border: none;
+    cursor: pointer;
+    font-size: inherit;
+    transition: all .3s ease-out;
+}
+
+a:hover {
+	border: none;
+}
+
+h1, h2, h3, h4 {
+    font-family: "Poppins";
+	margin-top: 0px;
+	margin-bottom: 15px; 
+	width: 100%;    
+    line-height: 1.2;    
+	color: inherit;
+    font-weight: 700;
+}
+
+h1 {
+    
+	font-size: 42px;
+}
+
+h2 {
+	font-size: 36px;
+}
+
+h3 {
+    
+}
+
+h4 {
+    
+}
+
+p {
+	font-size: 20px;
+	line-height: 1.5;
+	margin-top: 0px;
+	margin-bottom: 20px;
+	color: rgba(0,0,0,0.8);
+	width: 100%;
+	font-weight: 500;
+}
+
+span {
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+}
+
+span > a {
+    font-size: inherit;
+    font-weight: inherit;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    border: inherit;
+    border-color: inherit;
+}
+
+span > a:hover {
+    border: inherit;
+    border-color: inherit;
+}
+
+
+
+
+/*###################################################### -- Interactives */
+
+button {
+	border: none;
+	background-color: var(--dark-color);
+	padding: 10px 20px;
+	color: white;
+	cursor: pointer;
+    transition: all .2s ease-out;    
+    background-image: linear-gradient(var(--main-color),var(--main-color));
+    background-repeat: no-repeat;
+    background-position: 0px 67px;
+}
+
+button:hover {
+    background-position: 0px 0px;
+}
+
+input, textarea {
+    padding: 15px;
+    border-radius: 5px;
+    border: 1px solid rgba(0,0,0,0.2);
+    margin-bottom: 15px;
+    width: 100%;
+    font-size: 14px;
+}
+
+input:focus {
+    border: 1px solid blue;
+    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*############################################################# -- General classes and IDs -- */
+
+
+
+.social-media-links {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 18px;
+    background-color: var(--sec-color-1);
+}
+
+#mail {
+   background-color: var(--sec-color-2); 
+}
+
+#linkedin {
+   background-color: var(--main-color); 
+}
+
+#behance {
+   background-color: var(--dark-color);
+    margin-right: 0;
+}
+
+
+
+
+
+
+
+
+
+/*############################################################# -- Hero -- */
+
+.hero-section {
+    background-color: #1b239b;
+}
+
+.hero-section > div:nth-child(1) {
+    
+}
+
+.hero-section > div:nth-child(2) {
+    background-color: white;
+    padding: 25vh 40px 40px 6.2vw;
+    font-size: 2.5vw;
+    display: inline;
+}
+
+.main-text-block {
+    font-size: inherit;
+    max-width: 80%;
+}
+
+.main-text-block a {
+    color: var(--main-color);
+    background-image: linear-gradient(var(--main-color),var(--main-color));
+    background-position: 0px 3.2vw;
+    background-repeat: no-repeat;
+}
+.main-text-block a:hover {
+    color: white;
+    background-position: 0px 0px;
+    padding: 5px 10px;
+}
+
+.main-hero-text {
+    font-size: inherit;
+    font-weight: 500;
+    width: auto;
+    display: inline;
+}
+
+.hero-section img {
+    position: absolute;
+    z-index: -1;
+}
+
+#clouds {
+    min-width: 100%;
+    min-height: 100vh;
+    left: 0px;
+    top: 0px;
+}
+
+#mountains {
+    min-width: 70%;
+    height: 100vh;
+    left: -200px;
+    bottom: -20px;
+}
+
+.benjamin-image-block {
+    width: 15vw;
+    height: 80vh;
+    position: absolute;
+    bottom: -10px;
+    background-color: var(--sec-color-2);
+    left: 15vw;
+    background-image: url("images/hero-image-ben.jpg");
+    background-size: cover;
+    opacity: .8;
+}
+
+.benjamin-big-text-block {
+    position: absolute;
+    font-size: 8.5vw;
+    bottom: -50px;
+    left: 5%;
+    font-weight: 900;
+    line-height: 1em;
+    color: white;
+    mix-blend-mode: overlay;
+    filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
+}
+
+.main-cta-button {
+    font-size: 24px;
+    padding: 15px 40px;
+    margin-top: 20px;
+}
+
+.main-cta-button:hover {
+    background-image: linear-gradient(var(--main-color),var(--main-color));
+    background-position: 0px 0px;
+    background-repeat: no-repeat;
+    background-color: var(--dark-color);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ################################################### Animations*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*##################################################################################################### -- Mobile Styles */
+
+@media (max-width: 1200px) {
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 800px) {
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 600px) {
+    
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 430px) {
+    
+    
+    
+
+}
+
+
+
+
+
+
+@media (max-width: 350px) {
+    
+    
+    
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

v3.html

@@ -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>