V2 added

index.html

@@ -84,9 +84,10 @@
                     <div id="morph-shape-1"></div>
                     <div id="morph-shape-2"></div>
                     <div id="morph-shape-3"></div>
-                    
                 </div>
                 
+                <div id="bg-circle"></div>
+                
             </div>
         </div>
         <div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;">

main.css

@@ -357,7 +357,6 @@ section.hero-section {
     height: 500px;
     position: relative;
     z-index: 10;    
-    mix-blend-mode: screen;
 }
 
 .face-wrapper {
@@ -367,7 +366,7 @@ section.hero-section {
     animation: facehover 3s infinite;
     animation-timing-function: ease;
     transition: all .4s ease-out;
-    perspective: 600px;
+    transform-style: preserve-3d;
     /* transform:  rotate3d(20,-20,0,20deg); rotateX(60deg) rotateY(60deg)*/
 }
 
@@ -467,6 +466,24 @@ section.hero-section {
     z-index: -10;
 }
 
+#bg-circle {
+    width: 700px;
+    height: 700px;
+    border-radius: 50%;
+    background-color: #ddd;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%,-55%,-300px);
+    z-index: -1000;
+    position: absolute;   
+    transition: all .5s ease;
+}
+
+
+
+
+
+
 
 
 

scripts/main.js

@@ -74,6 +74,8 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
        myFace.loop = false;
        myFace.playSegments([210, 249], true);
        faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
+       document.getElementById("bg-circle").style.transform = "rotate3d(20,-20,0,20deg) translate3d(-50%,-55%,-300px)";
+       myFaceContainer.style.mixBlendMode = "screen";
        
    }); 
 });
@@ -105,6 +107,8 @@ document.querySelectorAll(".hero-content-link").forEach(item => {
            steadyState();
            faceWrapper.style.transform = "none";
            document.getElementById("color-overlay").style.backgroundColor = "transparent";
+           document.getElementById("bg-circle").style.transform = "translate3d(-50%,-55%,-300px)";
+           myFaceContainer.style.mixBlendMode = "normal";
                                         
        }, 500);
        

v2.css

