styles

README.md

@@ -169,7 +169,7 @@ First, I keep all project images within the same directory on the same level.
 > The script will not work if any of the directories are not set properly.
 > The image optimization script is not perfect, it is very personalized to my needs, I use it to set all images to the same aspect ratio and size, and to create a small and large version of each image in different aspect ratios within the same folder.
 
-- [placeholder images](https://dummyimage.com/1600x900/000/000&text=.)
-
 ---
 
+- [placeholder images](https://dummyimage.com/1600x900/000/000&text=.)
+- [textures](https://www.transparenttextures.com/)

src/components/header/header.js

@@ -41,13 +41,14 @@ const configHeaderTwo = () => {
   const header = document.querySelector('.header');
   if (!header) return;
   const introRef = document.querySelector('.intro-observer-ref');
+  const headerRef = document.querySelector('.intro-observer-ref--top');
   const options = {
     root: null, // using the viewport as the root
     rootMargin: '0px', // no margins
     threshold: 1, // 100% of the target's visibility
   };
 
-  const observer = new IntersectionObserver((entries) => {
+  const introObserver = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       if (entry.isIntersecting) {
         header.classList.remove('header-has--background');
@@ -57,11 +58,29 @@ const configHeaderTwo = () => {
     }
   }, options);
 
-  observer.observe(introRef);
+  const headerObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        header.classList.remove('header-has--filter');
+      } else {
+        header.classList.add('header-has--filter');
+      }
+    }
+  });
+
+  introObserver.observe(introRef);
+  headerObserver.observe(headerRef);
 };
 
 const initHeader = () => {
   configHeaderTwo();
+
+  window.addEventListener('mouseover', (e) => {
+    const { target } = e;
+    if (target && target.nodeType === '1') {
+      console.log(target);
+    }
+  });
 };
 
 export default initHeader;

src/index.html

@@ -30,7 +30,15 @@
   <aside class="gradient-overlay--two"></aside>
   <svg style="position:absolute;top:0;left:0;height:0;width:0;z-index:-1;opacity:0;visibility:hidden;">
   <filter id='grainy' x='0' y='0' width='100%' height='100%'>
-    <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='5' stitchTiles='stitch' result='noise'/>
+    <!-- <feTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/> -->
+    <!-- <feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='5' stitchTiles='stitch' result='noise'/> -->
+    <feTurbulence 
+    type='fractalNoise' 
+    baseFrequency='0.6' 
+    stitchTiles='stitch'/>
+   <feColorMatrix in="colorNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
+      <feComposite operator="in" in2="SourceGraphic" result="monoNoise"/>
+      <feBlend in="SourceGraphic" in2="monoNoise" mode="screen" />
   </filter>
   </svg>
 
@@ -104,6 +112,7 @@ <h1>chase ottofy</h1>
       </div>
     </div>
 
+    <aside class="intro-observer-ref--top"></aside>
     <aside class="intro-observer-ref"></aside>
   </section>
 

src/styles/gradients/headerGradient.css

@@ -10,6 +10,20 @@
 
 /* background-blend-mode: difference, color-dodge, difference, difference, overlay, color-dodge; */
 
+/* filter: contrast(1.4) brightness(.8) hue-rotate(298deg); */
+
+/* filter: contrast(1.4) brightness(.8); */
+
+/* filter: hue-rotate(298deg); */
+
+/* filter: contrast(1.4) brightness(.8) hue-rotate(320deg); */
+
+/* filter: grayscale(1) brightness(1.3); */
+
+/* filter: contrast(1.4) brightness(1) hue-rotate(300deg); */
+
+/* filter: contrast(1.3) grayscale(.8) brightness(1); */
+
 /* GRADIENT (under header)
 ============================ */
 .gradient-overlay--one {
@@ -29,48 +43,34 @@
 }
 
 .gradient-noir {
-  filter: contrast(1.5) brightness(1) hue-rotate(294deg);
-
-  /* filter: contrast(1.4) brightness(.8) hue-rotate(298deg); */
-
-  /* filter: contrast(1.4) brightness(.8); */
-
-  /* filter: hue-rotate(298deg); */
-
-  /* filter: contrast(1.4) brightness(.8) hue-rotate(320deg); */
-
-  /* filter: grayscale(1) brightness(1.3); */
-
-  /* filter: contrast(1.4) brightness(1) hue-rotate(300deg); */
-
-  /* filter: contrast(1.3) grayscale(.8) brightness(1); */
+  filter: contrast(1.5) hue-rotate(294deg);
 }
 
 .gradient-overlay--two {
   position: absolute;
-  z-index: 100;
+  z-index: 900;
+
+  /* z-index: 102; */
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100vh + 2px);
   margin: calc(0vh - var(--intro-offset)) auto 0 auto;
-  background: rgba(0, 0, 0, .3);
+  backdrop-filter: contrast(1.2);
+  background-image: url('../../images/design/cartographer.png');
+  opacity: .4;
+  pointer-events: none;
+  user-select: none;
 }
 
-/* .gradient-noir::before {
-  content: "";
-} */
-
-/* Uncomment to apply grain overlay */
-
-/* .gradient-overlay--one::after {
+.gradient-overlay--one::after {
   position: absolute;
+  z-index: 9999;
   top: 0;
   left: 0;
   width: 100%;
-  filter: url("#grainy");
-  opacity: 0.2;
   height: 100%;
+  background: rgba(0,0,0,.75);
   content: "";
-  z-index: 9999;
-} */
+  opacity: 0.05;
+}

src/styles/header.css

@@ -4,22 +4,57 @@
 
 /* transition: var(--tbg2); */
 
