<commit_before>/*
 * Copyright (c) 2015 peeracle contributors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

// @exclude
var Peeracle = {
  Hash: require('./hash')
};
var murmurHash3 = require('../third_party/murmurHash3.js/murmurHash3.js');
// @endexclude

/* eslint-disable */
Peeracle.Murmur3Hash = (function () {
  /* eslint-enable */
  /**
   * @class Murmur3Hash
   * @memberof {Peeracle}
   * @constructor
   * @implements {Hash}
   */
  function Murmur3Hash() {
    this.string = '';
    this.seed = 0x5052434C;
  }

  Murmur3Hash.IDENTIFIER = 'murmur3_x86_128';

  /**
   * @function Murmur3Hash#create
   * @param {String} name
   * @return {?Hash}
   */
  Murmur3Hash.create = function create(name) {
    if (name === Murmur3Hash.IDENTIFIER) {
      return new Murmur3Hash();
    }
    return null;
  };

  /**
   * @function Murmur3Hash#serialize
   * @param {String} value
   * @param {Peeracle.DataStream=} dataStream
   * @param {Function=} cb
   * @return {?Uint8Array}
   */
  Murmur3Hash.serialize = function serialize(value, dataStream, cb) {
    var bytes;
    var dv;
    var i = 0;

    if (!dataStream) {
      bytes = new ArrayBuffer(32);
      dv = new DataView(bytes);
      for (i = 0; i < 32; ++i) {
        dv.setUint8(i, value.charCodeAt(i));
      }
      return new Uint8Array(bytes);
    }

    dataStream.writeByte(parseInt(value.substr(i * 2, 2), 16),
      function writeCb(error) {
        if (error) {
          cb(error);
          return;
        }

        if (++i < 16) {
          dataStream.writeByte(parseInt(value.substr(i * 2, 2), 16), writeCb);
        } else {
          cb(null);
        }
      });
  };

  /**
   * @function Murmur3Hash#unserialize
   * @param {Peeracle.DataStream} dataStream
   * @param {Function} cb
   */
  Murmur3Hash.unserialize = function unserialize(dataStream, cb) {
    dataStream.read(16, function readByteCb(error, bytes) {
      var i;
      var str;

      if (error) {
        cb(error);
        return;
      }

      str = '';
      for (i = 0; i < 16; ++i) {
        str += ('00' + bytes[i].toString(16)).slice(-2);
      }

      cb(null, str);
    });
  };

  Murmur3Hash.prototype = Object.create(Peeracle.Hash.prototype);
  Murmur3Hash.prototype.constructor = Murmur3Hash;

  /**
   * @function Murmur3Hash#checksum
   * @param {Uint8Array} array
   * @return {String}
   */
  Murmur3Hash.prototype.checksum = function checksum(array) {
    this.init();
    this.update(array);
    return this.finish();
  };

  /**
   * @function Murmur3Hash#init
   */
  Murmur3Hash.prototype.init = function init() {
    this.string = '';
  };

  /**
   * @function Murmur3Hash#update
   * @param {Uint8Array} array
   */
  Murmur3Hash.prototype.update = function update(array) {
    var i;
    var l = array.length;

    for (i = 0; i < l; ++i) {
      this.string += String.fromCharCode(array[i]);
    }
  };

  /**
   * @function Murmur3Hash#finish
   * @return {String}
   */
  Murmur3Hash.prototype.finish = function finish() {
    return murmurHash3.x86.hash128(this.string, this.seed);
  };

  return Murmur3Hash;
})();

// @exclude
module.exports = Peeracle.Murmur3Hash;
// @endexclude
<commit_msg>MurmurHash3: Update method can now take a String as a parameter<commit_after>/*
 * Copyright (c) 2015 peeracle contributors
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

// @exclude
var Peeracle = {
  Hash: require('./hash')
};
var murmurHash3 = require('../third_party/murmurHash3.js/murmurHash3.js');
// @endexclude

/* eslint-disable */
Peeracle.Murmur3Hash = (function () {
  /* eslint-enable */
  /**
   * @class Murmur3Hash
   * @memberof {Peeracle}
   * @constructor
   * @implements {Hash}
   */
  function Murmur3Hash() {
    this.string = '';
    this.seed = 0x5052434C;
  }

  Murmur3Hash.IDENTIFIER = 'murmur3_x86_128';

  /**
   * @function Murmur3Hash#create
   * @param {String} name
   * @return {?Hash}
   */
  Murmur3Hash.create = function create(name) {
    if (name === Murmur3Hash.IDENTIFIER) {
      return new Murmur3Hash();
    }
    return null;
  };

  /**
   * @function Murmur3Hash#serialize
   * @param {String} value
   * @param {Peeracle.DataStream=} dataStream
   * @param {Function=} cb
   * @return {?Uint8Array}
   */
  Murmur3Hash.serialize = function serialize(value, dataStream, cb) {
    var bytes;
    var dv;
    var i = 0;

    if (!dataStream) {
      bytes = new ArrayBuffer(32);
      dv = new DataView(bytes);
      for (i = 0; i < 32; ++i) {
        dv.setUint8(i, value.charCodeAt(i));
      }
      return new Uint8Array(bytes);
    }

    dataStream.writeByte(parseInt(value.substr(i * 2, 2), 16),
      function writeCb(error) {
        if (error) {
          cb(error);
          return;
        }

        if (++i < 16) {
          dataStream.writeByte(parseInt(value.substr(i * 2, 2), 16), writeCb);
        } else {
          cb(null);
        }
      });
  };

  /**
   * @function Murmur3Hash#unserialize
   * @param {Peeracle.DataStream} dataStream
   * @param {Function} cb
   */
  Murmur3Hash.unserialize = function unserialize(dataStream, cb) {
    dataStream.read(16, function readByteCb(error, bytes) {
      var i;
      var str;

      if (error) {
        cb(error);
        return;
      }

      str = '';
      for (i = 0; i < 16; ++i) {
        str += ('00' + bytes[i].toString(16)).slice(-2);
      }

      cb(null, str);
    });
  };

  Murmur3Hash.prototype = Object.create(Peeracle.Hash.prototype);
  Murmur3Hash.prototype.constructor = Murmur3Hash;

  /**
   * @function Murmur3Hash#checksum
   * @param {Uint8Array} array
   * @return {String}
   */
  Murmur3Hash.prototype.checksum = function checksum(array) {
    this.init();
    this.update(array);
    return this.finish();
  };

  /**
   * @function Murmur3Hash#init
   */
  Murmur3Hash.prototype.init = function init() {
    this.string = '';
  };

  /**
   * @function Murmur3Hash#update
   * @param {Uint8Array|String} array
   */
  Murmur3Hash.prototype.update = function update(array) {
    var i;
    var code;
    var l = array.length;

    if ((typeof array) === 'string' && l === 32) {
      for (i = 0; i < 32; i += 2) {
        this.string += String.fromCharCode(parseInt(array.substr(i, 2), 16));
      }
    } else {
      for (i = 0; i < l; ++i) {
        this.string += String.fromCharCode(array[i]);
      }
    }
  };

  /**
   * @function Murmur3Hash#finish
   * @return {String}
   */
  Murmur3Hash.prototype.finish = function finish() {
    return murmurHash3.x86.hash128(this.string, this.seed);
  };

  return Murmur3Hash;
})();

// @exclude
module.exports = Peeracle.Murmur3Hash;
// @endexclude
<|endoftext|>


<commit_before>'use strict';

/**
 * @ngdoc service
 * @name $document
 * @requires $window
 *
 * @description
 * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object.
 */
function $DocumentProvider(){
  this.$get = ['$window', function(window){
    return jqLite(window.document);
  }];
}
<commit_msg>docs($document): add a documentation example.<commit_after>'use strict';

/**
 * @ngdoc service
 * @name $document
 * @requires $window
 *
 * @description
 * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` object.
 *
 * @example
   <example>
     <file name="index.html">

$document title:

window.document title:

     </file>
     <file name="script.js">
       function MainCtrl($scope, $document) {
         $scope.title = $document[0].title;
         $scope.windowTitle = angular.element(window.document)[0].title;
       }
     </file>
   </example>
 */
function $DocumentProvider(){
  this.$get = ['$window', function(window){
    return jqLite(window.document);
  }];
}
<|endoftext|>


<commit_before>'use strict';

/**
 * @ngdoc object
 * @name ng.$document
 * @requires $window
 *
 * @description
 * A {@link angular.element jQuery (lite)}-wrapped reference to the browser's `window.document`
 * element.
 */
function $DocumentProvider(){
  this.$get = ['$window', function(window){
    return jqLite(window.document);
  }];
}
<commit_msg>docs($document): improve the description<commit_after>'use strict';

/**
 * @ngdoc object
 * @name ng.$document
 * @requires $window
 *
 * @description
 * A {@link angular.element jQuery or jqLite} wrapper for the browser's `window.document` element.
 */
function $DocumentProvider(){
  this.$get = ['$window', function(window){
    return jqLite(window.document);
  }];
}
<|endoftext|>


<commit_before>function some (obj, fn) {
  var result = false
  var key

  for (key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (fn(obj[key], key, obj)) {
        result = true
        break
      }
    }
  }
  return result
}

module.exports = some

<commit_msg>update object/some — use hasOwn<commit_after>var hasOwn = require('./hasOwn')

function some (obj, fn) {
  var result = false
  var key

  for (key in obj) {
    if (hasOwn(obj, key)) {
      if (fn(obj[key], key, obj)) {
        result = true
        break
      }
    }
  }
  return result
}

module.exports = some

<|endoftext|>


<commit_before>console.log("Ore Olarewaju");
<commit_msg>Submit Activities<commit_after>console.log("Ore Olarewaju");

/*Activity One (data types)

what data types:
14 = Number
-80 = Number
8.5 = Number
true = Boolean
(5 < 17) = Boolean
null = Undefined
3.142 = Number
"Pi" = String
67+18== Number*/

