JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

仁平 / Nihey Takizawa

My Personal Homepage (here)

Build Status Dependency Status

What is this?

This is a HTML5 presentation that will tell you a bit about me.

How does it work?

Installing & Building

$ npm install
$ npm run build

This is the project structure:

.
β”œβ”€β”€ assets
β”‚   β”œβ”€β”€ fonts
β”‚   β”œβ”€β”€ images
β”‚   β”‚   β”œβ”€β”€ clouds
β”‚   β”‚   β”‚   β”œβ”€β”€ 1.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 2.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 3.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 4.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 5.png
β”‚   β”‚   β”‚   └── 6.png
β”‚   β”‚   β”œβ”€β”€ favicon.png
β”‚   β”‚   β”œβ”€β”€ me.png
β”‚   β”‚   β”œβ”€β”€ random-chars
β”‚   β”‚   β”‚   β”œβ”€β”€ 1.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 2.png
β”‚   β”‚   β”‚   β”œβ”€β”€ 3.png
β”‚   β”‚   β”‚   └── 4.png
β”‚   β”‚   └── terrain.png
β”‚   └── texts
β”‚       β”œβ”€β”€ css.txt
β”‚       β”œβ”€β”€ javascript.txt
β”‚       └── text.txt
β”œβ”€β”€ environment.json
β”œβ”€β”€ index.html
β”œβ”€β”€ package.json
β”œβ”€β”€ plugins
β”‚   └── html-plugin.js
β”œβ”€β”€ README.md
β”œβ”€β”€ screenshot.png
β”œβ”€β”€ scripts
β”‚   β”œβ”€β”€ animate.js
β”‚   └── index.js
β”œβ”€β”€ styles
β”‚   β”œβ”€β”€ index.less
β”‚   └── prefixed.less
└── webpack.config.js

There are 5 files that handle most of the magic on the presentation:

  • assets/texts/text.txt
  • assets/texts/javascript.txt
  • assets/texts/css.txt
  • scrips/animate.js
  • scripts/index.js

scripts/index.js is our entry point. It'll initialize all the resources the dynamic javascript will need to operate directly on the user browser. You can see it exposes a lot of variables onto the browser global scope (via window).

// 'page' global variable will store anything we might need to make the
// presentation during the 'eval' calls.
window.page = {
  checkTags: function() {
    Object.keys(this.tags).forEach(function(tag) {
      this.control[tag] || ((this.tags[tag] > 0) && this.continues[tag]());
    }, this);
  },
  checkFinished: function() {
    // Hide skip button once all tags have finished
    var allFinished = Object.keys(this.tags).every(tag => this.finished[tag]);
    allFinished && $('#skip').hide();
  },
  control: {},
  continues: {},
  finished: {},
  tags: {
    'text': 1,
    'javascript': 0,
    'css': 0,
  },
};

window.$ = $;
window.hljs = hljs;

scripts/animation.js handle most of the hard work:

  • It operates the semaphore-like structure at window.page.tags.
  • It times the presentation character output.
  • It calls the progress callback so that we may update the page behavior according to the content inside each text-box
  // Tell animate which text it should input, which element id this text should
  // be output, and which function to call on the callback signal
  animate(require('../assets/texts/javascript.txt'), 'javascript', function(finished, chunk) {
    // This callback function will execute the output chunk
    eval(chunk);
    // Highlight its text if a global highlight function was created
    window.highlight && window.highlight('#javascript');
    // Mark this box as finished if it has finished
    window.page.finished.javascript = finished;
    window.page.checkFinished();
  });

assets/texts/*.txt files are the content that will be displayed on the browser. You may notice that there are some special markup on them:

  • ** is the progress markup, it tells animate that the progress callback should be fired on that line

  • ++[anything] or --[anything] tells animate that the semaphore-like window.page.tags should be either incremented or decremented, if a tag react zero (or any falsy value), its presentation will stop - e.g.: window.page.tags.javascript = 0; window.page.checkTags() will make JavaScript presentation stop.

  • Β§ is a slight delay request before proceeding, you can stack those up to increase the delay time: §§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§.

I hope that helps you, feel free to look into this code in any way you want.

Acknowledgements

  • I thank STRML who was the first one I've seen that have done something like that.

  • OpenGameArt provided the images of clouds and terrain

  • Famitsu provided the characters' sprites.

License

This code is released under CC0 (Public Domain)