+/* box-shadow: 0 12px 48px rgba(1, 57, 72, .2); */
+
+/* box-shadow: 0 12px 48px rgba(1, 57, 72, .2); */
+
 .header {
+  /* backdrop-filter: saturate(180%) blur(5px); */
+
+  /* backdrop-filter: saturate(180%) blur(5px); */
   position: fixed;
   z-index: var(--z-header);
   top: 0;
   left: 0;
   width: 100%;
   max-width: 100vw;
   height: var(--header-height);
-  backdrop-filter: saturate(180%) blur(5px);
   background-color: transparent;
-  box-shadow: 0 12px 48px rgba(1, 57, 72, .2);
-  /* transition: var(--tbg1); */
+}
+
+.header-has--filter {
+  backdrop-filter: saturate(180%) blur(5px);
+  background-color: rgba(0,0,0,.4);
 }
 
 .header-has--background {
-  background-color: rgba(0, 0, 0, .85);
+  background-color: rgba(0, 0, 0, .95);
+
+  /* background-color: rgba(0, 0, 0, .9); */
+  box-shadow: 0 12px 36px rgba(1, 57, 72, .15);
+}
+
+.header-has--background::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /* background-image: url('../../images/design/classy-fabric.png'); */
+  background-image: url('../../images/design/noisy-net.png');
+  content: '';
+
+  /* background-image: url('../../images/design/cartographer.png'); */
+
+  /* backdrop-filter: contrast(120%); */
+  opacity: .3;
+
+  /* filter: contrast(1.4); */
+
+  /* backdrop-filter: contrast(1.4); */
+  pointer-events: none;
+  user-select: none;
 }
 
 .header-wrapper {
@@ -51,12 +86,41 @@
   background-image: url("../images/svg/globe.svg");
   background-position: center;
   background-repeat: no-repeat;
-  opacity: .8;
-  /* filter: brightness(2.2); */
-  /* filter: invert(33%) sepia(61%) saturate(1000%) hue-rotate(171deg) brightness(90%) contrast(101%); */
   background-size: 100%;
   cursor: pointer;
+  opacity: 1;
   transform: scaleX(1.1);
+
+  /* filter: contrast(110%); */
+
+  /* box-shadow: 0 0 8px 4px rgba(1, 57, 72, .3); */
+
+  /* filter: brightness(2.2); */
+
+  /* filter: invert(33%) sepia(61%) saturate(1000%) hue-rotate(171deg) brightness(90%) contrast(101%); */
+
+  /* background-blend-mode: overlay; */
+
+  /* backdrop-filter: saturate(180%) blur(5px); */
+}
+
+.header-logo::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+
+  /* background: var(--primary1); */
+  background: rgba(6, 70, 87, 0.3);
+
+  /* background: white; */
+
+  /* backdrop-filter: invert(.8); */
+  content: '';
+  opacity: .8;
+  transform:scale(.9);
 }
 
 .header-nav {
@@ -201,8 +265,16 @@
 }
 
 .header-logo:hover {
-  opacity: .8;
-  transition: var(--topac1);
+  filter: invert(33%) sepia(61%) saturate(1000%) hue-rotate(171deg) brightness(90%) contrast(101%);
+
+  /* opacity: .8; */
+
+  /* transition: var(--topac1); */
+  transition: all .2s ease-in-out;
+
+  /* animation: pulse-small 4s ease-in-out infinite; */
+
+  /* transform: perspective(1px) scale(1.1); */
 }
 
 .theme-switch span label:hover img {

src/styles/main.css

@@ -5,16 +5,16 @@
   height: 100%;
   flex-direction: column;
   align-items: center;
-  padding-top: 20px;
-  margin-top: -20px;
+
+  /* padding-top: .75rem; */
 }
 
 /* ------------------------ */
 
 /* SECTIONS
 ============================ */
 .section-container {
-  padding-bottom:4rem;
+  padding-bottom: 4rem;
 }
 
 .section-title {

src/styles/root.css

@@ -87,7 +87,7 @@
   /* ********************************** */
 
   /* --intro-offset: 0vh; */
-  --intro-offset: 18vh;
+  --intro-offset: 10vh;
   --header-height: 4rem;
   --max-width-lg: 1280px;
   --max-width-md: 1140px;
@@ -251,7 +251,7 @@ input[type="radio"]:focus-visible + label,
 label:focus-visible,
 textarea:focus-visible,
 button:focus-visible {
-  outline: 1px dotted var(--white1);
+  outline: 1.5px dotted var(--white1);
 }
 
 svg {
@@ -281,6 +281,7 @@ svg {
 
 :-moz-focusring {
   outline: 1px dotted ButtonText
+
 }
 
 :-moz-ui-invalid {
@@ -366,12 +367,12 @@ a[disabled] {
   left: 0;
   width: 0 !important;
   height: 0 !important;
-  opacity: 0;
+  margin: 0 !important;
+  opacity: 0 !important;
   pointer-events: none !important;
   transition: opacity 200ms ease-in-out;
   user-select: none !important;
   visibility: hidden !important;
-
 }
 
 [data-active-popup="true"] {
@@ -439,6 +440,16 @@ a[disabled] {
   }
 }
 
+@keyframes pulse-small {
+  0% {
+    opacity: .5;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes pulse {
   0% {
     opacity: 0;

src/styles/sections/contact.css

@@ -77,12 +77,21 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url('../../images/design/top1.avif');
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
+
+  /* background-image: url('../../images/design/top1.avif'); */
+  background-image: url('../../images/design/cartographer.png');
+
+  /* opacity: .4; */
+
+  /* background-position: center; */
+
+  /* background-repeat: no-repeat; */
+
+  /* background-size: cover; */
   content: "";
-  opacity: .4;
+
+  /* filter:invert(1); */
+  opacity: .8;
   pointer-events: none;
   user-select: none;
 }