//Activity 2
var binary = function (user){

	var quotient = user;
	var remainder = [];
	do{
		remainder.push (quotient % 2);
		quotient = Math.floor(quotient / 2);
		}
	   while (quotient >= 1)
	console.log(remainder.reverse().join(""));
		}

		binary(200);

 //Activity 3
function countChar(string, letter)
{
	var letter = letter;
  var counter = 0;
  for (var i = 0; i < (string.length); i++)
    {
      if (string.charAt(i) === letter)
        {
          counter++;
        }
    }

  return counter;
}

function countBs(string)
{
  var letter = "B";
  var counter = 0;
  for (var i = 0; i < (string.length); i++)
    {
      if (string.charAt(i) === letter)
        {
          counter++;
        }
    }

  return counter;
}

console.log(countBs("BABAbAbaB"));
console.log(countChar("Bbazzzooookkkkka", "a"));

<|endoftext|>


<commit_before>import Helmet from "react-helmet-async";
import PropTypes from "prop-types";
import React from "react";

import Back from "../../components/Back";
import Baskerville from "../../components/Baskerville";
import Link from "../../components/Link";
import Picture from "../../components/Picture";

import {
  Container,
  DefinitionList,
  Header,
  Heading,
  Page,
  Projects,
  Section,
  SelfAssesments,
  Skills
} from "./components";

const Cv = ({ forceInitialPose }) => (
  <>
    <Helmet>
      <title>CV of Iiro Jäppinen</title>
    </Helmet>

    <Back />

    <Container>
      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="1/3" />

        <Header name="Iiro Jäppinen" picture={<Picture />}>

            I’m a UX <Baskerville>&</Baskerville> UI designer, and a front-end
            developer with a passion for precise pixels and accessible
            interfaces. I aim to create real solutions to actual problems with a
            design that stands on its own but doesn’t need introduction.

Basic Info

              4 Years of professional design experience with another 4 years of
              freelancer design experience. Two years of front-end development
              experience. Studied Mathematics and Genetics at the University of
              Helsinki.

Language Skills

            <DefinitionList>
              {[
                {
                  title: "English",
                  definition: (
                    <>
                      Excellent (spoken <Baskerville>&</Baskerville> written)
                    </>
                  )
                },
                {
                  title: "Finnish",
                  definition: "Native"
                }
              ]}
            </DefinitionList>

Education

                Bachelor of Science
                 (Did not graduate)

                  University of Helsinki,{" "}
                  <time dateTime="2009-09">Sep 2009–</time>

                  Thesis subject: Studying Evolution in the Snowdrift Game With
                  Adaptive Dynamics

197 credits in Biomathematics; minor in Genetics

                Matriculation

                  Helsinki Upper Secondary School of Visual Arts,{" "}
                  <time dateTime="2006-09/2009-06">Aug 2006 – Jun 2009</time>

Career History

                  Designer, Fraktio

                  Helsinki, <time dateTime="2017">2017–</time>

                  Design, Front-End Development, Project Management and Customer
                  Relations for various clients both on-site and remote.

                    UX <Baskerville>&</Baskerville> UI Designer

                  , Verkkokauppa.com

                  Helsinki, <time dateTime="2014/2017">2014–2017</time>

                  In-house design and project management for a large
                  corporation. Main responsibilities included application
                  interface, process and workflow design for both internal and
                  public use.

                    UX <Baskerville>&</Baskerville> UI Designer

                  , Humble Bundle

                  San Francisco, <time dateTime="2014/2017">2011–2014</time>

                  Remote freelance website and brand design. Later, on-site lead
                  of design on H1B visa.

      </Page>

      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="2/3" />

Skills

            <Skills>
              {[
                {
                  title: "Design",
                  data: [
                    {
                      title: "User Experience",
                      assesment: "Expert",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "User Interface",
                      assesment: "Expert",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "Logo and Identity",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "Prototyping",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 5
                    },
                    {
                      title: "A/B Testing",
                      assesment: "Professional",
                      used: "2016",
                      years: 3
                    }
                  ]
                },
                {
                  title: "Languages",
                  data: [
                    {
                      title: "ECMAScript",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 3
                    },
                    {
                      title: "TypeScript",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                },
                {
                  title: "Frameworks",
                  data: [
                    {
                      title: "React",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 3
                    },
                    {
                      title: "CSS-in-JS (styling)",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: (
                        <>
                          Redux <Baskerville>&</Baskerville> redux-saga
                        </>
                      ),
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                },
                {
                  title: "Deployment",
                  data: [
                    {
                      title: "Docker",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: "AWS",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: "Heroku",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    },
                    {
                      title: "Google Cloud",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                }
              ]}
            </Skills>
            <SelfAssesments />

Certificates

                  Certified Scrum Product OwnerⓇ

                    Valid{" "}
                    <time dateTime="2016-06/2018-06">Jun 2016 – Jun 2018</time>

                  Certified ScrumMasterⓇ

                    Valid{" "}
                    <time dateTime="2016-03/2018-03">Mar 2016 – Mar 2018</time>

      </Page>

      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="3/3" />

        <Projects>

Selected Projects

Pihlajalinna Digital Services

                  Pihlajalinna is a large private and occupational health care
                  provider. I configured Analytics, designed web pages and
                  internal tools, and developed them in an agile team consisting
                  of Pihlajalinna employees and other consultants.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition:
                        "Sketch, Abstract, React, Typescript, Redux, Heroku, Docker"
                    },
                    {
                      title: "Date",
                      definition: (
                        <time dateTime="2017-10/2018-08">
                          Oct 2017 — Aug 2018
                        </time>
                      )
                    },
                    {
                      title: "Team size",
                      definition: "6–8"
                    }
                  ]}
                </DefinitionList>

Brainstorming Tool and Software for Fountain Park

                  Fountain Park creates tools for organizations to better define
                  and reach their goals. I designed and developed a new version
                  of the brainstorming tool and its accompanying admin panel and
                  editor.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition: "Sketch, React, Redux, Heroku"
                    },
                    {
                      title: "Date",
                      definition: (
                        <time dateTime="2017-10/2018-08">
                          Jul 2017 — Sep 2017
                        </time>
                      )
                    },
                    {
                      title: "Team size",
                      definition: "2"
                    }
                  ]}
                </DefinitionList>

Verkkokauppa.com Investors Portal

                  Verkkokauppa.com is the largest online retailer in Finland. I
                  designed the award-winning Investors Portal with the goal of
                  offering easily accessible information and news about the
                  corporation.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition: "Sketch, React"
                    },
                    {
                      title: "Date",
                      definition: <time dateTime="2017">2017</time>
                    },
                    {
                      title: "Team size",
                      definition: "3"
                    }
                  ]}
                </DefinitionList>

        </Projects>
      </Page>
    </Container>
  </>
);

Cv.propTypes = {
  forceInitialPose: PropTypes.bool.isRequired
};

export default Cv;
<commit_msg>fix: remove unused import<commit_after>import Helmet from "react-helmet-async";
import PropTypes from "prop-types";
import React from "react";

import Back from "../../components/Back";
import Baskerville from "../../components/Baskerville";
import Picture from "../../components/Picture";

import {
  Container,
  DefinitionList,
  Header,
  Heading,
  Page,
  Projects,
  Section,
  SelfAssesments,
  Skills
} from "./components";

