Asyrof

A design generalist. Translating complex systems into accessible experiences. Currently focused on design system and immersive experiences for AR/VR tech.

I've been collaborated and make lots of good friends at Arutala, Polyform, HHWT, TapeReal, Gojek, Iconhub, Inipagi, Ars., and more

🤙🏻

Let's have a chat →

Resume · Linkedin · Twitter · Dribbble

Hidden area

Pages

Detail tim mad-lab 2021

Store

Request Assets

Result of Request Assets

Portfolio / Design System

Contact Me

Code

<style>

/* --- NAVIGATION --- */

/* Hide the Notion nav bar */
.notion-navbar {
  display: none !important;
}

/* Custom nav styling (see HTML at bottom of code) */
.nav {
  align-items: flex-start;
  padding: 25px;
  display: flex;
	padding-bottom: 64px;
  position: static;
  z-index: 9999;
  height: 110px;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 30em) {
  .nav {
    align-items: center;
    padding: 0 25px;
    height: 64px;
    flex-direction: row;
  }
}
.nav .right, .nav .left {
  display: flex;
  margin-bottom: 0.25em;
}
.nav .right {
  margin-right: -20px;
}
.nav-link {
  transition: all .3s ease-in-out;
  justify-content: center;
  align-items: center;
  padding: 0 20px 0 0;
  display: flex;
  height: 100%;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-default);
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --- Callout to Button --- */

.notion-callout {
	border-radius: 100px !important;
	position: relative !important;
	padding: 16px 24px !important;
	border: none !important;
	}
	
.notion-callout.bg-purple-light {
	box-shadow: 0 10px 20px -10px #516bef !important;
	background: #516bef !important;
	}
  
.notion-callout.bg-yellow-light {
	box-shadow: 0 10px 20px -10px #f0bd66 !important;
	background: #f0bd66 !important;
	}
  
.notion-callout.bg-blue-light {
	box-shadow: 0 10px 20px -10px #1ea1f1 !important;
	background: #1ea1f1 !important;
	}
.notion-callout.bg-gray-light {
	background: #000000 !important;
}
.notion-callout a {
	letter-spacing: -0.5px !important;
	padding: 0 0 2px 66px !important;
	align-items: center !important;
	position: absolute !important;
	font-weight: 400 !important;
	display: flex !important;
	border: none !important;
	color: #fff !important;
	bottom: 0 !important;
	right: 0 !important;
	left: 0 !important;
	top: 0 !important;
	}

/* --- OTHER --- */

.notion-toggle {
  display: none !important;
}
.notion-header__cover {
  display: none !important;
}

</style>

<!-- CUSTOM NAVIGATION -->
<nav class="nav">
  <div class="left">
    <a class="nav-link" href="/">Asyrof</a>
  </div>
  <div class="right">
  <a class="nav-link" href="/contact"> </a>

  </div>
</nav>