React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

$blue: #0059ff;
$green: #00d268;
$green-desat: #5ad889;
// 07d85a
$text-color: #1e1f21;
$text-color-light1: lighten($text-color, 10%);
$text-color-light2: lighten($text-color, 20%);
$border-light-color: #dfe5ec;
$bborder-color: darken($border-light-color, 10%);
$orange: #ffb200;

* {
  box-sizing: border-box;
}
html, body {
  background: #20262E;
  background: white;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
  height: 100%;
  font-size: 14px;
  color: $text-color;
  overflow: hidden;
}

#app {
  background: #fff;
  // border-radius: 4px;
  // padding: 20px;
  transition: all 0.2s;
  height: 100%;
}

.text--blue {
  color: $blue;
}

.icon-placeholder {
  width: 20px;
  height: 20px;
  border: 1px dashed white;
  border-radius: 100%;
}

.page-title--primary {
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: -5px;
}

.page-section {
  padding: 120px 0;
  
  &:first-child {
    padding-top: 40px;
  }
}

.body-1 {
  width: 600px;
  line-height: 28px;
  font-size: 18px;
  
  &+.body-1 {
    margin-top: 24px;
  }
}

.page-width {
  max-width: 800px;
  padding: 40px 40px;
  // border: 1px dashed $border-light-color;
  border-radius: 5px;
  // height: 100%;
  // margin: 0 auto;
  // border: 1px dashed black;
}

.app-container {
  // height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 10;
  height: 100%
  // border: 1px dashed red;
}

.page-side {
  // padding: 40px;
}

.large-content {
  height: 1000px;
  border: 1px dashed #ddd;
}

.page-side-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 10;
  padding-right: 100px;
  // border: 1px solid black;
}

.page-side-left-hexagons {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  // border: 1px solid red;
  height: 100%;
  background-image:...

React

function LeftNavItem({ children, active }) {
	const activeClass = active ? 'active' : '';
	return (
  	<div className={`left-nav-item ${activeClass}`}>
      <div className='indicator' />
      <div className='text-box'>
        { children }
      </div>
  	</div>
  );
}

function App() {
	return (
  	<div className='app-container'>
      <div className='page-side page-side-left'>
        <div className='page-side-left-background-color' />
        <div className='page-side-left-background-image' />
        <div className='page-side-left-hexagons' />
        <div className='section-left-side section-padded'>
          <div className='profile-content'>
            <div className='profile-image-wrap'>
              <div className='profile-image' />
            </div>
            <div className='profile-name'>
              Abdul Ahmad
            </div>
            <div className='profile-location'>
              NEW HAVEN - CT
            </div>
          </div>

        </div>
        <div className='section-left-side section-middle'>
          <div className='left-nav-items'>
            <LeftNavItem active>
              Home <span className='icon icon-placeholder' />
            </LeftNavItem>
            <LeftNavItem>
              My Story <span className='icon icon-placeholder' />
            </LeftNavItem>
            <LeftNavItem>
              Projects <span className='icon icon-placeholder' />
            </LeftNavItem>
          </div>

        </div>
        <div className='section-left-side section-last section-padded'>
          
        </div>
      </div>
      <div className='page-side page-side-right'>
        <div className='page-width page-right-content'>
          <ShapesVariantOne />
          <ShapesVariantCards customClass='page-right-background-shape' />
          <h1 className='page-title--primary'>
            <div>
              Hi!
            </div>
            <div>
              I'm <span className='text--blue'>Abdul</span>,
       ...