const Cv = ({ forceInitialPose }) => (
  <>
    <Helmet>
      <title>CV of Iiro Jäppinen</title>
    </Helmet>

    <Back />

    <Container>
      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="1/3" />

        <Header name="Iiro Jäppinen" picture={<Picture />}>

            I’m a UX <Baskerville>&</Baskerville> UI designer, and a front-end
            developer with a passion for precise pixels and accessible
            interfaces. I aim to create real solutions to actual problems with a
            design that stands on its own but doesn’t need introduction.

Basic Info

              4 Years of professional design experience with another 4 years of
              freelancer design experience. Two years of front-end development
              experience. Studied Mathematics and Genetics at the University of
              Helsinki.

Language Skills

            <DefinitionList>
              {[
                {
                  title: "English",
                  definition: (
                    <>
                      Excellent (spoken <Baskerville>&</Baskerville> written)
                    </>
                  )
                },
                {
                  title: "Finnish",
                  definition: "Native"
                }
              ]}
            </DefinitionList>

Education

                Bachelor of Science
                 (Did not graduate)

                  University of Helsinki,{" "}
                  <time dateTime="2009-09">Sep 2009–</time>

                  Thesis subject: Studying Evolution in the Snowdrift Game With
                  Adaptive Dynamics

197 credits in Biomathematics; minor in Genetics

                Matriculation

                  Helsinki Upper Secondary School of Visual Arts,{" "}
                  <time dateTime="2006-09/2009-06">Aug 2006 – Jun 2009</time>

Career History

                  Designer, Fraktio

                  Helsinki, <time dateTime="2017">2017–</time>

                  Design, Front-End Development, Project Management and Customer
                  Relations for various clients both on-site and remote.

                    UX <Baskerville>&</Baskerville> UI Designer

                  , Verkkokauppa.com

                  Helsinki, <time dateTime="2014/2017">2014–2017</time>

                  In-house design and project management for a large
                  corporation. Main responsibilities included application
                  interface, process and workflow design for both internal and
                  public use.

                    UX <Baskerville>&</Baskerville> UI Designer

                  , Humble Bundle

                  San Francisco, <time dateTime="2014/2017">2011–2014</time>

                  Remote freelance website and brand design. Later, on-site lead
                  of design on H1B visa.

      </Page>

      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="2/3" />

Skills

            <Skills>
              {[
                {
                  title: "Design",
                  data: [
                    {
                      title: "User Experience",
                      assesment: "Expert",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "User Interface",
                      assesment: "Expert",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "Logo and Identity",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 8
                    },
                    {
                      title: "Prototyping",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 5
                    },
                    {
                      title: "A/B Testing",
                      assesment: "Professional",
                      used: "2016",
                      years: 3
                    }
                  ]
                },
                {
                  title: "Languages",
                  data: [
                    {
                      title: "ECMAScript",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 3
                    },
                    {
                      title: "TypeScript",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                },
                {
                  title: "Frameworks",
                  data: [
                    {
                      title: "React",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 3
                    },
                    {
                      title: "CSS-in-JS (styling)",
                      assesment: "Senior",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: (
                        <>
                          Redux <Baskerville>&</Baskerville> redux-saga
                        </>
                      ),
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                },
                {
                  title: "Deployment",
                  data: [
                    {
                      title: "Docker",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: "AWS",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 2
                    },
                    {
                      title: "Heroku",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    },
                    {
                      title: "Google Cloud",
                      assesment: "Professional",
                      used: "Constantly",
                      years: 1
                    }
                  ]
                }
              ]}
            </Skills>
            <SelfAssesments />

Certificates

                  Certified Scrum Product OwnerⓇ

                    Valid{" "}
                    <time dateTime="2016-06/2018-06">Jun 2016 – Jun 2018</time>

                  Certified ScrumMasterⓇ

                    Valid{" "}
                    <time dateTime="2016-03/2018-03">Mar 2016 – Mar 2018</time>

      </Page>

      <Page initialPose={forceInitialPose ? "exit" : "enter"} pose={"enter"}>
        <Heading page="3/3" />

        <Projects>

Selected Projects

Pihlajalinna Digital Services

                  Pihlajalinna is a large private and occupational health care
                  provider. I configured Analytics, designed web pages and
                  internal tools, and developed them in an agile team consisting
                  of Pihlajalinna employees and other consultants.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition:
                        "Sketch, Abstract, React, Typescript, Redux, Heroku, Docker"
                    },
                    {
                      title: "Date",
                      definition: (
                        <time dateTime="2017-10/2018-08">
                          Oct 2017 — Aug 2018
                        </time>
                      )
                    },
                    {
                      title: "Team size",
                      definition: "6–8"
                    }
                  ]}
                </DefinitionList>

Brainstorming Tool and Software for Fountain Park

                  Fountain Park creates tools for organizations to better define
                  and reach their goals. I designed and developed a new version
                  of the brainstorming tool and its accompanying admin panel and
                  editor.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition: "Sketch, React, Redux, Heroku"
                    },
                    {
                      title: "Date",
                      definition: (
                        <time dateTime="2017-10/2018-08">
                          Jul 2017 — Sep 2017
                        </time>
                      )
                    },
                    {
                      title: "Team size",
                      definition: "2"
                    }
                  ]}
                </DefinitionList>

Verkkokauppa.com Investors Portal

                  Verkkokauppa.com is the largest online retailer in Finland. I
                  designed the award-winning Investors Portal with the goal of
                  offering easily accessible information and news about the
                  corporation.

                <DefinitionList>
                  {[
                    {
                      title: "Keywords",
                      definition: "Sketch, React"
                    },
                    {
                      title: "Date",
                      definition: <time dateTime="2017">2017</time>
                    },
                    {
                      title: "Team size",
                      definition: "3"
                    }
                  ]}
                </DefinitionList>

        </Projects>
      </Page>
    </Container>
  </>
);

Cv.propTypes = {
  forceInitialPose: PropTypes.bool.isRequired
};

export default Cv;
<|endoftext|>


<commit_before>import React from 'react'
import styled from 'styled-components'
import {
  Avatar,
  BackgroundImage,
  Box,
  Container,
  Flex,
  Heading,
  LargeButton as Button,
  Link as A,
  OutlineButton,
  Text,
  theme,
  hexa
} from '@hackclub/design-system'
import Icon from '@hackclub/icons'
import { Link } from 'gatsby'
import Layout from 'components/Layout'
import Helmet from 'react-helmet'
import Nav from 'components/Nav'
import Footer from 'components/Footer'
import Sheet from 'components/Sheet'
import GlowingIcon from 'components/GlowingIcon'
import { ColoredHeadline, Subhline, Featline } from 'components/Content'
// import Announcement from 'components/home/Announcement'

const cta = {
  chevronRight: true,
  color: 'white'
}
const CTA = styled(Button.withComponent(Link)).attrs(cta)`
  background: ${theme.gradient('pink.5', 'red.6')};
`
const StartCTA = styled(Button.withComponent(Link)).attrs(cta)`
  background: ${theme.gradient('orange.5', 'red.6')};
`
OutlineButton.link = OutlineButton.withComponent(Link)

const HeadlineIcon = styled(GlowingIcon)`
  top: ${theme.space[1]}px;
  ${theme.mediaQueries.md} {
    top: ${theme.space[2]}px;
    width: 64px;
    height: 64px;
  }
`
const SubhlineIcon = styled(GlowingIcon)`
  top: ${theme.space[1]}px;
  ${theme.mediaQueries.md} {
    top: ${theme.space[2]}px;
    width: 48px;
    height: 48px;
  }
`

const Megaline = styled(Heading.h1).attrs({
  fontSize: [6, 7, 8],
  mx: 'auto'
})`
  line-height: 1.125;
  color: ${theme.colors.success};
  @supports (-webkit-background-clip: text) {
    background: linear-gradient(
      to bottom right,
      ${theme.colors.cyan[5]} 25%,
      ${theme.colors.teal[5]} 50%,
      ${theme.colors.green[5]}
    );
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  ${theme.mediaQueries.md} {
    line-height: 1;
  }
`

const Lead = Container.withComponent(Text)
Lead.defaultProps = { fontSize: 3, mx: 'auto' }

const Quote = styled(Sheet).attrs({ maxWidth: 48, bg: 'primary', fontSize: 3 })`
  border-radius: ${theme.radii[2]};
  position: relative;
  ${GlowingIcon} {
    opacity: 0.75;
    position: absolute;
    left: 0;
    top: 0;
    ${theme.mediaQueries.md} {
      width: 36px;
      height: 36px;
    }
  }
`
const MegaQuote = styled(Quote).attrs({
  px: [3, 4, 5],
  pt: 6,
  pb: [4, 5],
  color: 'white'
})`
  background-image: radial-gradient(
    ellipse farthest-corner at top left,
    ${theme.colors.pink[5]},
    ${theme.colors.fuschia[5]},
    ${theme.colors.indigo[5]}
  );
  &:before {
    color: ${theme.colors.pink[2]};
  }
  ${Text} {
    line-height: 1.125;
    ${theme.mediaQueries.md} {
      line-height: 1.25;
    }
  }
`

const Features = styled(Box)`
  display: grid;
  grid-gap: ${theme.space[3]}px;
  ${theme.mediaQueries.md} {
    grid-gap: ${theme.space[4]}px;
    grid-template-columns: repeat(2, 1fr);
  }
`
const FeatureLine = styled(Box).attrs({
  bg: 'primary',
  width: 1,
  mt: 2,
  mb: -2
})`
  border-radius: ${theme.radius};
  height: 4px;
`
const Photo = styled(Sheet.withComponent(BackgroundImage)).attrs({
  role: 'img',
  p: 0
})`
  min-height: 18rem;
  position: relative;
  ${theme.mediaQueries.md} {
    min-height: 25rem;
  }
  &:after {
    content: attr(aria-label);
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.875);
    border-radius: 0 0 ${theme.radii[2]} ${theme.radii[2]};
    bottom: 0;
    color: ${theme.colors.white};
    display: block;
    font-size: ${theme.fontSizes[2]}px;
    padding: ${theme.space[2]}px ${theme.space[3]}px;
    position: absolute;
    width: 100%;
    max-width: 100%;
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      background-color: rgba(0, 0, 0, 0.75);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
    }
    ${theme.mediaQueries.reduceTransparency} {
      -webkit-backdrop-filter: auto !important;
    }
  }
`
const CommunityLine = styled(FeatureLine)`
  background: linear-gradient(
    to right,
    ${theme.colors.orange[5]},
    ${theme.colors.pink[5]},
    ${theme.colors.red[5]}
  );
`
const ResourcesLine = styled(FeatureLine)`
  background: linear-gradient(
    to right,
    ${theme.colors.fuschia[5]},
    ${theme.colors.violet[5]},
    ${theme.colors.blue[5]}
  );
`

