Yildiray Yanik

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:media="http://search.yahoo.com/mrss/"
	
	>

<channel>
	<title>Yildiray Yanik - design &#38; build</title>
	<link>https://yildirayyanik.de</link>
	<description>Yildiray Yanik - design &#38; build</description>
	<pubDate>Wed, 02 Mar 2022 00:42:34 +0000</pubDate>
	<generator>https://yildirayyanik.de</generator>
	<language>en</language>
	
		
	<item>
		<title>Deckblatt</title>
				
		<link>https://yildirayyanik.de/Deckblatt</link>

		<pubDate>Wed, 02 Mar 2022 00:42:34 +0000</pubDate>

		<dc:creator>Yildiray Yanik - design &#38; build</dc:creator>

		<guid isPermaLink="true">https://yildirayyanik.de/Deckblatt</guid>

		<description>
  html,
  body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }


  /*
  =====================================================
  SELECTED WORK BEREITS IM HINTERGRUND LADEN
  =====================================================
  */

  .home-selected-work-preview {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 0;

    overflow: hidden;

    background: #ffffff;

    pointer-events: none;
  }


  .home-selected-work-preview.is-active {
    pointer-events: auto;
  }


  .home-selected-work-preview iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
  }


  /*
  =====================================================
  KOMPLETTE STARTSEITE ALS TRANSITIONS-EBENE
  =====================================================
  */

  .home-transition-layer {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 9999;

    overflow: hidden;

    transform: translateY(0);

    will-change: transform;

    transition:
      transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  }


  /*
  Beim Klick fährt die komplette Startseite nach oben.
  */

  .home-transition-layer.is-leaving {
    transform: translateY(-100%);
  }


  /*
  =====================================================
  PASTELL-HINTERGRUND
  =====================================================
  */

  .home-pastel-background {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: none;
  }


  /*
  =====================================================
  INHALT
  =====================================================
  */

  .home-content {
    position: relative;

    width: 100%;
    height: 100%;

    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    caret-color: transparent !important;

    -webkit-user-select: none;
    user-select: none;
  }


  .home-content *,
  .home-content *::before,
  .home-content *::after {
    caret-color: transparent !important;
  }


  /*
  Innerer Bereich mit Logo und Links
  */

  .home-inner {
    width: fit-content;

    text-align: center;
  }


  /*
  =====================================================
  YY LOGO
  =====================================================
  */

  .home-logo {
    display: block;

    width: fit-content;

    margin-left: auto;
    margin-right: auto;

    font-size: 0;
    line-height: 0;

    caret-color: transparent !important;

    -webkit-user-select: none;
    user-select: none;
  }


  .home-logo a {
    display: block;

    width: fit-content;

    outline: none !important;
    border: none !important;

    caret-color: transparent !important;

    -webkit-tap-highlight-color: transparent;
  }


  .home-logo a:focus,
  .home-logo a:focus-visible,
  .home-logo a:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }


  .home-logo img {
    display: block;

    outline: none !important;
    border: none !important;

    -webkit-user-drag: none;

    user-select: none;

    caret-color: transparent !important;
  }


  /*
  =====================================================
  REDUCED MOTION
  =====================================================
  */

  @media (prefers-reduced-motion: reduce) {

    .home-transition-layer {
      transition-duration: 0.01ms;
    }

  }


          &#60;img width="2000" height="2000" width_o="2000" height_o="2000" data-src="https://freight.cargo.site/t/original/i/94914ed7d73f0256ea943f8b5dfee9f9472bc09c55b9e1c1863cb9a89c0325e0/LOGO-SiteMenu-black.png" data-mid="251346089" border="0" data-scale="29" src="https://freight.cargo.site/w/1000/i/94914ed7d73f0256ea943f8b5dfee9f9472bc09c55b9e1c1863cb9a89c0325e0/LOGO-SiteMenu-black.png" /&#62;

        
        ABOUT ME
      

      &#38;nbsp;


        LINKEDIN
      

      &#38;nbsp;


        MAIL
      

