laurakishimoto.com

2018 version

by Laura Kishimoto

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>


<header class="header">
  <h1 class="name">
    Laura Kishimoto
  </h1>
  <hr class="brace">
</header>
<main class="main" id="main">
</main>
<footer class="footer">
  <hr class="brace brace--inverse">
</footer>

SCSS

$color-teal: #009090;
$color-grey: #666;
$color-white: #fff;

$space: 2rem;
$content-width: 25rem;
$content-outset: $space;

$bp-small: $content-width;
$bp-medium: $content-width * 1.75;
$bp-large: $content-width * 2.25;

$transition: 0.2s;
$transition-fast: $transition / 2;
$transition-slow: $transition * 2;

$brace-color: $color-grey;
$brace-size: 2rem;


/* base styles */

:root {
  font-size: 2vw;
  box-sizing: border-box;
}

@media (min-width: $bp-small) {
  :root {
    font-size: 62.5%;
  }
}

@media (min-width: $bp-medium) and (min-height: $bp-medium)  {
  :root {
    font-size: 1vh;
  }
  html {
    overflow: hidden;
  }
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

html {
  padding: $space*1.5 $space;
  font-size: 1.6rem;
  color: $color-grey;
  font-family: 'Raleway', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
}

h1,
h2 {
  margin: 0 auto;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: -0.05rem;
  word-spacing: 100vw;
  line-height: 0.77;
  font-family: 'Cabin Condensed', 'Arial', sans-serif;
  
  &:focus {
    outline: none;
  }
}

h3 {
  margin: 0 0 0.3rem;
  font-weight: bolder;
  font-size: 1.2em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  font-size: 1em;
  
  + li {
    margin-top: $space/2;
  }
}

a {
  color: inherit;
  text-decoration: underline rgba($color-white, 0.7);
  
  &:focus,
  &:hover {
    outline: none; // replaced with other focus styles!
  }

  &:hover {
    text-decoration: underline currentColor;
  }

  &:focus {
    color: $color-teal;
    text-decoration: none;
    background-color: $color-white;
    outline: 1px solid $color-white;
  }
}

/* layout */

.header,
.main,
.footer {
  width: 25rem;
  margin: 0 auto;
  
  @media (min-width: $bp-medium) {
    margin-left: $space;
  }
  
  @media (min-width: $bp-large) {
    margin-left: auto;
  }
}

/* brace...

Babel + JSX

const data = [
  {
    id: 'person',
    label: 'Personal details',
    content: `
    	<h3>About me</h3>
    	<p>I'm a Canadian living and working in Sheffield&nbsp;UK.</p>
      <p>I am a front end developer with over 10 years of experience as part of agency and in-house teams. In addition to technical excellence, I am a leader of people and advocate for inclusive work cultures.</p>
		`
  },
  {
    id: 'skills',
    label: 'Technical skills',
    content: `
      <ul>
        <li>
          <h3>HTML</h3>
          Semantic code, ARIA, microdata…
        </li>
        <li>
          <h3>CSS</h3>
          SCSS, LESS, styled components…
        </li>
        <li>
          <h3>JavaScript</h3>
          React, ES6+, jQuery…
        </li>
      </ul>
		`
  },
	{
    id: 'approach',
    label: 'User-centric approach',
    content: `
    	<h3>Users first</h3>
      <p>I focus on the intersection of user need, client demand, and technical limitation.</p>
      <p>I prioritise user experience, accessibility, and brand identity in my work.</p>
      `
  },
  {
    id: 'leadership',
    label: 'Team leadership',
    content: `
      <ul>
        <li>
          <h3>Leader and mentor</h3>
          I am organised and proactive. I am a caring line manager and mentor others.
        </li>
        <li>
          <h3>Recruiter and manager</h3>
          I interview candidates and play an active role in recruitment. I also have experience with line management.
        </li>
        <li>
          <h3>Positive influencer</h3>
          I strive for a safe and inclusive work environment for everyone.
        </li>
      </ul>
		`
  },
  {
    id: 'jobs',
    label: 'Employment history',
    content: `
      <ul>
        <li>
          <h3>Inviqa</h3>
          Technical team lead, Senior front end developer (2013&nbsp;&#8209;&nbsp;present)
        </li>
        <li>
          <h3>Evoluted</h3>
          Lead front end developer (2017&nbsp;&#8209;&nbsp;2018)
        </li>
       ...