export default () => (
  <Layout bg="dark">
    <Box.main color="white">
      <Helmet>
        <meta
          name="google-site-verification"
          content="f7cxVyFnrTxN9Q-HnpP-ueNWuWF5VgIEKF0C3tSnsnc"
        />
      </Helmet>

      <Box align="center" pt={[4, 5, 6]}>
        <Container maxWidth={72} px={3} py={[5, 6]}>
          <Megaline color="smoke" mt={4} pb={1}>
            Welcome, high school hackers. You’ve found your place.
          </Megaline>
          <Lead
            fontSize={[3, 4]}
            color="smoke"
            maxWidth={44}
            mt={[3, 4]}
            mb={[4, 5]}
          >
            Hack Club is a worldwide community of young hackers and high school
            coding clubs. We make together, learn together, organize hackathons
            together. This is your home.
          </Lead>
          <OutlineButton.link bg="orange.1" to="/community" m={[1, 2]}>
            Join the community
          </OutlineButton.link>
          <StartCTA to="/start" m={[1, 2]}>
            Start your club
          </StartCTA>
        </Container>
      </Box>
      <Box bg="darker" py={[5, 6]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['orange.5', 'pink.5', 'red.5']}
          >
            Join an incredible global community of hackers.
            <HeadlineIcon
              glyph="like-fill"
              color="pink.5"
              aria-label="heart icon"
              size={36}
              ml={2}
              mt={-4}
            />
          </ColoredHeadline>
          <Text
            color="smoke"
            fontSize={4}
            mt={0}
            mb={3}
            style={{ maxWidth: '48rem' }}
          >
            Hack Club gives you a community of thousands of other young makers
            to talk to. We’re artists, writers, engineers, tinkerers,
            filmmakers, volunteers. We make things. We help one another.
          </Text>
          <Text color="smoke" fontSize={4} mb={4} style={{ maxWidth: '48rem' }}>
            Have a coding question? Looking for feedback on your project? Trying
            to start a local meetup? You’ll find some phenomenal people to talk
            to in our Slack community (online groupchat, Discord-style) with
            3,000+ members around the world, active at all hours.
          </Text>
          <CTA to="/community">Sign me up</CTA>
          <Features mt={[4, 5]}>
            <Box>
              <CommunityLine />
              <Featline color="smoke" mt={5}>
                Join forces with the best hackers.
              </Featline>
              <Lead color="muted">
                Making projects on your own can be isolating—we’ve been there.
                In the Slack community, you’ll find friends, supporters, and
                collaborators for your work.
              </Lead>
            </Box>
            <Box>
              <CommunityLine />
              <Featline color="smoke" mt={5}>
                Meet some truly incredible people.
              </Featline>
              <Lead color="muted">
                You’re going to meet super talented people, who organize
                hackathons, start coding clubs, build apps, lead camps, classes,
                and more.
              </Lead>
            </Box>
            <Photo
              src="/photos/dena_cover.jpg"
              aria-label="A Hack Club meeting near Toronto, Canada"
            />
            <Photo
              src="/photos/hackpenn_crew.jpg"
              aria-label="Organizers of PA’s largest high school hackathon met in our Slack"
            />
          </Features>
        </Container>
      </Box>
      <Box bg="dark" py={[5, 6]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['fuschia.5', 'violet.5', 'blue.5']}
          >
            Grow as a programmer & human with our resources.
          </ColoredHeadline>
          <Text color="smoke" fontSize={4} mb={4} style={{ maxWidth: '48rem' }}>
            We offer dozens of{' '}
            free, open-source coding tutorials. We
            write{' '}

              articles about running coding clubs
            {' '}
            and student events. We run seasonal{' '}
            Challenges, coding competitions around a
            theme with cash prizes. We’re deeply committed to improving the high
            school hacking community, & are constantly building services to
            help.
          </Text>
          <Features mt={[4, 5, 6]}>
            <Box>
              <ResourcesLine />
              <Subhline color="smoke" mt={5}>
                Learn as you build at hackathons & events.
              </Subhline>
              <Text color="muted" fontSize={4}>
                We maintain an open source, up-to-date list of all the{' '}

                  high school hackathons
                {' '}
                happening soon. Check out all those events! (& totally go to
                one.)
              </Text>
            </Box>
            <Box>
              <ResourcesLine />
              <Subhline color="smoke" mt={5}>
                Running an event?

                We can help.
                <SubhlineIcon
                  glyph="bank-circle"
                  color="red.5"
                  aria-label="hack club bank icon"
                  size={32}
                  ml={2}
                  mt={-2}
                />
              </Subhline>
              <Text color="muted" fontSize={4}>
                Organizing a hackathon is tough. Luckily,{' '}
                Hack Club Bank offers best-in-class
                fiscal sponsorship & support for high school events.
              </Text>
            </Box>
          </Features>
        </Container>
      </Box>
      <Box bg="darker" py={[5, 6, 7]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['red.5', 'orange.5', 'yellow.5']}
          >
            Start a coding club at your high school, or bring yours.
          </ColoredHeadline>
          <Text color="smoke" fontSize={4} mb={3} style={{ maxWidth: '48rem' }}>
            Beyond our community, Hack Club is a nonprofit collective of coding
            clubs led by high schoolers everywhere. If you’ve already got a
            coding club, you’re welcome to join our network! If you’re
            interested in starting your own, we’ll help you out every step of
            the way.
          </Text>
          <StartCTA to="/start" mt={3}>
            Start your club
          </StartCTA>
          <MegaQuote mt={6}>
            <GlowingIcon glyph="quote" size={28} />
            <Text fontSize={[5, 6]} mt={[null, 5]} bold>
              Before I started Hack Club in sophomore year, I didn’t believe in
              myself. I didn’t think I could do big things.
            </Text>
            <Flex align="center" mt={[4, 5]}>
              <Avatar src="/hackers/megan.png" size={48} mr={3} />
              <Box align="left" fontSize={3}>
                <Text.span bold>Megan Cui</Text.span>, Cincinnati, OH

                <Text fontSize={2} color="smoke">
                  (@megan on Slack)
                </Text>
              </Box>
            </Flex>
          </MegaQuote>
        </Container>
      </Box>

    </Box.main>
  </Layout>
)
<commit_msg>Fix Gatsby warning<commit_after>import React from 'react'
import styled from 'styled-components'
import {
  Avatar,
  BackgroundImage,
  Box,
  Container,
  Flex,
  Heading,
  LargeButton as Button,
  Link as A,
  OutlineButton,
  Text,
  theme
} from '@hackclub/design-system'
import { Link } from 'gatsby'
import Layout from 'components/Layout'
import Helmet from 'react-helmet'
import Nav from 'components/Nav'
import Footer from 'components/Footer'
import Sheet from 'components/Sheet'
import GlowingIcon from 'components/GlowingIcon'
import { ColoredHeadline, Subhline, Featline } from 'components/Content'
// import Announcement from 'components/home/Announcement'

const cta = {
  chevronRight: true,
  color: 'white'
}
const CTA = styled(Button.withComponent(Link)).attrs(cta)`
  background: ${theme.gradient('pink.5', 'red.6')};
`
const StartCTA = styled(Button.withComponent(Link)).attrs(cta)`
  background: ${theme.gradient('orange.5', 'red.6')};
`
OutlineButton.link = OutlineButton.withComponent(Link)

const HeadlineIcon = styled(GlowingIcon)`
  top: ${theme.space[1]}px;
  ${theme.mediaQueries.md} {
    top: ${theme.space[2]}px;
    width: 64px;
    height: 64px;
  }
`
const SubhlineIcon = styled(GlowingIcon)`
  top: ${theme.space[1]}px;
  ${theme.mediaQueries.md} {
    top: ${theme.space[2]}px;
    width: 48px;
    height: 48px;
  }
`

const Megaline = styled(Heading.h1).attrs({
  fontSize: [6, 7, 8],
  mx: 'auto'
})`
  line-height: 1.125;
  color: ${theme.colors.success};
  @supports (-webkit-background-clip: text) {
    background: linear-gradient(
      to bottom right,
      ${theme.colors.cyan[5]} 25%,
      ${theme.colors.teal[5]} 50%,
      ${theme.colors.green[5]}
    );
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  ${theme.mediaQueries.md} {
    line-height: 1;
  }
`

const Lead = Container.withComponent(Text)
Lead.defaultProps = { fontSize: 3, mx: 'auto' }

const Quote = styled(Sheet).attrs({ maxWidth: 48, bg: 'primary', fontSize: 3 })`
  border-radius: ${theme.radii[2]};
  position: relative;
  ${GlowingIcon} {
    opacity: 0.75;
    position: absolute;
    left: 0;
    top: 0;
    ${theme.mediaQueries.md} {
      width: 36px;
      height: 36px;
    }
  }
`
const MegaQuote = styled(Quote).attrs({
  px: [3, 4, 5],
  pt: 6,
  pb: [4, 5],
  color: 'white'
})`
  background-image: radial-gradient(
    ellipse farthest-corner at top left,
    ${theme.colors.pink[5]},
    ${theme.colors.fuschia[5]},
    ${theme.colors.indigo[5]}
  );
  &:before {
    color: ${theme.colors.pink[2]};
  }
  ${Text} {
    line-height: 1.125;
    ${theme.mediaQueries.md} {
      line-height: 1.25;
    }
  }
`

const Features = styled(Box)`
  display: grid;
  grid-gap: ${theme.space[3]}px;
  ${theme.mediaQueries.md} {
    grid-gap: ${theme.space[4]}px;
    grid-template-columns: repeat(2, 1fr);
  }
`
const FeatureLine = styled(Box).attrs({
  bg: 'primary',
  width: 1,
  mt: 2,
  mb: -2
})`
  border-radius: ${theme.radius};
  height: 4px;
`
const Photo = styled(Sheet.withComponent(BackgroundImage)).attrs({
  role: 'img',
  p: 0
})`
  min-height: 18rem;
  position: relative;
  ${theme.mediaQueries.md} {
    min-height: 25rem;
  }
  &:after {
    content: attr(aria-label);
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.875);
    border-radius: 0 0 ${theme.radii[2]} ${theme.radii[2]};
    bottom: 0;
    color: ${theme.colors.white};
    display: block;
    font-size: ${theme.fontSizes[2]}px;
    padding: ${theme.space[2]}px ${theme.space[3]}px;
    position: absolute;
    width: 100%;
    max-width: 100%;
    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
      background-color: rgba(0, 0, 0, 0.75);
      -webkit-backdrop-filter: saturate(180%) blur(16px);
    }
    ${theme.mediaQueries.reduceTransparency} {
      -webkit-backdrop-filter: auto !important;
    }
  }
`
const CommunityLine = styled(FeatureLine)`
  background: linear-gradient(
    to right,
    ${theme.colors.orange[5]},
    ${theme.colors.pink[5]},
    ${theme.colors.red[5]}
  );
`
const ResourcesLine = styled(FeatureLine)`
  background: linear-gradient(
    to right,
    ${theme.colors.fuschia[5]},
    ${theme.colors.violet[5]},
    ${theme.colors.blue[5]}
  );
`