(function () {

  const pastelColors = [
    "#FADADD",
    "#FFE5B4",
    "#FFF1B5",
    "#D9F2D9",
    "#D6EAF8",
    "#E4D7F5",
    "#F5D5E6",
    "#D7F0EE",
    "#F1E1C6",
    "#E2E8D5"
  ];


  const storageKey =
    "lastPastelBackground";


  let previousColor = null;


  try {

    previousColor =
      localStorage.getItem(storageKey);

  } catch (e) {}


  const availableColors =
    pastelColors.filter(function (color) {

      return color !== previousColor;

    });


  const selectedColor =
    availableColors[
      Math.floor(
        Math.random() * availableColors.length
      )
    ];


  const background =
    document.getElementById(
      "homePastelBackground"
    );


  if (background) {

    background.style.backgroundColor =
      selectedColor;

  }


  try {

    localStorage.setItem(
      storageKey,
      selectedColor
    );

  } catch (e) {}

})();


(function () {

  const logoLink =
    document.getElementById(
      "homeLogoLink"
    );


  const transitionLayer =
    document.getElementById(
      "homeTransitionLayer"
    );


  const selectedWorkPreview =
    document.getElementById(
      "selectedWorkPreview"
    );


  const selectedWorkContainer =
    document.getElementById(
      "selectedWorkContainer"
    );


  if (
    !logoLink &#124;&#124;
    !transitionLayer &#124;&#124;
    !selectedWorkPreview &#124;&#124;
    !selectedWorkContainer
  ) {
    return;
  }


  let isLeaving = false;


  /*
  =====================================================
  LINKS INNERHALB DES IFRAMES
  =====================================================
  */

  function activateIframeLinks() {

    try {

      const iframeDocument =
        selectedWorkPreview.contentDocument;


      if (!iframeDocument) {
        return;
      }


      iframeDocument.addEventListener(
        "click",
        function (event) {

          const clickedElement =
            event.target;


          if (!clickedElement) {
            return;
          }


          const link =
            clickedElement.closest("a[href]");


          if (!link) {
            return;
          }


          if (
            link.target === "_blank" &#124;&#124;
            event.metaKey &#124;&#124;
            event.ctrlKey &#124;&#124;
            event.shiftKey &#124;&#124;
            event.altKey
          ) {
            return;
          }


          const href =
            link.getAttribute("href");


          if (
            !href &#124;&#124;
            href.startsWith("#") &#124;&#124;
            href.startsWith("javascript:")
          ) {
            return;
          }


          const targetURL =
            new URL(
              link.href,
              window.location.href
            );


          if (
            targetURL.origin ===
            window.location.origin
          ) {

            event.preventDefault();

            event.stopPropagation();

            window.location.href =
              targetURL.href;

          }

        },
        true
      );

    } catch (e) {}

  }


  /*
  Sobald Selected Work geladen ist,
  interne Links aktivieren.
  */

  selectedWorkPreview.addEventListener(
    "load",
    function () {

      activateIframeLinks();

    }
  );


  /*
  =====================================================
  ANIMATION
  =====================================================
  */

  function startTransition() {

    if (isLeaving) {
      return;
    }


    isLeaving = true;


    /*
    SOFORT BEIM KLICK STARTEN
    */

    requestAnimationFrame(function () {

      transitionLayer.classList.add(
        "is-leaving"
      );

    });


    /*
    Nach Abschluss der Animation
    Selected Work aktivieren.
    */

    window.setTimeout(function () {

      selectedWorkContainer.classList.add(
        "is-active"
      );


      transitionLayer.style.display =
        "none";


      if (
        window.location.pathname !==
        "/selected-work"
      ) {

        window.history.pushState(
          {
            yySelectedWork: true
          },
          "",
          "/selected-work"
        );

      }

    }, 850);

  }


  /*
  =====================================================
  KLICK AUF YY
  =====================================================
  */

  logoLink.addEventListener(
    "click",
    function (event) {

      event.preventDefault();


      if (isLeaving) {
        return;
      }


      /*
      Nicht mehr auf das iframe warten.
      Animation startet unmittelbar.
      */

      startTransition();

    }
  );


  /*
  =====================================================
  BROWSER ZURÜCK
  =====================================================
  */

  window.addEventListener(
    "popstate",
    function () {

      if (
        window.location.pathname === "/" &#124;&#124;
        window.location.pathname === ""
      ) {

        window.location.reload();

      }

    }
  );

})();


  window.dataLayer =
    window.dataLayer &#124;&#124; [];


  function gtag() {

    window.dataLayer.push(arguments);

  }


  gtag(
    "js",
    new Date()
  );


  gtag(
    "config",
    "G-KXM6EJZX81"
  );
</description>
		
	</item>
		
	</channel>
</rss>