@@ -0,0 +1,426 @@
+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: Lato, Helvetica;
+	font-display: swap;
+    font-size: 18px;
+    line-height: 1.5;
+    color: #222;
+}
+
+:root {
+    --main-color: #E14646;
+    --base-color: #222;
+}
+
+
+/*................................................... Body */
+
+body {
+	width: 100%;
+	display: block;
+	margin: 0px;
+	overflow: hidden;
+    /*background-color: #B8FFE1;*/
+}
+
+header {
+    position: fixed;
+    left: 40px;
+    top: 40px;
+    width: 200px;
+    z-index: 1000;
+}
+
+header > a {
+    font-family: Impact;
+    font-size: 24px;
+    text-transform: uppercase;
+    border: none;
+    letter-spacing: 0px;
+}
+
+nav {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+nav > a {
+    margin-bottom: 10px;
+    font-size: 14px;
+}
+
+nav > a:hover {
+    color: #E14646;
+}
+
+section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 40px;
+    position: relative;
+}
+
+section > div {
+    width: 960px;
+    display: flex;
+    justify-content: center;
+}
+
+section > div > div{
+    flex-grow: 1;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+
+
+/*................................................... Text */
+
+a {
+	text-decoration: none;
+	color: #222222;
+	border-bottom: 2px solid transparent;
+    cursor: pointer;
+    font-size: inherit;
+    transition: all .3s ease-out;
+}
+
+a:hover {
+	border-bottom: 2px solid #E14646;
+}
+
+h1, h2, h3, h4 {
+    font-family: Impact;
+	margin-top: 0px;
+	margin-bottom: 15px; 
+	width: 100%;    
+    line-height: 1.2;    
+	color: inherit;
+    text-transform: uppercase;
+}
+
+h1 {
+    
+	font-size: 42px;
+}
+
+h2 {
+	font-size: 24px;
+}
+
+h3 {
+    
+}
+
+h4 {
+    
+}
+
+p {
+	font-size: 16px;
+	line-height: 1.5;
+	margin-top: 0px;
+	margin-bottom: 20px;
+	color: inherit;
+	width: 100%;
+	font-weight: 400;
+}
+
+span {
+    font-size: inherit;
+}
+
+
+
+
+/*................................................... Interactives */
+
+button {
+	border: none;
+	background-color: black;
+	padding: 10px 20px;
+	color: white;
+	cursor: pointer;
+}
+
+button:hover {
+	background-color: darkblue;
+}
+
+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 */
+
+.aside-header {
+    position: fixed;
+    top: 40px;
+    right: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    z-index: 1000;
+}
+
+.aside-header > a {
+    font-size: 14px;
+}
+
+.social-media-link-block {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: var(--main-color);
+    margin-top: 10px;
+}
+
+.hero-graphic-wrapper {
+    width: 400px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-right: 50px;
+}
+
+#benjamin-hero-text {
+    font-family: Impact;
+    font-size: 90px;
+    text-transform: uppercase;
+    letter-spacing: -2px;
+    color: var(--main-color);
+}
+
+#toby-hero-text {
+    font-family: Impact;
+    font-size: 180px;
+    text-transform: uppercase;
+    letter-spacing: -4px;
+    color: var(--main-color);
+    line-height: 1;
+    margin-top: -48px;
+}
+
+.hero-graphic-block {
+    width: 350px;
+    height: 300px;
+    background-color: var(--main-color);
+    border-radius: 20px;
+    margin-top: -30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.hero-graphic-block > img {
+    position: relative;
+    top: -40px;
+}
+
+.hero-text-wrapper {
+    width: 300px;
+    padding-top: 100px;
+    align-items: flex-start;
+    margin-left: 50px;
+}
+
+.hero-text-wrapper > a {
+    background-color: #393051;
+    color: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: none;
+    transition: all .3s ease;
+}
+
+.hero-text-wrapper > a:hover {
+    background-color: #393051;
+    padding: 12px 23px;
+}
+
+.hero-text-block {
+    font-size: 24px;
+    font-weight: 500;
+    margin-bottom: 40px;
+}
+
+.hero-text-block > h1 {
+    font-size: inherit;
+    color: var(--base-color);
+    display: inline;
+    font-weight: 600;
+    text-transform: none;
+}
+
+.hero-text-block > h1 > span {
+    font-size: inherit;
+    color: var(--main-color);
+    display: inline;
+    font-weight: inherit;
+    border-bottom: 2px solid var(--main-color);
+    cursor: pointer;
+    transition: all .3s ease;
+}
+
+.hero-text-block > h1 > span:hover {
+    padding: 5px 10px;
+    background-color: black;
+    color: white;
+    border-color: #393051;
+}
+
+.hero-watermark {
+    position: absolute;
+    font-size: 30em;
+    font-family: Impact;
+    z-index: -1;
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: rgba(0,0,0,0.05)
+}
+
+.skewed-bg {
+    position: absolute;
+    width: 100%;
+    height: 400px;
+    transform: skewY(-3deg);
+    background-color: var(--main-color);
+    top: -200px;
+    z-index: -1;
+}
+
+.container-darkbg {
+    color: white;
+    display: flex;
+    align-items: flex-end;
+    text-align: right;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*.................................................................................................................. Mobile Styles */
+
+@media (max-width: 950px) {
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 800px) {
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 550px) {
+    
+    
+    
+}
+
+
+
+
+
+@media (max-width: 450px) {
+    
+    
+    
+}
+
+
+
+
+
+
+@media (max-width: 350px) {
+    
+    
+    
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

v2.html

@@ -0,0 +1,80 @@
+<!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</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=Lato:400,500,700,800|Impact|Satisfy" rel="stylesheet">
+    <link rel="stylesheet" href="v2.css">
+
+</head>
+    
+    
+
+<body><!-- ...................................................................................................................... Body -->
+    
+    <header>
+        <a>Tben.Design</a>
+        <nav>
+            <a>About Me</a>
+            <a>My Work</a>
+            <a>My Certifications</a>
+            <a>Contact Me</a>
+        </nav>
+    </header>
+    
+    <div class="aside-header">
+        <a href="#">My Resume</a>
+        <a class="social-media-link-block"></a>
+    </div>
+    
+    <section style="z-index:1;">
+        <div>
+            <div class="hero-graphic-wrapper">
+                <div id="benjamin-hero-text">Benjamin</div>
+                <div id="toby-hero-text">Toby</div>
+                <div class="hero-graphic-block">
+                    <img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
+                </div>
+            </div>
+            
+            <div class="hero-text-wrapper">
+                <div class="hero-text-block">
+                    Hi. I'm a
+                    <h1>
+                        <span>UI/UX Designer</span>, 
+                        <span>Web Designer</span>, 
+                        <span>Frontend Web Developer</span>, 
+                        <span>Graphic and Motion Designer</span>
+                    </h1>.
+                </div>
+                <a href="#">Get me on LinkedIn</a>
+            </div>
+        </div>
+    </section>
+    
+    <div class="hero-watermark">T-BEN</div>
+    
+    <section style="background-color:var(--main-color);">
+        <div>
+            <div class="container-darkbg">
+                <h2>Some of my Work</h2>
+                <p style="width: 350px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
+            </div>
+            <div></div>
+        </div>
+        <div class="skewed-bg"></div>
+    </section>
+    
+    <section style="height: 2000px"></section>
+    
+</body>
+
+
+</html>