export default () => (
  <Layout bg="dark">
    <Box.main color="white">
      <Helmet>
        <meta
          name="google-site-verification"
          content="f7cxVyFnrTxN9Q-HnpP-ueNWuWF5VgIEKF0C3tSnsnc"
        />
      </Helmet>

      <Box align="center" pt={[4, 5, 6]}>
        <Container maxWidth={72} px={3} py={[5, 6]}>
          <Megaline color="smoke" mt={4} pb={1}>
            Welcome, high school hackers. You’ve found your place.
          </Megaline>
          <Lead
            fontSize={[3, 4]}
            color="smoke"
            maxWidth={44}
            mt={[3, 4]}
            mb={[4, 5]}
          >
            Hack Club is a worldwide community of young hackers and high school
            coding clubs. We make together, learn together, organize hackathons
            together. This is your home.
          </Lead>
          <OutlineButton.link bg="orange.1" to="/community" m={[1, 2]}>
            Join the community
          </OutlineButton.link>
          <StartCTA to="/start" m={[1, 2]}>
            Start your club
          </StartCTA>
        </Container>
      </Box>
      <Box bg="darker" py={[5, 6]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['orange.5', 'pink.5', 'red.5']}
          >
            Join an incredible global community of hackers.
            <HeadlineIcon
              glyph="like-fill"
              color="pink.5"
              aria-label="heart icon"
              size={36}
              ml={2}
              mt={-4}
            />
          </ColoredHeadline>
          <Text
            color="smoke"
            fontSize={4}
            mt={0}
            mb={3}
            style={{ maxWidth: '48rem' }}
          >
            Hack Club gives you a community of thousands of other young makers
            to talk to. We’re artists, writers, engineers, tinkerers,
            filmmakers, volunteers. We make things. We help one another.
          </Text>
          <Text color="smoke" fontSize={4} mb={4} style={{ maxWidth: '48rem' }}>
            Have a coding question? Looking for feedback on your project? Trying
            to start a local meetup? You’ll find some phenomenal people to talk
            to in our Slack community (online groupchat, Discord-style) with
            3,000+ members around the world, active at all hours.
          </Text>
          <CTA to="/community">Sign me up</CTA>
          <Features mt={[4, 5]}>
            <Box>
              <CommunityLine />
              <Featline color="smoke" mt={5}>
                Join forces with the best hackers.
              </Featline>
              <Lead color="muted">
                Making projects on your own can be isolating—we’ve been there.
                In the Slack community, you’ll find friends, supporters, and
                collaborators for your work.
              </Lead>
            </Box>
            <Box>
              <CommunityLine />
              <Featline color="smoke" mt={5}>
                Meet some truly incredible people.
              </Featline>
              <Lead color="muted">
                You’re going to meet super talented people, who organize
                hackathons, start coding clubs, build apps, lead camps, classes,
                and more.
              </Lead>
            </Box>
            <Photo
              src="/photos/dena_cover.jpg"
              aria-label="A Hack Club meeting near Toronto, Canada"
            />
            <Photo
              src="/photos/hackpenn_crew.jpg"
              aria-label="Organizers of PA’s largest high school hackathon met in our Slack"
            />
          </Features>
        </Container>
      </Box>
      <Box bg="dark" py={[5, 6]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['fuschia.5', 'violet.5', 'blue.5']}
          >
            Grow as a programmer & human with our resources.
          </ColoredHeadline>
          <Text color="smoke" fontSize={4} mb={4} style={{ maxWidth: '48rem' }}>
            We offer dozens of{' '}
            free, open-source coding tutorials. We
            write{' '}

              articles about running coding clubs
            {' '}
            and student events. We run seasonal{' '}
            Challenges, coding competitions around a
            theme with cash prizes. We’re deeply committed to improving the high
            school hacking community, & are constantly building services to
            help.
          </Text>
          <Features mt={[4, 5, 6]}>
            <Box>
              <ResourcesLine />
              <Subhline color="smoke" mt={5}>
                Learn as you build at hackathons & events.
              </Subhline>
              <Text color="muted" fontSize={4}>
                We maintain an open source, up-to-date list of all the{' '}

                  high school hackathons
                {' '}
                happening soon. Check out all those events! (& totally go to
                one.)
              </Text>
            </Box>
            <Box>
              <ResourcesLine />
              <Subhline color="smoke" mt={5}>
                Running an event?

                We can help.
                <SubhlineIcon
                  glyph="bank-circle"
                  color="red.5"
                  aria-label="hack club bank icon"
                  size={32}
                  ml={2}
                  mt={-2}
                />
              </Subhline>
              <Text color="muted" fontSize={4}>
                Organizing a hackathon is tough. Luckily,{' '}
                Hack Club Bank offers best-in-class
                fiscal sponsorship & support for high school events.
              </Text>
            </Box>
          </Features>
        </Container>
      </Box>
      <Box bg="darker" py={[5, 6, 7]}>
        <Container px={3}>
          <ColoredHeadline
            fontSize={[6, 7, 8]}
            colors={['red.5', 'orange.5', 'yellow.5']}
          >
            Start a coding club at your high school, or bring yours.
          </ColoredHeadline>
          <Text color="smoke" fontSize={4} mb={3} style={{ maxWidth: '48rem' }}>
            Beyond our community, Hack Club is a nonprofit collective of coding
            clubs led by high schoolers everywhere. If you’ve already got a
            coding club, you’re welcome to join our network! If you’re
            interested in starting your own, we’ll help you out every step of
            the way.
          </Text>
          <StartCTA to="/start" mt={3}>
            Start your club
          </StartCTA>
          <MegaQuote mt={6}>
            <GlowingIcon glyph="quote" size={28} />
            <Text fontSize={[5, 6]} mt={[null, 5]} bold>
              Before I started Hack Club in sophomore year, I didn’t believe in
              myself. I didn’t think I could do big things.
            </Text>
            <Flex align="center" mt={[4, 5]}>
              <Avatar src="/hackers/megan.png" size={48} mr={3} />
              <Box align="left" fontSize={3}>
                <Text.span bold>Megan Cui</Text.span>, Cincinnati, OH

                <Text fontSize={2} color="smoke">
                  (@megan on Slack)
                </Text>
              </Box>
            </Flex>
          </MegaQuote>
        </Container>
      </Box>

    </Box.main>
  </Layout>
)
<|endoftext|>


<commit_before>import React from "react"
import Link from "gatsby-link"
import Helmet from "react-helmet"

export default class Index extends React.Component {
  render() {
    return (

Hi spidersasdgag!

Welcome to your new Gatsby site!!!!!!!

Now go build something great.

        <Link to="/page-2/">Go to page 2</Link>

    )
  }
}
<commit_msg>master change<commit_after>import React from "react"
import Link from "gatsby-link"
import Helmet from "react-helmet"

export default class Index extends React.Component {
  render() {
    return (

Hi Mangos!

Welcome to your new Gatsby site!!??????!

Now go build something great.

        <Link to="/page-2/">Go to page 2</Link>

    )
  }
}
<|endoftext|>


<commit_before>import * as React from "react";
import Homepage from "../components/Homepage/Homepage";
import { GlobalStyle } from "../styles/Global";
import Nav from "../components/Nav/Nav";

const IndexPage = () => {
  return (
    <>
      <GlobalStyle />
      <Nav />
      <Homepage />
    </>
  );
};

export default IndexPage;
<commit_msg>hides nav<commit_after>import * as React from "react";
import Homepage from "../components/Homepage/Homepage";
import { GlobalStyle } from "../styles/Global";
// import Nav from "../components/Nav/Nav";

const IndexPage = () => {
  return (
    <>
      <GlobalStyle />
      {/* <Nav /> */}
      <Homepage />
    </>
  );
};

export default IndexPage;
<|endoftext|>


<commit_before>import React from 'react'
import Link from 'gatsby-link'
import Section from '../components/Section'
import HomeBanner from '../components/HomeBanner'
import About from '../components/About'
import Skills from '../components/Skills'
import Portfolio from '../components/Portfolio'
import Contact from '../components/Contact'

import { Element } from 'react-scroll'

const IndexPage = () =>

      <Element name="home">
        <HomeBanner />
      </Element>

      <Element name="about">
        <About />
      </Element>

      <Skills />

      <Element name="portfolio">
        <Portfolio />
      </Element>

      <Element name="contact">
        <Contact />
      </Element>

export default IndexPage
<commit_msg>Fix section scrolling inside padding<commit_after>import React from 'react'
import Link from 'gatsby-link'
import Section from '../components/Section'
import HomeBanner from '../components/HomeBanner'
import About from '../components/About'
import Skills from '../components/Skills'
import Portfolio from '../components/Portfolio'
import Contact from '../components/Contact'

import { Element } from 'react-scroll'

const IndexPage = () =>

    <Element name="home">

        <HomeBanner />

    </Element>

    <Element name="about">

        <About />

    </Element>

      <Skills />

    <Element name="portfolio">

          <Portfolio />

    </Element>

    <Element name="contact">

        <Contact />

    </Element>

export default IndexPage
<|endoftext|>


<commit_before>import React from 'react'
import Helmet from 'react-helmet'
import Waypoint from 'react-waypoint'

import Layout from '../components/layout'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Scroll from '../components/Scroll'
import Meetup from '../components/Meetup'
import Tickets from '../components/Tickets'
import Talks from '../components/Talks'
import Sponsors from '../components/Sponsors'

import map from '../assets/images/map.png'
import bowSprFile from '../assets/docs/BestofWeb2019-Sponsoring-FR.pdf'
import { meetups, partners } from '../data'

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      stickyNav: false,
    }
  }

  _handleWaypointEnter = () => {
    this.setState(() => ({ stickyNav: false }))
  }

  _handleWaypointLeave = () => {
    this.setState(() => ({ stickyNav: true }))
  }

  render() {
    return (
      <Layout>
        <Helmet title="Best of Web 2019" />

        <Waypoint
          onEnter={this._handleWaypointEnter}
          onLeave={this._handleWaypointLeave}
        />

A propos de Best of Web 2019

                  Quand des meetups web parisiens se réunissent pour vous
                  proposer un Best Of de leur talks de l'année, ainsi que
                  beaucoup d'inédits et une journée de formation.

                  Le ticket conférence donne accès à la journée du 7 juin
                  uniquement.

                  <Scroll type="id" element="tickets">

                         Achetez un Ticket
                        conférence

                  </Scroll>

                  {meetups.map(({ name, logo }) => (
                    <Meetup key={name} name={name} logo={logo} />
                  ))}

Au programme cette année

              <Talks />

Tickets Formation

              Le jeudi 6 juin, nous vous proposons des formations sur les
              dernières technos.

              Pour venir, il faut vous un inscrire à un atelier (places
              limitées).

Formation

Inscription à un atelier

                  Bientôt

Tickets Conférence

            <Tickets />

S'y rendre

Sponsors

              <Sponsors />

Vous voulez faire partie de l'aventure Best of Web 2019 ?

                 Téléchargez notre dossier
                sponsoring

Partenaires

Ils nous ont aidés...

              {partners.map(({ name, logo, backgroundColor }) => (
                <Meetup
                  isPartner
                  key={name}
                  name={name}
                  logo={logo}
                  backgroundColor={backgroundColor}
                />
              ))}

      </Layout>
    )
  }
}

export default Index
<commit_msg>Add emphasis on conference day<commit_after>import React from 'react'
import Helmet from 'react-helmet'
import Waypoint from 'react-waypoint'

import Layout from '../components/layout'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Scroll from '../components/Scroll'
import Meetup from '../components/Meetup'
import Tickets from '../components/Tickets'
import Talks from '../components/Talks'
import Sponsors from '../components/Sponsors'

import map from '../assets/images/map.png'
import bowSprFile from '../assets/docs/BestofWeb2019-Sponsoring-FR.pdf'
import { meetups, partners } from '../data'

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      stickyNav: false,
    }
  }

  _handleWaypointEnter = () => {
    this.setState(() => ({ stickyNav: false }))
  }

  _handleWaypointLeave = () => {
    this.setState(() => ({ stickyNav: true }))
  }

  render() {
    return (
      <Layout>
        <Helmet title="Best of Web 2019" />

        <Waypoint
          onEnter={this._handleWaypointEnter}
          onLeave={this._handleWaypointLeave}
        />

A propos de Best of Web 2019

                  Best of Web, c'est une journée de conférence le 7 juin,
                  préparée par des meetups web parisiens qui se réunissent pour
                  vous proposer un Best Of de leur talks de l'année, ainsi que
                  beaucoup d'inédits.

                  Pour ceux qui ont vraiment soif d'apprendre, nous proposons en
                  plus une journée de formation le 6 juin.

                  Le ticket conférence donne accès à la journée du 7 juin
                  uniquement.

                  <Scroll type="id" element="tickets">

                         Achetez un Ticket
                        conférence

                  </Scroll>

                  {meetups.map(({ name, logo }) => (
                    <Meetup key={name} name={name} logo={logo} />
                  ))}

Tickets Conférence

            <Tickets />

Tickets Formation

              Le jeudi 6 juin, nous vous proposons des formations sur les
              dernières technos.

              Pour venir, il faut vous un inscrire à un atelier (places
              limitées).

Formation

Inscription à un atelier

                  Bientôt

Programme de la journée conférence

              A chaque créneau horaire, vous avez le choix entre deux talks.

            <Talks />

S'y rendre

Sponsors

              <Sponsors />

Vous voulez faire partie de l'aventure Best of Web 2019 ?

                 Téléchargez notre dossier
                sponsoring

Partenaires

Ils nous ont aidés...

              {partners.map(({ name, logo, backgroundColor }) => (
                <Meetup
                  isPartner
                  key={name}
                  name={name}
                  logo={logo}
                  backgroundColor={backgroundColor}
                />
              ))}

      </Layout>
    )
  }
}

export default Index
<|endoftext|>


<commit_before>var p_trail = PClass.extend({

  deps: [
    'scale',
  ],

  _subscriptions: [{
    'Scale/updated': function() {
      if (this._status.x) {
        this._moveToValue(this._status.xvalue);
      }
    }
  }],

  initialize: function() {
    var self = this;
    if (!this.opts.trail.enabled) {return;}
    this._status = {xvalue: null, x: null};
    this._renderTrail();

    setTimeout(function() {
      self._moveToValue(self.opts.trail.initXValue(self.scale.x));
    }, 0);
  },

  _renderTrail: function() {
    var trail = this.$svg.append('g')
      .attr('class', 'trail');

    var markerHeight = 11;

    // Append marker definition
    var markerdef = this.$svg.append('svg:marker')
      .attr('id', 'trailArrow')
      .attr('viewBox','0 0 20 20')
      .attr('refX','20')
      .attr('refY',markerHeight)
      .attr('markerUnits','strokeWidth')
      .attr('markerWidth','15')
      .attr('markerHeight',markerHeight)
      .attr('orient','auto')
      .append('svg:path')
        .attr('class', 'trail-arrow')
        .attr('d','M 0 0 L 20 10 L 0 20 z')
        .attr('fill', '#777');

    // Append trail line
    this.trailLine = trail.append('svg:line')
      .attr('class', 'trail-line')
        .attr('x1', 0)
        .attr('x2', 0)
        .attr('y1', 0)
        .attr('y2', this.opts.height)
        .attr('marker-start', 'url(#trailArrow)');

    this.brush = d3.svg.brush()
      .x(this.scale.x)
      .extent([0, 0]);

    this.bisector = d3.bisector(function(d) {
      return d.x;
    }).left;

    // Append slider zone
    this.sliderZone = this.$svg.append('g')
      .attr('transform', h_getTranslate(0,-markerHeight))
      .attr('class', 'trail-slider-zone')
      .call(this.brush);

    this.sliderZone.select('.background')
      .attr('height', this.opts.fullHeight)
      .attr('width', this.opts.width)
      .style('cursor', 'pointer');

    this.$svg.selectAll('.extent,.resize').remove();
    this._setEvents();
  },

  _setEvents: function() {
    var self = this;
    this.brush.on('brush', function() {
      self._onBrush(this);
    });
  },

  /**
   * Triggered when the user moves the trail.
   * @param  {Event} event d3 brush event
   */
  _onBrush: function(event) {
    var x;
    if (d3.event.sourceEvent) {
      x = this.scale.x.invert(d3.mouse(event)[0]);
    } else {
      x = brush.extent()[0];
    }
    this._moveToValue(x);
  },

  /**
   * Moves the trail to supplied xvalue.
   */
  _moveToValue: function(xvalue) {
    var xdomain = this.scale.x.domain(),
        isDate = !!xvalue.getMonth;

    // if the seleted x is outside the domain,
    // select range ones.
    if (isDate) {
      if (Date.parse(xvalue) > Date.parse(xdomain[1])) {
        xvalue = xdomain[1];
      } else if (Date.parse(xvalue) < Date.parse(xdomain[0])) {
        xvalue = xdomain[0];
      }
    } else {
      if (xvalue > xdomain[1]) {
        xvalue = xdomain[1];
      } else if (xvalue < xdomain[0]) {
        xvalue = xdomain[0];
      }
    }

    // parse data (this way the user can filter by specific step)
    // eg. months, years, minutes
    xvalue = this.opts.trail.parseStep(xvalue);
    var x = Math.round(this.scale.x(xvalue));
    if (x === this._status.x) {return;} // Return if it's already selected
    var data = this._getDataFromValue(xvalue);
    this._status.x = x;
    this._status.xvalue = xvalue;
    this._moveTrail(x);
    this.trigger('Trail/moved', [data, xvalue]);
  },

  _getDataFromValue: function(xvalue) {
    var self = this;

    return _.map(this.data, function(serie) {
      if (serie.type === 'line') {
        if (!serie.values) {return;}
        return _.extend(serie.values[self.bisector(serie.values, xvalue)],
          {id: serie.id});
      } else if (serie.type === 'bar' || serie.type === 'area') {
        return _.map(serie.data, function(d) {
          return _.extend(d.values[self.bisector(d.values, xvalue)],
            {id: d.id});
        });
      }
    });
  },

  /**
   * Move the trail to the given x position.
   *
   * @param  {integer} x
   */
  _moveTrail: function(x) {
    this.trailLine.attr('x1', x).attr('x2', x);
  }

});<commit_msg>some hotfixes<commit_after>var p_trail = PClass.extend({

  deps: [
    'scale',
  ],

  _subscriptions: [{
    'Scale/updated': function() {
      if (this._status.x) {
        this._moveToValue(this._status.xvalue);
      }
    }
  }],

  initialize: function() {
    var self = this;
    if (!this.opts.trail.enabled) {return;}
    this._status = {xvalue: null, x: null};
    this._renderTrail();

    setTimeout(function() {
      self._moveToValue(self.opts.trail.initXValue(self.scale.x));
    }, 0);
  },

  _renderTrail: function() {
    var trail = this.$svg.append('g')
      .attr('class', 'trail');

    var markerHeight = 11;

    // Append marker definition
    var markerdef = this.$svg.append('svg:marker')
      .attr('id', 'trailArrow')
      .attr('viewBox','0 0 20 20')
      .attr('refX','20')
      .attr('refY',markerHeight)
      .attr('markerUnits','strokeWidth')
      .attr('markerWidth','15')
      .attr('markerHeight',markerHeight)
      .attr('orient','auto')
      .append('svg:path')
        .attr('class', 'trail-arrow')
        .attr('d','M 0 0 L 20 10 L 0 20 z')
        .attr('fill', '#777');

    // Append trail line
    this.trailLine = trail.append('svg:line')
      .attr('class', 'trail-line')
        .attr('x1', this.opts.width)
        .attr('x2', this.opts.width)
        .attr('y1', 0)
        .attr('y2', this.opts.height)
        .attr('marker-start', 'url(#trailArrow)');

    this.brush = d3.svg.brush()
      .x(this.scale.x)
      .extent([0, 0]);

    this.bisector = d3.bisector(function(d) {
      return d.x;
    }).left;

    // Append slider zone
    this.sliderZone = this.$svg.append('g')
      .attr('transform', h_getTranslate(0,-markerHeight))
      .attr('class', 'trail-slider-zone')
      .call(this.brush);

    this.sliderZone.select('.background')
      .attr('height', this.opts.fullHeight)
      .attr('width', this.opts.width)
      .style('cursor', 'pointer');

    this.$svg.selectAll('.extent,.resize').remove();
    this._setEvents();
  },

  _setEvents: function() {
    var self = this;
    this.brush.on('brush', function() {
      self._onBrush(this);
    });
  },

  /**
   * Triggered when the user moves the trail.
   * @param  {Event} event d3 brush event
   */
  _onBrush: function(event) {
    var x;
    if (d3.event.sourceEvent) {
      x = this.scale.x.invert(d3.mouse(event)[0]);
    } else {
      x = brush.extent()[0];
    }
    this._moveToValue(x);
  },

  /**
   * Moves the trail to supplied xvalue.
   */
  _moveToValue: function(xvalue) {
    var xdomain = this.scale.x.domain(),
        isDate = !!xvalue.getMonth;

    // if the seleted x is outside the domain,
    // select range ones.
    if (isDate) {
      if (Date.parse(xvalue) > Date.parse(xdomain[1])) {
        xvalue = xdomain[1];
      } else if (Date.parse(xvalue) < Date.parse(xdomain[0])) {
        xvalue = xdomain[0];
      }
    } else {
      if (xvalue > xdomain[1]) {
        xvalue = xdomain[1];
      } else if (xvalue < xdomain[0]) {
        xvalue = xdomain[0];
      }
    }

    // parse data (this way the user can filter by specific step)
    // eg. months, years, minutes
    xvalue = this.opts.trail.parseStep(xvalue);
    var x = Math.round(this.scale.x(xvalue));
    if (x === this._status.x) {return;} // Return if it's already selected
    var data = this._getDataFromValue(xvalue);
    this._status.x = x;
    this._status.xvalue = xvalue;
    this._moveTrail(x);
    this.trigger('Trail/moved', [data, xvalue]);
  },

  _getDataFromValue: function(xvalue) {
    var self = this;
    var trailData = _.map(this.data, function(serie) {
      var details = _.omit(serie, 'values', 'path');
      var value;
      if (serie.type === 'line') {
        value = serie.values[self.bisector(serie.values, xvalue)];
        if (!value) {
          value = {x: null, y: null};
        }
        return _.extend({}, value, {id: serie.id}, details);
      } else if (serie.type === 'bar' || serie.type === 'area') {
        return _.map(serie.data, function(d) {
          return _.extend(d.values[self.bisector(d.values, xvalue)],
            {id: d.id}, details);
        });
      }
    });

    return trailData;
  },

  /**
   * Move the trail to the given x position.
   *
   * @param  {integer} x
   */
  _moveTrail: function(x) {
    this.trailLine.attr('x1', x).attr('x2', x);
  }

});<|endoftext|>


<commit_before>/* eslint-env browser */
'use strict'

let	d3 = require('d3'),
	tnt = require('tnt.utils'),
	tntTree = require('tnt.tree'),
	parser = require('tnt.newick'),
	treeLayout = require('./treelayout.js'),
	utils = require('./utils.js'),
	treeOperations = require('./treeOperations.js'),
	tntTooltip = require('./tnt_tooltip.js')

let tree = tntTree()
let expandedNode = tntTree.node_display.circle()
let collapsedNode = tntTree.node_display.triangle()
let fontSizeOfTreeLeafs = 12
let nodeSize = 3
let nodeDisplay = tree.node_display()
	.size(nodeSize)
	.fill('black')
	.display(function(node) {
		if (node.is_collapsed())
			collapsedNode.display().call(this, node)
		else
			expandedNode.display().call(this, node)
	})

// creates the tree and renders it to the div 'treeBox'
exports.makeTree = function(newickString) {
	if (document.getElementsByClassName('tnt_groupDiv').length !== 0) {
		let existingTree = document.getElementsByClassName('tnt_groupDiv')[0]
		document.getElementById('treeBox').removeChild(existingTree)
		let backdrop = d3.select('#backDrop')
		backdrop.attr('display', 'none')
	}

	let treeBox = document.getElementById('treeBox')

	let treeObj = parser.parse_newick(newickString),
		numOfLeaves = utils.countLeaves(treeObj)

	tree
		.data(treeObj)
		.node_display(nodeDisplay)
		.label(tntTree.label
			.text()
			.fontsize(fontSizeOfTreeLeafs)
			.height(window.innerHeight / (numOfLeaves + 4))
		)
		.layout(tntTree.layout.vertical()
			.width(window.innerWidth)
			.scale(false)
		)
	tree(treeBox)
	let childrenArray = tree.root().get_all_nodes()
	for (let i = 0; i < childrenArray.length; i++) {
		if (!(childrenArray[i].property('branchWidth')))
			childrenArray[i].property('branchWidth', 1)
		if (!(childrenArray[i].property('branchColor')))
			childrenArray[i].property('branchColor', 'black')
		if (!(childrenArray[i].property('certaintyOnOff')))
			childrenArray[i].property('certaintyOnOff', 'off')
	}

	let svgTree = d3.select('#treeBox').select('svg'),
		g = svgTree.select('g')

	svgTree.call(d3.zoom()
		.on('zoom', () => {
			g.attr('transform', d3.event.transform)
		})
	)
	treeOperations.updateUserChanges(tree)
}

// resets the zoom and transform of tree to original
exports.fitScreen = function() {
	let svgTree = d3.select('#treeBox').select('svg'),
		g = svgTree.select('g')

	svgTree.call(d3.zoom().transform, d3.zoomIdentity)
	g.attr('transform', {k: 1, x: 0, y: 0})
}

// calls the function to update the layout of the tree to vertical view
exports.updateVertical = function() {
	treeLayout.updateVertical(tree)
}

// calls the function to update the layout of the tree to radial view
exports.updateRadial = function() {
	treeLayout.updateRadial(tree)
}

// calls the function to toggle support values displayed at individual nodes
exports.toggleSupport = function() {
	treeOperations.toggleSupport()
}

// calls the function to toggle scaling of the tree
exports.scaleTree = function() {
	treeLayout.updateScale(tree)
}

// returns whether or not the tree is currently scaled
exports.checkScaled = function() {
	return treeLayout.checkScaled()
}

// calls the function to change the branch color of the subtree of the node #[nodeID]
exports.changeBranchColor = function(newColor, selectedNode) {
	treeOperations.changeBranchColor(newColor, selectedNode)
}

// calls the function to change the branch width of the subtree of the node #[nodeID]
exports.changeBranchWidth = function(newWidth, selectedNode) {
	treeOperations.changeBranchWidth(newWidth, selectedNode)
}

// changes the node size for the tree
exports.changeNodeSize = function(size) {
	/* nodeSize = size
	tree.node_display()
		.size(nodeSize)
	tree.update_nodes() */

	let nodes = d3.selectAll('.tnt_tree_node')
		.select('.tnt_node_display_elem')

	nodes.attr('r', size)
	nodes.attr('width', size)
	nodes.attr('height', size)
	nodes.attr('x', -1 * size / 2)
	nodes.attr('y', -1 * size / 2)
	nodes.attr('points', '-' + size + ',0 ' + size + ',-' + size + ' ' + size + ',' + size)
}

// overrides the data in current tree with the passed data
exports.restoreState = function(data) {
	tree.data(JSON.parse(data))
	treeOperations.updateUserChanges(tree)
}

function simpleStringify(object) {
	let simpleObject = {}
	if (object.children) {
		for (let i = 0; i < object.children.length; i++)
			object.children[i] = simpleStringify(object.children[i])
	}
	for (let prop in object) {
		if (!object.hasOwnProperty(prop))
			continue
		if (typeof (object[prop]) == 'object' && prop !== 'children')
			continue
		simpleObject[prop] = object[prop]
	}
	return simpleObject // returns cleaned up JSON
}

// calls the function that export the current state of the svg
exports.exportCurrentState = function() {
	let exportState = tree.root().data()
	exportState = simpleStringify(exportState)
	_exportCurrentState('tree.phy', JSON.stringify(exportState))
	return exportState
}

// function from: https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
function _exportCurrentState(filename, text) {
	let element = document.createElement('a')
	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
	element.setAttribute('download', filename)
	element.style.display = 'none'
	document.body.appendChild(element)
	element.click()
	document.body.removeChild(element)
}

// ladderizes the tree and toggles if already ladderized
let ladderized = 'false'
exports.ladderizeTree = function() {
	if (ladderized !== 'true') {
		tree.root().sort(function(node1, node2) {
			return node1.get_all_leaves().length - node2.get_all_leaves().length
		})
		ladderized = 'true'
	}
	else if (ladderized === 'true') {
		tree.root().sort(function(node1, node2) {
			return node2.get_all_leaves().length - node1.get_all_leaves().length
		})
		ladderized = 'false'
	}
	tree.update()
}

// changes the expanded node shape of the tree
exports.changeExpandedNodeShape = function(shape) {
	if (shape === 'none') {
		expandedNode = tntTree.node_display.circle()
		tree.update()
		let allNodes = d3.selectAll('.tnt_tree_node')
			.select('.tnt_node_display_elem')

		allNodes.attr('r', '0')
	}
	else if (shape === 'circle') {
		expandedNode = tntTree.node_display.circle()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
	else if (shape === 'triangle') {
		expandedNode = tntTree.node_display.triangle()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
	else if (shape === 'square') {
		expandedNode = tntTree.node_display.square()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
}

// changes the collapsed node shape of the tree -- TO BE COMPLETED
exports.changeCollapsedNodeShape = function(shape) {
	if (shape === 'circle') {
		collapsedNode = tntTree.node_display.circle()
	}
	else if (shape === 'triangle') {
		collapsedNode = tntTree.node_display.triangle()
	}
	else if (shape === 'square') {
		collapsedNode = tntTree.node_display.square()
	}
	tree.node_display(nodeDisplay)
	tree.update_nodes()
}

// installs a listener at each node that displays a tooltip upon click
tree.on('click', function(node) {
	// resets color of all nodes to black
	d3.selectAll('.tnt_tree_node')
		.selectAll('.tnt_node_display_elem')
		.attr('fill', 'black')

	// generates tooltip for selected node
	tntTooltip.table(tree, node)
		.width(120)
		.call(this, {
			// header: 'Node #' + node.id() + ' :: ' + node.property('name')
			header: 'Node: ' + node.property('name')
		})
})

// module.exports = 'phylogician'
<commit_msg>moved code outside if statement<commit_after>/* eslint-env browser */
'use strict'

let	d3 = require('d3'),
	tnt = require('tnt.utils'),
	tntTree = require('tnt.tree'),
	parser = require('tnt.newick'),
	treeLayout = require('./treelayout.js'),
	utils = require('./utils.js'),
	treeOperations = require('./treeOperations.js'),
	tntTooltip = require('./tnt_tooltip.js')

let tree = tntTree()
let expandedNode = tntTree.node_display.circle()
let collapsedNode = tntTree.node_display.triangle()
let fontSizeOfTreeLeafs = 12
let nodeSize = 3
let nodeDisplay = tree.node_display()
	.size(nodeSize)
	.fill('black')
	.display(function(node) {
		if (node.is_collapsed())
			collapsedNode.display().call(this, node)
		else
			expandedNode.display().call(this, node)
	})

// creates the tree and renders it to the div 'treeBox'
exports.makeTree = function(newickString) {
	if (document.getElementsByClassName('tnt_groupDiv').length !== 0) {
		let existingTree = document.getElementsByClassName('tnt_groupDiv')[0]
		document.getElementById('treeBox').removeChild(existingTree)
	}

	let backdrop = d3.select('#backDrop')
	backdrop.attr('display', 'none')

	let treeBox = document.getElementById('treeBox')

	let treeObj = parser.parse_newick(newickString),
		numOfLeaves = utils.countLeaves(treeObj)

	tree
		.data(treeObj)
		.node_display(nodeDisplay)
		.label(tntTree.label
			.text()
			.fontsize(fontSizeOfTreeLeafs)
			.height(window.innerHeight / (numOfLeaves + 4))
		)
		.layout(tntTree.layout.vertical()
			.width(window.innerWidth)
			.scale(false)
		)
	tree(treeBox)
	let childrenArray = tree.root().get_all_nodes()
	for (let i = 0; i < childrenArray.length; i++) {
		if (!(childrenArray[i].property('branchWidth')))
			childrenArray[i].property('branchWidth', 1)
		if (!(childrenArray[i].property('branchColor')))
			childrenArray[i].property('branchColor', 'black')
		if (!(childrenArray[i].property('certaintyOnOff')))
			childrenArray[i].property('certaintyOnOff', 'off')
	}

	let svgTree = d3.select('#treeBox').select('svg'),
		g = svgTree.select('g')

	svgTree.call(d3.zoom()
		.on('zoom', () => {
			g.attr('transform', d3.event.transform)
		})
	)
	treeOperations.updateUserChanges(tree)
}

// resets the zoom and transform of tree to original
exports.fitScreen = function() {
	let svgTree = d3.select('#treeBox').select('svg'),
		g = svgTree.select('g')

	svgTree.call(d3.zoom().transform, d3.zoomIdentity)
	g.attr('transform', {k: 1, x: 0, y: 0})
}

// calls the function to update the layout of the tree to vertical view
exports.updateVertical = function() {
	treeLayout.updateVertical(tree)
}

// calls the function to update the layout of the tree to radial view
exports.updateRadial = function() {
	treeLayout.updateRadial(tree)
}

// calls the function to toggle support values displayed at individual nodes
exports.toggleSupport = function() {
	treeOperations.toggleSupport()
}

// calls the function to toggle scaling of the tree
exports.scaleTree = function() {
	treeLayout.updateScale(tree)
}

// returns whether or not the tree is currently scaled
exports.checkScaled = function() {
	return treeLayout.checkScaled()
}

// calls the function to change the branch color of the subtree of the node #[nodeID]
exports.changeBranchColor = function(newColor, selectedNode) {
	treeOperations.changeBranchColor(newColor, selectedNode)
}

// calls the function to change the branch width of the subtree of the node #[nodeID]
exports.changeBranchWidth = function(newWidth, selectedNode) {
	treeOperations.changeBranchWidth(newWidth, selectedNode)
}

// changes the node size for the tree
exports.changeNodeSize = function(size) {
	/* nodeSize = size
	tree.node_display()
		.size(nodeSize)
	tree.update_nodes() */

	let nodes = d3.selectAll('.tnt_tree_node')
		.select('.tnt_node_display_elem')

	nodes.attr('r', size)
	nodes.attr('width', size)
	nodes.attr('height', size)
	nodes.attr('x', -1 * size / 2)
	nodes.attr('y', -1 * size / 2)
	nodes.attr('points', '-' + size + ',0 ' + size + ',-' + size + ' ' + size + ',' + size)
}

// overrides the data in current tree with the passed data
exports.restoreState = function(data) {
	tree.data(JSON.parse(data))
	treeOperations.updateUserChanges(tree)
}

function simpleStringify(object) {
	let simpleObject = {}
	if (object.children) {
		for (let i = 0; i < object.children.length; i++)
			object.children[i] = simpleStringify(object.children[i])
	}
	for (let prop in object) {
		if (!object.hasOwnProperty(prop))
			continue
		if (typeof (object[prop]) == 'object' && prop !== 'children')
			continue
		simpleObject[prop] = object[prop]
	}
	return simpleObject // returns cleaned up JSON
}

// calls the function that export the current state of the svg
exports.exportCurrentState = function() {
	let exportState = tree.root().data()
	exportState = simpleStringify(exportState)
	_exportCurrentState('tree.phy', JSON.stringify(exportState))
	return exportState
}

// function from: https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
function _exportCurrentState(filename, text) {
	let element = document.createElement('a')
	element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
	element.setAttribute('download', filename)
	element.style.display = 'none'
	document.body.appendChild(element)
	element.click()
	document.body.removeChild(element)
}

// ladderizes the tree and toggles if already ladderized
let ladderized = 'false'
exports.ladderizeTree = function() {
	if (ladderized !== 'true') {
		tree.root().sort(function(node1, node2) {
			return node1.get_all_leaves().length - node2.get_all_leaves().length
		})
		ladderized = 'true'
	}
	else if (ladderized === 'true') {
		tree.root().sort(function(node1, node2) {
			return node2.get_all_leaves().length - node1.get_all_leaves().length
		})
		ladderized = 'false'
	}
	tree.update()
}

// changes the expanded node shape of the tree
exports.changeExpandedNodeShape = function(shape) {
	if (shape === 'none') {
		expandedNode = tntTree.node_display.circle()
		tree.update()
		let allNodes = d3.selectAll('.tnt_tree_node')
			.select('.tnt_node_display_elem')

		allNodes.attr('r', '0')
	}
	else if (shape === 'circle') {
		expandedNode = tntTree.node_display.circle()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
	else if (shape === 'triangle') {
		expandedNode = tntTree.node_display.triangle()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
	else if (shape === 'square') {
		expandedNode = tntTree.node_display.square()
		tree.node_display(nodeDisplay)
		tree.update_nodes()
	}
}

// changes the collapsed node shape of the tree -- TO BE COMPLETED
exports.changeCollapsedNodeShape = function(shape) {
	if (shape === 'circle') {
		collapsedNode = tntTree.node_display.circle()
	}
	else if (shape === 'triangle') {
		collapsedNode = tntTree.node_display.triangle()
	}
	else if (shape === 'square') {
		collapsedNode = tntTree.node_display.square()
	}
	tree.node_display(nodeDisplay)
	tree.update_nodes()
}

// installs a listener at each node that displays a tooltip upon click
tree.on('click', function(node) {
	// resets color of all nodes to black
	d3.selectAll('.tnt_tree_node')
		.selectAll('.tnt_node_display_elem')
		.attr('fill', 'black')

	// generates tooltip for selected node
	tntTooltip.table(tree, node)
		.width(120)
		.call(this, {
			// header: 'Node #' + node.id() + ' :: ' + node.property('name')
			header: 'Node: ' + node.property('name')
		})
})

// module.exports = 'phylogician'
<|endoftext|>


<commit_before>/**
* Temporary place to hold some utility functions
* which should be used througout Raptor JS
*
* This will need to be refactored
*/

if(typeof raptor === 'undefined') {
	var raptor = {};
}

(function () {

	// Let's prototyp the indexOf for arrays
	if(typeof Array.indexOf !== 'function') {

		Array.prototype.indexOf = function (needle) {
			var length = this.length;

			for(var i=0; i<length; i++) {
				if(this[i] === needle) return i;
			}

			return -1;
		}
	}

})();<commit_msg>now returns an object<commit_after>/**
* Temporary place to hold some utility functions
* which should be used througout Raptor JS
*
* This will need to be refactored
*/

if(typeof raptor === 'undefined') {
	var raptor = {};
}

raptor.util = (function () {

	// Let's prototyp the indexOf for arrays
	if(typeof Array.indexOf !== 'function') {

		Array.prototype.indexOf = function (needle) {
			var length = this.length;

			for(var i=0; i<length; i++) {
				if(this[i] === needle) return i;
			}

			return -1;
		}
	}

	return {

		/**
		 * Tests for data type by constructor name
		 *
		 * @param {Array} types
		 * @param {Array|Boolean|Date|Math|Number|String|RegExp} data
		 */
		type : function(types, data) {
			for (var i = 0; i < types.length; i++) {
				if (data.constructor.toString().indexOf(types[i]) !== -1) return true;
			}
			return false;
		}
	}
})();<|endoftext|>